Typography - Task 1: Exercises

Typography is the act of creating letters, the creation of typefaces and type family. It can be in many design forms, such as animations, website designs, app designs, signage design, labels, books, posters, logo types, etc.

Definition of Typography

oxforddictionaries.com - The style and appearance of printed matter.

wikipedia.com - The art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Calligraphy. Refers to the writing styles.

Lettering. Refers to the drawing of the circumference of letters.

Why is good typography important?

: To have a better level of engagement, comprehension, and effective communication.

Terminology

Font - The individual font/ weight within the typeface, i.e.: Georgia Regular, Georgia Italic, Georgia Bold.

Typeface - The entire family of fonts/weights that share similar characteristics/styles, i.e.: Georgia, Arial, Times New Roman, Courier.

Links given in lecture: Type History, History of the Alphabet

Lecture 2: - Typo_1_Developement -

< Early Letterform Development: Phoenician to Roman >

Initial writing meant scratching into wet clay with sharpened stick or carving into stone with a chisel. The form of uppercase letterforms (for nearly 2000 years the only letterforms) can be seen to have evolved out of these tools and materials. Hence, the tool or instrument we use plays a major role in the influence on the type of writing and scripts that is crafted.

Phoenicians - Write from right to left.

The Greeks - Developed a style of writing called ‘boustrophedon’ (how the ox ploughs), which meant that the lines of text read alternately from right to left and left to right.

Etruscan (and then Roman) - Painted letterforms before inscribing them, which influenced the quality of their strokes when carried over into the carved letterforms.

Figure 1.0 The Letterform Development from Phoenician to Roman (Week 1, 23/4/25)

< Timeline of the Development of Typography >

1. Square Capitals (4th/ 5th century)

Written version that can be found in the Roman monuments.
Have serifs added to the finish of the main strokes.
The variety of stroke width was achieved by the reed pen held at an angle of approximately 60° off the perpendicular.

Figure 1.0.1 Square Capitals (Week 1, 23/4/25)

2. Rustic Capitals (Late 3rd - Mid 4th century)

Rustic capitals allowed for twice as many words on a sheet of parchment and took far less time to write.
The pen or brush was held at an angle of approximately 30° off the perpendicular.
Although rustic capitals were faster and easier to write, they were slightly harder to read due to their compressed nature.

Figure 1.0.2 Rustic Capitals (Week 1, 23/4/25)

3. Roman Cursive (4th century)

Cursive hand were typically used for everyday transactions in which forms were simplified for speed.
The lowercase letterforms were resulted in writing uppercase letterforms quickly.

Figure 1.0.3 Roman Cursive (Week 1, 23/4/25)

4. Uncials (4th/5th century)

Incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U & Q.
‘Uncial’ is Latin for twelfth of anything; may refer to letters that are once inch (one twelfth of foot) high.
Might be more accurate to think of it as small letters.
The broad forms of uncials are more readable at small sizes than rustic capitals.

Figure 1.0.4 Uncials (Week 1, 23/4/25)

5. Half-Uncials (C.500)

Further formalisation of the cursive hand.
Marks the formal beginning of lowercase letterforms, replete with ascenders and descenders.

Figure 1.0.5 Half-Uncials (Week 1, 23/4/25)

6. Caloline Minuscule (925 C.E.)

Developed to standardise all ecclesiastical texts and convey messages accurately.
Rewritten using both majuscules (uppercase), minuscule, capitalisation, and punctuation.
Sets the standard for calligraphy for a century.

Figure 1.0.6 Caloline Minuscule (Week 1, 23/4/25)

7. Blackletter (Textura) (C.1300)

Known as a condensed strongly vertical letterform in Northern Europe.
In the south, a rounder, more open hand gained popularity called ‘Rotunda’.

Figure 1.0.7 Blackletter (Textura) (Week 1, 23/4/25)

8. Gutenberg’s Type (C.1455)

Gutenberg marshaled his skills to build pages that accurately mimicked the Blackletter.
His type told required a different brass matrix, or negative impression for each letterform.

Figure 1.0.8 Gutenberg's Type (Week 1, 23/4/25)

< Text Type Classification >

1. 1450 Blackletter

The earliest printing type, based upon the hand-copying styles that were then used for books in Northern Europe.
E.g. Cloister Black, Goudy Text.

Figure 1.0.9 1450 Blackletter (Week 1, 25/4/25)

2. 1475 Oldstyle

Based upon the lowercase forms used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on Roman ruins.
E.g. Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino.

Figure 1.0.10 1475 Oldstyle (Week 1, 25/4/25)

3. 1500 Italic

The first italics were condensed and close-set, allowing more words per page.
Although originally considered their own class of type, italics were soon cast to complement roman forms.
Since the sixteenth century, virtually all text typefaces have been designed with accompanying italic forms.

Figure 1.0.11 1500 Italic (Week 1, 25/4/25)

4. 1550 Script

This class of type is not entirely appropriate in lengthy text settings, but more widely accepted in shorter applications.
Forms now range from formal & traditional to casual & contemporary.
E.g. Kuenstler Script, Mistral, Snell Roundhand.

