Typography Task 1: Exercises

22.04.2024 - 27.05.2024 (Week 1 - Week 6)
Kiew Ting Yi (Nicole) / 0361143 / Bachelor of Design (Honours) in Creative Media
Typography
Task 1 : Exercises

Square Capitals found in Roman monuments
variety of strokes formed by reed pen held an approximate 60 degree of the perpendicular
rusty capitals - allowed more words and took less time (30 degrees instead) harder to read due to compressed - intended performance
cursive used for everyday transactions- sacrificing form for speed
lowercase was formed to write faster (uncials, ADEHMUQ)
half uncials - formal beginning of lower case
charlemagne - majuscules (uppercase) miniscule (lowercase), capitalisation and punctuation set for calligraphy for a century
guttenberg - printing press
monks used it to write history etc - books/parchment is costly
little matrices on metal to print
Jenson, Colona, Lucretius, Garamond, Plantin were examples

Figure 1.4 Hand script from the 3rd - 10th CE

1450 Blackletter- earliest printing, books for northern Europe (cloister black, goudy text)
1475 Oldstyle- lowercase forms (Caroline miniscule) migrated across Europe (Italy to England), (Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino)
1500 Italic - condensed and close-set allowing more words per page. initially on their own class type, they were cast to complement Roman forms. Since the 16th Century, virtually all text typefaces have been designed with accompanying italic forms. (no serif italics are called Obliques)
1550 Script - not appropriate in lengthy text settings, but in shorter texts it had wide acceptance. Forms now range from formal and traditional to casual and contemporary. (Kuenstler Script, Mistral, Snell Roundhand) not designed to be written in uppercase letters
1750 Transitional - a refinement of Oldstyle, achieved because of casting and printing. Thick and thin relationships exaggerated and brackets were lightened. (Baskerville, Bulmer, Century, Times New Roman)
1775 Modern - Further rationalisation of oldstyle letterforms. Serifs unbracketed, the contrast between thick and thin strokes are extreme. English versions (like Bell) aka Scotch Romans and closely resemble transitional forms (Bell, Bodoni, Caledonia, Didot, Walbaum)
1825 Square Serif / Slab Serif - originally bracketed serif, little variation in thick and thin strokes. Made for advertising / heavy commercial printing. Brackets dropped as they evolved. (Clarendon, Memphis, Rockwell, Serifa)
1900 Sans Serif - Without Serif, eliminates serifs all together. Only started wide spread in the 20th Century. Variations; Humanist forms (Gill Sans) or rigidly geometric (Futura). Some strokes are flared to have calligraphic origins like Optima. - also referred to as Grotesque and Gothic. (Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers
1990 Serif / Sans Serif - Semi Sans or Semi Serif, skirting along the boundaries between these typefaces. (Rotis, Scala, Stone)

Figure 1.5

Week 2 / Text (Part 1)

Kerning - automatically adjusting the space between letters, mainly in headlines, where letters may overlap.
Letter spacing - adding space between letters.
Tracking - includes both adding and removing space within a word or sentence, with normal, loose, and tight variations.
Loose tracking - decreases readability.
Uppercase letters are typically letter spaced because they are independent, while lowercase letters rely on counter offers for readability. Adding space to lowercase letters disrupts these counter offers, affecting readability.

Figure 1.6 Letters with kerning and without kerning

Figure 1.7 Counter form

Gray value refers to the overall visual density of text on a white page.
Flush left aligns text to the left, creating an even gray value with ragged right edges, mimicking handwriting.
Centered text balances lines symmetrically, adding a strong visual shape with ragged edges on both sides, requiring careful line breaks.
Flush right aligns text to the right, emphasizing line endings with ragged left edges, useful for captions.
Justified text aligns both left and right edges, creating even blocks but often introducing "rivers" of white space that need attention through line breaks and hyphenation.

Figure 1.8 Text Formatting

Typefaces with a larger x-height or thicker strokes appear darker on the page compared to those with smaller x-heights or thinner strokes.
Readability improves when the x-height is larger relative to the ascenders and descenders.

Figure 1.9 Anatomy of A Typeface

The goal of setting text is to facilitate easy, prolonged reading.
The type size should be large enough to be read from arm's length.
Leading, the space between lines, should typically be +2 points of the type size.
If set too tightly, it forces vertical eye movement; if too loosely, it creates distracting stripes.
Shorter lines require less leading, while longer lines need more.
Ideally, aim for 55-65 characters per line.

Fig 1.10 Leading

Samples of typefaces in various sizes provide accurate references for type, size, leading, and line length.
Text should form a field that covers a page or screen with a middle gray value rather than striped patterns.
Enlarging type to 400% on screen helps visualize the relationship between descenders of one line and ascenders of the next.

Figure 1.11 Type Specimen Book: Times Gothic

Week 3 / Text (Part 2)

Indicating Paragraphs:
Extended Paragraphs:
Pilcrow: A medieval manuscript symbol.
Paragraph Spacing: Achieves cross-alignment when matching leading and spacing.
Indentation: Matches line spacing or text point size.
Widows & Orphans:
Widows are sometimes acceptable, but orphans are not.
Widow: A short line at the end of a text column.
Orphan: A short line at the start of a new column.
Highlighting Text:
Use italics, bold, different typefaces, color changes, or colored backgrounds.
Headlines within Text:
Various subdivisions exist within chapters.

Figure 1.12 Headline within text

Week 4 / Basic

Describing Letterforms

To identify specific typefaces, understanding a letterform’s components is essential.

Figure 1.13 Letterforms

Baseline: Imaginary visual base of letterforms.
Median: Imaginary line defining the x-height.
X-height: Height of the lowercase ‘x’.
Stroke: Any line forming the letter.
Apex/Vertex: Point formed by two diagonal stems.
Arm: Short strokes off the stem.
Ascender: Stem part above the median.
Barb: Half-serif on curved strokes.
Beak: Half-serif on horizontal arms.
Bowl: Rounded form enclosing a counter.
Bracket: Transition from serif to stem.
Cross Bar: Horizontal stroke joining stems.
Cross Stroke: Horizontal stroke across stems.
Crotch: Interior space where strokes meet.
Descender: Stem part below the baseline.
Ear: Stroke extending from the main stem.
Em: Space equal to type size.
En: Half of an em.
Finial: Rounded non-serif stroke end.
Ligature: Combined character of multiple letterforms.
Link: Stroke joining bowl and loop of ‘G’.
Loop: Bowl in the descender of ‘G’.
Serif: Foot at the stroke end.
Shoulder: Curved stroke not in a bowl.
Spine: Curved stem of ‘S’.
Spur: Extension at curved and rectilinear stroke junction.
Stem: Major vertical or oblique stroke.
Stress: Orientation shown by thin stroke.
Swash: Flourish extending a stroke.
Tail: Curved diagonal stroke finishing certain letters.
Terminal: Stroke finish without a serif.
Font Elements:
Uppercase & Lowercase
Small Capitals
Uppercase & Lowercase Numerals
Italic & Roman
Punctuation & Miscellaneous Characters
Ornaments
Typeface Descriptions:
Roman & Italic
Boldface & Light
Condensed & Extended

Week 5 / Understanding

Some uppercase letters appear symmetrical at first glance, but upon closer examination, they reveal slight disproportions.
Univers typeface, the letter A has a thinner stroke on one of its stems.
These nuances contribute to crafting letterforms that are internally balanced and uniquely expressive.

Figure 1.14 Univers typeface alphabet 'A'

Figure 1.15 Letter of lowercase 'a' differences

Curved strokes in letterforms must ascend above the median or descend below the baseline to maintain the same apparent size as the vertical and horizontal strokes adjacent to them.

Figure 1.16 Curved strokes extending the lines

The counterform plays a crucial role in readability. By analyzing existing counterforms, we can better understand how to design letterforms effectively.

Figure 1.17 Counterform

Contrast can create a difference in readability.

Figure 1.18 Contrast in Typography

^ back to top

INSTRUCTIONS

TASK 1: TYPE EXPRESSION

SKETCHES

Words that are chosen: SWIM, SPARK, TIME and OPEN.

Figure 2.0 Sketches of words chosen

SWIM

TOP LEFT: supposedly an animated scene of the word like waves reaching the shore, inviting the viewer to go for a swim.
TOP RIGHT: same concept as the previous, but only the W creating waves like the ocean
BOTTOM LEFT: the font is in italic to represent the waves in water, dots at each side like the balls in pools
BOTTOM RIGHT: The "i" becomes a swimmer, with the hands moving in swimming motion.

SPARK

TOP LEFT: lower cases with serif feels very adorable to me, so I sketched it with that in mind
TOP RIGHT: the 'k' was supposed to be a party popper and throwing out the letters.
BOTTOM LEFT: same concept as a party popper, but using the 'r' only and have the confetti's coming out.
BOTTOM RIGHT: supposedly mimicking the frazzles after playing with fire crackers, with the sparks appearing and then frazzling out the pieces, negative space to show the words still.

TIME

TOP LEFT: the 'M' is supposed to mimic the middle point of the hands, with 'E' being the short hand and 'T' & 'I' being the long hand.

TOP RIGHT: Trying to mimic a digital clock by using a colon ':' to replace the 'I' in TIME, and the analog clock to replace 'M'.
BOTTOM LEFT: the 'T' and 'I' is the clock by creatively using the serifs.
BOTTOM RIGHT: supposedly expressing the word 'TIMELINE' where there will be a line and the 'TIME' is the factors underneath.

OPEN

TOP LEFT: the 'P' in OPEN is placed horizontally to mimic a key opening the lock which is 'O'.
TOP RIGHT: a half opened 'O' and 'N' in lower cases, to show the openness of the characters looking similar to each other.
BOTTOM LEFT: A door opens yet the shadow displays the word 'OPEN'.
BOTTOM RIGHT: a big 'O' covering the word open, where the big O is supposedly mimicking a hole in the wall.

^ back to top

DIGITISING & ANIMATION

Figure 2.1 Digitisation of 4 Words

Figure 2.2 Digitisation of 4 Words (PDF)

I animated the Open, by showing how an egg shakes and crack open. Leaving the O & N half.

This is the initial gif:

Figure 2.3 Initial animation for 'Open'

Process animation: 42 frames

Figure 2.4 Frames used for animation

Mr Max mentioned about his vision to express the word 'OPEN' better, so I switched to it and I clearly do see it expressing the word 'OPEN' with more clarity.

FINAL OUTCOME OF ANIMATED GIF:
(EXERCISE 1 / TYPE EXPRESSION)

Figure 2.5 Finalised animation of 'Open'

Process animation: 33 frames

Figure 2.6 Frames used for animation

TEXT FORMATTING

Kerning: The spacing between individual letter or characters that can be adjusted accordingly

Tracking: The spacing between glyphs applied to the whole text.

Figure 2.6(a) Before Kerning

Figure 2.6(b) After Kerning

TEXT FORMATTING SKETCHES:

Figure 2.7 Composition Sketches

FINAL TEXT FORMATTING LAYOUT:

HEAD LINE

Font/s: Bembo Std

Type Size/s: 72 pt

Leading: 36 pt

Paragraph spacing: 0

BODY

Font/s: Bembo Std

Type Size/s: 9 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 57

Alignment: left justified

Margins: 123 mm top, 26 mm left + right + bottom

Columns: 2

Gutter: 10 mm

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

FINAL OUTCOME FOR TASK 01:
(EXERCISE 2 / TEXT FORMATTING)

Figure 2.8 I am Helvetica 300dpi, without grid

Figure 2.9 I am Helvetica 300dpi, without grid (PDF)

Figure 3.0 I am Helvetica 300dpi, with grids

Figure 3.0 I am Helvetica 300dpi, with grids (PDF)

^ back to top

FEEDBACKS

Week 1

General Feedback: Good overall blog, when inserting pictures in the future insert Figure, Description and Date. Figure should be labeled Fig 0.0 and then only number before submissions for better efficiency.

Week 2
General Feedback: Some illustration is okay, but don't distort it into another font

Specific Feedback: Approved to digitize on Time, Open, Spark but not Swim yet. Mr Max mentions that I can digitize top left, top right and bottom left for Swim.

Week 3 (Absent)
General Feedback: As everyone hasn't gotten their Adobe accounts, animation are to be done as soon as possible.

Specific Feedback: For open, the animation can work with an O and then the O can open up then the P and E alphabets will fade in, like opening an egg

Week 4 (Absent)
General Feedback: Continue working on the animation and start on Task 1 Exercise 2

Specific Feedback: Mr Max's vision was different from mine, so I will revise for him to review, and he mentioned to change the egg opening animation.

Week 5
General Feedback: All exercises to complete by Monday 7am!

Specific Feedback: Need to work on the 6 sketch compositions for Task 1 Exercise 2, and let Mr Max choose one of them.

^ back to top

REFLECTIONS

Experience
So far this assignment has made me appreciate typography more by learning its history and its importance of existence. It's interesting to see how I explore each word to express albeit I have to admit, not being able to access my Adobe account early on was a bummer. The limitations of the fonts allowed me to feel constraints in designing- which is good practice because too many choices can also lead into art blocks. However, being in the 21st Century I do wish we could do our animation part of the exercise in a much easier way than to do it in frames, maybe because there's always a satisfaction of getting our visions expressed smoothly and clearly through technology. I hope to do better in the next following assignments and see how much more I can appreciate and express my artistic creativity through typography.

Observation

I found that tiny adjustments of kerning and text formatting can change and alter how a font looks and feel in typography. My type expression "OPEN" can feel open when I maintained a certain spacing in between the words, but feel locked when I don't do kerning, which is very interesting to me. Gutter also helps me to align my layouts better and looks more cohesive, which I'm very fond of.

Findings
Thanks to this assignment, I now know how typefaces and fonts are being created for certain brands and why some is better with lowercase and some are difficult to be legible with uppercases (e.g never using uppercase Script fonts for a title) and knowing the history, I have observed why olden book texts uses serifs (e.g Times New Roman) and how it's different these days for accessibility (e.g Calibri, Helvetica, Futura) in books. I found this assignment to be perfect for introduction to typography and to allow me to be more excited for my future upcoming tasks.

^ back to top

Search This Blog

Kiew Ting Yi (Nicole) [0361143]

Typography Task 1: Exercises