Typography - Task 2: Typographic Exploration & Communication

October 28, 2024

Typography - Task 2: Typographic Exploration & Communication

28/10/24 - 4/11/24 / Week 6 -Week 7
Brendan Fedya / 0376283
Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 2: Typographic Exploration & Communication

Some letterforms may look symmetrical but when you look closely and dissect it, it's actually not, the stroke weight and curve may vary. Also, even a slight difference can give a letterform its own unique characteristics, setting themselves apart from other letterforms (e.g. difference in stem finishes, how the bowl meet the stems, etc.)

Figure 1.1: Uppercase Baskerville & Univers, Week 6 (29/10/24).

Figure 1.2: Lowercase Helvetica & Univers, Week 6 (29/10/24).

X-height means the height of lowercase letters, this significantly affect readability. Curved letters like the lowercase 's' must extend beyond the median (upwards/downwards) to visually match the size of the vertical and horizontal strokes they adjoin.

Figure 1.3: Curved strokes, Week 6 (29/10/24).

Counterforms refers to the space surrounding and within letterforms. Good readability requires proper handling of this space, as it will make the letters in a word flow naturally.

Figure 1.4: Counterforms, Week 6 (29/10/24).

In typography, we could also utilize contrast to separate elements apart using different sizes, weights, spacings, or even color. This will allow some areas of the texts to be distinguished clearly.

Figure 1.5: Contrast, Week 6 (29/10/24).

back to table of contents.

II. INSTRUCTIONS

For this task , we are supposed to combine the exercises of Task 1 into a two-page layout editorial spread (200x200mm each page). Three texts were given alongside the headline to choose from, and we were told to design the headline in a similar way like Task 1, Exercise 1: Type Expression, and the text layout similar to Task 1, Exercise 2: Text Formatting with the same 10 typefaces given before, utilizing Adobe Illustrator and Adobe InDesign respectively.

➼ Sketches

We were told to do our sketches first after the Week 5 class and submit the digitalized layout on Week 6 during class. Out of those 3 texts provided, I chose the one with the title 'Unite to Visualize a Better World' as the headline, and we were recommended to do type expression only ONE WORD of the headline, because visualizing too much will affect its legibility.

I referred a type of the word 'world' below which uses a serif font. In my opinion, serifs work quite well with the word because it gives weight and a grounded, stable feeling which resembles the word accurately.

Figure 2.1: 'world' reference, Week 6 (29/10/24).

These are my initial sketches done in Procreate, making the highlighted word having a larger size compared to the rest:

Figure 2.2: Initial sketches, Week 6 (29/10/24).

I realized it's not giving enough meaning of the word, so I researched more and I found that 'world' is more associated with rounded shapes, then I revised my sketches, making the 'world' appear curved similar to an earth:

Figure 2.3: Revised sketches, Week 6 (29/10/24).

➼ Digitization: Headline

I proceed with doing the headline design in Adobe Illustrator, which I did 2 versions. I used these grey spaces as a decorative aspect towards the design to balance the black/whites in the overall design, and these 2 versions mostly differ in the placements of the wordings only.

I used the same fonts on both design: Serifa Std 65 Bold for the highlighted word and ITC New Baskerville Std Roman for the other, all with different sizing to visually match them as I wanted them to be.

Figure 2.4: First headline version with process, Week 6 (30/10/24).

Figure 2.5: Second headline version with process, Week 6 (30/10/24).

➼ Digitization: Full Layout

For the process, I just placed the illustrator file of the headline into the left page (Shift+Ctrl+P), then pasted the text onto the right page. The formatting I did is the same method as the one in Task 1, Exercise 2: Text Formatting, so I won't repeat about the details.

‣ Layout #1

To emphasize the lead-in text, I used a different typeface and also made it a bold font. Additionally, I put an oval shape with dash edges around it to give a more comic feel.

Figure 2.6: Byline editing, Week 6 (29/10/24).