Figure 1.0.12 1550 Script (Week 1, 25/4/25)

5. 1750 Transitional

A refinement of oldstyle forms, this style was achieved in part because of advances in casting and printing.
Thick to thin relationships were exaggerated, and brackets were lightened.
E.g. Baskerville, Bulmer, Century, Times New Roman.

Figure 1.0.13 1750 Transitional (Week 1, 25/4/25)

6. 1775 Modern

Represents a further rationalisation of oldstyle letterforms.
Serifs were unbracketed, extreme contrast between thick and thin strokes.
E.g. Bell, Bodoni, Caledonia, Didot, Walbaum.

Figure 1.0.14 1775 Modern (Week 1, 25/4/25)

7. 1825 Square Serif/ Slab Serif

Originally heavily bracketed serif, with little variation between thick and thin strokes.
As they evolved, the brackets were dropped.
E.g. Clarendon, Memphis Rockwell, Serifa.

Figure 1.0.15 1825 Square Serif/ Slab Serif (Week 1, 25/4/25)

8. 1900 Sans Serif

Variation tended toward either humanist forms (Gill Sans) or rigidly geometric (Futura).
Occasionally, strokes were flared to suggest the calligraphic origins of the form (Optima).
E.g. Akzidenz Grotesk, Grotesk, Gill Sans Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers.

Figure 1.0.16 1900 Sans Serif (Week 1, 25/4/25)

9. 1900 Serif/ Sans Serif

This style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets.
Often stages between the two, which can be referred as semi-sans or semi-serifs.
E.g. Rotis, Scala, Stone.

Figure 1.0.17 1900 Serif/ Sans Serif (Week 1, 25/4/25)

Lecture 3: - Typo_3_Text_Part 1 -

Text/ Tracking: Kerning & Letterspacing

Kerning. The automatic adjustment of space between letters.

Letterspacing. Add space between the letters.

Tracking. The addition and removal of space in word or sentence.

Figure 1.1 Kerning (Week 2, 30/4/25)

Figure 1.1.1 Normal, Tight, and Loose Tracking (Week 2, 30/4/25)

Text/ Formatting Text

Flush left: Mirrors the asymmetrical experience of handwriting. Each line starts at the same points but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even grey value (text on a white page). When text is flushed left, it's important to make the ragging on the right smoother.

Figure 1.1.2 Flush left, Ragged right (Week 2, 30/4/25)

Centered: Imposes symmetry upon the text, assigning equal value and weight to both ends of any line. As centered type creates a strong shape on the page, it's important to amend line breaks so that the text does not appear too jagged. Use sparingly for small amount of copy or text.

Figure 1.1.3 Centered, Ragged right & left (Week 2, 30/4/25)

Flush right: Emphasises on the end of a line as opposed to its start. It is usually used in situations like captions or axial layouts. Same as flush left, it's important to keep the ragged left smooth.

Figure 1.1.4 Flushed right, Ragged Left (Week 2, 30/4/25)

Figure 1.1.5 Example of an Axial Layout Poster, Pinterest (Week 2, 30/4/25)

Justified: Imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and letters. The spaces between the text produce huge rivers (gaps), hence lots of kerning and tracking is needed. May use an appropriate number of hyphens, but try to avoid it. Not advisable for designers to use this text format.

Figure 1.1.6 Justified (Week 2, 30/4/25)

*Typographer's first job – clear, appropriate presentation of the author's message. Avoid type that calls attention to itself before the reader can get to the actual words, this is simply interference. Quite simply, if you see the type before you see the words, change the type.

Text/ Texture

It's important to know how to choose complimentary typefaces to best suit the message at hand. Understand how different typefaces feel as text. Consider their different textures and colour (grey value).

Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke. Sensitivity to these differences in color is fundamental for creating successful layouts.

Genereally, text with better readability = x-height > ascender & descender

How to read 10/13.5?

: Point size 10, leading 13.5. (Leading is 3.5 points larger than the point size)

Figure 1.1.7 Comparison of different Traditional Typefaces (Week 2, 30/4/25)

Figure 1.1.8 Comparison of different Modern Typefaces (Week 2, 30/4/25)

Text/ Leading & Line Length

Goal in setting text type: Allow for easy, prolonged reading.

Type size - Text type should be large enough to be read easily as arms length.
Leading - Generally, leading space is decided on the vertical eye movement of the reader or the grey value/colour.
Text that is set too tightly = more vertical eye movement of the reader.
Type that is set too loosely = creates striped patterns that distract the reader from the material.
An appropriate amount of leading for a large body of text would be 2 ~ 2.5 points larger than the point size of the text.
Line length - Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short line lengths impairs reading.

Figure 1.1.9 Bad leading (no leading vs. too much leading) (Week 2, 30/4/25)

Figure 1.1.10 Comparison of different Leading Points (Week 2, 30/4/25)

Text/ Type Specimen Book

A type specimen book (or ebook for screen) shows samples of typefaces in various different sizes. It provides an accurate reference for type, type size, type leading, type line length, etc.

How to choose a typeface?

: If for screen, test it on the screen to see how it looks as text and headline. If for print, print it out in actual size to check if sizing is good and colour is even.

