TYPOGRAPHY TASK 1: TYPE EXPRESSION & TEXT FORMATTING

29.09.2023 - 05.11.2023 / Week 1-Week 6

Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media

Typography / GCD60104

Task 1: Type Expression & Text Formatting

TABLE OF CONTENTS

1. LECTURES

2. INSTRUCTIONS

3. TASKS

4. FEEDBACK

5. REFLECTION

6. FURTHER READING

LECTURES

Week 1- LECTURE

Introduction of Typography

Typography has evolved over 500 years: calligraphy > lettering > typography

Typography:

the creation of typefaces and type families.
Oxford Dictionaries: the style and appearance of printed matter
Wikipedia: the art and technique of arranging type to make written language legible, readable and appealing.
commonly used in animations, website design, app design, signage design, labels, books etc.

Font: The individual font or weight within a typeface

Typeface: The entire family of fonts/weights that share similar characteristics/styles

Fig 1.1 font within a typeface Fig 1.2 Type family

LECTURE 1

Developement/Timeline

Early letterform Development: Phoenician to Roman

scratching into wet clay with sharpened stick or carving into stone with a chisel
the forms of uppercase letterforms are simple combination of straight lines and pieces of circles

Fig 1.3 Evolution from Phoenician letter

Direction of writing

Phoenicians➛ right to left
The Greeks ➛ 'boustrophedon', orientation of the letterforms changes according to the direction of reading (line text read alternately)
neither of them used letterspace/punctuation
Arabic and Modern Latin writing trace origins to the Phoenician alphabet

Etruscan and Roman carvers

➛painted marble letterforms before inscribing

➛strokes vary in weight from vertical to horizontal

➛broadening at the start and end

Hand script from 3rd-10th century C.E.

Square Capitals:

can be found in Roman monuments
Serifs added to the end of the main strokes
Stroke width varied using a reed pen at a 60-degree angle from perpendicular

Rustic Capitals:

compressed square capitals
fit twice as many words on parchment, quicker to write
pen held at a 30-degree angle
faster but slightly harder to read due to compression

Roman Cursive:

Square and rustic capitals reserved for documents in Roman Cursive
generally written in cursive for speed
represents the beginning of lowercase letterforms

Uncials:

Uncials blend Roman Cursive features, especially in A, D, E, H, M, U, and Q.
"Uncia" in Latin means a twelfth, suggesting letters one inch high
uncials as small letters
The broad forms of uncials are more readable at small sizes than rustic capitals

Half uncials:

formalization of cursive hand
marks formal beginning of lowercase letterforms
includes ascenders and descenders
originates 2000 years after Phoenician alphabet

Caloline miniscule:

Charlemagne, unifier of Europe, mandated standardization of ecclesiastical texts in 789
Alcuin of York, Abbot of St Martin of Tours, entrusted with the task
Monks, under Alcuin's guidance, used majuscules, miniscule, and punctuation
Established a calligraphy standard for a century

Fig 1.4 Hand script from 3rd-10th century C.E.

Blackletter to Gutenberg's type

Blackletter/Textura:

The breakup of Charlemagne's empire spurred regional variations of Alcuin's script. In the north, Blackletter or Textura, a condensed and vertically strong letterform, gained popularity. In the south, 'rotunda,' a rounder and more open hand, became favored. Italy's humanistic script is rooted in Alcuin's minuscule.

Gutenberg's Type:

Gutenberg's expertise in engineering, metalsmithing, and chemistry enabled him to replicate the scribe's hand in the Blackletter of northern Europe. Each letterform required a unique brass matrix in the type mold.

Fig 1.5 C.1300: Blackletter(Textura) (left)

Fig 1.6 c.1455: 42 line bible, Johann Gutenberg, Mainz (right)

Text Type classification

1450 Blackletter: Earliest printing type, based on hand-copying styles in northern Europe.

1475 Oldstyle: Evolved from Italian humanist scholars' lowercase and Roman ruins' uppercase letterforms.

1500 Italic: Derived from contemporary Italian handwriting, initially condensed for increased page efficiency.

1550 Script: Began as an attempt to replicate engraved calligraphic forms, now ranging from formal to contemporary.

1750 Transitional: A refinement of old style with exaggerated thick-to-thin relationships.