Use kerning (rule of thumb, not more than 3x adjustments in a line, 5/1000em) to create smooth ragged lines in the right, also don't forget to make sure about the number of characters in a line, it should be within the recommended range.

Figure 2.7: Kerning & final checking, Week 6 (29/10/24).

And my first layout is finished, here's the full image along with the details and the grid version:

HEAD LINE
Typeface: ITC New Baskerville Std ('world': Serifa Std)
Font/s: ITC New Baskerville Std Roman ('world': Serifa Std 65 Bold)
Type Size/s: 45-60pt ('world': 121pt)
Leading: 0pt
Paragraph spacing: 0

LEAD-IN TEXT
Typeface: Bodoni Std
Font/s: Bodoni Std Bold
Type Size/s: 14pt
Leading: 16,8pt
Paragraph spacing: 0

BODY

Typeface: Janson Text LT Std
Font/s: Janson Text LT Std 55 Roman
Type Size/s: 9pt
Leading: 12pt
Paragraph spacing: 0
Characters per-line: 55-65
Alignment: Flush left
Margins: 12,7 mm all sides
Columns: 2
Gutter: 5 mm

Figure 2.8: First layout, Week 6 (30/10/24).

Unfortunately, this layout should be redone because an irresponsible individual altered the text template without us noticing. So, we have to do it all over again using the original text.

‣ Layout #2

For the second layout, Mr. Vinod advised me to change the headline design. He said don't use those grey spaces, and the word 'world' is better using the same typeface as the rest of the headline text. In addition, it could use multiple copies of the word rather than just one 'world' to form the rounded shape.

Figure 2.9: Revising headline design, Week 7 (4/10/24).

After the original text has been inputted with my preferred font, I changed my original text layout into a more classic, readable text like in newspapers, utilizing paragraph spacings so that the text flow will look better.

Figure 2.10: Revising layout, Week 7 (4/11/24).

I found that it's still too plain, so I added elements that are already there in the first place which is the 'world', also reducing the opacity so that it won't disturb the readability of the text that much.

Figure 2.11: Adding additional elements, Week 7 (4/11/24).

Mr. Vinod said the left alignment of the lead-in text should be changed back to the normal left alignment like the rest of the text, because there's nothing to align to in the right of the text below. I adjusted it again based on the feedback, and after final checking, here's the result:

HEAD LINE
Typeface: ITC New Baskerville Std
Font/s: ITC New Baskerville Std Roman ('world': ITC New Baskerville Std Bold)
Type Size/s: 54-59pt ('world': 51,2pt)
Leading: 0pt
Paragraph spacing: 0

LEAD-IN TEXT
Typeface: Gill Sans Std
Font/s: Gill Sans Std Bold Italic
Type Size/s: 12pt
Leading: 12pt
Paragraph spacing: 0

BODY

Typeface: Bodoni Std
Font/s: Bodoni Std Book
Type Size/s: 9,8pt
Leading: 12pt
Paragraph spacing: 12pt
Characters per-line: 55-65
Alignment: Flush left
Margins: 12,7 mm all sides
Columns: 2
Gutter: 5 mm

Figure 2.12: Second layout, Week 7 (4/11/24).

I printed out this second layout because Mr. Vinod said it's already good enough, this will be my final layout for this task.

‣ FINAL Editorial Spread

HEAD LINE
Typeface: ITC New Baskerville Std
Font/s: ITC New Baskerville Std Roman ('world': ITC New Baskerville Std Bold)
Type Size/s: 54-59pt ('world': 51,2pt)
Leading: 0pt
Paragraph spacing: 0

LEAD-IN TEXT
Typeface: Gill Sans Std
Font/s: Gill Sans Std Bold Italic
Type Size/s: 12pt
Leading: 12pt
Paragraph spacing: 0

BODY

Figure 2.13: Final editorial spread layout - JPEG, Week 7 (7/11/24).