Figure 1.1.11 Sample Type Specimen Sheet (Week 2, 30/4/25)

Compositional requirement: Text should create a field that can occupy a page or a screen. Ideal text should have a middle grey value, not a series of stripes.

Lecture 4: - Typo_4_Text_Part 2 -

Text/ Indicating Paragraphs

Pilcrow (¶). A holdover from medieval manuscripts seldom use today, used to indicate paragraph space.

Line space. Leading between the paragraphs, ensures cross-alignment across columns of text. Line space is 12 pt = paragraph space is 12 pt.

Figure 1.2 Line space (Week 3, 9/5/25)

Indentation. The indent is the same size of the line spacing or the point size of your text. Best used when the text is justified to prevent ragging on both sides.

Figure 1.2.1 Indentation (Week 3, 9/5/25)

Extended paragraphs. Creates unusually wide columns of text, however there can be strong compositional or functional reasons for choosing it.

Text/ Widows and Orphans

Widow. A 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 a new column.

Figure 1.2.2 Widow vs Orphan (Week 3, 9/5/25)

In justified text, widows and orphans are considered serious gaffes. The only solution to widows is to force line break (shift + enter) your line endings throughout your paragraph so that the last line of any paragraph is not noticeably short. As for orphans, reducing the length of the column is one way but not recommended.

Text/ Highlighting Text

The following are some simple samples of how to highlight text within a column of text. Different kinds of emphasis require different kinds of contrast.

Figure 1.2.3 Highlighting text: Italics vs Bold (Week 3, 9/5/25)

When highlighting text with colour, we can only use black, cyan, or magenta.

Figure 1.2.4 Highlighting text: Different font vs Different colour (Week 3, 9/5/25)

When highlighting text by changing the font family, such as using sans serif in a full serif text, it is advisable to reduce the point size by .5 to match the x-height of the serif typeface. 8 ≠ 7.5

Figure 1.2.5 Highlighting text: Different font family (Week 3, 9/5/25)

When formatting a large amount of text, reducing aligned figures (numbers) or All Capital acronyms embedded in text by .5 ensures visual cohesion of the text.

When highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best.

Figure 1.2.6 Highlighting text: Using a field of colour (Week 3, 9/5/25)

Sometimes it is necessary to place certain typographic elements outside the left margin of a column of type (extending as opposed to indenting) to maintain a strong reading axis.

Figure 1.2.7 Highlighting text: Typographic elements (Week 3, 9/5/25)

Quotation marks, like bullets, can create a clear indent, breaking the left reading axis.

Figure 1.2.8 Highlighting text: Quotation marks (Week 3, 9/5/25)

Text/ Headline within Text

A Heads indicates a clear break between the topics within a section. In the following examples, ‘A’ heads are set larger than the text, in small caps and in bold. The fourth example shows an A Head ‘extended’ to the left of the text.

Figure 1.2.9 Headline within text: A Head (Week 3, 9/5/25)

B Heads is subordinate to A Heads. B heads indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as A heads do.

Figure 1.2.10 Headline within text: B Head (Week 3, 9/5/25)

C Heads highlights specific facets of material within B head text. Theydon’t materially interrupt the flow of reading. C heads in this configuration are followed by at least an em space for visual separation.

Figure 1.2.11 Headline within text: C Head (Week 3, 9/5/25)

*Putting together a sequence of subheads = hierarchy.

Figure 1.2.12 Headline within text: A Head vs B Head vs C Head (Week 3, 9/5/25)

Text/ Cross Alignment

Cross aligning headlines and captions with text type reinforces the architectural sense of the page — the structure — while articulating the complimentary vertical rhythms. In this example, four lines of caption type (leaded 9 pts) cross-align with three lines of text type (leaded to 13.5 pts.).

Figure 1.2.13 Cross Alignment: 4 lines of caption type C-A with 3 lines of text type (Week 3, 9/5/25)

Below, one line of headline type cross-aligns with two lines of text type, and (right; bottom left) four lines of headline type cross-align with five lines of text type.

Figure 1.2.14 Cross Alignment: 4 lines of headline type C-A with 5 lines of text type (Week 3, 9/5/25)

Lecture 5: - Typo_2_Basic -

Basic/ Describing Letterforms

Baseline. The imaginary line the visual base of the letterforms.

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

X-height. The height in any typeface of the lowercase ‘x’.

Figure 1.3 Diagram of Letterform (Week 4, 15/5/25)

Stroke. Any line that defines the basic letterform.

Apex/ Vertex. The point created by joining two diagonal stems (apex above & vertex below)

Arm. Short strokes off the steam of the letterform, either horizontal or vertical(E, F, L), or inclined upward (K, Y).

Ascender. The portion of the steam of a lowercase letterform that projects above the median.

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. The bowl may be either open or closed.

Bracket. The transition between the serif and the stem.

Cross bar. The horizontal stroke in a letterform that joins two stems together. (A, H).

Cross stroke. The horizontal stroke in a letterform that joins two stems together. (f, t).

Crotch. The interior space where two strokes meet.

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

Ear. The stroke extending out from the main steam or body of the letterform.

Em/en. Originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes.

