Typography | Task 2 : Typographic Exploration & Communication

2023.10.31 - 2023.11.14/ Week 6 - Week 8

Tracy Angeline Tio / 0362222 / Bachelor of Design (Honours) in Creative Media

Typography / Taylor's University

Task 2 ( Typographic Exploration & Communication )

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Work Progress

4. Feedback

5. Reflections

6. Further Reading

1. LECTURES

LECTURES 6 (WEEK 05 Understanding Letters, Maintaning X-Height, Counterform, Contrast)

1. Letters

- The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form (below). More noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Fig 1.1 Example of Un Symmetrical letters Week 05 24/10/2023

- The complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans-serif typefaces- Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Fig 1.2 Symmetrical Letters Week 05 24/10/2023

2. Maintaning x-height

- X-height generally describe the size of the lowercase letterforms. However, you should keep in mind that curved strokes, such as in 's', must rise above the median in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Fig 1.3 X height Example Week 05 24/10/2023

3. Counterform

- When letters are joined to form words, the counterform includes the spaces between them.

- The latter is particularly and important concept when working with letterforms like lowercase that have no counters. You can handle the counters when you set type determines how wells word hang together.

Fig 1.4 Counterform Week 05 24/10/2023

- One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. It gives you a glimpse into process of letter-making.

4. Contrast

- Is the most powerful dynamic in design, as applied to type, based on a format devised.

- The contrast place emphasis on the important element of type, letting the secondary element command less attention.

- Below are the example of contrast :

Fig 1.5 Contrast Week 05 24/10/2023

- The simple contrast produces numerous variations :

small + organic/large + machined
small + dark/large light

Fig 1.6 More Example of Contrast Week 05 24/10/2023

LECTURES 7 (WEEK 06 Typography in Different Medium)

- In the past, Typography was viewed as living only when it reached paper. Once a publication was edited, typeset and printed, then its done. Good typography and readability were the result of skilled typesetters and designers.

- Nowadays, typography exist in many media. Our experience of typography today changes based on how the page is rendered, because typesetting happens in the browser.

1. Print Type vs Screen Type

1. Type for Print

- Primarily, type was designed intended for reading from print long before we read from screen. It's the designer's job to ensure that the text is smooth, flowing and pleasant to read.

- Good typeface for print : Caslon, Garamond, Baskerville - because the characteristic were elegant and intellectual also readable.

Fig 1.7 Example of Type for Print Week 06 05/11/2023

2. Type for Screen

- Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments.

- This can include a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves or angles.
- For typefaces intended smaller size is more open spacing. These factors improve character recognition and overall readability in the non-print environment (include web, e-book,etc)

Fig 1.8 Example of Type for Screen Week 06 05/11/2023

3. Hyperactive Link/ Hyperlink

- Hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. You can found hyperlinks in all web pages (it allows user to click their way from page to another).

- Text in Hyperlink usually had blue color and underlined by default.

4. Font Size for Screen

- 16-pixel text on a screen is about the same size as text printed in a book or magazine, Because we read books pretty close - often only a few inches away - they are typically set at about 10 /12 points.

5. System Fonts for Screen/ Web Safe Fonts

- Each device comes with its own pre-installed font selection, which is based largely on its operating system except differs a little bit is the problem.

- Windows based device might have one group, while MacOS ones pull from another.

- Example : Designer creating blog and paid font family tor this site design. If you don't had those font, as a visitor, the font you see would be default.

- Web Safe Fonts : Open sans, lato, arial, helvetica, times new roman, times, courier new, courier, verdana, georgia, palatino, garamond.

6. Font Size for Screen

- The screen used by our PCs, tablets, phone are not only different sizes, but the text you see on screen differs in proportion too because they have different sized pixels. (Even within a single device class there will be a lot of variation)

Fig 1.9 The Difference Between Screen and Print Week 06 05/11/2023

Fig 1.10 Screen Type and The Characteristics Week 06 05/11/2023

2. Static vs Motion

1. Static Typography

-Static Typography has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

- We encounter all forms of static typography with wide ranging purposes. Whether they are informational, promotional, formal or aspirational pieces of designs, The level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.

Fig 1.11 Example of Static Typography Week 06 05/11/2023

2. Motion Typography

- Motion graphic particularly the brand identities of film and television production companies, increasingly contain animated type.

- Type is often overlaid onto music videos and advertisement, often set in motion following the rhythm of a soundtrack. It helps to establish the tone of associated content or express a set of brand values.

Fig 1.12 Example of Motion Typography Week 06 05/11/2023

2.INSTRUCTIONS

TASK 2 - TYPOGRAPHIC EXPLORATION & COMMUNICATION

