Typography - Task 1/Exercises

26.09.2023 - 24.10.2023 / Week 1 - Week 5

Siang Huey Yee / 0369549

Typography/ Bachelor of Design (Honours) in Creative Media

Task 1: Exercise 1 & Exercise 2

OUTLINE

LECTURES

INSTRUCTIONS

LECTURES

Week 1: Introduction & Briefing

Class Summary (Week 1- 26/9/2023)

Briefing about e-portfolio and Module Information Booklet

What is 'Typography'?

Typography is the arts of arranging letters and texts to makes it more visual appealing and more understandable

What is 'Type'?

Type is the style or appearance of the texts

What is 'Typeface'?

Typeface is the group of letters and characters that share the similar styles or design

What is 'Font'?

Font is the variations of a typeface, such as size and weight

Lecture Video 1: Typo-0 ~Introduction

-What is typography?

act of creating letters
creation of typefaces/type families
animation of texts
used in apps/website design, signage design, bottle labels, book, posters, movies titles, logotype and more
helps to navigating the different spaces or the objects and affect the effectiveness of the signage system
helps to present information and communicate effectively

-Typography evolved over 500 years

evolving from calligraphy to lettering and lastly evolved to typography
Calligraphy: writing styles
Lettering: draw the letters out

Figure 1.1.1: Black Letter Calligraphy

-Terminology

Fonts: Individual font or weight within typeface (e.g. Georgia Regular, Georgia Italic, Georgia Bold)
Typeface: Family of fonts or weights that share similar characteristics/styles (e.g. Georgia, Arial, Times New Roman, Didot, Futura)

Figure 1.1.2: Georgia Fonts

Figure 1.1.3: Example of typefaces

Lecture Video 2: Typo-1~ Development and Timeline

1) Early letterform development: Phoenician to Roman

Writing at first involved scratching into wet clay with sharpened sticks or carving stone with a chisel
Uppercase forms are made out of pieces of circles and straight lines as early writing required simple materials and tools

Figure 1.2.1: Phoenician to Roman

Figure 1.2.3: Phoenician Alphabets

Figure 1.2.3: Evolution of Alphabet

- Writing direction

Phoenicians and other Semitic peoples: Right to Light
The Greeks: "Boustrophedon" (how the ox ploughs)

the lines of text read alternatively from right to left and left to right
when the reading direction changed, the letterforms' orientation also changed
both the Greeks and the Phoenicians used no punctuations or letter space in their writing

Figure 1.2.4: Boustrophedon Writing Style

Figure 1.2.5: Boustrophedon Example

- Etruscan

The letterforms were inscribed by Etruscan carvers using certain types of weight change from vertical to horizontal and broadening the stroke at beginning and end

Figure 1.2.6: Augustan inscription in the Roman Forum, Rome (Late 1st Century B.C.E.)

2) Hand script from 3rd to 10th century C.E.

- Square capitals

Written letterforms that can be found in Roman monuments
Serifs have been added to the ends of the main strokes of these letterforms

Figure 1.2.7: 4th/5th Century: Square Capitals

- Rustic Capitals

Compressed version of square capitals
Two times as many words could be written on a sheet of parchment, and it required much less time to write it
More faster and easier to do, but harder to read due to their compressed nature

Figure 1.2.8: Late 3rd - Mid 4th Century: Rustic Capitals

- Roman Cursive

Written for everyday transactions
Written in cursive forms that were simplified for speed

Figure 1.2.9: 4th Century: Roman Cursive

- Uncials

Incorporated some aspects from Roman Cursive hand, especially in the shape of A, D, E, H, M, U and Q
small letters
Broad forms of uncials are more readable at small sizes than rustic capitals

Figure 1.2.10: 4th- 5th Century: Uncials

- Half- uncials

Further formalization of the cursive hand
Mark the formal beginning of the lowercase letterforms
Replete with ascenders and descenders
2000 years after the origin of the Phoenician alphabet

Figure 1.2.11: C.500: Half- uncials

- Charlemagne