Finial. The rounded non-serif terminal to a stroke.

Leg. Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K, R).

Ligature. The character formed by the combination of two or more letterforms.

Link. The stroke that connects the bowl and the loop of a lowercase (G).

Loop. In some typefaces, the bowl is created in the descender of the lowercase (G).

Shoulder. The curved stroke that is not part of a bowl.Serif. The right-angled or oblique foot at the end of the stroke.

Spine. The curbed stem of the S.

Spur. The extension articulates the junction of the curved and rectilinear stroke.

Stem. The significant vertical or oblique stroke.

Stress. The orientation of the letterform, indicated by the thin stroke in round forms.

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

Tail. The curved diagonal stroke at the finish of a certain letterform.

Terminal. The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat (’T’ above), flared, acute, (’t’ above), grave, concave, convex, or rounded as a bail or a teardrop (see finial).

Basic/ The font

*The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.

Uppercase. Capital Letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.

Figure 1.3.1 Uppercase (Week 4, 15/5/25)

Lowercase. Lowercase letters include the same characters as uppercase.

Figure 1.3.2 Lowercase (Week 4, 15/5/25)

Small capitals. Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set. Most type software includes a style command that generates a small cap based on uppercase forms. (Do not confuse real small caps with those artificially generated.)

Figure 1.3.3 Small capitals (Week 4, 15/5/25)

Uppercase numerals. Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width. They are most successfully used with tabular material or in any situation that calls for uppercase letters.

Figure 1.3.4 Uppercase numerals (Week 4, 15/5/25)

Lowercase numerals. Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders. They are best used when ever you would use upper and lowercase letterforms. Lowercase numerals are far less common in sans serif type-faces than in serif.

Figure 1.3.5 Lowercase numerals (Week 4, 15/5/25)

Italic. Most fonts today are produced with a matching italic. Small caps, however, are almost always only roman. The forms in a italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.

Figure 1.3.6 Italic vs Roman (Week 4, 15/5/25)

Punctuation, Miscellaneous Characters. Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface. It's important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job.

Figure 1.3.7 Punctuation, Miscellaneous Characters (Week 4, 15/5/25)

Ornaments. Ornaments Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro).

Figure 1.3.8 Ornaments (Week 4, 15/5/25)

Basic/ Describing typefaces

Roman. The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as 'Book'.

Italic. Named for fifteenth century Italian handwriting on which the forms are based.

Oblique. Conversely are based on roman form of typeface.

Boldface. Characterised by a thicker stroke than a roman form. Depending upon the relative stroke widths within the typeface, it can also be called 'semibold', 'medium', 'black', 'extra bold', or 'super'. In some typefaces (notably Bodoni), the boldest rendition of the typeface is referred to as 'Poster'.

Light. A lighter stroke than the roman form. Even lighter strokes are called 'thin'.

Condense. A version of the roman form, and extremely condense styles are often called 'compressed'.

Extended. An extended variation of a roman font.

Figure 1.3.9 Describing typefaces (Week 4, 15/5/25)

Basic/ Comparing typefaces

What worth noting isn't the similarities but rather the differences - the accumulation of choices that renders each unique.

Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling. For any typographer these feelings connote specific use and expression.

Figure 1.3.10 The 9 type families (Week 4, 15/5/25)

The Rs display a range of attitudes, some whimsical, some stately, some mechanical, others calligraphic, some harmonious and some awkward.

Figure 1.3.11 Different expressions for 'a' & 'R' (Week 4, 15/5/25)

Lecture 6: - Typo_5_Understanding -

Letters/ Understanding letterforms

The uppercase letterforms below suggest symmetry, however, it is not symmetrical. It's easy to see the two different stroke weights of the Baskerville stroke form (below). Also, each bracket connecting the serif to the stem has a unique arc. From this difference, it can be concluded that certain nuance are necessary for this particular strokes.

Figure 1.4 Baskerville letterform (Week 5, 22/5/25)

The uppercase letterform below may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both letter forms (Baskerville & Univers) demonstrate the meticulous care of a type designer takes to create letterforms that are both internally harmonious and individually expressive. Also, making the stroke difference on both letter forms affects viewer's optical.

Figure 1.4.1 Univers letterform (Week 5, 22/5/25)

The complex 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 letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Figure 1.4.2 Helvetica and Univers Letterforms (Week 5, 22/5/25)

*When attempting font designs, making too many different changes to the letters will lead to a decorative but obfuscated letterforms, simplifying the characteristics of the letters and making it replicable in other letterforms is important.

Letters/ Maintaining X-Height

The x-height generally describe the size of the lowercase letterforms. However, curved strokes, such as in 's', must rise above the median (or sink below the baseline) in order to be the same size as the vertical and horizontal strokes they adjoin.

Figure 1.4.3 X-Height (Week 5, 22/5/25)

Letters/ Counterform

Just as important as recognizing specific letterforms is developing a sensitivity to the counterform (or counter)–the space describes, and often contained, by strokes of the form. The counterforms includes the space between them. How well the counters are handled determines how well the words hang together.

Figure 1.4.4 Counterform (Week 5, 22/5/25)