Figure 2.14: Final editorial spread layout - PDF, Week 7 (7/11/24).

back to table of contents.

III. FEEDBACKS

‣ Week 6

General Feedback:

• The text will feel more connected if the ending lines in texts of two different columns are aligned horizontally and has the same line length.

• Choosing ONLY one word of the headline to visualize the meaning is preferred, small refinements on other words of the headlines are sometimes unnecessary and will cause distractions.

• Margins are very important in editorial layouts like this, since it's a result that has to be printed out eventually. These margins will prevent the content from getting cut out during the printed version assembling process.

Specific Feedback:

• Black patches on the design are pretty much useless. Rather than improving the design, it will make it distracting.

• Instead of using a different typeface for the word 'world', just use the same one with the whole headline. Use many 'world' words in the design to make it stand out, it will still convey its meaning that way.

‣ Week 7

General Feedback:

• Never use condensed fonts in text because it affects readability, same goes with bold and italic fonts.

• When sketching the words in the next task, the pen nib direction should not be changed.

Specific Feedback:

• It is ok to put line length in 55-60 characters, it doesn’t have to be 55-65, if one or two lines are below that range it doesn't matter because line length is the overall average length.

• My lead in-text doesn’t need to be right aligned because there's nothing to align to in the right of my text below.

back to table of contents.

IV. REFLECTIONS

‣ Experience

My experience of working with Adobe InDesign sure is a challenge, because it doesn't allow much expression in our design. In contrast, other Creative Cloud software like Adobe Illustrator and Photoshop offer a lot of creative freedom, it could manipulate photos, create graphics, and many more- which of course, is more preferred by designers. InDesign is much more specialized, modification is very limited (usually for text alignments, spacings, etc.) because it's mostly dedicated for professional publishings and layouting.

‣ Observations

I noticed that even small adjustments done to our text will have a huge effect. Elements like font choices, font sizes, word spacings, alignments should be utilized to enhance readability, while the visual appeal should not be the main focus.

‣ Findings

The main purpose of typography is to communicate messages effectively, ensuring that the text is not only legible, but it could be visually engaging as well. Before studying typography, I always thought that this is something very decorative similar to paintings, sculptures without any meaning behind it.

And now, I found that truly effective typography combines decorative aspects and function, where function is the main thing, while the other helps to reinforce and clarify the message given.

back to table of contents.

V. FURTHER READINGS

‣ Week 6

Figure 5.1: Type & Typography by Phil Banes and Andrew Haslam, Week 6 (29/10/24).

For this week, I read a book that provides a detailed explanation of typographic principles. Then I found an example of how a generic typewritten page should be, this correlates with the task that we are doing right now. The book also tells the specific definition of line length, character size, typeface, and many more.

Figure 5.1: Type & Typography by Phil Banes and Andrew Haslam - Page 14, Week 6 (29/10/24).

‣ Week 7

This week, I read about the importance of the space in typography, still in the same book as last week. It is stated that space is very crucial to maintain the quality of a typesetting, and justification is one of the highlighted problem. The book tells about the process of justification on old typewriters, which is much more complicated compared to now.

Firstly, the compositor begins by using 3-em spaces between words, then decides whether to expand or contract the line to fit the text. And this is the complicated part, doing expansions requires adding small space increments, while doing contraction should replace larger spaces with smaller ones to make room for the last word. This has to be done very carefully to create a proper, readable text.

Today, our software uses an automated process and these justification could be done more efficiently, unlike the traditional typesetting where each space has to be carefully measured and adjusted by the compositor. However, rivers could also occur if not formatted properly, so some minor adjustments are still needed.

Figure 5.2: Type & Typography by Phil Banes and Andrew Haslam - Page 12, Week 7 (5/11/24).

back to table of contents.

Your attention is valued, thank you for reading until the end!

⬅ Task 1

Task 3 ➡

Search This Blog

Brendan Fedya (0376283)