The first unifier of Europe since the Romans, issued an edict to in 789 to standardize all ecclesiastical texts
The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century

Figure 1.2.12: C.925: Caloline miniscule

3) Blackletter to Gutenberg's type

With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script

In northern Europe, a condense strongly vertical letterform known as 'Blackletter' or 'textura' gained popularity
In southern Europe, a rounder more open hand which called as 'rotunda' gained popularity

Figure 1.2.13: C.1300: Blackletter (Textura)

Gutenberg's skills included engineering, metalsmithing, and chemistry. His type mold required a different brass matrix, or negative impression for each letterform.

Figure 1.2.14: C.1455: 42 line Bible, Johann Gutenburg, Mainz (1)

Figure 1.2.14: C.1455: 42 line Bible, Johann Gutenburg, Mainz (2)

Humanist script to roman type

C. 1460: Lucius Lactantius, Venice.
1472: Cardinal Jonannes Bessarion, Conrad Sweynhyem and Arnold Pannartz, Subiaco press, Rome.
1471: Quintillian, Nicholas Jenson, Venice.

Venetian type from 1500

1499: COlona, type by Farncesco Griffo
1515: Lucretius, type by Francesco Grifo

The Golden Age of French printing

1531: Illustrissimae Galliaru Helianorae, printed by Robert Estianne, Paris. Type-cast by Claude Garamond.

Dutch printing, C. 1600

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

English type from the eighteen century

1734: William Calson. Type specimen sheet, London.

Baskerville's innovations

1761: William Congreve, typeset and printed by John Baskerville, Birmingham.
1818: Giambatista Bodoni, Manuale Tipografico, Parma.

4) Text Type Classification

Typeforms- developed in response to prevailing technology, commercial needs and aesthetic trends

Figure 1.2.15a: Text Type Classification

Figure 1.2.15b: Text Type Classification

Week 2:

Class Summary (Week 2- 3/10/2023)

Lecture on Type Expression (Sketch)

Upload type expression sketches to the Facebook group to receive feedback from our lecturer, Ms. Hsin
Specific feedback from the lecturer is required to make necessary improvements for a more expressive type before proceeding with the text digitisation

Lecture Video 3: Typo-3~ Text Part 1

1) Text / Tracking: Kerning and Letterspacing

Kerning: Automatic adjustment of space between letters
Letterspacing: To add space between letters
Tracking: The addition and removal of space in a word or sentence

Figure 2.1: Kerning and Letterspacing

Figure 2.2: Normal Tracking, Loose Tracking and Tight Tracking

Designers always letterspace uppercase letters but strictly against to letterspace lowercase letters within text. This is because uppercase letterforms are drawn to be able to stand on their own whereas lowercase letterforms require the counterform created between letters to maintain the line of reading.

Figure 2.3: The differences between Normal Tracking, Loose Tracking and Tight Tracking

2) Text / Formatting Text

Flush Left: This format most closely mirrors the asymmetrical experience of handwriting

each line starts at the same point but ends wherever the last words ends
spaces between words are consistent throughout the text
allows the type to create an even gray value

Figure 2.4: Flush Left

Centered: This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line

transforms fields of text into shapes
its important to amend line breaks to avoid the text to appear too jagged

Figure 2.5: Centered

Flush Right: This format places emphasis on the end of a line as opposed to its start

can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right

Figure 2.6: Flush Right

Justified: This format imposes a symmetrical shape on the shape, like centering

achieved by expanding or reducing spaces between words and, sometimes, between letters
resulting openness of lines which can occasionally produce 'rivers' of white space running vertically through the text
required careful attention to line breaks and hyphenation

Figure 2.7: Justified

3) Text / Texture

Different typefaces suit different messages
Type with a generous x- height or relatively heavy stroke width -> produces a darker mass on the page
Its important to have sensitivity to these differences in colour for creating a successful layouts

Figure 2.8: Anatomy of a Typeface

Figure 2.9a: Differences of Typeface

Figure 2.9b: Differences of Typeface

4) Text / Leading and Line Length