One way to understand the form and counter of a letter is to examine them in close detail. When designing new letters. The examinations also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterform's unique characteristics.

*It's important to analyse the existing typefaces that fall in the same category of the letter.

Letters/ Contrast

Contrast is the most powerful dynamic in design–as applied to type, based on a format devised by Rudi Ruegg. The simple contrast produces numerous variations: small + organic/ large + machined; small + dark/ large light.

Figure 1.4.5 Contrast by Rudi Ruegg (Week 5, 22/5/25)

Lecture 7: - Typo_6_Screen&Print -

Typography/ Different medium

When the internet took off in the late 1980s, everyone thought that paper would become dated, when in fact paper usage actually increased when printers were developed. Tactility and tactile feel will always be significant factors, regardless of how technology and screen usage have settled in people's lives. Touching and Feeling are required as part of humans' learning process.

Examples of design mediums are screens and prints. Print and screen have a long history in a variety of art forms, including graphic design, 3D animation, new media, environmental entertainment design, etc.

Figure 1.5 Example of typographical artwork for prints (Week 6, 27/5/25)

In the past, typography was viewed as living only when it reached paper. Once a publication was edited, typeset and printed, it was done. Nothing changed after that. Good typography and readability were the result of skilled typesetters and designers.

Today, typography exists not only on paper but on a multitude of screens. It is subject to many unknown and fluctuating parameters such as operating system, system font, the device and screen itself, the viewport and more. Our experience of typography today changes based on how the page is rendered, because typesetting happens in the browser.

<Print Type vs Screen Type>

- Type for Print -

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

Caslon
Garamond
Baskerville

These are the most common typefaces used for print because of their characteristic which are elegant and intellectual but also highly readable when set at small font size. They are versatile, easy-to-digest classic typefaces, which has a neutrality and versatility that makes typesetting with it a breeze.

Figure 1.5.1 Example of typesetting for print (Week 6, 27/5/25)

- 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. Screen used to be limited, and it made typefaces very are dependent to the screen. This can affect the quality of the typeface and can include changes for some designs, such as:

a taller x-height
reduced ascenders and descenders
wider letterforms
more open counters
heavier thin strokes and serifs
reduced stroke contrast
modified curves and angles

Typefaces that are designed specifically and suitable for screen purposes:

Verdana
Georgia

Another important adjustment–especially for typefaces intended for smaller sizes–is more open spacing. all of these factors serve to improve character recognition and overall readability in non-print environment, which can include web. e-books, e-readers, and mobile devices.

- 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. Hyperlinks are found in nearly all Web Pages, allowing users to click their way from a page to another. Text hyperlinks are normally blue and underlined by default. When you move the cursor over a hyperlink, whether it is a text or an image, the arrow should change to a small hand pointing the link. Hyperlink exists in many different places. Hashtags are the form of hyperlink as well.

- Font Size for Screen

16-pixel text on screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close–often only a few inches away– they are typically set about 10 points. If you were to read them at arm's length, you'd want at least 12 points, which is about the same size as 16 pixels on most screens.

- 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. The problem is that each differs a little bit. Windows-based devices might have one group. While MacOS ones pull from another. Then Google's own Android system uses their own as well.

Let's say the designer picked some obscure, paid font family for this site's design. If you don't have that font already installed and it's not pulling from a web-friendly place more on that later - the font you see would default back to some basic variation like Times New Roman. You, as the visitor, wouldn't necessarily know that's what happened, though. To you, it would just look plain ugly. "Web safe' ones, however, appear across all operating systems. They're the small collection of fonts that overlap from Windows to Mac to Google.

Web Safe Fonts:

Open Sans
Lato
Arial
Helvetica
Times New Roman
Times
Courier New
Courier
Verdana
Georgia
Palatino
Garamond

Figure 1.5.2 Comparison of screen and print (Week 6, 27/5/25)

- Pixel Differential Between Devices

The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60" HDTV. Even within a single device class there will be a lot of variation.

Figure 1.5.3 Pixel differential devices (Week 6, 27/5/25)

<Static vs Motion>

- 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.

From billboards to posters, magazines to fliers, we encounter all forms of static typography 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.

Figure 1.5.4 Static and dynamic design examples (Week 6, 27/5/25)

- Motion Typography

Motion Typography Temporal media offer typographers opportunities to "dramatize" type, for letterforms to become "fluid" and "kinetic" (Woolman and Bellantoni, 1999). Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.

Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.

2.0 INSTRUCTIONS

3.0 PROCESS WORK FOR TYPE EXPRESSION

3.1 Research

I researched references of expressive typography for my selected words (Jump, Roll, Melt, Chill) on Pinterest, and I planned on combining the ideas from different typographies into one, creating news design for each word.

Figure 3.1 "Jump" inspiration from Pinterest (Week 1, 25/4/25 ~ 28/4/25)

Figure 3.1.1 "Roll" inspiration from Pinterest (Week 1, 25/4/25 ~ 28/4/25)

Figure 3.1.2 "Melt" inspiration from Pinterest (Week 1, 25/4/25 ~ 28/4/25)

Figure 3.1.3 "Chill" inspiration from Pinterest (Week 1, 25/4/25 ~ 28/4/25)