1775 Modern: Rationalization of oldstyle, unbracketed serifs, extreme contrast between thick and thin strokes.

1825 Square Serif: Responded to advertising needs with a heavily bracketed serif and little stroke variation.

1900 Sans Serif: Eliminated serifs altogether.

1990 Serif/Sans Serif: Recent development enlarging the typeface family to include both serif and sans serif alphabets.

Fig 1.7 Text Type classification

LECTURE 2

Text / Tracking: Kerning and Letterspacing

Kerning: refers to the automatic adjustment of space between letters

Tracking: removes spaces in a word or sentence

Letterspacing: to add space between the letters

Fig 1.8 Kerning, Tracking and Letterspacing(left)

Fig 1.9 normal tracking, loose tracking and tight tracking(right)

Formatting Text

Fig 1.10 Formatting text

Text / Texture

Fig 1.11 Anatomy of a Typeface

Fig 1.12 Different Typefaces, different gray values

Leading and Line Length

Type size: ensure text is easily readable at arm's length

Leading:

-optimal spacing prevents loss of place

-avoid distracting striped patterns with proper spacing

Line length:

-short lines mean less reading

-aim for 55-65 characters per line

Fig 1.13 leading- too tight & too loose

LECTURE 3 (part 2)

Text / Indicating paragraphs

There are several options for indicating paragraphs:

Pilcrow(¶): a holdover from medieval manuscripts seldom used today

Fig 1.14 Pilcrow

Line space (leading): ensures cross-alignment across columns of texts

Fig 1.15 Line Space Fig 1.16 line space vs leading

Standard indentation: the indent is the same size of the line spacing/same as the point size of text
Extended paragraphs: creates unusually wide columns of text

Fig 1.17 Standard indentation Fig 1.18 Extended paragraphs

Widow and Orphans

Widow: a lone short line at the end of a text column

Orphan: a short line isolated at the start of a new column

Solution: avoid noticeable short lines at the paragraph's end by adjusting line length or rebreaking line endings throughout

*avoid widow and orphan

Fig 1.19 Widow and Orphan

Highlighting Texts

Different kinds of emphasis require different kinds of contrast

Fig 1.20 Examples of highlighting Texts

In this case, San Serifs font(Univers) has been reduced by .5 to match the x-height of the Serif typeface. (8≠7.5)

Fig 1.21 size comparison of two different fonts

When highlighting text with color, maintaining the left reading axis (right example) ensures optimal readability

Fig 1.22 highlighted text

Extending elements beyond the left margin, rather than indenting, is necessary for a strong reading axis

Fig 1.23 extended bullet points Fig 1.24 extended quotation marks

Headline within text

A head: indicates a clear break between topics in a section

B head: supporting argument or example for the topic at hand, shown in small caps, italic, bold serif and bold san serif

C head: uncommon, shown in small caps, italics, serif bold and san serif bold

Fig 1.25 Headline within text

Cross Alignment

aligning headlines, captions, and text enhances the page's architectural cohesion

Fig 1.26 cross-alignment

LECTURE 4

Basics/ Describing Letterforms

Fig 1.27 Basics/ Describing Letterforms

The Font

Uppercase & Lowercase
Small Capitals: uppercase letterforms drawn to the x-height of typeface

Fig 1.28 small capitals

Uppercase Numerals: lining figures, same height as uppercase letters and same kerning width
Lowercase Numerals: old style figures or text figures, set to x-height with ascenders and descenders

Fig 1.29 uppercase numerals Fig 1.30 lowercase numerals

Italic: small caps, only roman. oblique are typically based on the roman form of the typeface

Fig 1.31 Italic

Punctuation: miscellaneous characters can change from typeface to typeface
Ornaments: used as flourishes in invitations or certificates

Fig 1.32 punctuation Fig 1.33 ornaments

Describing Typefaces

Roman: Derived from Roman monument inscriptions; 'Book' has a slightly lighter stroke.
Italic: Named after fifteenth-century Italian handwriting; Oblique based on roman typeface.
Boldface: Thicker stroke than a roman form.
Light: Lighter stroke than roman; 'Thin' has an even lighter stroke.

Fig 1.34 typefaces

Comparing Typefaces

Fig 1.35 comparing typefaces

INSTRUCTIONS

TASKS

EXERCISE 1: TYPE EXPRESSION

