25/08/2021 - 22/09/2021 / Week 1 - Week 5
Nurul Adlina Rizal / 0345429 / Bachelor of Design in Creative Media
Typography
Task 1: Exercises

LECTURES

Week 1:

Type_0_Introduction

What is Typography?

- the act of creating letters / typefaces / type families

OXFORD DICTIONARY: the style and appearance of printed matter
WIKIPEDIA: the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Examples where typography is seen:

animated forms
websites
app design
signage design
bottle labels
printed media

Who practices Typography?

- typesetters

- compositors

- typographers

- graphic designers

- etc.

Terminology : Font vs Typeface

Font: The individual font or weight within the typeface.
Ex: Josefin Sans Regular, Josefin Sans Bold , Josefin Sans Italic

Typeface: The entire family of fonts/weight that share similar characteristics/styles.
Ex: Georgia, Arial, Times New Roman

Typo_1_Development

Early Letterform Development:

Phoenician to Roman

- writing meant scratching into wet clay with sharpened stick / carving into stone with a chisel

- the Greeks changed direction of writing, developing a style of writing called 'boustrophedon' which meant that the lines of text read alternatively from right to left and left to right

Figure 1.0: Boustrophedon (25/8/2021)

- Etruscan (then Roman) carvers working in marble, painted letterforms before inscribing them

Figure 1.1: Early letterform development from Phoenician to Roman (25/8/2021)

Hand Script from 3rd - 10th Century C.E.

- square capitals were written version that can be found in Roman monuments

- have serifs added to the finish of the main strokes

- rustic capitals (compressed versions of square capitals) allowed twice as many words on a sheet of parchment, took far less time to write but slightly harder to read

Figure 1.2: Rustic capitals (25/8/2021)

- the beginning to lowercase letterforms seen from writings in everyday transactions that were written in cursive hand where forms were simplified for speed

- uncials small letters that are more readable than rustic capitals

- half-uncials mark formal beginning of lowercase letterforms, 2000 years after the origin of the Phoenician alphabet

Figure 1.3: Uncials and half-uncials (25/8/2021)

- Charlemagne (first unifier of Europe) issued an edict to standardize all ecclesiastical texts which was entrusted to Alcuin of York

- the monks rewrote texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century

Blackletter to Gutenberg's Type

- different regions of Europe had different variations of letterforms that gained popularity

- Gutenberg (skilled in engineering) marshaled them all to build pages that accurately mimicked the work of a scribe's hand

- developed metal matrices, making the earliest printing type

Text type classification