Type size: Text type should be large enough to be read easily at arms length
Leading: Text that is set too tightly encourages vertical eye movement, which can cause readers to easily lose their place. Conversely, type that is set too loosely creates striped patterns, leading to distractions for the reader from the material.
Line Length: Shorter lines require less leading, while longer lines more. Keep the line length between 55-65 characters will be considered as a good rule of thumb.

Figure 2.10: Leading and Line Length

5). Text / Type Specimen

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

Figure 2.11: Sample Type Specimen Sheet

Figure 2.12: 10 Type Families

Week 3:

Class Summary (Week 3- 10/10/2023)

Lecture on Type Expression (Digitise)

Upload digitised type expression to the Facebook group for getting feedbacks from the lecturer
Modify the four digitised type expression based on the lecturer's feedback to create an animation of the word

Lecture Video 4: Typo-3~ Text Part 2

6) Text / Indicating Paragraphs

Pilcrow (¶): Indicates paragraph space, a holdover from medieval manuscripts seldom use today

Figure 3.1: Pilcrow

Line space (leading*): Ensures cross-alignment across columns of text. For example, if the line space is 12pt, then the paragraph space is 12pt.

Figure 3.2: Line space

Figure 3.3: Line space vs Leading

Standard indentation: Indent is the same size of the line spacing or the same as the point size of the text

Figure 3.4: Standard indentation

Extended paragraphs: Creates unusually wide columns of text. There can be compelling compositional or functional reasons for choosing it despite these issue.

Figure 3.5: Extended paragraphs

7) Text / Widows and Orphans

Two unpardonable gaffes: Widows and Orphans
Widows: A short line of type left alone at the end of a column of text
Orphan: A short line of type left alone at the start of new column

Figure 3.6: Example of Widow and Orphan

8) Text / Highlighting Text

Figure 3.7a: Highlighting Text (Italics)

Figure 3.7b: Highlighting Text (Bold)

Figure 3.7c: Highlighting Text (Typeface)

Figure 3.7d: Highlighting Text (Text Colour)

Figure 3.8: Example of the sans serif font (Univers) has been reduced by 0.5 to match the x-height of the serif typeface

Reduced aligned figures (numbers)or All Capital acronyms embedded in text by 0.5, to ensure visual cohesion of the text

Figure 3.9: Visual cohesion of text

Maintaining the left reading axis (right example) of the text when highlighting it with a field of colour at the back guarantees that readability is at its highest

Figure 3.10: Highlighting text by placing a field of colour at the back of the text

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 3.11: Highlighting text by placing typographic elements outside the left margin

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

Figure 3.12: Highlighting text with Quotation marks

Prime (′ ″): Not a quote (" "), abbreviation for inches and feet.

Figure 3.13: Prime and Quote

9) Text / Headline within Text

A typographer task is to make sure these heads clearly signify to the reader the relative importance within the text and to their relationship to each other
A Head indicates a clear break between the topics within a section

Figure 3.14: A Heads

B Head is subordinate to A Heads. B heads indicate a new supporting argument or example for the topic at hand.

Figure 3.15: B Heads

C Heads highlight specific facets of material within B head text. C Heads in this configuration are followed by at least an em space for visual separation.

Figure 3.16: C Heads

Hierarchy= putting together a sequence of subheads

Figure 3.17: Hierarchy in a sequence of subheads

10) Text / Cross Alignment

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

Figure 3.18: Cross Alignment 1

In this example that shown below, one line of headline type cross-align with two lines of text type, and (right, bottom left) four lines of headline type cross-align with five lines of text type

Figure 3.19: Cross Alignment 2

Week 4:

Class Summary (Week 4- 17/10/2023)

Upload the four final artworks and final GIF animation to the Facebook group for getting feedbacks from the lecturer
Proceeds to Exercise 2- Text Formatting

Lecture Video 5: Typo-2 ~ Basic

1) Basic / Describing Letterforms

Baseline: The imaginary line the visual base pf the letterforms
Median: The imaginary line defining the x-height of letterforms
X-height: The height in any typefaces of the lowercase 'x'

