Typography Task 1: Exercises
21/04/25 - 26/05/25 (Week 1 - Week 6)
Lim Jia Xuan (0371026)
Typography (GCD 60104)
Figure 1.0. 1 Text Type Classification
Figure 1.1.10 Comparison of different Leading Points
Compositional requirement
Figure 1.2.1 Line Space vs Leading
Figure 1.3.1 Diagram that indicates baseline, median and x-height
Figure 1.3.8 Italic vs Roman
Figure 3.2.1 'Jump' final draft
Melt
Figure 3.2.6 Timeline for "CHILL"
Figure 5.0 Typographic Design Form Communication
Typography (GCD 60104)
Task 1: Exercises
Table of Contents
3.1 Research
3.2 Ideation
3.3 Final Outcome
4.1 Minor Exercise
4.2 Layout Reference
4.3 Ideation
4.4 Final Outcome
1.0 LECTURES
Lecture 1: Typo_0_Introduction
Typography
In this lecture, Mr. Vinod introduced us to the concept of typography, highlighting how it appears in our daily lives and is used across a wide range of fields. For instance, typography plays a key role in animation, app design, web design, signs, and more. It has evolved over the past 500 years—from traditional calligraphy to lettering, and eventually into modern typography.
Terminology
A font refers to a specific style or weight within a typeface.
For example: Georgia Regular, Georgia Italic, Georgia Bold, etc.
A typeface refers to a family of fonts that share common design features.
For example: Georgia, Arial, Times New Roman, Didot, Futura, etc.
Links given in lecture: Type History, History of the Alphabet
Lecture 2: Typo_1_Development
Early Letterform Development: Phoenician to Roman
In the early days, writing meant scratching into wet clay with a sharpened stick or carving into stone using a chisel.
The uppercase letterforms were the only letterforms for nearly 2,000 years. The forms of uppercase letterforms have evolved out of those tools and materials, and they are formed from a simple combination of straight lines and pieces of circles.
The uppercase letterforms were the only letterforms for nearly 2,000 years. The forms of uppercase letterforms have evolved out of those tools and materials, and they are formed from a simple combination of straight lines and pieces of circles.
Phoenicians
Wrote 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)
Carvers worked in marble, painted letterforms before inscribing them. A certain quality of strokes—a change in weight from vertical to horizontal, and a broadening of the stroke at the start and finish—was carried over into the carved letterforms.
Figure 1.0 The Letterform Development from Phoenician to Roman
Hand Script from 3rd-10th Century C.E.
1. Square Capitals (4th or 5th century)
- Written version that can be found in Roman monuments.
- Have serifs added to the finish of the main strokes.
- The variety of stroke widths was achieved by the reed pen held at an angle of approximately 60° off the perpendicular.
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.
3. Roman Cursive (4th century)
- Written in Cursive hand, which forms were simplified for speed.
- Lowercase letterforms were a result of fast writing; Uppercase letterforms quickly.
4. Uncials (4th-5th century)
- Uncials incorporated some aspects og the Roman cursive hand, especially in the shape of the A, D, E, H, M, U and Q
- "Uncias" is Latin for a twelfth of anything.
- More accurate to think of uncials as simplified as small letters.
- The board form of uncials is more readable at a small size than rustic capitals.
5. Half-Uncials (C.500)
- Formalisation of cursive handwriting.
- Half-Uncials mark the formal beginning of the lowercase letterform, replete with ascenders and descenders.
6. Caloline Miniscule (C.925)
- Charlemagne, the first unifier of Europe since the Romans, entrusted Alucuin of York, Abbot of St Martin of Tours to standardise all ecclesiastical texts.
- The monks rewrote the text using both majucules(uppercase), miniscule, capitalisation and punctuation, which set the standard for calligraphy for a century.
Blackletter to Gutenberg's Type
1. Blackletter (Textura) (C.1300)
- In Northern Europe, a condense strongly vertical letterform known as Blackletter or textura gained popularity.
- In Southern Europe, a rounder, more open hand gained popularity, called 'rotunda'.
2. Gutenberg’s Type (C.1455)
- Gutenberg's skills include engineering, metalmithing and chemistry, he marshaled them all to build pages that accurately mimicked the work of scribe's hand - Blackletter of Northern Europe.
- Required a different brass matrix, or negative impression, for each letterform.
Text Type Classification
1. 1450 Blackletter
- The Earliest Printing Type
- Forms were based upon the hand copying styles that were used for books in Northern Europe.
- E.g. Cloister Black, Goudy Text.
2. 1475 Oldstyle
- Lowercase forms used by Italian humanist scholars for book copying; Uppercase form found inscribed on Roman ruins.
- Migrated across Europe, from Italy to England.
- E.g. Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino.
3. 1500 Italic
- The first Italic were condensed and closing set, allowing more words per page.
- Originally considered their own class of type, but soon cast to complement Roman forms.
- Since 16 Century, all text typefaces have been designed with accompanying italic forms.
4. 1550 Script
- This class of type is not entirely appropriate in a lengthy text setting.
- Forms now range from the formal and traditional to the casual and contemporary.
- E.g. Kuenstler Script, Mistral, Snell Roundhand.
5. 1750 Transitional
- A refinement of oldstyle forms was achieved in part because of advances in casting and printing.
- Thick to thin relationship was exaggerated, and brackets were lightened.
- E.g. Baskerville, Bulmer, Century, Times Roman.
6. 1775 Modern
- Represents a further rationalisation of oldstyle letterforms.
- Serifs were unbracketed, and the contrast between thick and thin strokes was extreme.
- E.g. Bell, Bodoni, Caledonia, Didot, Walbaum.
7. 1825 Square Serif/ Slab Serif
- Originally heavily bracketed serif, with little variation between thick and thin strokes.
- Newly developed needs of advertising for heavy type in commercial printing.
- E.g. Clarendon, Memphis Rockwell, Serifa.
8. 1900 Sans Serif
- Variation tended towards either humanist forms (Gill Sans) or rigdly geometric (Futura).
- Occasionally, strokes were flared to suggest the calligraphy origins of the form (Optima).
- Sans Serif is also referred to as grotesque (from the German word Grotesk) and Gothic.
- E.g. Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers.
9. 1990 Serif/ Sans Serif
- This style enlarges the notion of a family of typefaces to include both Serif and Sans Serif alphabets.
- E.g. Rotis, Scala, Stone.
Lecture 3: Typo_3_Text_Part 1
Text/ Tracking: Kerning and Letterspacing
1. Kerning
Automatic adjustment between spaces and letters.
2. Letterspacing
Add space between the letters.
3. Tracking
The addition and removal of spaces in a word or sentence.
Figure 1.1 Kerning
Figure 1.1.1 Normal Tracking, Loose Tracking, Tight Tracking
Text/ Formatting Text
- Flush left: Mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text by allowing the type to create an even a grey value.
Figure 1.1.2 Flush left, Ragged right
- Centered: Imposes symmetry upon the text, assigning equal value and weight to both ends of any line. Since centered type creates a strong shape on the page, it is important to amend line breaks so that the text does not appear too jagged. Used sparingly for a small amount of text or copy.
Figure 1.1.3 Centered, Ragged right & left
- Flush right: Play emphasis on the end of the line as opposed to its start. It is useful in some situations, like captions and axial layouts, where the relationship between text and image might be ambiguous without a strong orientation to the right.
Figure 1.1.4 Flushed right, Ragged Left
- Justified: Imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and letters. While dealing with Justified, the spaces in between the text might produce 'river'(gaps), hence try to impose hyphens in the text to maintain reading rhythm but also to avoid the 'rivers'.
Figure 1.1.5 Justified
Text/ Texture
Since different typefaces suit different messages, it's important to know which typefaces best suit the message at hand.
It is important to consider the different textures of the typefaces. 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 colour is fundamental for creating successful layouts.
Figure 1.1.6 Anatomy of a typeface
Different Typefaces do bring out differences in their own Grey Value, even when each of the typefaces uses the same font size.
Figure 1.1.7 Comparison of different Traditional Typefaces
Figure 1.1.8 Comparison of different Modern Typefaces
Text/ Leading & Line Length
1. Type Size
- Text type should be large enough to be read easily at arm length.
2. Leading
- Text that is set too tightly - encourages vertical eye movement; a reader would easily loose his or her place.
- Types that are set too loosely - create striped patterns that distract the reader from the material at hand.
3. Line Length
- Shorter lines require less leading; longer lines require more.
- A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short line lengths impair reading.
Figure 1.1.9 Example of Bad Leading
Text/ Type Specimen Book
A type specimen book shows a sample of typeface in various sizes. It is used as an accurate reference for the outcomes of a typeface in terms of type, type size, type leading, type length, etc, for helping in deciding the most suitable type to use.
Figure 1.1.11 Sample of Type Specimen Sheet
Compositional requirement
Text should create a field that can occupy a page or a screen. An ideal text should have a middle grey value, not a series of stripes.
It is often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below.
Lecture 4: Typo_4_Text_Part 2
Text/ Indicating Paragraphs
1. Pilcrow (¶)
A hold folder from medieval manuscripts is seldom used today, used for indicating paragraph spaces.
2. Line space (Leading)
Leading between the paragraphs, to ensure cross-alignment across columns of text.
E.g. If Line space is 12 pt, then the paragraph space is 12 pt.
Figure 1.2 Line space
3. Indentation
Standard indentation is the indentation of the first line in a paragraph. The indent is typically the same size as the line spacing or the point size of the text. It is best used when the text is justified to prevent issues such as ragging on both sides.
4. Extended paragraphs
Creates an unusually wide column of text; however, there could also be a strong compositional or functional reason for choosing it.
Figure 1.2.2 standard indentation; extended paragraph indentation
Text/ Widows and Orphans
The unpardonable gaffes in formatting text are widows and orphans.
1. Widow
- A short line of type left alone at the end of the column of text.
- It can be avoided by creating a forced line break before, or by adjusting the tracking of the previous line to move the last word of the second-to-last line down to the final line.
2. Orphan
- A short line of type left alone at the start of new column.
- It could be avoided by adjusting the length of the column.
Figure 1.2.3 Widow vs Orphan
Text/ Highlighting Text
The following are the same simple examples on how to highlight text within a column of text.
1. Use the same typeface but different fonts (Italic,Bold)
Figure 1.2.4 Highlighting text: Italics vs Bold
2. Change the colour of the text (we can only use black, cyan, magenta)
Figure 1.2.5 Highlighting text: Different font vs Different colour
3. Change the Type Family
Note that a sans serif font is usually slightly larger than a serif font at the same point size. In this example, the sans serif font (Univers) has been reduced by 0.5 pt to match the x-height of the serif typeface (8 pt ≠ 7.5 pt).
Figure 1.2.6 Highlighting text: Different font family
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.
4. Place a Field of Colour
When highlighting text by placing a field colour at the back of the text, maintaining the left reading axis (right example) of the text to ensure readability is at its best.
Figure 1.2.7 Highlighting text: Using a field of colour
5. Place Certain Typographic Elements
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.8 Highlighting text: Typographic elements
6. Use Quotation Marks
Quotation Marks, like bullets, can create a clear indent, breaking the left reading axis. Compare to the indented quote at the top with the extended quote at the bottom.
Figure 1.2.9 Highlighting text: Quotation marks
Text/ Headline within Text
There are many kinds of subdivisions within text of the chapter, such as (A, B, C), which are labelled according to the level of importance.
1. A Heads
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.10 Headline within text: A Head
2. B Heads
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.11 Headline within text: B Head
3. C Heads
C Heads highlights specific facets of material within B head text. They don’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.12 Headline within text: C Head
A design principle—Hierarchy is formed after arranging the sequence of subheads.
Figure 1.2.13 Differences between A Head vs B Head vs C Head
Text/ Cross Alignment
Cross aligning headlines and captions with text type reinforces the architectural sense of the page — the structure — while articulating the complementary 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.14 - 4 lines of caption type C-A with 3 lines of text type
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.15 - 4 lines of headline type C-A with 5 lines of text type
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’.
Stroke: Any line that defines the basic letterform.
Apex/ Vertex: The point created by joining two diagonal stems (apex above and 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.
Cross stroke: The horizontal stroke in a letterform that joins two stems together.
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 en is half the size of an em.
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)
Serif: The right-angled or oblique foot at the end of the stroke.
Shoulder: The curved stroke that is not part of a bowl.
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).
Figure 1.3.2 Describing Letterform
Basic/ The font
The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.
1.Uppercase
Capital Letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.
Figure 1.3.3 Uppercase
2. Lowercase
Lowercase letters include the same characters as uppercase.
Figure 1.3.4 Lowercase
3. Small Capitals
Uppercase letterforms align to the x-height of the typeface.
Figure 1.3.5 Small capitals
4. Uppercase Numerals
Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width.
Figure 1.3.6 Uppercase numerals
5. Lowercase Numerals
Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders.
Figure 1.3.7 Lowercase numerals
6. 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.
Figure 1.3.8 Italic vs Roman
7. 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.9 Punctuation, Miscellaneous Characters
8. Ornaments
Ornaments are used as flourishes in invitations or certificates.
Figure 1.3.10 Ornaments
Basic/ Describing typefaces
1. 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'.
2. Italic
Named for fifteenth-century Italian handwriting on which the forms are based.
3. Oblique
Conversely are based on Roman form of typeface.
4. 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'.
5. Light
A lighter stroke than the Roman form. Even lighter strokes are called 'thin'.
6. Condense
A version of the Roman form, and extremely condensed styles, are often called 'compressed'.
7. Extended
An extended variation of a Roman font.
Figure 1.3.11 Describing typefaces
Basic/ Comparing typefaces
The 9 typefaces mentioned had represent 500 years of type design. The man and woman who rendered them all sought to achieve two goals - easy readability and an appropriate expression on contemporary aesthetics.
These typefaces have surpassed the latter goal. They have remained in use for decades - in some cases, centuries - after they were first designed, still considered a successful expression of how we think, read, write, and print.
Figure 1.3.12 The 9 type families
What is worth nothing isn't the similarities but rather the differences - the accumulation of choices that renders each unique.
Beyond the gross difference in x-height, the forms display a wealth of variety, in line weight, relative strokes widths and in feelings connect specific mood and expression.
The Rs display a range of attitudes, some whimsical, some stately, some mechanical, others calligraphic, some harmonious and some awkward.
Figure 1.3.13 Different expressions for 'a' & 'R'
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
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.
Figure 1.4.1 Univers letterform
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
Letters/ Maintaining X-Height
The x-height generally describes 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.5 X-Height
Letters/ Form/ Counterform
The space describes and often contained by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. Counterform has the same importance as the letterforms, as it helps to recognise the shape of the letters and ensure the readability of the words.
Figure 1.6 Counterform
One way to understand the form and counter of a letter is to examine them in close detail. 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.
Letters/ Contrast
The basic principles of Graphic Design apply directly to typography. 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.7 Different types of contrast by Rudi Ruegg
Lecture 7: Typo_6_Screen&Print
Typography/ Different Medium
In the past, typography was viewed as living only when it reached paper. No changes were made once a publication was edited, typeset and printed. Today, typography exists not only on paper but on a multitude of screens. Typography is not only controlled by designers as it is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and the screen itself.
Print Type Vs Screen Type
1. Type for Print
The type was designed intended for reading from print long before we read from screen. Designers need to ensure that the text is smooth, flowing, and pleasant to read.
Typefaces for print: Caslon, Garamond, Baskerville, Univers (characteristics: elegant and intellectual, highly readable at small font size)
Figure 1.8 Type for Print
2. Type for Screen
Typefaces intended for use on the web are optimised and often modified to enhance readability and performance on screen across a variety of digital environments.
Examples of Adjustments:
Taller x-height (or reduced ascenders and descenders)
Wider letterforms
More open counters
Heavier thin strokes and serifs
Reduced stroke contrast
Modified curves and angles
Another Important Adjustment
- More Open Spacing
All these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.
3. Hyperactive Link/ Link
A 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. Hyperlink are found in nearly all Web pages. Text hyperlink are normally blue and underlined by default.
4. Font Size for Screen
16-pixel text on a screen is roughly the same size as text printed in a book or magazine, when accounting for reading distance. Printed text is typically set at about 10 points for reading at a close distance (a few inches away), while at least 12 points is used for reading at arm’s length. This size is comparable to 16 pixels on most screens.
5. System Fonts for Screen / Web Safe Fonts
Each device comes with its own set of pre-installed fonts, which are largely determined by its operating system. The issue is that these fonts can vary slightly from one system to another.
To avoid these inconsistencies, using web-safe fonts in design is a reliable solution. Web-safe fonts are a small collection of fonts that are commonly supported across all major operating systems, including Windows, macOS, and Google platforms.
Each device comes with its own set of pre-installed fonts, which are largely determined by its operating system. The issue is that these fonts can vary slightly from one system to another.
To avoid these inconsistencies, using web-safe fonts in design is a reliable solution. Web-safe fonts are a small collection of fonts that are commonly supported across all major operating systems, including Windows, macOS, and Google platforms.
Example of Web Safe Fonts:
- Open Sans
- Lato
- Arial
- Helvetica
- Times New Roman
- Times
- Courier New
- Courier
- Verdana
- Georgia
- Palatino
- Garamond
6. Pixel Differential Between Devices
The text displayed on screens across different devices (PCs, tablets, phones, and TVs) varies in size and proportion due to the differing pixel densities of each screen. Even within the same category of devices, there can be significant variation.
Figure 1.8.1 Pixel Differential Between Different Devices
Statics vs Motion
1. Static Typography
Static typography has minimal characteristics for expressing words. Traditional styles, such as bold and italic offer only a small portion of the expressive potential compared to dynamic properties.
2. Motion Typography
Motion typography dramatises letterforms, allowing them to become 'fluid' and 'kinetic'. Motion graphics—particularly in the brand identities of film and television production companies—increasingly incorporate animated type.
2.0 INSTRUCTION
Figure 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
Figure 3.1.1 "Roll" inspiration from Pinterest
Figure 3.1.2 "Melt" inspiration from Pinterest
Figure 3.1.3 "Chill" inspiration from Pinterest
As I continued exploring more unique design ideas, I remembered a tip Mr. Max had given: "Don’t think inside the box—think outside of it." He encouraged us to look for synonyms of each word, reminding us that there are still many design possibilities we haven't explored yet.
Synonyms:
Jump – Loop, Bounce
Roll – Scroll, Fold
Melt – Liquefy, Soften
- Chill – Coldness, Defrost, Relax
3.2 Ideation
Figure 3.2 Sketches(left) and Final Draft(right) for ChosenWords
After getting approval for my sketches and finalising the one I wanted to digitise, I started creating my static typography in Adobe Illustrator. I didn’t encounter much difficulty with "Jump" and "Melt"; however, "Roll" and "Chill" took longer than expected.
The difficulties I faced while designing them were:
Roll – I couldn’t find a way to make the design feel satisfying at first, even after following several online tutorial videos.
Chill – I tried many different approaches before finally finding a tutorial that helped me achieve the desired effect.
Type Expression
Jump
For the word "Jump," I designed it using a simple but not simply way. Even though it’s just four letters with different gradients of layers, the outcome effectively shows the movement of the design.
Roll
The toughest part for me while working on this design was the interconnection between the letters R and L. Since I wanted to create a rollercoaster feel, the connection from the R to the L needed to be smooth and flowing. At first, I tried to make it work, but I felt it looked too messy. So, I gave myself a few days to step back, reflect, and figure out what the problem was with my technique.
Finally, while working on another task, an idea suddenly came to mind—I found the perfect way to create the connection. I used the Pen Tool to draw the curve outline, then used the Curvature Tool to shape and smooth it out.
Figure 3.2.2 Connection between letter' R'& 'l' before vs after
For the word "Melt," it was the easiest design for me to digitise. While sketching it, I already had a clear idea of how to create it, thanks to my previous experience using Adobe Illustrator. I simply typed the word "Melt," tilted it slightly on the artboard, then created outlines so I could use the Curvature Tool to extend and refine the design by adjusting the paths of the letters.
Figure 3.2.3 'Melt'
Chill
I created the design for "Chill" in a short amount of time; however, I realised that the effect I originally wanted to achieve was actually something done in Photoshop, not Illustrator. So, I kept searching for tutorial videos with a similar effect until I finally found one that showed how to create the look I wanted using the Glass Effect in Illustrator.
I created the design for "Chill" in a short amount of time; however, I realised that the effect I originally wanted to achieve was actually something done in Photoshop, not Illustrator. So, I kept searching for tutorial videos with a similar effect until I finally found one that showed how to create the look I wanted using the Glass Effect in Illustrator.
Figure 3.2.4 'Chill'
Type Expression Animation
I decided to select 'CHILL' to proceed with motion work for the next step as I felt that I could express the word clearly in a clear, simple, and direct manner.
Figure 3.2.5 "CHILL" after animated - GIF
To represent the movement of "CHILL" (frozen), I started the animation with plain text and gradually added a glass effect to each layer, creating a visual that reflects the feeling of coldness or freezing. To prevent the animation from feeling laggy, I applied the effect gradually, enhancing it little by little on each layer.
3.3 Final Outcome
Final Outcome of Static Type Expression
Figure 3.3 Final Digitalised Static Type Expression in PDF
Figure 3.3.1 Final Digitalised Static Type Expression in JPEG
Final Outcome of Type Expression Animation
Figure 3.3.2 Final Animation Type Expression GIF
4.0 PROCESS WORK FOR TEXT FORMATTING
4.1 Minor Exercise
Figure 4.1 Kerning, Tracking, & Leading Exercise
4.2 Layout Reference
During the exploration process, I focused on studying different layout styles through Pinterest. I looked into how other designers arranged text using grids, margins, and columns, and how these elements influenced readability and visual balance. This helped me understand the importance of alignment, spacing, and hierarchy in layout design. Exploring a variety of layouts gave me new ideas on how to structure my own work more effectively and creatively, especially when working directly in InDesign.
Figure 4.2 Exploration of layout design
4.3 Ideation
We were assigned to come up with 8 different layout options to choose from. After that, I decided to sketch directly in InDesign. The reason I chose to sketch straight in InDesign is because that it’s more convenient and easier to work with, as the margins and gutters are clearly visible in the required sizes. Mr. Max selected the 3rd and 5th sketches, and from those two, I chose the 3rd design as my final layout.
Figure 4.3 Digital exploration sketches
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
4.4 Final Outcome
HEAD LINE
Typeface: Bembo Std
Font/s: Bold
Type Size/s: 50pt
Leading: 36 pt
Paragraph spacing: 0
BODY
Typeface: ITC New Baskerville Std
Font/s: Roman
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 50-60 characters
Alignment: Left justified
Margins (mm): 118.533 top, 21.833 bottom, 43.4 left, 11 right
Columns: 2
Gutter: 5.6 mm
CAPTION
Typeface: Bembo Std
Font/s: Roman
Type Size/s: 36 pt
Leading: 36 pt
Paragraph spacing: 0
Figure 4.3.1 Final text-formatting layout (JPEG)
Figure 4.3.2 Final text-formatting layout (PDF)
Figure 4.3.3 Final text-formatting layout with baseline grids (JPEG)
Figure 4.3.4 Final text-formatting layout with baseline grids (PDF)
5.0 FEEDBACK
Week 1
Mr Max clearly introduced the program module information to us and assigned the homework for Task 1. He also showcased a few e-portfolios by seniors to help us better understand what we need to do for our assignments. We also learned how to create an e-portfolio in class through Mr. Max's detailed and clear instructions.
Week 2
General Feedback:
Mr. Max gave us a brief outlining the tasks we needed to complete before Week 3, right at the beginning of the class. After that, he also provided a clear and detailed tutorial on Adobe Illustrator, including shortcuts and the most efficient ways to select and use the tools.
Personal Feedback:
For the word “MELT”, I showed Mr. Max both 2D and 3D sketch designs. Since the 2D design might resemble others’ ideas, Mr. Max suggested I proceed with the 3D design instead. For the word “CHILL”, I created different sketches representing feelings like relaxation and defrosting. Since my sketches for “CHILL” and “ROLL” were not clear in conveying my initial ideas, I showed Mr. Max some references during my second consultation.
Week 3
General Feedback:
Mr. Max conducted a tutorial class on how to create motion graphic versions of our designs using Adobe Illustrator and Photoshop.
Personal Feedback:
For “MELT”, I recreated the previous design using a different approach and showed the final version to Mr. Max. He liked it and said no further changes were needed. For “JUMP”, I needed to add some shadows to make the word appear more interactive. For “CHILL”, the previous design I showed Mr. Max was more heavily edited in Photoshop. Since Mr. Max mentioned that Mr. Vinod doesn’t allow overly graphic-based designs, I looked for another way to approach it. For “ROLL”, the version I showed Mr. Max was a bit hard to read, so he suggested simplifying it to make it clearer and easier to read.
Week 4
General Feedback:
Mr. Max taught us about margins, columns, gutters, tracking, kerning, and leading by introducing us to InDesign. He also assigned us a task: we need to create 8 different outcomes (sketches) for Task 1, Exercise 2 – Text Formatting.
Personal Feedback:
I showed Mr. Max my 4 designs for Task 1, Exercise 1 – Type Expression. After he approved the designs, he suggested that I choose one of the words—ROLL, CHILL, or JUMP—for my animation.
Week 5
General Feedback:
Mr. Max gave us a tutorial on how to complete our task according to Mr. Vinod's requirements. He emphasize that the paragraph should not display any “P” symbols, except at the beginning and end. Additionally, he reminded us that each line should contain between 50–60 or 55–65 characters. He also taught us some tips on how to fix word hyphenation issues.
Personal Feedback:
I showed Mr. Max my final animated design for Task 1, Exercise 1 – Type Expression. For the task assigned last week—to come up with 8 sketches for Task 1, Exercise 2 – Text Formatting—I presented all 8 designs, and Mr. Max approved them. He also selected one design that he liked the most to be developed as the final outcome.
6.0 REFLECTIONS
6.1 Experience
Before joining the degree in Creative Media, I had some design experience through the Foundation in Design at Taylor’s College. So, compared to friends who aren’t very familiar with Adobe Illustrator and InDesign, I would say I have a slight advantage, as I’ve used both applications before. However, since I hadn’t used them in a while, I was a bit rusty.
Thankfully, Mr. Max always provides clear tutorials during class, which really help us rebuild our foundation in both Illustrator and InDesign. His feedback is also very helpful—it has been key to improving my work on each task.
Thankfully, Mr. Max always provides clear tutorials during class, which really help us rebuild our foundation in both Illustrator and InDesign. His feedback is also very helpful—it has been key to improving my work on each task.
6.2 Observation
In the first task, we were given two exercises to build a basic understanding of Illustrator and InDesign. Each exercise focused on different aspects of typography—text expression and text formatting. Text expression aimed to stimulate creativity through interpretation, while text formatting focused more on structure, alignment, and visual design principles.
Through both tasks, I learned that elements such as word design, alignment, gutter, and margin play a crucial role in shaping the overall layout in typography. Even minor changes in these elements can lead to significantly different visual outcomes and affect how the message is perceived.
Lastly, the weekly tasks and feedback have been very helpful in keeping my work on track and allowing me to clearly understand my progress each week.
Lastly, the weekly tasks and feedback have been very helpful in keeping my work on track and allowing me to clearly understand my progress each week.
6.3 Findings
Throughout this task, I came to appreciate how much thought goes into even the smallest details of typography. It’s not just about making things look good—it’s about communicating clearly and creatively at the same time. I’ve learned to balance structure with expression, and although it was challenging at times, each step helped me better understand my own design process. With guidance and feedback, I feel more confident in applying what I’ve learned moving forward.
7.0 Further Reading
Reading Typographic Design: Form and Communication opened my eyes to how powerful typography really is. Before this, I saw fonts as just design choices—but now I understand how every detail, from letter spacing to layout, actually influences how people feel and understand a message. The book broke things down in a way that was easy to grasp, and it made me reflect on how much I’ve overlooked these small but important elements in my past work.
What really stuck with me was how typography shifts depending on the medium—whether it's print, screen, or motion. It made me think more critically about how I use type in my own projects. I’ve started to pay more attention to structure and readability, and I feel more confident exploring creative possibilities while still keeping good design principles in mind. This book didn’t just teach me theory—it changed the way I look at design.
Comments
Post a Comment