1450 Blackletter (earliest printing type)
1475 Oldstyle (based on lowercase
1500 Italic (used to be their own class of type)
1550 Script (attempt to replicate engraved calligraphic forms)
1750 Transitional (a refinement of oldstyle forms)
1775 Modern (rationalization of oldstyle forms)
1825 Square serif / Slab serif (for heavy type in commercial printing)
1900 Sans serif (eliminated serif, referred to gothic and grotesque)
1990 Serif / Sans serif (both serif and sans serif typefaces)

Week 2:

Typo_2_Basic

Describing Letterforms

Baseline: The imaginary line of the usual base of the letterform.

Median: The imaginary line defining the x-height of letterforms.

X-height: The height in any typeface of the lowercase 'x'

Ascender: Strokes that exceed median line / The portion of the stem of a lowercase letterform that projects above the median.

Descender: The portion of the stem of a lowercase letterform that projects below the baseline.

Figure 1.4: Terms in letterforms (4/9/2021)

Stroke: any line that defines the basic letterform

Figure 1.5: Stroke (4/9/2021)

Apex/Vertex: The point created by joining two diagonal stems.
Arm: Short strokes off the stem of the letterform either horizontal or inclined upwards.

Barb: The half-serif finish on some curved stroke.
Beak: The half-serif finish on some horizontal arms.
Bowl: The rounded form that describes a counter.

Figure 1.6: Bowl (4/9/2021)

Cross Bar: The horizontal stoke in a letterform that joins two stems together.

Leg: Short stroke off the stem of the letterform either at the bottom of the stroke or inclined downwards.

Spine: The curved stem of the 'S'

Swash: The flourish that extends the stroke of the letterform.

Figure 1.7: Swash (4/9/2021)

Tail: The curved diagonal stoke at the finish of certain letterforms.

The Font

Uppercase: Capital letters.

Lowercase: Lowercase letters.

Small Capitals: Uppercase letterforms draw to the x-height of the typeface.

Figure 1.8: Small capitals (4/9/2021)

Uppercase Numerals: Same height as uppercase letters.

Lowercase Numerals: Set to the x-height with ascenders and descenders.

Italic: Refers back to the fifteenth century Italian cursive handwriting.
Punctuation, Miscellaneous characters: All fonts contain standard punctuation marks, misc. characters can change from typeface to typeface.

! important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job !

Ornaments: used as flourishes in invitation or certificates ex: Adobe Caslon Pro

Figure 1.9: Ornaments (4/9/2021)

Describing Typefaces

Figure 2.0: Different typefaces (4/9/2021)

Italic: based on handwriting

Oblique: based on Roman form of typeface

Week 3:

Typo_3_Text_Part 1

Tracking: Kerning and Letterspacing

Kerning: automatic adjustment of space between letters

Letterspacing: adding space between letters

Tracking: addition and removal of space in a word and sentence

Normal tracking, loose tracking and tight tracking.

Figure 2.1: Different trackings (14/9/2021)

Formatting Text

Flush Left

- mirrors asymmetrical experience of handwriting

Grey Value: light (too much letterspacing/leading) / dark (tight tracking)

Leading: space between each line

Centered

- imposes symmetry upon the text, assigning equal value and weight to both ends of any line

- should be used sparingly

- transforms fields of text into shapes

- adding pictorial quality to material that is non-pictorial

Flush Right

- places emphasis on the end of a line

- for captions

Justified

- imposes a symmetrical shape on text

- achieved by expanding/reducing spaces between words and sometimes letters

- produce 'rivers' of white space

Keep in mind a typographer's job - clear appropriate presentation of author's message

If you see the type before you see the words, change the type.

Texture

- different typefaces suit different messages

Figure 2.2: Anatomy of a Typeface (14/9/2021)

The goal in setting text type is to allow easy prolonged reading.

Type size: large enough to be read easily at arms length - imagine yourself holding a book in your lap

Leading: set too tightly will encourage vertical eye movement, a reader can easily loose his/her place

Line length: a good rule of thumb is to keep line length between 55-65. Extremely long/short line lengths impairs reading

Type Specimen Book

- provide an accurate refence for type, type size, type leading, type line, length etc.

- the ideal text has middle grey value

Figure 2.3: Sample Type Specimen Sheet (14/9/2021)

Week 4:

Typo_4_Text_Part 2

Indicating Paragraphs

1. Pilcrow ¶

- to indicate paragraph spacing

2. Paragraph space

- should be equal to leading space to have cross-alignment

Line spacing VS Leading

Fig 2.4: Line spacing vs leading (16/9/2021)

3. Indentation

- Indent should be the same size as line spacing or the text pt size

- best used when text is justified

4. Extend Paragraphs

- create unusually wide columns of text

Widows and Orphans

Widow - short line of type left alone at the end of a column of text

Orphan - short line of type left alone at the start of new column

Both are unpardonable gaffs. So avoid them especially in justified text. It is somewhat forgiving for flush right/left.

Fig 2.5: Widows and Orphans (16/9/2021)

How?

- reduce column height

- create a forced line break for Widows

- letterspacing / kerning but not more than three times

Highlighting Text

italics
bold
different typeface

might need to reduce size text if using sans serif because it may be bigger than serif typefaces

Fig 2.6: Aligning sans serif with serif text (16/9/2021)

different color

use only black, cyan, magenta

placing a field of color
extending as oppose to indenting to maintain a strong reading axis

Headline within Text

- make sure these heads signify to reader the importance within the text

A heads

- set larger than the text, in small caps, bold or extended to the left

B heads

- subordinate to A heads

- uses leading space

Fig 2.7: B heads (16/9/2021)

C heads

- highlights specific facts of material within B head text

- at least an em space for visual separation

em space: two clicks of the space bar

Cross Alignment

- for headlines, you can use two times of body text's leading to maintain cross-alignment

Week 5:

Typo_5_Understanding

Understanding Letterforms

- reveals palpable difference in character through comparison of how stems of the letterforms finish

Maintaining x-height

- curved strokes such as 's' must rise above median or sink below baseline to appear to be the same size

Fig 2.8: Maintaining x-height (21/9/2021)

Form/Counterform

- developing a sensitivity to counterform/counter

Contrast

- design principles apply directly to typography

Fig 2.9: Contrast in typography (21/9/2021)

INSTRUCTIONS

Task 1:

Exercise 1 - Type Expression

Sketches

Figure 3.0: Type Expression sketches (Week 2 - 31/08/2021)

Figure 3.1: Type Expression sketches outlined (Week 2 - 31/08/2021)

Figure 3.0 shows all my sketches for this exercise. I did 5 instead of 4 words since I was unsure which word I could best express later on.

Idea Exploration

Figure 3.2: Type Expression Idea Exploration (Week 2 - 31/08/2021)

In Figure 3.2, I digitalized the ideas I had for Pour. However, I felt like none of them expressed the meaning of the word clearly.

Figure 3.3: Type Expression Idea Exploration (Week 2 - 31/08/2021)

With that, I decided to choose Light, Error and Gone instead. In class, I had presented Figure 3.3 to my classmates to get feedback and it definitely helped. They had good suggestions that later in my final, I had utilized some of them.

Figure 3.4: Type Expression Idea Exploration (Week 3 - 8/09/2021)

For Figure 3.4, I decided to express Terror better by giving it a dark background. As per the suggestion and feedback of my classmates for the Light, I had made the typeface thinner and feel more like its floating.

Final - Exercise 1

Figure 3.5: Exercise 1 Type Expression Final in JPEG (Week 4 - 15/09/2021)

Figure 3.6: Exercise 1 Type Expression Final in PDF (Week 4 - 15/09/2021)

In the final outcome of this exercise, I took in consideration of Mr Vinod's and Mr Charles' feedback on my previous work in Figure 3.4. For Terror, I made the door size smaller to fit in the counter of the letter O. Next, for Light, I added lines attaching to the letters to express that it is as light as a balloon and floating in the sky/space. For Gone, since Mr Vinod introduced us to resource brushes to add effect to our text, I used stipple brushes to make the word look like its drifting off and disappearing. Lastly, for Error, I touched up on the glitch effect so the idea is better expressed.

In conclusion, I definitely learned a lot throughout this process such as how to explore more on an idea and how to use Adobe Illustrator to fulfill the ideas that I have.

Animation

Draft

A first try to animating the word, Gone. Honestly, could do better but I only had an hour to work with so I did the best I could.

Figure 3.7: 'Gone' GIF Draft (Week 4 - 15/09/2021)

Final GIF

For the final animation, I decided to start the first frame with the gone word in black instead of grey to fully express how the word 'gone' disappears from the screen. From the feedback, I made the last and first frame to appear longer.

Figure 3.8: 'Gone' GIF Final (Week 4 - 15/09/2021)

Exercise 2 - Text Formatting

Progress

For this Exercise, we had to follow the pre-recorded tutorial videos that Mr Vinod had prepared. In the first video, Typo_Ex_Formatting 1:4, we learn about Kerning and Tracking.

Figure 3.9: Name in 10 Typefaces (Week 5 - 21/09/2021)

In the second video, Mr Vinod taught us about finding the right font size, line length, leading and paragraph spacing.

Figure 4.0: Screenshot of Formatting Text #1 (Week 5 - 21/09/2021)

Figure 4.1: Screenshot of Formatting Text #2 (Week 5 - 21/09/2021)

Draft

In the third video, we learned about linking texts, alignment and ragging. Then, in the fourth video, we learned about layout and cross-alignment using the baseline grid.

Layout 1

Figure 4.2: Screenshot of Layout 1 (Week 5 - 21/09/2021)

Figure 4.3: Layout 1 in JPEG (Week 5 - 21/09/2021)

For Layout 1, I was doing a more comfortable and safe type of layout where the image appears at the bottom of the page.

Layout 2

Figure 4.4: Using Baseline Grids (Week 5 - 21/09/2021)

Figure 4.5: Screenshot of Layout 2 (Week 5 - 21/09/2021)

In the second layout, I tried to create a more dynamic layout with the image being on the top right of the page instead.

Final - Exercise 2

Figure 4.6: Exercise 2 Final in JPEG (Week 5 - 21/09/2021)

Figure 4.7: Exercise 2 Final in PDF (Week 5 - 21/09/2021)

FEEDBACKS

Week 1

Specific Feedback: Mr Vinod and Mr Charles checked my blogpost and told me I was all good. I was able to follow the instructions well.

General Feedback: Mr Vinod mentioned that we should have readable texts and use typefaces that do not take the attention away from the content. He also said to hold on the customization of your blog and not to get too carried away.

Week 2

Specific Feedback: From the breakout room, my classmates told me that my works were good and that I was able to express the word well. One of the words, Light, I was told that I need more exploration on it since the current work does not show the essence of light very well yet.

General Feedback: Distort is only good when the idea is good. Try to express the word without using much distortion, and the typefaces given.

Week 3

Specific Feedback: Be mindful of how one places text in the space.

General Feedback: For Terror, if possible, make the door be inside the 0 counter. For Light, attach a line on it to show that its lightweight / balloon-like. For Gone, Mr Vinod said I can utilize the resource brushes he shared. Example: the stipple brush. Lastly is to work on the glitch effect on Error.

Week 4

Specific Feedback: Add a pause of white at the end of the Gif to emphasis the feeling of the word missing or 'Gone'.

General Feedback: E-portfolio must be updated and use the standard sample blog as reference.

Week 5

Specific Feedback: Good but could be better. Mr Vinod said that I should keep at it. The e-portfolio is good as well.

General Feedback: Label your final on your blog.

REFLECTIONS

Experience

During Week 2, we were grouped up to give feedback to each other. To me, its was very helpful to have the opinions of my peers as they had brilliant ideas to help me do better. The ideas that they shared with us also in a sense gave me inspiration and discover new ways to express the Type Expressions that we were making.

I really appreciate Mr Vinod and Mr Charles taking some time to give feedback to our works as it really does help understand how to improve our work. This knowledge can be brought forward in future exercises and tasks.

Observation

It could have just been me but I struggled a lot to time management and making sure I watch each of the lectures every week. I have to make sure that I manage my time well with studying on the theory of Typography and taking time to do the practical exercises given.

Based on what I observe, I tend to work on more of the safe side than going crazy with my ideas. It could be because I am scared of doing wrong which I should not be because that is the way we learn.

A strength that I find in myself is that I am able to clearly express the words given and generate many ideas. I was able to follow through the instructions and create meaningful work. I am beginning to understand the importance of text in a design sense and also appreciate it in the works that I view.

Findings

Most of the time during these exercises, I gained skills on using Adobe Illustrator and InDesign which were two programs that I barely used or had any experience using. These exercises helped me get used to making use of its tools to create the desired design and idea. Thanks to Mr Vinod's pre-recorded videos I am able to have know at least enough to complete these tasks and are able to do use the things I learn for other modules as well.

Other than fixing my time management, I learned that I should learn to be okay with doing wrong or making mistakes and that maybe one of the 'risky' ideas that I make could turn out to be really good.

Typography / Task 1