Later on, I figured that some words may have more than one meaning so I searched the definitions of each word to generate more design ideas based on how the word is expressed.

Jump /dʒʌmp/ 1. v. push oneself off a surface and into the air by using the muscles in one's legs and feet. 2. v. (of a person) move suddenly and quickly in a specified way. 3. n. an act of jumping from a surface by pushing upwards with one's legs and feet. 4. n. a sudden involuntary movement caused by shock or surprise.

Roll /rəʊl/ 1. v. move in a particular direction by turning over and over on an axis. 2. v. (of a vehicle) move or run on wheels. 3. n. a cylinder formed by winding flexible material round a tube or by turning it over and over on itself without folding. 4. n. a movement in which someone or something turns or is turned over on itself.

Melt /mɛlt/ 1. v. make or become liquefied by heat. 2. v. make or become more tender or loving. 3. n. an act or period of melting.

Chill /tʃɪl/ 1. n. an unpleasant feeling of coldness in the atmosphere, one's surroundings, or the body. 2. n. a metal mould, often cooled, designed to ensure rapid or even cooling of metal during casting. 3. v. make (someone) cold. 4. v. horrify or frighten (someone). 5. adj. chilly. 6. adj. very relaxed or easy-going.

As I was still struggling to think of ideas that are more unique and less common, I went on to search for the synonyms of each word, hoping to spark ideas that are more out of the box from words with similar meanings.

Synonyms of:

Jump - leap, bound, hop, bounce, skip

Roll - spin, rotate, cylinder, scroll, turn, rotation, toss

Melt - liquefy, thaw, unfreeze, defrost, soften, mollify

Chill - coldness, coolness, frigid, scare, frighten, terrify, relax, unwind, loosen up, cold, chilly, cool, wintry, snowy, frosty, icy, arctic

3.2 Ideation

Figure 3.2 Sketches and Final Draft for Chosen Words (Week 2, 1/5/25)

After getting approval for my sketches, I started to digitalise my static typography on Adobe Illustrator. I did not encounter that much difficulty for Jump and Chill; however Roll and Melt took longer than I expected.

<Type Expression Static>

- Jump -

For the word Jump, I used the Direct Selection Tool to distort the shape for the letter M to look like a stickman figure jumping over the letter P. The process for Jump was quite smooth sailing, I did not need to redo my digitalisation as Mr. Max was satisfied with it so we kept it as it is as the final draft.

Figure 3.2.1 'Jump' final draft (Week 3, 8/5/25)

- Roll -

The thought process for Roll was to wrap the letter O with the tail of letter R, making it look like a roll of sushi with filling inside.

I created a circle shape with borders and no fill, and erased around 1/4 of the shape using the Eraser Tool to connect it with the letter R.

The biggest challenge for Roll was to connect the tail of the letter R with the circular O shape smoothly. There were some very minimal white space between the R and O and it can be seen when it's zoomed in. By adjusting the anchor points using the Direct Selection Tool, I connected the paths together to make the transition more seamless and smooth. It took a while as the anchor points were sensitive and wouldn't stay in place.

Figure 3.2.2 'Roll' connection before vs after (Week 3, 8/5/25)

I also made a few digitalise variations for Roll. I thought that changing the tone of the O could make it stand out better, but Mr. Max chose the full black version (middle) as he said it is more readable compared to others.

Figure 3.2.3 'Roll' variations (Week 3, 8/5/25)

- Melt -
I created the most draft designs for Melt and I thought that it was the hardest word to digitalise. It was hard to create the essence or feeling for Melt with the limited typefaces provided.

My vision was to mimic an ice cream melting, using the letter T as the cone, and letter M, E, L melting like ice cream. I added gradient variations as if light was shining on the letters for them to melt, and also to differentiate between the ice cream and the cone.

First draft design - Janson Text LT Std

The first draft design gave off more of a spooky/ Halloween vibe which was not the approach I was going for. The droplets also did not resemble ice cream melting, it looked more like blood dripping instead.

Figure 3.2.4 'Melt' first draft (Week 3, 8/5/25)

Self-reflection: The typeface choice was the main problem contributing to making the design spooky and rigid, I knew I had to change to a Sans-Serif font instead. The droplets were extended too long and drawn too thin, making the consistency of the droplets look like blood instead of ice cream. Hence, I have to draw the droplets thicker and shorter to change the consistency visually.

Second draft design - Gill Sans Std

I changed the typeface to a Sans-Serif font and rounded the sharp edges to make the typeface look more friendly. I changed the thickness/consistency of the droplets, and added a puddle below as well to emphasise more on the melting process.

Figure 3.2.5 'Melt' second draft (Week 3, 8/5/25)

I made 2 puddle variations, the first one using the Image Trace Tool to trace a bigger puddle from my sketch and added a gradient over it. For the second variation, I used the Ellipse Tool to draw multiple circles and used the Shape Builder Tool to combine them into multiple new shapes. Then I go to Effect > 3D and Materials > Rotate to change the angles and perspectives of the puddles to make it lie flat, adding a gradient as well.

Figure 3.2.6 'Melt' puddle variations (Week 3, 8/5/25)

