Typography - Task 1 : Exercise 1 & 2

29/09/2023 - 27/10/23 (Week 1 - Week 5)

Andrea Choo Qin Hui (0366959)

Typography / Bachelor of Design (Hons) in Creative Media

Task 1 : Exercise 1 & 2

LECTURES

Week 2: (Typo 1 Development)

Introduction:

Typography refers to the design and arrangement of text in a

visually appealing and readable manner.

- It is important in many different visual communication media such as print

materials, website, ads & more

Letterings includes individually hand-drawing or creating each letter,

frequently with an emphasis on aesthetics and visual appeal.

- It is used on a variety of visual communication mediums, such as greeting

cards, posters, signage & more

Calligraphy focuses on elegant handwriting as a visual art form.

- It requires using a delicate touch to craft expressive typography that is both

attractive & fun

Font is the full set of characters in a certain style and size that make up a

typeface's visual representation.

- It is a technique for displaying text that is both readable and aesthetically

beautiful

Typeface refers to a particular alphabet's layout, which may include

characters, digits & symbols.

- Are an essential component of typography and are important for visual

communication

Development / Timeline of Typography:

Early Letterform Development (Phoenician ➞ Roman)

Writing at first involved scratching with a sharpened stick into wet clay or using a chisel

to carve into stone.

Figure 1.1 Phoenicians Votive stele Carthage (09/10/2023)

Figure 1.2 Evolution from Phoenician Letter (09/10/2023)

The difference in Phoenicians and Greeks are that Phoenicians write from left to

right whereas the Greeks write from left to right; in a style called Boustrophedon

(How the Ox Ploughs). The Greeks' letterforms' orientation was altered as they

switched the direction of reading. However, the thing both Phoenicians and Greeks

have in common is that both did not use letter space or punctuations!

Figure 1.3 the Greeks' Writing Style "Boustrophedon" (09/10/2023)

Before inscribing the letterforms, Etruscan (then the Romans) carvers will trace the

letters in a slab of stone to reduce mistakes as marble is expensive. Based on the

carvers' set of skills and as a result of that, all the letterforms and letters are different

which can be seen today in all the different types of fonts available.

Figure 1.4 Augustan Inscription in the Roman Forum, Rome (09/10/2023)

Figure 1.5 Evolution from Phoenician to Roman (09/10/2023)

Hand-Script from 3rd to 1oth Century C.E

Square Capitals have written versions that can be found in Roman

Monuments.

- Serifs have been added to the ends of the major strokes

- The reed pen was held at an angle of around 60° from perpendicular to

provide the variation of stroke width

Figure 1.6 4th or 5th Century: Square Capitals (09/10/2023)

Rustic Capitals are a compressed version of Square Capitals which could fit

twice as many words on a piece of paper and required much less time to write.

- The pen or brush was held at an angle of approximately 30° off the

perpendicular

Figure 1.7 Late 3rd or 4th Century: Rustic Capitals (09/10/2023)

Both Square and Rustic Capitals were generally set aside for documents

with a specific purpose in mind.

- Most routine transactions, on the other hand were usually written in cursive

which enabled faster processing of paperwork

Figure 1.8 4th Century: Roman Cursive (09/10/2023)

Uncials incorporated some aspects of the Roman cursive hand, especially

in the shape of the A, D, E, H, M, U and Q.

- 'Uncia' in Latin signifies a twelfth part of something; hence, some experts

suggest that Uncials pertain to letters that are on inch (one twelfth of foot) in

height

- Would be more precise to consider Unicals as small letters

- Compared to Rustic Capitals, Uncials are easier to read at smaller sizes due

to their broad forms

Figure 1.9 4th to 5th Century: Unicals (09/10/2023)

Half-Uncials are a further formalisation of the cursive hand and it marks the

formal beginning of lowercase letterforms.

- 2000 years after the origin of the Phoenician alphabet

Figure 1.10 C. 500: Half-Uncials (09/10/2023)

Charlemagne, who is often regarded as the first unifier of Europe since the

Romans, issued an edict in 789 with an intention of standardising all