This task is a combination between task 1 which is type expression and text formatting. You are allowed to choose 1 from 3 different text. No images and colour allowed. Some very graphical minor (line,shade,etc) might allowed.

You will use adobe indesign to finalize this task. Use size 200mm x 200mm per page. For the headline, you can use adobe illustrator to create more expression. Explore several option until you find a good one to submit. Use only 10 typeface provided.

For the finalize, you are required to submit :

- JPEG 300 PPI, Grayscale (With grid visible and without)

- PDF (With grid visible and without)

Duration : Week 6 - Week 8 (Deadline)

3. WORK PROGRESS

3.1 Research

Before starting the sketches, i usually looked up some references using pinterest to gain some idea. the keyword i typed in pinterest is text formatting idea, and typography words. The text i choosen is "Unite to visualise a better world" . I decided to make an expression for the word "unite to" ,"visualise" and "world".

Fig 3.1.1 References used (click the picture to find the link) Week 05 30/10/2023

3.2 Sketches

I started sketched the idea i got from the references above. I made around 3 for the headline and also for the paragraph.

Fig 3.2.1 Headline Sketches Week 06 31/10/2023

Fig 3.2.2 Layout Sketches Week 06 31/10/2023

3.3 Digitisation

3.3.1 Headline

Based on my sketches and references, I started to digitized the type expression of the headline using adobe illustrator. For the third one, i only skewed the word to make it look better. As for the #5, I made it look tightly.

Fig 3.3.1 Headline Exploration Week 05 30/10/2023

Attempt #1, I was inspired by the picture people shaking hand. It had similar meaning with unite as they were agree with same thing.
Attempt #2, The line in "I" until "L" means infinity power as the world "Unite" and "World" had strong meaning
Attempt #3, Same meaning as #2, Just make it crooked to model it.
Attempt #4, I made the word with different size except for unite because i want to express that even the word had different size, the word still connected together.
Attempt #5, Same meaning as #4, I made it look tightly to gave more space for the text paragraph

3.3.2 Layout

After the headline is fixed, I moved to indesign to adjust the paragraph and combined it with the headline. I'm gonna choose #1 and #3 as my favourite expression to putting down with the text.

Fig 3.3.2.1 Layout Exploration Week 06 31/10/2023

Fig 3.3.2.2 Layout Exploration (Blocks) Week 06 31/10/2023

Above are some layout exploration that i did. I mostly use justify for the paragraph, but for the second in right above, i think justify is not fit in due for the concept is made the head as the main things.

Ms. Hsin told me that design #1 and #2 is illegible for the paragraph. For the Layout #3, The expression did not had strong meaning. As a result, I jumped to Layout #4 which is acceptable one.

Shortlisted layout :

Fig 3.3.2.3 Layout #4 Close up Week 06 31/10/2023

In Layout #4, Ms Hsin commented in the Justify text because it had so many space after i did kerning and entering the word. She told me to use Hyphenation first then Shift + Enter to made the paragraph looks clean.

Ms Hsin said to express the meaning of 'Unite', the shape in "t" (the one that looks like a hand) for "unite" and "to" is no longer needed. The circle above the "t" word already express it because it already looks like a people. Font 'e' also needed to made it like same size. Lastly, Lead in text (below the headline) need to put a little above as equally like the paragraph.

Fig 3.3.2.4 Layout #4 after revision (Attempt 1) Week 06 31/10/2023

After revision, the paragraph looks more clean than the previous one. I changed the font to make it easy to justified from Futura condensed to Janson Text 55 Roman. But, in the fourth paragraph, it still have a little space so i need to kerning and tracking it out.

Fig 3.3.2.5 Before and After Kerning &Tracking Week 06 01/11/2023

Finishing the paragraph, I don't feel satisfied for the final attempt, so i tried to do more exploration to find the best layout.

I tried to use the layout #3 (the zigzag) for the paragraph and stretched the column so it does not look tight. After that I put the line in the middle of column as a decoration.

Fig 3.3.2.6 Layout #3 and Middle line references previous task Week 06 01/11/2023

Fig 3.3.2.7 Layout #4 Attempt 2 Week 06 01/11/2023

For Attempt 2, I think it looks better than before. After that, I tried to put circle in above and below peak point.

Fig 3.3.2.8 Layout #4 Attempt 3 Week 06 01/11/2023

A little bit confused to choosing final outcome, so I asked my friends about their opinion, resulting attempt 3 as the final one.

3.4 Final Outcome

HEAD
Font/s: Futura Std Bold Condensed
Type Size/s: 148 pt (unite to), 129 pt (VISUALISE), 25 pt ( A BETTER WORLD)