Figure 4.1: Baseline, Median, X-height

Stroke: Any line that defines the basic letterform

Figure 4.2: Stroke

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

Figure 4.3: Apex/Vertex

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

Figure 4.4: Arm

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

Figure 4.5: Ascender

Barb: The half-serif finish on some curved stroke

Figure 4.6: Barb

Beak: The half-serif finish on some horizontal arms

Figure 4.7: Beak

Bowl: The rounded form that describes a counter. The bowl may be either open or closed

Figure 4.8: Bowl

Bracket: The transition between the serif and the stem

Figure 4.9: Bracket

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

Figure 4.10: Cross Bar

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

Figure 4.11: Cross Stroke

Crotch: The interior space where two strokes meet

Figure 4.12: Crotch

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

Figure 4.13: Descender

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

Figure 4.14: Ear

Em/en: Originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typefaces (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: Em/en

Finial: The rounded non-serif terminal to stroke

Figure 4.16: Finial

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: Leg

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

Figure 4.18: Ligature

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

Figure 4.19: Link

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

Figure 4.20: Loop

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

Figure 4.21: Serif

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

Figure 4.22: Shoulder

Spine: The curved stem of the S

Figure 4.23: Spine

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

Figure 4.24: Spur

Stem: The significant vertical or oblique stroke

Figure 4.25: Stem

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

Figure 4.26: Stress

Swash: The flourish that extends the stroke of the letterform

Figure 4.27: Swash

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

Figure 4.28: Tail

Terminal: The self-contained finish of a stroke without 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 final)

Figure 4.29: Terminal

2) Basic / The font

- Full font of a typeface contains much more than 26 letter, 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 4.30: Uppercase

Lowercase: Lowercase letters include the same characters as uppercase

Figure 4.31: Lowercase

Small Capitals: Uppercase letterforms draw to the x-height of the typeface. Small Capitals are primarily found in serif fonts as part of what is often called expert set

Figure 4.32: Small Capitals 1

Figure 4.33: Small Capitals 2

Uppercase Numerals: Also known as lining figures, Same height as uppercase letters and are all set to same kerning width. Most used with tabular material and uppercase letters

Figure 4.34: Uppercase Numerals

Lowercase Numerals: Also known as old style figures or text figures, Set to x-height with ascenders and descenders. Best used when using upper and lowercase letterforms

Figure 4.35: Lowercase Numerals

Italic: The form in a italic refer back to 15th century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface

Figure 4.36: Italic

Figure 4.37: Italic vs Roman

Punctuation, miscellaneous characters: Miscellaneous characters can change from typeface to typeface. It's important to ensure all the characters available in a typeface before choosing the appropriate type

Figure 4.38: Punctuation, Miscellaneous characters

Ornaments: Used as flourishes in invitations or certificates, usually provided as 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.39: Ornaments

3) Basic / Describing Typefaces

Roman: Uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as ‘Book’

Italic: Named for 15th century Italian handwriting on which the forms are based. Oblique conversely is based on the roman form of typeface

Boldface: Characterised by a thicker stroke than a roman form. It can also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super

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

4) Basic / Comparing Typefaces

The gross differences in x-height
The forms display a wealth of variety, in line weight, relative stroke widths and in feeling

Figure 4.40: Comparing Typefaces

Week 5:

Class Summary (Week 5- 24/10/2023)

Upload the Text Formatting exercise to the Facebook group for getting feedbacks from the lecturer
Modify the chosen Text Formatting design based on the lecturer's feedback to finalise the text formatting exercise

Lecture Video 6: Typo-5~ Understanding

1) Letters / Understanding Letterforms

The uppercase letterforms shown below suggest symmetry, but it is not symmetrical. Two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Figure 5.1: Baskerville 'A'

The uppercase letterforms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both Baskerville that shown previously (Figure 5.1) and Univers that shown below (Figure 5.2) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Figure 5.2: Univers 'A'

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

Figure 5.3: Helvetica 'a' vs Univers 'a'