ecclesiastical texts.

- This task was entrusted to Alcuin of York

- The monks transcribed the texts using both majuscules (uppercase letters),

miniscule (lowercase letters) , capitalisation and punctuation

- This technique defined the standard for calligraphy for a century

Figure 1.11 Charlemagne (09/10/2023)

Figure 1.12 Alcuin of York (09/10/2023)

Figure 1.13 C. 925 Caloline Miniscule (09/10/2023)

Blackletter to Gutenberg's Type

Following the dissolution of Charlemagne's empire, regional adaptations of Alcuin's

script emerged. Blackletter or Textura is a condense strongly vertical letterform

which gained popularity in Europe. However, in the South, 'Rotunda' gained popularity

for being a rounder more open hand. The humanistic script in Italy is based on

Alcuin's lowercase letters.

Figure 1.14 C. 1300: Blackletter (Texture) (09/10/2023)

Gutenberg was skilled in engineering, metalsmithing and chemistry. He gathered

them all to create pages that closely imitated the craftsmanship of the scribe's

hand — Blackletter of Northern Europe. The production of this particular type

mould necessitated the use of distinct brass matrices or negative impressions for each

individual letterform.

Figure 1.15 Johann Gutenberg (09/10/2023)

Figure 1.16 C. 1455: 42 Line Bible, Johann Gutenberg, Mainz (09/10/2023)

Development of Typefaces in Different Regions

Humanist Script to Roman Type

- C. 1460: Lucius Lactantius, Venice

- 1472: Cardinal Johannes Bessarion, Conrad Sweynheym and Arnold

Pannartz, Subiaco press, Rome

- 1471: Quintilian, Nicholas Jenson, Venice

Venetian Type from 1500

- 1499: Colona, type by Francesco Griffo

- 1515: Lucretius type by Francesco Griffo

The Golden Age of French Printing

- 1531: Illustrissimae Galliaru reginae Helianorae, printed by Robert

Estianne, Paris. Type-cast by Claude Garamond

Dutch Printing, C. 1600

- 1572: Polygot Bible (Preface). Printed by Christophe Plantin, Antwerp

English Type from the Eighteenth Century

- 1734: William Caslon. Type specimen sheet, London

Baskerville's Innovation

- 1761: William Congreve, typeset and printed by John Baskerville,

Birmingham

19th Century Types ➞ The first Square Serifs ➞ Early twentieth-

century San Serif (1923 Bauhaus, Moholy-Nagy, 1959 Muller-

Brockman)

Text Type Classification

Figure 1.17 Text Classification (09/10/2023)

Week 3: (Typo 3 Text P1)

Tracking: Kerning & Letterspace:

Kerning pertains to the automatic adjustment of the space between letters.

- It is commonly confused with 'letterspacing'

Letterspace means adding space between the letters.

Tracking is the process of adding and removing spaces within a word or

sentence.

Figure 2.1 Kerning and Letterspace (16/10/2023)

Figure 2.2 Normal Tracking, Loose Tracking & Tight Tracking (16/10/2023)

Formatting Text

Flush Left: The following arrangement most accurately emulates the uneven feel of

handwriting. Every line begins at the same location and finishes when the

final word on the line does. Consistent word spacing across the text

enables the type to produce an even gray value.

Figure 2.3 Flush Left (16/10/2023)

Centered: This format enforces symmetry on the text by giving each line's ends

equal weight and value. It gives otherwise non-graphical content a

pictorial appeal by converting text fields into shapes. Adjusting line

breaks is crucial to prevent the text from seeming overly jagged because
centered type makes such a strong shape on the page.

Figure 2.4 Centered (16/10/2023)

Flush Right: This format emphasises a line's finish rather than its beginning. it can be

helpful in circumstances (such as captions) when there may be

uncertainty about the relationship between the text and image if there

isn't a clear direction.

Figure 2.5 Flush Right (16/10/2023)

Justified: Similar to centering, this format forces the text to take on a symmetrical

shape. It is accomplished by changing the amount of space between letters

