Typography / Task 2: Typographic Exploration & Communication

 28/10/2024/ - 17/11/2024  Week 6 - Week 8

Komugi Uchibori / 0363900

Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 2: Typographic Exploration & Communication

---

INSTRUCTION

Task 2: Typographic Exploration & Communication

At first, I read 3 articles to decide which is good for me when I design layouts and I choose "A code to build on and live by" in the end. As a reason, the article was just  interesting for me. I started sketching based on the content.

• Sketches

The top left layout highlight contrast between not only "Live by" and "Build on" but also Black and white to make impression for the viewer. But it feels like the location of main body is weird a bit for me so I'll explore later. The top right one is kind of pop image and I think you cannot tell the contents deeply when you see only title. But just in case I keep it as a layouts. The last skech is very simple and The letter "a" is placed like a decoration which is because the "a" itself does not have much meaning, but by contrasting its size with the word "code," I wanted to draw attention to more important words. I started exploring with AI based on these sketches.

fig.2-1 Sketches

• Exploration using AI

At first I created title design and explore which places and font size is better while figuring out typefaces. Basically I used same typeface for title and main body to make the design have the sense of unity. I ignore the gutter for main body first however teacher said to me that I should follow the gutter and base lines so I changed its places. As for kerning and letterspacing, There are many orphans, so I tried to fix it and it worked. Overall, It feels like something is missing so I add some elements or change the angle of the title letters.

fig.2-2 Making layouts process

My final layouts were changed compared to initial ideas through design exploration. 

Moreover, I created block version layouts to check the negative space. The way to create this is duplicate layers for blocks, use Path Type Tool to converts text into vector shapes and paint black shades color. By doing this, I adjusted main body places a bit.

fig.2-3 Making block version

• Final Layouts & block

Here's layouts and block version layouts:

fig.2-4 Final layouts

fig.2-5 Final layouts with Block

• Choose Final Layout

After receiving advice from our teacher, I adjusted letterspacing by kerning because the main body is a bit floating.

In the end, I choose this layout as my final layout. The reason is because It is easier to understand the title compared to the others. The structure is very simple but larger size of "A" has big impact for viewers without bothering main body. "A" itself has no meaning as a word so I placed it like a decoration and made contrast.

fig.2-6 Final layout

• Final layouts & details

Margins: 10 mm top & bottom + 7 mm left & right 
Columns: 2
Gutter: 4 mm

HEAD LINE (A)

Typeface: Futura Std
Font/s: Medium
Type Size/s: 648.43 pt
Leading: 20 pt
Paragraph spacing: 0

HEAD LINE (CODE)

Typeface: Futura Std
Font/s: Light
Type Size/s: 99.92 pt
Leading: 20 pt
Paragraph spacing: 0

HEAD LINE (to build on & live by)

Typeface: Futura Std
Font/s: Book
Type Size/s: 12.76 pt
Leading: 20 pt
Paragraph spacing: 0

MAIN BODY

Typeface: Futura Std
Font/s: Book
Type Size/s: 8 pt
Leading: 10 pt
Paragraph spacing: 10 pt
Characters per-line: 65
Alignment: left justified

fig.2-7 Final layout with grids (JPEG)

fig.2-8 Final layout without grids (JPEG)

fig.2-9 Final layout with grids (PDF)

fig.2-10 Final layout without grids (PDF)

---

FEEDBACK

Week 5

General: Try to complete layouts after submitting Task 1.

Week 6

Specific: Don' ignore the center gutter, just make sure to align sentence with it.

Week 7

Specific: Basically these are OK but the main body in the final is a bit floating.

General: Try to finish sketch for Task 3.

---

REFLECTION

EXPERIENCE: This time I didn't struggle using AI compared to last time, which means I'm used to using it. So I concentrate designing and exploring layout structure using it. Personally, I thought my sketch was not sophisticated but through exploring designing, I could make better works incorporating sketch ideas in the end. What most made me concern was the place of main body. At first I totally ignore the gutter to focus on designing good layout, however my teacher said that I shouldn't do that to make good layout and keep readability. So I could get back on basic track.

OBSERVATION: I saw my classmates works and their ideas was so creative, especially title design. Some of them touched up title letters itself using illustrator and put them into Indesign. I thought designing letters itself while focusing on layouts was nice, so I would like to try next time I design layout.

FINDINGS: Through this task, I found that designing is important to draw attention while keeping basic principles or elements so that the viewer can read comfortably. I often change layouts based on the sketch, and this is good to broaden the range of design expression. What I have to care about is not designing too much, which means reducing readability because the main part is telling the intention of the sentences. I'll keep it in mind. 

---

FURTHER READING

fig.3-1 ON WEB TYPOGRAPHY (2014)

I contituned to read this book. In the beginning of composition section, It show the importance of changing type size and line-length when you change device screen size. For instance, If you’re sticking with a typical line-height of 1.5, you can decrease to 1.2 or 1.3 on smaller screens, as you’ll have shorter line lengths that won’t need much room. Conversely, as screen size increases, make line length increase and leads to appropriate typography visual presentation.

fig.3-2 Ratio of screen size ＆ line length (P109,112)

Next is about grid for layout. A grid helps you organize content and elements. In my assignment I used column grid layout but there are others types of grid layout like Modular and Hierarchical. Page is multidimensional so you must consider the horizontal and vertical axis. This book's author shows that using a column grid in addition to the hierarchical grid to organize elements across the page. For instance, the columns provide regular intervals to space elements out, but also separate different content types like columns of body text or sidebars.

fig.3-3　Types of grids and their uses (P115-116)