2) Letters / Maintaining x-height

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

Figure 5.4: Median and Baseline

3) Letters / Form/Counterform

Counterform (or counter): 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
How well are the counters handled determines how well the words hang together, which means that how easily we can read what’s been set

Figure 5.5: Form / Counterform 1

Most rewarding 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
It also gives a glimpse into the process of letter-making

Figure 5.6: Form / Counterform 2

4) Letters / Contrast

The simple contrasts produces numerous variations:

small + organic/ large + machined
small + dark/ large + light

Figure 5.7: Contrast

INSTRUCTIONS

Back To OUTLINE

Task 1: Exercise 1- Type Expression

After the word selection vote, six words were chosen: Chaos, Spring, Dive, Bounce, Float, and Crush. Among these six words, four needed to be selected to create type expression by using the 10 provided typefaces: Adobe Caslon Pro, Bembo Std, Bodoni Std, Futura Std, Gill Sans Std, ITC Garamond Std, ITC New Baskerville Std, Janson Text LT Std, Serifa Std, Univers LT Std. The four chosen words were Chaos, Float, Bounce and Spring.

1. Sketches

The figure below are the rough sketches drawn manually by pen and paper.

Figure 1.1a: Type Expression sketches, Week 1 (26/9/2023)

My personal favourite sketch for the word 'Chaos' was (a), and I chose to digitise (a) as it demonstrate the word 'Crush' the most by using different typefaces. My personal favourite sketch for the word 'Float' was (c), but I chose to digitise (d) as it is the most ideal sketch among others. Furthermore, my personal favourite sketch for the word 'Bounce' was (c), and I chose to digitise (c) as it demonstrate the word 'Bounce' the most by having the 'o' indicates the ball to bounce.

Design Idea Description

Chaos:

a) Utilize various typefaces and font styles to illustrate the word 'chaos' (Most ideal sketch)
b) Incorporate text distortion to evoke a chaotic vibe
c) Introduce diverse graphical elements within the word 'CHAOS' to convey the disorder of the pattern
d) Some line of the text was being erased to create confusion within the words

Float:

a) 'O' and 'T' are floating which to illustrate the word 'float'
b) All the words are floating different angle
c) The words are floating more and more higher to create a slanting style
d) 'L' was in charge to be a holder of 'o' and 'a' for them to float (Most ideal sketch)

Bounce:
- a) The words are design in a slightly inverted 'U' shape to create bouncy style of the word
- b) 'E' was designed to bounce away from the other words
- c) 'o' was designed to bounce upwards from the other words (Most ideal sketch)
- d) 'O', 'N'and 'E' was designed to have slightly higher baseline than 'B', 'U' and 'C'
Spring:

a) Added graphical elements which is the flower on the letter 'S', 'i' and 'g'
b) Added graphical element which is the leaf under the text 'SPRING'
c) Added graphical elements to indicate trees by adding leaf on the letter 'S', flower on the letter 'R' and roots on the letter 'G'
d) Added graphical elements such as flower, butterfly and leaf on the letter 'p', 'i' and 'g' respectively

Word chosen 'Spring' was replaced by 'Crush':

Figure 1.1b: Type Expression sketches, Week 1 (26/9/2023)

My personal favourite sketch for the word 'Crush' was (a), and I chose to digitise (a) which it demonstrate the word 'Crush' the most.

Design Idea Description

Crush:

a) The letter 'U' appears to be compressed by the surrounding words, achieved through the use of a light condensed font. (Most ideal sketch)
b) The letter 'C' employs an Extra Bold font to signify its substantial size, effectively overpowering the other words.
c) A Bold Extra Condensed font is chosen to emphasize the compression of the text.
d) 'C' and 'H' are designed to visually crush the letters in the word 'R', 'U', 'S', with 'C' and 'H' using an Ultra font and 'R', 'U', 'S' adopting a Light Condensed font.

2. Digitisation

The figure below are the digitised texts by using Adobe illustrator.

Figure 1.2a: Type Expression Digitisation, Week 2 (3/10/2023)