and sometimes between words. Occasionally, 'rivers' of white space may

appear as a result of the lines' consequent openness, running vertically

through the text. To fix this issue whenever feasible, close attention to line

breaks and hyphenation is needed.

Figure 2.6 Justified (16/10/2023)

Texture

It's critical to comprehend the written feel of various typefaces. Various fonts work well

for various messages. A skilled typographer must be able to choose which font best

conveys the intended message.

Figure 2.7 Anatomy of a Typeface (16/10/2023)

A key element of successful layout design is that type with a relatively generous x-

height or relatively heavy stroke width creates a darker mass on the page than type with

a comparatively smaller x-height.

Figure 2.8 Different Typefaces & Grey Values (16/10/2023)

Leading & Line Length

Type Size: Text should be readable at arm's length with appropriate size.

Figure 2.9 No Leading on the Left & Too Much Leading on the Right (16/10/2023)

Leading: Overly tight writing stimulates vertical eye movement, making it

easy for a reader to lose their place.

- Too loosely set type results in striped patterns that draw the reader's

attention away from the content at hand

Line Length: Line length and type size influence appropriate leading for text

- Shorter lines require less leading, while longer lines require more reading

- Maintaining line length between 55-56 characters is recommended for

optimal reading

Type Specimen Book

A type specimen book provides accurate reference for typefaces, size, leading, and line

length, enabling users to make a reasonable choice of typeface based on printed pages

and screen reading.

Figure 2.10 Sample Type Specimen Sheet (16/10/2023)

Compositional Requirement: A field that can fill a page or a screen should

be created using text. Imagine that your ideal

text is not a succession of stripes (on the

right), but rather a middle gray value (on the

left).

Figure 2.11 Middle Grey Value (16/10/2023)

Week 4 (Typo 4 Text P2):

Indicating Paragraphs

Pilcrow (¶): The remnants of medieval manuscripts.

- Seldom used today

Figure 3.1 Example of Pilcrow (18/10/2023)

Line Space (Leading*): It ensures that the text is aligned across all columns.

- If line space is 12pt, then the paragraph space is also 12pt

Figure 3.2 Example of Line Space (Leading) between paragraphs (18/10/2023)

Figure 3.3 Line Space vs Leading (18/10/2023)

Standard Indentation: The indent is the same size as the text's point size or

line spacing.

Figure 3.4 Example of Standard Indentation (18/10/2023)

Extended Paragraphs: Produces very large text columns.

- There may be strong functional or compositional justifications for selecting it

Figure 3.5 Example of Extended Paragraphs (18/10/2023)

Widows & Orphans

Widow: A single short line of type at the end of a column of text.

Orphan: A single short line of a type at the start of a column of text.

Figure 3.6 Examples of Widows and Orphans (18/10/2023)

Highlighting Text

Figure 3.7 Examples of Highlighting Text Pt.1 (18/10/2023)

Figure 3.8 Examples of Highlighting Text Pt.2 (18/10/2023)

Figure 3.8 Example of Sans Serif Font (18/10/2023)

Figure 3.9 Highlighting Text (18/10/2023)

Maintaining the left reading axis (right example on Figure 3.9) of the text when

highlighting text by inserting a field of colour at the back of the text promotes

readability at its best.

Figure 3.10 Examples of Typographic Elements (18/10/2023)

To retain a strong reading axis, certain typographic elements must occasionally be

placed outside the left margin of a column of type (extending rather than indenting).

Figure 3.11 Prime and Quote (18/10/2023)

Like bullets, question marks can form a distinct imprint, breaking the left reading axis.

Headline within Text

A Head denotes a distinct division between the topics inside a section. A Heads are set

larger than the text, in small caps and in bold.

Figure 3.12 A Heads (18/10/2023)

B Heads denote a new supporting argument or example for the current topic. As a

result, they should not be as disruptive to the text as A Heads are. Here the B Heads are

shown in small caps, italic, bold serif and bold san serif.

Figure 3.13 B Heads (18/10/2023)

Although not typical, C Heads highlight distinct aspects of material within B Head