Leading : 12 pt

Paragraph Spacing : 0 pt

BODY
Font/s: Janson Text Lt Std 55 Roman (Body Text), Univers Lt Std 63 Bold Extended Oblique (Sub Text)
Type Size/s: 12 pt (Body Text), 16 pt (Subtext)
Leading: 12 pt (Body Text), 19 pt (Subtext)
Paragraph spacing: 12 pt (Body Text)
Characters per-line: 66
Alignment: Justify with Last line Aligned Left

Margins: 10 mm (top, left, right, bottom)
Columns: 2
Gutter: 5 mm

Fig 3.4.1 Final Layout - Without Grid (JPEG) Week 07 06/11/2023

Fig 3.4..2 Final Layout - Without Grid (PDF) Week 07 06/11/2023

Fig 3.4.3 Final Layout - With Grid (JPEG) Week 07 06/11/2023

Fig 3.4..4 Final Layout - With Grid (PDF) Week 07 06/11/2023

4. FEEDBACK

WEEK 6

General Feedback : Distorting the headline is not acceptable. In order to avoid distort, we only allowed to use a few shape, and rotating the text.
Spesific Feedback : Ms Hsin told me to use hyphenation as an alternative to make my justify paragraph looks clean then shift + enter to avoid separated word. Make sure that the design is readable.

WEEK 7

General Feedback : We only allowed to use horizontal and vertical layout. Skewed the text is not allowed. Only for the headline is allowed
Spesific Feedback : Ms Hsin reviewing the first task of my blog and she says it was completed. For the further reading, because there are many same books from others, she gave website suggestion to find more books about typography.

5. REFLECTIONS

5.1 Experience

This task is a combination from the previous task, so i could said that if we just clear the task 1 first, we won't really find it difficult to do this task, for example like limited experienced using adobe. When i did this task, I planned it from beginning until end like the task 1. The work is progressing smoothly until i just worried that what if my idea had the similarity like others. Due to limited exploration (like only using simple shape), sometimes we could find that our design had the same meaning and expression. From this task, I learned that think out of the box is very important for designer to avoid similarity idea.

5.2 Observation

When i choose the text editorial to starting this task, i tried to figure it out first if this word could be expressed easily or not and are there many designer using these text or not.

After observe it one by one (looking peers portfolio and facebook posts) , I realized that "The role of Bauhaus" and "A code to build on and live by" is quite popular. Hence, i ended up choose the text #3 "Unite to visualise a better world".

5.3 Findings

I found that time management is useful when working on this task. Due to the short deadline, we have to keep progressing every week. Therefore, near the deadline, we don't need to overnight racing.

Moreover, I suggested to read the MIB (Module Information Booklet) firstly to know the rules of the task and assessment criteria.

6. FURTHER READING

Fig 6.1 Typographic Systems by Kimberly Elam Week 06 05/11/2023

This week, I had read about the e-book above "Typographic Systems" by Kimberly Elam. I read about the circle and composition because I'm gonna experienced that in my exercises. I was surprised that there are many type of composition in circle and each of them had a name.

Fig 6.2 Circle and Composition Week 06 05/11/2023

After read these part, I could put the elements that i want to the correct place, so it could avoid people for confusing. More than that, I read about the grid system :

Grid is a system of vertical and horizontal divisions that organize and create relationship between elements. The function is to create visual order and company in production (they guide information hierarchies and promote visual rhythm and consistency among multiple pages or screens.

Fig 6.3 Structure of Grid and Columns Week 06 05/11/2023

Fig 6.4 Type Rules! Fourth Edition by Ilene Strizver Week 07 10/11/2023

On Week 7, I read about type rules by Ilene Strizver Fourth Edition. This book contents from history of typography until make our own typeface. It has 13 Chapters and I read Chapter 4 which is Selecting the Right Type for the Job because the topics is quite interesting.

Here, I already summarize the topics i read about What makes a good typeface?. There are 5 Main Factors :

Consistent Design : A well-designed typeface will have consistent design characteristics throughout the entire character set, which includes numerals, punctuation, and some symbols.
Spacing : A typeface that is well spaced is neither too tight nor too open at its intended size range, and, most importantly, has optically even spacing between as many glyphs pairs as possible before the addition of kerning.
Kerning : Refers to the addition or reduction of the spacing between two glyphs. These values are (or should be) built into a font by the designer or foundry.
Legibility : Refers to the ease with which the characters, words, and overall text can be read. It is of primary importance in text typefaces, as they are intended for smaller sizes and for longer text settings.
Even Color and Texture : The color and texture of a typeface is the overall balance of grayness, or density, of a block of type