On Week 3, feedback session from the lecturer is done which I was recommended to enhance the presentation of the word 'Chaos' by adjusting its size or placement. Besides, I was suggested to maintain the letter 'L' original shape without extending the line below, while allowing the letters 'o' and 'a' to have upper baselines distinct from the other letters for the word 'Float' while 'Bounce' was well executed. Lastly, for the word 'Crush' the height of the letter 'U' was recommended to adjust for aligning with the other letters to avoid it being too abrupt.

Final Type Expressions

Figure 1.2b: Type Expression Digitisation (Modified Version)- JPEG, Week 3 (10/10/2023)

Figure 1.2c: Final Type Expression- PDF, Week 3 (10/10/2023)

3. Animation

Figure 1.3: Type GIF animation, Week 3 (10/10/2023)

Task 1: Exercise 2- Text Formatting

In this Exercise 2, we are required to create one layout that address different areas within text formatting such as type choice, type size, leading, line-length, paragraph spacing, forced line-break, alignment, kerning, widows and orphans and cross-alignment. The objective of this task is to enhance our skills and capability in spatial arrangement and information hierarchy by using Adobe InDesign.

1. Kerning and Letterspacing (Lecture Video: Text Formatting 1:4)

The figures shown below are my name with and without kerning and tracking by using the different 10 typefaces which is the Adobe Caslon Pro, Bembo Std, Bodoni Std, Futura Std, Gill Sans Std, ITC Garamond Std, ITC New Baskerville Std, Janson Text LT Std, Serifa Std, Univers LT Std.

Figure 2.1: Without Kerning, Week 4 (17/10/2023)

Figure 2.2: With Kerning, Week 4 (17/10/2023)

2. Layouts (Lecture Video: Text Formatting 2:4, 3:4, 4:4, 4:4A)

The figures below are my two attempts for the text formatting layouts.

Figure 2.3: Layout 1, Week 4 (17/10/2023)

HEAD

(Headline)

Font/s: Bembo Std (Extra Bold)
Type Size/s: 12 pt, 32 pt
Leading: 14.4 pt, 34.4 pt
Paragraph spacing: -

(Byline)

Fonts: Univers LT Std (65 Bold Oblique)
Type Size/s: 12 pt
Leading: 14.4 pt
Paragraph spacing: -

BODY
Fonts: Univers LT Std (55 Roman)
Type Size/s: 9.2 pt
Leading: 11.2 pt
Paragraph spacing: 11.2 pt
Characters per-line: 56 characters
Alignment: Left aligned

Margins: 12.7 mm top, 12.7 mm left, 12.7 mm right, 50 mm bottom
Columns: 4
Gutter: 5 mm

Figure 2.4: Layout 2, Week 4 (17/10/2023)

HEAD

(Headline)

Font/s: Bembo Std (Extra Bold)
Type Size/s: 33 pt
Leading: 39.6 pt
Paragraph spacing: -

(Byline)

Fonts: Bembo Std (Semibold Italic)

Type Size/s: 12 pt

Leading: 14.4 pt
Paragraph spacing: -

BODY
Font/s: Bembo Std (Regular)
Type Size/s: 9 pt
Leading: 11.2 pt
Paragraph spacing: 11.2 pt
Characters per-line: 60 characters
Alignment: Left aligned

Margins: 12.7 mm top, 12.7 mm left, 12.7 mm right, 50 mm bottom
Columns: 4
Gutter: 5 mm

Final Layout

During Week 5, the lecturer provided feedback, suggesting that Layout 2 is a slightly better option than Layout 1. I was advised to adjust the margins (top, left, right, and bottom) and align the paragraphs with the picture on the same line.

Figure 2.5: Final Layout (Without grid)- JPEG, Week 5 (24/10/2023)

Figure 2.6: Final Layout (With grid)- JPEG, Week 5 (24/10/2023)

Figure 2.7: Final Layout (Without grid)- PDF, Week 5 (24/10/2023)

Figure 2.8: Final Layout (With grid)- PDF, Week 5 (24/10/2023)