For the first task, we were assigned to express 4 words out of the 8 most voted words from the poll which were: Smoke, Soup, Spooky, Power, Impact, Crunch, Drunk, Fold

The words that I have picked are Soup, Spooky, Crunch and Drunk. We were required to design the words and use the typeface that is suitable for each word chosen.

1. SKETCHES

Fig T1.1 Sketch of my Type Expression, Week 2 (6/10/2023)

Spooky: #1 is a straightforward and simple font with two dots in the 'O's to create eyes as it shows spookiness in my impression. #2 has dripping effect to show 'bloody' effect. #3 and #4 both have uneven letters to show scary feel. (distorted)

Drunk: I drew a cup of alcohol at the U in drunk#5 as I first thought of beer/wine could relate with the word drunk. (illustration) Font of #6 is uneven to show dizziness. #7 has floating liked letters, looks more fun, not serious. #8 is the repetition of 'drunk' to create an unclear vision of a drunk person.

Soup: #9 and #10 are both similar ideas of 'U' as a bowl to represent soup. In soup#11, I made a spoon on 'O' and a bowl of soup at 'U'. #12 is also a simple font with a spoon at letter P.

Crunch: drew crumbles around crunch#13. #14 is just the word in a flow arrangement. #15 is crunch with biting shapes at the letters. #16 is crunch with cookie illustration on the C because the word reminds me of cookies.

2. DIGITISATION

After drawing out our sketches and getting feedback from our lecturer, we had to choose and make better changes of our favourite or most preferred design for the words and digitize them using Adobe Illustrator with given fonts. The given fonts were: Adobe Caslon Pro, Bembo Std, Bodoni Std, Futura Std, Gill Sans Std, ITC Garamond Std, ITC New Baskerville Std, Janson Text LT Std, Serifa Std, Universe LT Std

Fig T1.2 Digitalized Sketches, Week 3 (13/10/2023)

After receiving the feedback from our lecturer, I decided to make small edits on the words while digitizing.

DRUNK- I made the main drunk in the colour of black as a focus and used grey (lower opacity) on the repeated drunk words at the back to express blurred, unclear effect.

I was told to use a regular type family instead of italic for drunk, because it was unnecessary.