- Chill -
I created the design for Chill in a short amount of time, however I thought it was a bit dull and lacked a wow factor. Thus I changed the transparency of certain words to emphasise on the chilling temperature. The design in the middle was chosen as the final draft, which is the letter c with 30% transparency as it emphasises on the degree celsius symbol better.

Figure 3.2.7 'Chill' transparency variations (Week 3, 8/5/25)

<Type Expression Animation>

I decided to select 'Roll' to proceed with motion work for the next step as I felt that I could express the word in a clear, simple, and direct manner.

First animation draft - Used 17 frames for the first draft, and delayed the last frame to 0.2 sec. Felt that the outcome was a bit choppy.

Figure 3.2.8 'Roll' animation first draft (Week 4, 13/5/25)

Second animation draft - Increased to 25 frames and maintained the last frame at 0.2 sec. It was not as choppy as 17 frames, but it did not feel smooth enough and the speed was slower.

Figure 3.2.9 'Roll' animation second draft (Week 4, 13/5/25)

Third animation draft - Delayed the timeline for each frame, mostly at 0.06 sec and some specific frames at 0.07 sec and 0.08 sec, last frame at 0.3 sec. It was smoother, but the speed of some frames were inconsistent.

Figure 3.2.10 'Roll' third draft timeline (Week 4, 13/5/25)

Figure 3.2.11 'Roll' third draft (Week 4, 13/5/25)

Fourth animation draft - Increased to 27 frames, delayed the timeline to 0.07 sec for most frames, with some specific frames at 0.03 sec and 0.1 sec, last frame at 0.3 sec. This time the speed was more consistent for each frame and smoother than the third draft.

Figure 3.2.12 'Roll' fourth draft timeline (Week 4, 13/5/25)

Figure 3.2.13 'Roll' fourth draft (Week 4, 13/5/25)

3.3 Final Outcome

<Final Outcome of Static Type Expression>

Figure 3.3 Final Static Type Expression in JPEG (Week 4, 14/5/25)

Figure 3.3.1 Final Static Type Expression in PDF (Week 4, 14/5/25)

<Final Outcome of Type Expression Animation>

Figure 3.3.2 Final Type Expression Animation GIF (Week 4, 14/5/25)

4.0 PROCESS WORK FOR TEXT FORMATTING

4.1 Minor Exercise

Figure 4.1 Kerning, Tracking, & Leading Exercise (Week 4, 13/5/25)

4.2 Layout Reference

I searched for newspapers/ magazines editorial layouts on Pinterest to get some inspiration.

Figure 4.2 Layout references from Pinterest (Week 4, 14/5/25)

4.3 Ideation

We were told to sketch 8 layouts to choose from. I first drafted the layout on paper to get an idea of the overall placements of the heading, body text, and image before digitalising the sketches.

Figure 4.3 Layout physical sketches (Week 5, 19/5/25)

<Digital Exploration>

After sketching on paper, I started to digitalise the sketches in Adobe InDesign. The 2nd, 6th, and 7th draft were considered. I was leaning towards the 6th draft, but was told that the top of the image is not aligned with the left paragraph, and there's a huge gap between the image and the heading.

As for the 7th draft, the gutter and spacing between the image and the paragraph on the right are equal, so they create good proximity. Hence, the 7th draft was chosen as the final.

*Tip: If the composition looks visually imbalanced, white space will be consider as empty spots rather than a comfortable layout.

Figure 4.3.1 Digital exploration sketches (Week 5, 21/5/25)

<Minor Adjustments>

Things to look out for:

• Font size (8–12)

• Line Length (55–65/50–60 characters)

• Text Leading (2, 2.5, 3 points larger than font size)

• Paragraph spacing (follows the leading)

• Ragging (left alignment) / Rivers (left justification)

• Cross Alignment

• No Widows / Orphans

Was advised to align the top of the heading with the image, and increase the heading font size to align with the width of the left paragraph. I realised that my leading is only 1 pt larger than my type size, so I reduced it by 1 pt to make sure the leading is 2 pt larger than the font size. Then, I did extra tracking and kerning to some sentences and words to maintain visual balance.

After some contemplation, I felt that the image I initially chose did not directly convey the headline's message, so I changed to a different image instead, and added a caption as it was recommended.

Figure 4.3.2 Before & after adjustments, tracking, & kerning (Week 5, 22/5/25)

4.4 Final Outcome

HEAD LINE

Typeface: Futura PT

Font/s: Heavy, Book Oblique

Type Size/s: 16 pt, 22.5 pt

Leading: 36 pt, 24 pt

Paragraph spacing: 0

BODY

Typeface: Futura PT

Font/s: Book

Type Size/s: 9 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 55~65 characters

Alignment: Left justified

Margins (mm): 21 top, 43 bottom, 22 left, 22 right

Columns: 2

Gutter: 21 mm

CAPTION

Typeface: Futura PT

Font/s: Light

Type Size/s: 8 pt

Leading: 10 pt

Paragraph spacing: 0

Figure 4.3.3 Final text-formatting layout (JPEG) (Week 5, 22/5/25)

Figure 4.3.4 Final text-formatting layout (PDF) (Week 5, 22/5/25)