HEAD

(Headline)

Font/s: Bembo Std (Extra Bold)
Type Size/s: 33 pt
Leading: 39.6 pt
Paragraph spacing: -

(Byline)

Fonts: Bembo Std (Semibold Italic)

Type Size/s: 12 pt

Leading: 14.4 pt
Paragraph spacing: -

(Caption for Picture)

Fonts: Bembo Std (Semibold Italic)

Type Size/s: 9 pt

Leading: 10.8 pt
Paragraph spacing: -

BODY
Font/s: Bembo Std (Regular)
Type Size/s: 9 pt
Leading: 11.2 pt
Paragraph spacing: 11.2 pt
Characters per-line: 60 characters
Alignment: Left aligned Margins: 15 mm top, 18 mm left, 18 mm right, 15 mm bottom
Columns: 4
Gutter: 5 mm

FEEDBACK

Back To OUTLINE

Week 2- Exercise 1- Type Expression (Sketches)

Specific Feedback:

- Chaos:
1 a) The most ideal expression sketch.

1b), c), d) Too much graphic element and distortion of the type.

- Float:

2d) The most ideal text expressions sketch as it describes the word 'float' the most.

- Bounce:

3c) The most ideal text expression sketch, but the additional graphic element such as the arrow should be reconsidered and the letter 'o' placement should be reconsidered.

-Spring:

4a), b), c), d) Too much additional graphical elements.

General Feedback:

I should add description for my sketches. Additionally, I should update my e-portfolio for the reflection and further reading in weekly basis as further reading helps to strengthen our knowledge about typography and have more understanding regards the tasks.

Week 3- Exercise 1- Type Expression (Digitisation)

Specific Feedback:
- Chaos: The text have already used various typefaces, but it need to enhance the presentation of the word 'Chaos' by adjusting its size or placement.

- Float: The letter 'L' can maintain its original shape without extending the line below, while allowing the letters 'o' and 'a' to have upper baselines distinct from the other letters.

- Bounce: Well executed.

- Crush: The height of the letter 'U' should be adjusted to align with the other letters to avoid it being too abrupt.

General Feedback:

I should update reflection and further reading on my e-portfolio.

Week 4- Exercise 1- Final four artworks and Final GIF animation

Specific Feedback:

Both of the final four artworks and GIF animation looks fine.

General Feedback:

I should update further reading on my e-portfolio.

Week 5- Exercise 2- Text Formatting

Specific Feedback:

To align the paragraph with the picture, I should make sure they are on the same line.

General Feedback:

I should ensure that the paragraphs are grouped together, and the text is aligned with the baseline grid.

REFLECTIONS

Back To OUTLINE

Experience

While completing this exercise 1, I learned many new things, particularly about typography. In the beginning weeks, we were tasked with sketching our own ideas for type expression by using the given 10 typefaces. Honestly, it was quite challenging, as we were limited to these 10 typefaces, and I aimed to ensure my design ideas differed from those of my classmates. Furthermore, I received valuable feedback from our lecturers, Ms. Hsin and Mr. Vinod, which greatly contributed to the improvement of my work. While completing exercise 2, which is the text formatting exercise, I found it challenging as well because I faced problems while formatting the text, such as the font size not fitting within the margins and columns. I later solved it by adjusting the size of the top, bottom, left, and right margins. Hence, this exercise was a good practice for the students to enhance our skills and capabilities in spatial arrangement and information hierarchy.

Observations

Throughout this exercise, I have observed that excessive use of graphical elements should be avoided when illustrating the text. It is recommended to make use of minimal graphical elements, with an emphasis on demonstrating type expression through alignment to convey text hierarchy, or through the utilization of various typefaces, type sizes, kerning, and letterspacing to convey the text's expression.

Findings

In the realm of typography, I've come to realize that it plays a ubiquitous role in our lives, extending to applications and website design, signage, bottle labels, books, posters, movie titles, logotypes, and various other mediums. Typography serves as a powerful tool and medium that assists us in presenting information and facilitating effective communication.