SOUP- I decided to use one of sketches (#11) for soup. Exactly like the sketch, I added lines onto the word to create a spoon and soup.

The font could be more rounder and less thicker, and the line in between 'U' was advised to be removed to look less dull and better.

SPOOKY- I have chosen my first spooky sketch because I found it cute and simple. I changed the background colour into black to represent darkness and emphasize more on the word.

CRUNCH- Inspired by the combination of #13 and #14. I emphasized the middle letters of 'U' & 'N' and tilted them slightly in opposite ways to show them breaking apart, creating crunch effect. Lighter colour was applied on the minimized letters, used around the middle letters as small pieces coming out from the broken gap. I also added even tinier letters to make it less plain.

3. FINAL TYPE EXPRESSION

Final outcome after some minor changes:

Fig T1.3 Final Type Expression, Week 3 (13/10/2023)

4. GIF ANIMATION

In class, Mr Vinod asked us to choose a word and try making a GIF as practice(outcome doesn't have to look very nice) by following the tutorial video on youtube.

In this practice, I didn't use a dark background and I have accidentally moved letter K and Y at the frames without realizing until I finished the gif. The frame per second was not adjusted as well. Thus, the outcome was weird.

Fig T1.4 rough animation (practice), Week 3 (13/10/2023)

After that, we were required to make an actual GIF animation by choosing one word from our Type Expression. Same as the practice, we follow the steps in the tutorial video to digitize our GIF animation.

14 frames were used for the final animation:

Fig T1.5 process of 'spooky' animation, Week 3 (15/10/2023)

Fig T1.6 Final outcome of 'spooky' GIF animation , Week 3 (15/10/2023)

EXERCISE 2: FORMATTING TEXT

TRACKING AND KERNING

To watch lecture videos- Typo_Ex Text Formatting. We are required to write our own name in 10 fonts given, track and kern the texts.

To kern: press alt+left/right arrow to decrease or increase the kerning between two characters

Fig T1.7 Exercise of text formatting(tracking and kerning), Week 4 (22/10/2023)

LAYOUT DESIGN

To format an A4 layout with given paragraph, apply skills such as kerning, leading, paragraph spacing, adjusting layout etc.

trying different layouts:

Fig T1.8 Layout exploration, Week 5 (26/10/2023)

Final outcome:

HEAD

Font/s: Futura Std (Medium Condensed, Extra Bold, Heavy Oblique)

Type Size/s: 34pt, 81pt, 10pt

Leading: 97.2pt, 40.8pt, 11pt

BODY

Font/s: Gill Sans MT Regular

Type Size/s: 10pt

Leading: 12pt

Paragraph spacing: 12pt

Characters per-line: 20-65characters

Alignment: left align

Margins: 20mm top, 12.7mm left + 12.7mm right + 40mm bottom

Columns: 4

Gutter: 4.233mm

Fig T1.9 Final layout-Text formatting without grids in jpeg, Week 5 (27/10/2023)

Fig T1.10 Final layout-Text formatting without grids in PDF, Week 5 (27/10/2023)

Fig T1.11 Final layout-Text formatting with grids in jpeg, Week 5 (27/10/2023)

Fig T1.12 Final layout-Text formatting with grids in PDF, Week 5 (27/10/2023)

FEEDBACK

WEEK 2

General Feedback

update e-portfolio(blogger) weekly
do further reading weekly, to gain more knowledge about typography
avoid distortion and illustration in sketches

Specific Feedback

do not add illustration to the words design

WEEK 3

General Feedback

make sure audiences can tell what your animation means

Specific Feedback

drunk: use a regular type family instead of italic for drunk, because it was unnecessary
soup: the font could be more rounder and less thicker, and the line in between 'U' was advised to be removed to look less dull and better.
other two words was okay

WEEK 4

General Feedback

improve our GIF

Specific Feedback

'spooky' can be more spooky

WEEK 5

General Feedback

careful with the layout, alignment

Specific Feedback

make sure layout is clean and simple

REFLECTION

Experience

During the first class we had, I felt excited because I got to learn something new which was typography, yet afraid that I might not be able to catch up with the amount of work. I came to realize that we have to manage our time well and focus in class, or even while watching the tutorial videos. To be honest, I was confuse on how to use Blogger and didn't know what to write in my e-portfolio. However, I understood more on the requirements for our blog while I tried doing it. Other than that, to come up with the ideas of the designs and to digitize them were quite challenging. But I somehow still find the process enjoyable.

Observations

I tend to sketch based on what pops out on my mind first which I think it could be good that I get to draw out first then edit and improve on the designs. However, I found my own designs were not as creative after looking at the other students' works. During the feedback session, accepting different opinions could make us improve better in our work. I also like how we have the Facebook group where we should upload our work every week, it is a great opportunity to share the ideas and learn from the others.

Findings

Typography has many rules and things we wouldn't know before learning. We should always sketch out our ideas to get a better image of what we want to do. Besides than, further reading is important as we can gain more knowledge and understanding about typography.

FURTHER READING

One book a week

Week 1:

Fig FR1 A type primer second edition

This book is written by John Kane and recommended by our lecturer. Like our lecture notes, this book talks about the variety types of fonts used in typography. It also shows more details about the development of typography, simple to read.

Week 2:

Fig FR2 The Vignelli Canon on Design

This book is written by Massimo Vignelli, a famous Italian Designer.

Part 1- The Intangibles

Semantics is the search of what we have to design. Semantics means to understand the subject in all its aspects; to relate the subject to the sender and the receiver in such a way that it makes sense to both. To design something that has a meaning, that is not arbitrary, that has a reason for being.

Syntactics consistency is of paramount importance in graphic design as it is in all human endeavors. In graphic design, they are the overall structure, the grid, the typefaces, the text and headlines, illustration, etc. Grids are one of the several tools helping designers to achieve syntactical consistency in graphic design.

Pragmatics- If whatever we do is not understood, fails to communicate, its a waste of effort. Any artifact should stand by itself in all its clarity. Otherwise, something really important has been missed.

QUICK LINKS

TASK 1: TYPE EXPRESSION & TEXT FORMATTING

TASK 2: TYPOGRAPHY EXPLORATION & COMMUNICATION

TASK 3: TYPE DESIGN & COMMUNICATION

FINAL COMPILATION & REFLECTION