text. They do not significantly disrupt the reading flow. These C Heads are shown in

small caps, italics, serif bold, and san serif bold, just like the B heads.

Figure 3.14 C Heads (18/10/2023)

Figure 3.15 Hierarchy of Subheads (18/10/2023)

Cross Alignment

Cross-aligning headings and captions with text type strengthens the page's

architectural sense — its structure — while articulating the complementary vertical

rhythms.

Figure 3.16 Example of Cross Alignment Pt.1 (18/10/2023)

One line of headline type crosses two lines of text type, and four lines of headline type cross

five lines of text type (right; bottom left).

Figure 3.17 Example of Cross Alignment Pt.2 (18/10/2023)

Week 5 (Typo 2 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 4.1 Describing Letterforms (22/10/2023)

Stroke: Any line that defines the basic letterform

Figure 4.2 Example of Stroke (22/10/2023)

Apex / Vertex: The point created by joining two diagonal stems (apex above &

vertex below)

Figure 4.3 Example of Apex & Vertex (22/10/2023)

Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or

inclined upward (K. Y)

Figure 4.4 Example of Arm (22/10/2023)

Ascender: The portion of the stem of a lowercase letterform that projects above the median

Figure 4.5 Example of Ascender (22/10/2023)

Barb: The half-serif finish some some curved stroke

Figure 4.6 Example of Barb (22/10/2023)

Beak: The half-serif on some horizontal arms

Figure 4.7 Example of Beak (22/10/2023)

Bowl: The rounded form that describes a counter, the bowl may be either

opened or closed

Figure 4.8 Example of Bowl (22/10/2023)

Bracket: The transition between the serif and the stem

Figure 4.9 Example of Bracket (22/10/2023)

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

Figure 4.10 Example of Cross Bar (22/10/2023)

Cross Stroke: The horizontal stroke in the letterform that joins two stems

together

Figure 4.11 Example of Cross Stroke (22/10/2023)

Crotch: The interior space where two stokes meet

Figure 4.12 Example of Crotch (22/10/2023)

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

below the baseline

Figure 4.13 Example of Descender (22/10/2023)

Ear: The stroke extending out from the main stem or body of the letterform

Figure 4.14 Example of Ear (22/10/2023)

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

Figure 4.15 Example of Em/En (22/10/2023)

Finial: The rounded non-serif terminal to a stroke

Figure 4.16 Example of Finial (22/10/2023)

Leg: Short stroke off the stem of the letterform, either at the bottom of the

stroke (L) or inclined downward (K,R)

Figure 4.17 Example of Leg (22/10/2023)

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

Figure 4.18 Example of Ligature (22/10/2023)

Link: The stroke that connects the bowl and the loop of a lowercase G

Figure 4.19 Example of Link (22/10/2023)

Loop: In some typefaces, the bowl created in the descender of the lowercase G

Figure 4.20 Example of Loop (22/10/2023)

Serif: The right-angled or oblique foot at the end of the stroke

Figure 4.21 Example of Serif (22/10/2023)

Shoulder: The curved stroke that is not part of a bowl

Figure 4.22 Example of Shoulder (22/10/2023)

Spine: The curved stem of the S

Figure 4.23 Example of Spine (22/10/2023)

Spur: The extension the articulates the junction of the curved and rectilinear

stroke

Figure 4.24 Example of Spur (22/10/2023)

Stem: The significant vertical or oblique stroke

Figure 4.25 Example of Stem (22/10/2023)

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

forms

Figure 4.26 Example of Stress (22/10/2023)

Swash: The flourish that extends the stroke of the letterform

Figure 4.27 Example of Swash (22/10/2023)

Tail: The curved diagonal stroke at the finish of certain letterforms

Figure 4.28 Example of Tail (22/10/2023)

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 ball or a teardrop (see finial)

Figure 4.27 Example of Terminal (22/10/2023)

The Font

Uppercase: Capital letters, including certain accented vowels,

- the cedilla

- n tilde

- a/e & o/e ligatures

Figure 4.28 Example of Uppercase Letters (22/10/2023)

Lowercase: Lowercase letters include the same characters as uppercase

Figure 4.29 Example of Lowercase Letters (22/10/2023)

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

Figure 4.30 Example of Small Capitals (22/10/2023)

Uppercase Numerals: Same height as uppercase letters and are set to the

same kerning width

- Best used with tabular material or in any situation

that calls for uppercase letters

- Also called Lining Figures

Figure 4.31 Example of Uppercase Numerals (22/10/2023)

Lowercase Numerals: Are set to x-height with ascenders and descenders

- Best used when ever you would use upper and

lowercase letterforms

- Also known as Old Style Figures or Text Figures

Figure 4.32 Example of Lowercase Numerals (22/10/2023)

Italic: The forms in an italic refers back to fifteenth century Italian

cursive handwriting

- Oblique are typically based on the roman form of the typeface

Figure 4.33 Example of Italics (22/10/2023)

Figure 4.33 Italic vs Roman (22/10/2023)

Punctuation, Miscellaneous Characters: Can change from typeface to

typeface

- important to be acquainted

with all the characters before

you choose the appropriate

type for a particular job

Figure 4.34 Example of Punctuation & Miscellaneous Characters (22/10/2023)

Ornaments: Used as flourishes in invitations or certificates

- 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 4.35 Example of Ornaments (22/10/2023)

Describing Typefaces

Figure 4.36 Describing Typefaces (22/10/2023)

Roman: Uppercase forms are derived from inscriptions of Roman Monuments

- A slightly lighter stroke in roman in known as 'Book'

Figure 4.37 Roman Typeface (22/10/2023)

Italic: Named for the fifteenth century Italian handwriting on which the forms

are based

- Oblique conversely are based on roman form of typeface

Figure 4.38 Italic Typeface (22/10/2023)

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

Figure 4.39 Boldface Typeface (22/10/2023)

Light: A lighter stroke than the roman form

- Even lighter strokes are called 'thin'

Figure 4.40 Light Typeface (22/10/2023)

Condense: A version of the roman form

- Extremely condense styles are called 'compressed'

Figure 4.41 Condense Typeface (22/10/2023)

Extended: An extended variation of a roman font

Figure 4.42 Extended Typeface (22/10/2023)

Comparing Typefaces

The 10 typefaces mentioned below represent 500 years of type design. The men and

women who rendered them all sought to achieve two goals: easy readability and an

appropriate expression of contemporary esthetics

Figure 4.43 Comparing Typeface pt1 (22/10/2023)

Beyond the gross differences in x-height, the forms display a wealth of variety, in line

weight, relative stroke widths and in feeling. The Rs below display a range of attitudes,

some whimsical, some stately, some mechanical, others calligraphic, some harmonious

and some awkward.

Figure 4.44 Comparing Typeface pt2 (22/10/2023)

Week 6 (Typo 5 Understanding):

Understanding Letterforms

Although, the uppercase letterforms suggest symmetry but in fact it is not

symmetrical. The Baskerville stroke form (below) features two distinct stroke weights

that are easily visible, but what's even more intriguing is that each bracket that joins the

serif to the stem has a distinctive arc.

Figure 5.1 Uppercase Baskerville Font (28/10/2023)

Although, the uppercase letterforms may appear symmetrical, but a close examination

shows that the width of the left slope is thinner than the right.

Figure 5.2 Uppercase Univers Font (28/10/2023)

A good way to illustrate the complexity of each individual letterform is to look at the

lowercase "a" in two sans-serif designs that appear to be similar: Univers and Helvetica.

There is an obvious contrast in character between the two letterforms when one

compares how their stems terminate and how their bowls meet the stems.

Figure 5.3 Lowercase Univers (left) vs Helvetica (right) (28/10/2023)

Figure 5.4 Comparing Univers vs Helvetica (28/10/2023)

Maintaining X-Height

X-height generally describe the size of the lowercase letterforms and should keep in

mind that the curved strokes, such in 's', must rise above the median (or sink below the

baseline) in order to appear to be the same size as the vertical and horizontal strokes

they adjoin.

Figure 5.5 Example of Curved Strokes (28/10/2023)

Figure 5.6 Example of being above Median & below Baseline (28/10/2023)

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. The latter is

particularly and important concept when working with letterforms like lowercase 'r'

that have no counters per se.

Figure 5.7 Form and Counterform (28/10/2023)

One of the most rewarding way to understand the form and counter of a letter is to

examine them in close detail. The examinations also give a clear understanding of how

form and counter are balanced as well as a tangible sense of letterform's distinctive

qualities.

Figure 5.8 Helvetica Black (left) vs Baskerville (right) (28/10/2023)

Contrast

Typography is directly related to Graphic Design principles. Based on a format created

by Rudi Ruegg, there are several examples of contrast—the most powerful dynamic in

design—applied to type.

The simple contracts produces numerous variations: small + organic/large + machined;

small + dark/large + light, etc.

Figure 5.9 Helvetica Bold (left) vs Baskerville (right) (28/10/2023)

Figure 5.10 Contrast in Typography (28/10/2023)

Week 7 (Typo 6 Screen & Print):

Typography in Different Medium

In the Past: Typography was viewed as living only when it reached paper. once a

publication was edited, typeset and printed, 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 fonts, 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

1. Type For Print

Type was designed intended for reading from print long before we read from

screen. Designers have a responsibility to make sure that the text is smooth, flowing

and pleasant to read.

Most Common typeface: Calson, Garamond, Baskerville

- Elegant & intellectual but also highly readable when font size

is small

- Versatile, easy-to-digest classic typeface

Figure 6.1 Dated Example of of Type for Print (03/11/2023)

Figure 6.2 Newer Example of of Type for Print (03/11/2023)

2. Type For Screen

Typefaces intended for use on the web are optimised and often modified to enhance

readability and performance onscreen in a variety of digital environments.

This can include: taller x-height, wider letterforms, more open counters, heavier thin

strokes and serifs, reduced stroke contrast, as well as modified curves and angles for

some designs, more open spacing.

All these factors serve to improve readability in the non-print environment (web, e-

books, e-readers & mobile devices)

3. Hyperactive Link / Hyperlink

A word, phrase, or image that can be clicked to navigate to a new document or section

within the one you are currently viewing is called a hyperlink. Almost every webpage

has hyperlinks that let visitors go from one page to another. Hyperlink texts are usually

blue and underlined by default.

4. 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. Text on a screen are typically set at about 10 points,

but if you were to read it at arm's length you would want at least 12 points which is

about the same size as 16 pixels on most screens.

5. System Fonts for Screens / Web Safe Fonts

Each device comes with its own pre-installed font selection, which is based largely on

its operating system. Different devices will use their own systems.

If a site's design uses a font that you don't have, it's not pulling from a web-friendly

place. However, 'web safe' ones appear across all operating systems. They're a 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 6.3 Font Size on Screen (left) vs on Print (right) (03/11/2023)

6. Pixel Differential Between Devices

Even within a single device class there will be a lot of variation for example, the screen

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.

Figure 6.4 Pixel Differential Between Screens (03/11/2023)

Static vs Motion

1. Static Typography

Static Typography has minimal characteristic in expressing words for example, bold

and italic only offer a fraction of the expressive potential of dynamic properties.

Figure 6.5 Static Typography pt1 (03/11/2023)

Figure 6.6 Static Typography pt2 (03/11/2023)

2. Motion Typography

Temporal media offer typographers opportunities to 'dramatise' type, for letterforms to

become 'fluid' and 'kinetic' (Woolman and Bellantoni, 1999)

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.

Figure 6.7 Motion Typography (03/11/2023)

INSTRUCTIONS

EXERCISE

Task 1

Mr. Vinod gave us 8 words and we had to choose 4 from the following: SMOKE; SOUP;

SPOOKY; POWER; IMPACT; CRUNCH; DRUNK; FOLD. I chose SMOKE; SPOOKY;

POWER and FOLD to create type expressions with.

Sketches:

Figure 1.18 Type Expressions Sketch 1 (12/10/2023)

Figure 1.19 Type Expressions Sketch 2 (12/10/2023)

Digitalisation:

The figures below shows the process of all the words that have been chosen for the

Type Expressions exercise.

Figure 1.20 Power Digitalisation (13/10/2023)

The idea I had for POWER was to make the letter 'O' into the ON/OFF power switch.

To do that, I had to use the knife tool in Illustrator to cut off the upper part of the 'O'.

The next step was to put a line into the letter 'O' and to achieve that, I used the same

font as POWER and slid the lowercase letter 'L' onto the letter 'O'.

Figure 1.21 Smoke Digitalisation (13/10/2023)

To create the smoky effect, I used the number '3' in the same font to make it look like

actual smoke. At first, I wanted to make the opacity of SMOKE at 50% or less but it

just looked like clouds and it was kinda hard to see so I put the opacity back at 100%

which definitely looked better.

Figure 1.23 Initial Spooky Digitalisation (13/10/2023)

For SPOOKY, the initial idea was to make the letter 'O's into eyes but after seeing

everyone's' ideas in class, I realised it was overused therefore I made the 'O's into

candles instead. To make it into candles, I put the lowercase letter 'I' of the same font I

used for SPOOKY into the 'O's and drew little flames on top of the 'I' with the pencil

tool in Illustrator.

Figure 1.24 Final Spooky Digitalisation (2o/10/2023)

Mr. Vinod had given me some feedback on the digitalisation of SPOOKY. He told me

that the flame in my previous work was hardly visible and gave me his input on what I

can do to improve it. Therefore, using Mr. Vinod's ideas, I came up with this; where the

letters 'O' is the flame itself. To make the flame, I used the pen tool to draw it and then

added Gaussian and Radial Blur to the flame.

Figure 1.25 Fold Digitalisation (13/10/2023)

For FOLD, I already had an idea in my head so I didn't have to spend too long thinking

for ideas. After typing FOLD out, I used the knife tool in Illustrator to cut out the parts

I wanted to use for it to fold onto the existing text. Finally, I added drop shadow on

the folded parts to make it look more realistic in a sense.

Final Type Expression

Figure 1.26 Final Type Expression Digitalisation (20/10/2023)

Figure 1.27 Final Type Expression Digitalisation PDF (20/10/2023)

Gif Making:

For this task, Mr. Vinod told us to use the remaining time we had in our class to make a

rough gif animation using Photoshop and Illustrator for one of the type expression we

chose. Figure 2.1 was the test animation I made in the little time I had before class

ended.

Figure 2.1 Rough Animation of Spooky (18/10/2023)

Figure 2.2 Rough Animation Timeline (18/10/2023)

With the feedback I was given by Mr. Vinod, I made this gif where it looks like the

letters 'O' are going up in flames.

Final Animation GIF

Figure 2.3 Final Animation Gif (20/10/2023)

Figure 2.4 Final Animation Timeline (20/10/2023)

Task 1: Exercise 2

In this exercise, we were told to work with kerning and tracking on our name with the

10 fonts provided.

Figure 3.1 Kerning & Tracking on the right and None on the left (29/10/2023)

Figure 3.2 Both Images Overlayed to Show the Difference (29/10/2023)

After finishing that, we had to create a layout with a paragraph of text that was

provided by Mr. Vinod.

Layout #1 Layout #2

Figure 3.3 Layout #1 and Layout #2 (29/10/2023)

Layout #3

Figure 3.4 Layout #3 (29/10/2023)

Layout #1

HEAD
Font/s: Gill Sans Regular and Bold (Headline) & Gill Sans Semi Bold (Byline)
Type Size/s: 48pt (Headline) & 12pt (Byline)
Leading: 54pt (Headline) & 14pt (Byline)
Paragraph spacing: -

BODY
Font/s: Janson Text LT Std Roman
Type Size/s: 12pt
Leading: 12pt
Paragraph spacing: 2mm
Characters per-line: 82 characters
Alignment: Justify

Margins: 12.7mm (top, left, right, bottom)
Columns: 4
Gutter: 21.167mm

Layout #2

HEAD
Font/s: Gill Sans Regular and Bold (Headline) & Gill Sans Semi Bold (Byline)
Type Size/s: 70pt (Headline) & 24pt (Byline)
Leading: 84pt (Headline) & 28.8pt (Byline)
Paragraph spacing: -

BODY
Font/s: Bodoni 72 Book
Type Size/s: 12pt
Leading: 12pt
Paragraph spacing: 0.5mm
Characters per-line: 68 characters
Alignment: Justify

Margins: 12.7mm (top, left, right, bottom)
Columns: 4
Gutter: 21.167mm

Layout #3

HEAD
Font/s: Gill Sans Regular and Bold (Headline) & Gill Sans Semi Bold (Byline)
Type Size/s: 70pt (Headline) & 24pt (Byline)
Leading: 84pt (Headline) & 28.8pt (Byline)
Paragraph spacing: -

BODY
Font/s: Janson Text LT Std Roman
Type Size/s: 12pt
Leading: 10pt
Paragraph spacing: 0.2mm
Characters per-line: 67 characters
Alignment: Justify with Last Line Aligned Left

Margins: 12.7mm (top, left, right, bottom)
Columns: 4
Gutter: 21.167mm

Final Task 1: Exercise 2

Figure 3.5 Final Text Formatting (29/10/2023)

Figure 3.6 Final Text Formatting with Grid (29/10/2023)

Figure 3.7 Final Text Formatting (29/10/2023)

Figure 3.8 Final Text Formatting with Grid (29/10/2023)

HEAD
Font/s: Gill Sans Regular and Bold (Headline) & Gill Sans Semi Bold (Byline)
Type Size/s: 70pt (Headline) & 24pt (Byline)
Leading: 84pt (Headline) & 28.8pt (Byline)
Paragraph spacing: -

BODY
Font/s: Janson Text LT Std Roman
Type Size/s: 12pt
Leading: 10pt
Paragraph spacing: 0.2mm
Characters per-line: 67 characters
Alignment: Justify with Last Line Aligned Left

Margins: 12.7mm (top, left, right, bottom)
Columns: 4
Gutter: 21.167mm

FEEDBACK

Week 2

General Feedback: Use less distortion and illustration on the texts & use the fonts

given to create type expression

Specific Feedback: The word 'Spooky' had too much distortion and should imagine

the words while drawing as the given fonts

Week 3

General Feedback: Watch the lecture videos given to catch up with the other class

and add dates to the images

Specific Feedback: Use the template given to digitalise the type expressions and

should make the word 'Fold' bigger as it was too small

Week 4

General Feedback: The animations were creative

Specific Feedback: The flames in the SPOOKY gif are too small and hardly visible,

should make the letters 'O' be the flames instead

Week 5

General Feedback: Use pictures related to the paragraph of text and avoid 'rivers'

Specific Feedback: Needed space between the picture and the text in layout #1 (Use

the effect given in inDesign)

REFLECTIONS

Experience: When I first came into class I didn't know what to expect. Even in the first week, we have already received a lot of homework which made me extremely overwhelmed. Fortunately, as time passed I got used to this class and its amount of work given. I might even say that I enjoy this class as I get to explore Adobe Illustrator which I have never used before. It took me awhile to get used to Illustrator since I used Photoshop more in the past but eventually I got the hang of it.

Observation: What I realised from this class is that Typography is heavily dependent on the writer's style. Not only that, I noticed that Mr. Vinod would give feedback every week for us to improve our work, this creates a culture of continuous learning and development, also promoting a mindset of growth and improvement among the whole class. By giving feedback, Mr. Vinod has help preventing or reducing the mistakes we have made.

Findings: Typography involves the selection of fonts, typefaces and more to convey a message with emotion effectively and aesthetically. Not only that, it is the art and technique of arranging typefaces to make readable and visually appealing layout. In conclusion, what I have learnt these past few weeks are that typography is able to breathe life into texts.

Andrea Choo Qin Hui (0366959)

Search This Blog