Figure 4.3.5 Final text-formatting layout with baseline grid (JPEG) (Week 5, 22/5/25)

Figure 4.3.6 Final text-formatting layout with baseline grid (PDF) (Week 5, 22/5/25)

5.0 FEEDBACK

Week 1

General feedback: Mr. Max went through the module information booklet and briefed us thoroughly on what to do for Task 1. He also taught us how to set up our e-portfolio with the correct label. The link to the e-portfolio has been added to the google sheet.

- Type Expression

Week 2
General feedback: Mr. Max demonstrated the basics on how to use Adobe Illustrator, and briefed us on how to export AI files using the right format. He also gave me feedback on my 4 sketches and assisted me in improving them.

Specific feedback:
1st round of feedback - Ideas for "Jump" is good, Mr. Max said I could digitalise either 2 out of 6 of the sketches he chose. For "Roll," only one of the sketches stood out and is also good to proceed for digitalisation, but will have to draw alternative sketches for "Melt" & "Chill" as the ideas are too common or does not completely reflect the expression of the word.

2nd round of feedback - Mr. Max helped modified my new "Melt" design for better storytelling, he also liked my new idea for the design of "Chill," and finally gave the green light for digitalisation for both words. Lastly, he suggested either the word "Jump" or "Roll" for animation.

Week 3
General feedback: I was absent for this week's tutorial & practical as I fell sick, but after asking my classmates I generally knew Mr Max was giving a demonstration on how to make static typography into animation in Adobe Photoshop. Although I missed physical class, I can at least watch and learn from the recorded tutorial videos by Mr Vinod on YouTube.

Specific feedback: I sent over my digitalised static typography to Mr Max on WhatsApp to get his feedback. I sent different versions for each word, some with different transparency/ gradient/ etc for Mr Max to choose the most appealing ones. Overall, the typographies he chose didn't require any revision and approved them. However, I myself wasn't that satisfied with certain details of my work but didn't know how to refine them, Mr Max said he will review it during class in Week 4.

Week 4
General feedback: Mr. Max gave us a detailed tutorial on how to use Adobe InDesign with an exercise using our names. He taught us kerning, leading, and tracking as well as using margins, columns, and gutters to create a new file for Task 1 Exercise 2 using the given guidelines. Then, we were instructed to use create 8 sketches of page layouts according to the format and rules given by Mr Vinod in Teams.

Specific feedback: Mr. Max approved all of my static digitalisation and my animation for 'Roll.' I just need to upload all of them into the e-portfolio.

- Text Formatting

Week 5
General feedback: Mr Max demonstrated how to format text in Adobe InDesign for Task 1 by using Mr Vinod's requirements as an example, he also prepped us for Task 2 and taught us how to create the file beforehand.

Specific feedback: For my text formatting sketches, 2nd or 7th draft is preferred. 6th was considered as well, but the alignment is not that nice. 7th draft was chosen as the final as the gutter and spacing between the image and the paragraphs are more equal, they create good proximity.

6.0 REFLECTION

Experience

It was hard trying to brainstorm new ideas for the sketches as most of the references were very similar. A lot of revisions were made as I was not satisfied with the outcome, basically my brain was exploding. There were a lot of trial and error while designing the animation as well. However, I felt very rewarded after seeing the results. Overall, while working on Task 1, I was able to learn about the historical development of typography as well as the details that add to its beauty. I also received helpful feedback and remarks from the lecturer for progress and improvements which I'm very grateful for. Mr. Vinod's tutorial videos also helped me better adapt to Adobe softwares by allowing me to follow each step at my own pace.

Observations

As we evaluate our weekly progress together in class, the feedback provided to other students was equally beneficial to my work, and as a result, I learnt that there are numerous perspectives in design. The different aesthetics of other people's designs have inspired me to broaden my perspectives. Similarly, I learnt that doing research is vital in the ideation process because it expands my range of creative thinking skills and inspiration.

Findings

This assignment has given me valuable insights into the design process behind typefaces and fonts for various brands. I found out why certain fonts work better in lowercase while others become hard to read when used in all capitals - (e.g. why Script fonts should never be used in uppercase for titles.) Understanding the historical context has helped me see why traditional books used serif fonts like Times New Roman, and how modern publications have shifted toward more accessible sans-serif options such as Calibri, Helvetica, and Futura. This assignment served as an excellent introduction to typography fundamentals and has sparked my enthusiasm for the design projects ahead.

7.0 FURTHER READING

Figure 7.0 A Type Primer, John Kane (2002)

This book provides a concise overview of typography's historical development while serving primarily as a practical handbook for typographic work. It delves into how letterforms can enhance the semantic impact of words, along with text formatting and grid system principles.

Many concepts covered in Mr. Vinod's lecture series are also found within these pages, including fundamental topics such as typeface definitions, letterforms, type text classifications, headings, and layouts. The book even addresses advanced typographic elements like ligature, offering comprehensive coverage of both basic and sophisticated typography techniques.

Figure 7.1 Terminologies and Describing Typefaces

Figure 7.2 The font

>> Head HERE to Task 2

Search This Blog

Nicole's E-Portfolio