25/09/2023 - 23/10/2023 | Week 1 - Week 5

Iman Mikudim | 0338004 | Section 1

Typography | Bachelor of Design (Hons) in Creative Media

Task 1: Exercise 1 (Type Expression) & Exercise 2 (Text Formatting)

SECTIONS

| Lectures

Lecture 1: Introduction
Lecture 2: Development/Timeline
Lecture 3: Text (Part 1)
Lecture 4: Text (Part 2)
Lecture 5: Basics
Lecture 6: Letters
Lecture 7: Typography in Different Mediums

| Instructions

Exercise 1: Type Expression
Exercise 2: Type Formatting

| Feedback

| Reflections

| Further Reading

LECTURES

Lecture 1 | Introduction

Typography is the design of typefaces and type families that can be seen and used in various fields such as animated titles, gif animations, and website designs. For over 500 years, typography has evolved from calligraphy to lettering and finally to typography.

Calligraphy: The type of writing style.

Lettering: The drawing of writings.

Typography: The art and technique of arranging type to make written language legible, readable and appealing when displayed.

Font: A font refers to the individual font or weight within the typeface (e.g. Georgia Regular, Georgia Italic, and Georgia Bold).

Typeface: A typeface refers to the entire family of fonts/weights that do NOT share similar characteristics/styles (e.g. Georgia, Arial, Times New Roman, Didot, and Futura).

Lecture 2 | Development / Timeline

1. Early letterform development: Phoenician to Roman

Fig. 1.1 Phoenicians votive stele Carthagem, Tunisia

Fig. 1.2 Evolution from Phoenician letter

Writing directions:

Phoenicians: Right to left.
The Greeks: 'Boustrophedon’ (how the ox ploughs), read alternately from right to left and left to right. *As the reading direction changed, so did the orientation of the letterforms*.

The Greeks, like the Phoenicians, did not use letter space or punctuation.

Fig. 1.3 Direction of writing for the Greeks (‘Boustrophedon’)

Fig. 1.4 Greek fragment, stone engraving (Date unknown)

A change in weight from vertical to horizontal, and the broadening of a stroke

at start and finish — carried over into the carved letterforms.

Fig 1.5 Augustan inscription in the Roman Forum, Rome

Fig 1.6 Phoenician to Roman

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

Fig. 1.7 4th or 5th century (Square capitals)

Square capitals: Written letterforms that can be found in Roman monuments. These letterforms have serifs added to the finish of the main strokes.

Fig. 1.8 Late 3rd – mid 4th century (Rustic capitals)

Rustic capitals: Compressed version of square capitals which allowed for twice as many words on a sheet of parchment and took far less time to write. Although they were faster and easier to do, they were slightly harder to read due to their compressed nature.

Fig. 1.9 4th century (Roman cursive)

Roman cursive: Written in cursive hand with simplified forms for speed and used in daily transactions. Roman cursive marked the beginning of lowercase letterforms.

Fig 1.10 4th – 5th century (Uncials)

Uncials: Incorporated some aspects of the Roman cursive hand. Uncials are one-inch-high letters. The broad forms of uncials are more readable at small sizes than rustic capitals.

Fig 1.11 C. 500 (Half-uncials)

Half-uncials: Marks the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

Fig 1.12 C. 935 (Caloline minuscule)

Caloline minuscule: Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. He entrusted this task to Alcuin of York, Abbot of St. Martin of Tours. The monks rewrote the texts using both majuscules (uppercase), minuscule, capitalization and punctuation which set the standard for calligraphy for a century.

3. Blackletter to Gutenberg’s type

Fig 1.13 C. 1300 (Blackletter) — Textura

Blackletter: With the dissolution of Charlemagne’s empire came regional variations upon Alcuin’s script. In northern Europe, a condensed strongly vertical letterform known as Blackletter or textura gained popularity. In the south, a rounder more open hand gained popularity, called ‘rotunda’. The humanistic script in Italy is based on Alcuin’s minuscule.

4. Text type classification

Fig 1.14 1450 (Blackletter)

1450 (Blackletter): The earliest printing type. Its forms were based on the hand-copying styles used in books in northern Europe at the time. (e.g. Cloister Black, Goudy Text).

Fig 1.15 1475 (Oldstyle)

1475 Oldstyle: Based upon the lowercase forms used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on Roman ruins. The forms evolved away from their calligraphic origins over 200 years, as they migrated across Europe, from Italy to England. (e.g. Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino).

Fig 1.16 1500 (Italic)

1500 (Italic): First italics were condensed and close-set, like Italian handwriting, allowing more words per page. Italics were soon cast to match Roman forms rather than their own class. Most text typefaces have italics since the 16th century.

Fig 1.17 1550 (Script)

1550 (Script): Attempts to copy engraved calligraphy. Long texts are unsuitable for this type. However, it has always been accepted in shorter applications. Forms range from formal and traditional to casual and modern. (e.g. Kuenstler Script, Mistral, Snell Roundhand).

Fig 1.18 1750 (Transitional)

1750 (Transitional): A refinement of oldstyle forms. Advances in casting and printing helped create this style. Thick-to-thin relationships were exaggerated, and brackets were lightened. (e.g. Baskerville, Bulmer, Century, Time Roman).

Fig 1.19 1775 (Modern)

1775 (Modern): This style represented a further rationalization of old-style letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes was extreme. English versions (like Bell) are also known as Scotch Romans and more closely resemble transitional forms. (e.g. Bell, Bodoni, Caledonia, Didot, Walbaum).

Fig 1.20 1825 (Square Serif/Slab Serif)

1825 (Square Serif/Slab Serif): Originally heavily bracketed Serifs with little variation between thick and thin strokes. These faces responded to the newly developed needs of advertising for heavy types in commercial printing. The brackets were removed as they evolved. (e.g. Clarendon, Memphis, Rockwell, Serifa).

Fig 1.21 1900 (Sans Serif)

1900 (Sans Serif): Eliminated Serifs altogether. First introduced by William Caslon IV in 1816 but only became widely used in the early 20th century. Variations included humanist forms (Gill Sans) and rigidly geometric styles (Futura). Occasionally, strokes were flared to suggest calligraphic origins (Optima). Sans Serif is also referred to as "grotesque" or Gothic. (e.g. Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers).

Fig 1.22 1990 (Serif/Sans Serif)

1990 (Serif/Sans Serif): This new style enlarges the notion of a family of typefaces to include both Serif and Sans Serif alphabets — and often stages between the two. (e.g. Rotis, Scala, Stone).

Lecture 3 | Text (Part 1)

1. Tracking: Kerning and Letterspacing

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

Fig 2.2 Normal tracking, loose tracking, and tight tracking

Normal tracking: The standard spacing between characters in typography, following the typeface's default settings for balanced readability.

Loose tracking: Increases the space between characters for creative or decorative text, often used in headlines or titles to achieve an open appearance.

Tight tracking: Reduces the space between characters to save space or create a more compact look, typically used sparingly to maintain readability, especially in limited space or design elements.

Note: More spacing between letters/words reduces readability in long texts. 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.

Fig 2.3 Counterform

Counterform: Black spaces in between the white letterforms. (Note: When you increase letterspacing, you are breaking the counterform which reduces the readability of that particular word/sentence).

Fig 2.4 Normal and loose tracking comparison

The text on the left image is a normal tracked paragraph and is much easier to read than the text on the right image, which has letterspacing. The counterforms have been reduced/changed, and thus reducing the text's readability.

Fig 2.5 Tight tracking

The image above shows the paragraph spacing after kerning, which has reduced the counterform to the point where the words are more difficult to decipher.

2. Formatting Text

Fig 2.6 Flush left (Ragged right)

Flush left: This format most closely 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, allowing the type to create an even gray value.

Gray value: Text on a white background. (Note: if the greyness is too dark, it means that there isn't enough leading or kerning, and it appears dark. If the grey is too light, it indicates that there is too much letterspacing or leading).

Ragging: The jagged edge/endpoint.

Fig 2.7 Centered (Ragged right and left)

Centered: This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature. Because centered type creates such a strong shape on the page, it's important to amend line breaks so that text does not appear too jagged.

Fig 2.8 Flush right (Ragged left)

Flush right: This format places emphasis on the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.

Fig 2.9 Justified

Justified: Like centering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce 'rivers' of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.

Note:

Type can be set one way or another depending upon several factors, personal preference, prevailing culture and the need to express, play important roles. However, when setting the field of type, keep in mind the typographer's first job — clear, appropriate presentation of the author's message.

Type that calls attention to itself before the reader can get to the actual words is simply interference, and should be avoided. Quite simply if you see the type before you see the words, change the type.

It is important to understand how different typefaces feel as text. Different typefaces suit different messages. A good typographer has to know which typefaces best suits the message at hand.

Consider the different textures of these typefaces. Type with a relatively generous x-height/heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height/lighter stroke. Sensitivity to these differences in colour is fundamental for creating successful layouts.

3. Texture

Fig 2.10 Anatomy of a Typeface

Fig 2.11 Different (Serif) typefaces & different gray values

Compositional requirement: Text should create a field that can occupy a page or a screen. Grey values vary between typefaces, with some being lighter and others being darker. A middle grey value is the best choice and ideal for text.

Fig 2.12 Different (Sans serif) typefaces & different gray values

4. Leading and Line Length

The goal in setting text type is to allow for easy, prolonged reading. At the same time, a field of type should occupy the page as much as a photograph does.

Type size: Text type should be large enough to be read easily at arms length — imagine yourself holding a book in your lap.

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily lose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.

Line length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short line lengths impairs reading.

Figures 2.13 & 2.14 shows examples of bad leading:

Fig 2.13 No leading, and the colour is too dark

Fig 2.14 Too much leading, and the colour is too light

5. Type Specimen Book

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

Fig 2.15 Sample Type Specimen Sheet

Note:

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. The difference one point leading can make — a difference that is unrecognizable at 100% on most monitors.

Keep in mind that nothing replaces looking closely at an actual printout of your work. The best screen is still an electronic approximation of the printed page — unless you are designing for screen, then judging type on screen is accurate.

Lecture 4 | Text (Part 2)

6. Indicating paragraphs

Fig 3.1 A holdover from medieval manuscripts seldom used today

Pilcrow (¶): A handwritten or typographical character used to indicate a paragraph. It is also called the paragraph mark (or sign or symbol), paraph, or blind P. The pilcrow may be used at the start of separate paragraphs or to designate a new paragraph in one long piece of copy.

Fig 3.2 Line space (leading)

Leading: Line space between paragraphs. As an example, if your text pt. size is 10, your leading will range from either 12/12.5/13 (2-3 pts. larger). If the leading is 12pt, your paragraph spacing should also be 12pt. The purpose of this is to ensure cross-alignment across columns of text.

Fig 3.3 Line space vs. leading

Fig 3.4 Standard indentation

Standard indentation: Indent is the same size as the line spacing or the same as the point size of the text. Note that indentation is best used when the text is justified; otherwise, ragging will appear on both ends of each sentence.

Fig 3.5 Extended paragraphs

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

7. Widows and Orphans

Designers (specifically those that deal with large amounts of text in websites, books, online magazines, printed magazines, newspapers, and online journals) must take great care to avoid the occurrence of the below-mentioned.

Fig 3.6 Widows and Orphans

Widow: A short line of type left alone at the end of a column of text. The solution to widows is to rebreak line endings throughout the paragraph so that the last line of any paragraph is not noticeably short.

Orphan: A short line of type left alone at the start of a new column. The solution to orphans requires more care by making sure that no column of text starts with the last line of the preceding paragraph.

8. Highlighting Text

Fig 3.7 Italic/Bold text

Fig 3.8 Change of type family/colour of text

Note: For colour printing, you can only change the colour of the text to either black, cyan, magenta, or yellow (although yellow will be unreadable).

Fig 3.9 Matching the height of different typefaces

In the example shown above in Fig 3.9, the sans serif font (Univers) has been reduced by .5 to match the x-height of the serif typeface.

Fig 3.10 Aligning numbers height to alphabets height

Some numbers in certain typefaces will follow a capital height (which sticks out of the body of text). Reducing the numbers by .5 helps to align the number's height with the rest of the alphabet's height. Note that you cannot do this with large amounts of text, such as a book (which is better served by using lowercase numerals instead).

Lowercase numerals: Numerals that are non-aligned.

Fig 3.11 Placing a field of colour at the back of the text

Note: When highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis (right example as shown in Fig 3.11) of the text ensures readability is at its best.

Fig 3.12 Placement of typographic elements

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

Fig 3.13 Quotation marks vs. primes

Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. On the left side of the image in Fig 3.13, compare the indented quote at the top with the extended quote at the bottom.

8. Headline within Text

There are many kinds of subdivisions within the texts of chapters. The following visuals have been labelled (A, B and C) according to the level of importance. It is important to make sure these heads clearly signify to the reader the relative importance within the text and their relationship to each other.

Fig 3.14 A heads

A head: Indicates a clear break between the topics within a section.

In the examples shown in Fig 3.14, the following observations can be made:

First example: Shows an A head in a different type family, and in bold.
Second example: Shows an A head in a different type family, in bold and 'extended' to the left of the text.
Third example: Shows an A head in the same type family, but in a larger size.
Fourth example: Shows an A head in the same type family, but in small capitals.

Fig 3.15 B heads

B heads: 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.

In the examples shown in Fig 3.15, the B heads are shown in small caps, italic, bold serif, and bold san serif. The B heads are not using a paragraph space, but are using a force line break (following the leading space).

Fig 3.16 C heads

C heads: Highlights specific facets of material within B head text. They do not materially interrupt the flow of reading.

In the examples shown in Fig 3.16, as with B heads, C heads are shown in small caps, italics, serif bold and san serif bold. C heads in this configuration are followed by at least an em space (or two spaces/spacebars for visual separation) between the C head and the beginning of the text for that particular paragraph/column.

Fig 3.17 A sequence of subheads (hierarchy)

Fig 3.17 puts together a sequence of subheads (hierarchy). Obviously, there is no single way to express hierarchy within text; in fact, the possibilities are virtually limitless.

8. Cross Alignment

Fig 3.18 Cross alignment (a)

Cross-aligning headlines and captions with text type reinforces the architectural sense of the page — the structure — while articulating the complimentary vertical rhythms.

Fig 3.19 Cross alignment (b)

Fig 3.19 shows the example of one line of heading 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.

Lecture 5 | Basic

1. Describing letterforms

Fig 4.1 Baseline, median, x-height

Baseline: The imaginary line at 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’.

Fig 4.2 Stroke

Stroke: Any line that defines the basic letterform.

Fig 4.3 Apex/Vertex

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

Fig 4.4 Arm

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

Fig 4.5 Ascender

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

Fig 4.6 Barb

Barb: The half-serif finish on some curved stroke.

Fig 4.7 Beak

Beak: The half-serif finish on some horizontal arms.

Fig 4.8 Bowl

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

Fig 4.9 Bracket

Bracket: The transition between the serif and the stem.

Fig 4.10 Cross Bar

Cross Bar: The horizontal stroke in an uppercase letterform that joins two stems together.

Fig 4.11 Cross Stroke

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

Fig 4.12 Crotch

Crotch: The interior space where two strokes meet.

Fig 4.13 Descender

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

Fig 4.14 Ear

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

Fig 4.15 Em/en

Em/en: Originally referred 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.

Fig 4.16 Finial

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

Fig 4.17 Leg

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

Fig 4.18 Ligature (right)

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

Fig 4.19 Link

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

Fig 4.20 Loop

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

Fig 4.21 Serif

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

Fig 4.22 Shoulder

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

Fig 4.23 Stem

Spine: The curved stem of the S.

Fig 4.24 Spur

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

Fig 4.25 Stem

Stem: The significant vertical or oblique stroke.

Fig 4.26 Stress

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

Fig 4.27 Swash

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

Fig 4.28 Tail

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

Fig 4.29 Terminal

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

2. The font

Fig 4.30 Uppercase letters

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

Fig 4.31 Lowercase letters

Lowercase: Lowercase letters include the same characters as uppercase.

Fig 4.32 Small Capitals (a)

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

Fig 4.33 Small Capitals (b)

Most type software includes a style command that generates a small cap based on uppercase forms. Do not confuse real small caps with those artificially generated.

Fig 4.34 Uppercase Numerals

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

Fig 4.35 Lowercase Numerals

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

Fig 4.36 Italics

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

Fig 4.37 Italic vs. Roman

Fig 4.38 Punctuation, miscellaneous characters

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.

Fig 4.39 Ornaments

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

Fig 4.40 Roman

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

Fig 4.41 Italics/Oblique

Italic: Named for fifteenth-century Italian handwriting on which the forms are based.
Oblique: Conversely are based on the Roman form of typeface.

Fig 4.42 Boldface

Boldface: Characterized 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’.

Fig 4.43 Light

Light: A lighter stroke than the Roman form. Even lighter strokes are called ‘thin’.

Fig 4.44 Condense

Condense: A version of the Roman form, and extremely condensed styles are often called ‘compressed’.

Fig 4.45 Extended

Extended: An extended variation of a Roman font.

Fig 4.46 Describing typefaces

3. Comparing typefaces

Fig 4.47 Comparing typefaces

Differences in x-height, line weight, stroke widths, and feeling convey specific use and expression. The letter Rs demonstrates a range of attitudes, from whimsical to stately, mechanical to calligraphic, harmonious to awkward. This examination reveals your feelings about type and typeface, influencing your judgment of appropriateness in type choices.

Lecture 6 | Letters

1. Understanding letterforms

Fig 5.1 Baskerville 'A'

The uppercase letterforms below suggest symmetry, but in fact, it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form (below); more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Fig 5.2 Univers 'A'

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

Fig 5.3 Helvetic vs. 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.

Fig 5.4 Helvetica vs. Univers (b)

2. Maintaining x-height

Fig 5.5 Median / Baseline (a)

X-height: Generally describes the size of the lowercase letterforms. Keep in mind that curved strokes, such as 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.

Fig 5.6 Median / Baseline (b)

3. Form / Counterform

Fig 5.7 Form (white spaces) / Counterform (black spaces)

Counterform (or counter): The space describes, and is often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. How well you handle the counters when you set type determines how well words hang together — in other words, how easily we can read what’s been set.

Fig 5.8 Helvetica (Black) vs. Baskerville

The examinations in Fig 5.8 provide a good feel for how the balance between form and counter is achieved and a palpable sense of the letterform’s unique characteristics. It also gives you a glimpse into the process of letter-making. It is worth noting here that the sense of the ‘S’ holds at each stage of enlargement, while the ‘g’ tends to lose its identity, as individual elements are examined without the context of the entire letterform.

4. Contrast

The basic principles of Graphic Design apply directly to typography. Fig 5.9 and 5.10 are some examples of contrast — the most powerful dynamic in design — as applied to type, based on a format devised by Rudi Ruegg.

The simple contrasts produces numerous variations: small+organic/large+machined; small+dark/ large light …

Fig 5.9 Helvetica (Bold) vs. Baskerville

Fig 5.10 Contrast

Lecture 7 | Typography in Different Mediums

(i) Print Type vs. Screen Type:

1. Type for Print

Fig 6.1 Type for Print (a)

Fig 6.2 Type for Print (b)

Long before screen reading, type was designed for print. Designers ensure text is smooth, flowing, and pleasant to read. The most popular print typefaces are Caslon, Garamond, and Baskerville as they are elegant, intellectual, and highly readable at small font sizes. They are also versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.

2. Type for Screen

Fig 6.3 Type for Screen

Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.

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

3. Hyperactive Link / Hyperlink

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

4. Font Size for Screen

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

5. System Fonts for Screen / Web Safe Fonts

Each device comes with its own pre-installed font selection. Which is based largely on its operating system. The problem is that each differs a little bit. Windows-based devices might have one group. While MacOS ones pull from another. Then Google’s own Android system uses their own as well.

Let’s say the designer picked some obscure, paid font family for this site’s design. If you don’t have that font already installed and it’s not pulling from a web-friendly place – more on that later – the font you see would default back to some basic variation like Times New Roman. You, as the visitor, wouldn’t necessarily know that’s what happened, though. To you, it would just look plain ugly.

‘Web safe’ ones, however, appear across all operating systems. They’re the small collection of fonts that overlap from Windows to Mac to Google. (i.e., Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond).

6. Pixel Differential Between Devices

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

Fig 6.4 Pixel differences between devices

(ii) Static vs. Motion:

Fig 6.5 Static typography (a)

Fig 6.6 Static typography (b)

Static typography: Minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

From billboards to posters, magazines to fliers, we encounter all forms of static typography with wide-ranging purposes. Whether they are informational, promotional, formal or aspirational pieces of designs, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.

Fig. 6.7 Seven (1995) | Opening titles designed by Kyle Cooper

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

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

INSTRUCTIONS

Task 1 | Exercise 1 (Type Expression)

In this exercise, we are asked to select four words from the following seven: (Dizzy, Electric, Fire, Cry, Gun, Slide, Freeze) and sketch out their meanings.

Brief: No graphical elements are allowed and we are limited to only 10 typefaces which are (Bodoni Std, Adobe Caslon Pro, Gill Sans Std, Futura Std, Univers LT Std, ITC New Baskerville Std, Serifa, Janson Text LT Std, ITC Garamond Std, and Bembo Std).

1. Research / Sketches

All sketches were drawn digitally in Procreate. These are the words I chose along with their definitions to help give me a clearer direction during my sketches.

Fig 7.1 Sketches for 'Dizzy' | Week 1 (25/9/23)

Definition: Sensation of spinning, loss of balance, faintness, weakness, or unsteadiness, with vertigo being the term for dizziness that creates an illusion of spinning or movement in oneself or the surroundings.

Fig 7.2 Sketches for 'Slide' | Week 2 (25/9/23)

Definition: Able to move smoothly, quickly, or unobtrusively along a surface while maintaining continuous contact with it.

Fig 7.3 Sketches for 'Cry' | Week 2 (25/9/23)

Definition: Shed tears, typically as an expression of distress, pain, or sorrow.

Fig 7.4 Sketches for 'Fire' | Week 2 (25/9/23)

Definition: Gives out bright light, heat, flame, and smoke; combustion or burning.

2. Digitalization

Fig 7.5 Digitalization Process for 'Dizzy' | Week 3 (2/10/23)

Design: The word 'dizzy' was scattered with varying opacities, simulating the sensation of dizziness and disorientation. I chose small capital letters over uppercase letters because uppercase letters covered a lot of the space and made it difficult to distinguish the rest of the letters in the background.

Typeface/Font: I chose 'ITC Garamond' for its elegant and timeless design, introducing a touch of sophistication that intriguingly contrasts with the chaotic nature of dizziness. I settled on 'Book Italic,' a less bold font to maintain the word's meaning without overwhelming the design. Its subtle slant and cursive style effectively convey the sense of unsteadiness experienced during dizziness.

Fig 7.6 Digitalization Process for 'Slide' | Week 3 (2/10/23)

Design: The letter 'S' was drawn to resemble a slide, with 'L,' 'I,' 'D,' and 'E' sliding down it. We were not permitted to use the Pen Tool to draw the letters, so I had to resort to one of my previous sketches for my final design. The letter 'E' was drawn to slide out of the frame to emphasise the expression of the word.

Typeface/Font: I chose 'Futura' for its sleek, forward-leaning letterforms, suggesting motion and dynamism in harmony with the theme of sliding. I employed both 'Book' and 'Light Condensed' fonts to create contrast and a lighter, more fluid feel.

Fig 7.7 Digitalization Process for 'Cry' | Week 3 (2/10/23)

Design: I combined the letters 'C' and 'Y' to form the shape of a teardrop. I then placed the teardrops under the letter 'C,' which represents an eye, to simulate the trickling effect of tears as one cries. I also ended up switching to small caps to enhance the portrayal of emotional vulnerability during crying.

Typeface/Font: I chose 'Futura' because of its modern, geometric design, imparting a clean and emotionally restrained aesthetic that beautifully contrasts with the word's emotional depth.

Fig 7.8 Digitalization Process for 'Fire' | Week 3 (2/10/23)

Design: The word 'fire' was positioned at the base to symbolize a bonfire, while the letters above it depicted the upward movement of flames and ashes. Clustering the letters closer to the base created a more realistic portrayal of a fire, with a dissipating effect as they ascend.

Typeface/Font: I chose 'Bodoni' for its high-contrast serif typeface, characterized by extreme variations between thick and thin strokes, exuding a bold and dramatic appearance that evokes intensity and impact.

Final Type Expressions

Fig 7.9 Final Type Expressions (JPEG) | Week 3 (9/10/23)

Fig 7.10 Final Type Expressions (PDF) | Week 3 (9/10/23)

3. Type Expression Animation

Fig 7.11 Type animation demo - GIF | Week 3 (9/10/23)

Mr. Vinod demonstrated how to use Adobe Illustrator and Photoshop to create a basic type animation. Figure 7.10 shows a test animation I created for the word 'Fire' during the practical session.

Fig 7.12 First attempt at animating "Fire" - GIF | Week 3 (9/10/23)

Fig 7.11 shows my first attempt to animate the letters by rotating them at various angles to represent the fast, rapid movement of fire.

Fig 7.13 Final animation illustration drafting for "Fire" | Week 4 (16/10/23)

Fig 7.14 Final animation timeline (8 frames) | Week 4 (16/10/23)

On my second and final attempt, I chose to take another approach to the arrangement of the letters spelling "fire." Common verbs associated with the movement of fire include 'spreads,' 'flickers,' while flames often 'lick' or 'dance.' The gentle swaying of the letters from side to side mimics the fluid, dancing motion of a real fire. Fig 7.14 shows my final animated type expression.

Final Animated Type Expression

Fig 7.15 Final Animated Type Expression "Fire" (GIF) | Week 4 (16/10/23)

Task 1 | Exercise 2 (Type Formatting)

In this exercise, we are to use Adobe InDesign to create a single final layout that addresses various aspects of text formatting such as kerning, leading, paragraph spacing, alignment, and so on. This exercise will allow us to practise and improve our spatial arrangement and information hierarchy skills.

1. Kerning and Tracking (Letter spacing)

Fig 8.1 Text formatting (with) kerning | Week 4 (16/10/23)

Fig 8.2 Text formatting (without) kerning | Week 4 (16/10/23)

Fig 8.3 Overlay differences (with/without) kerning | Week 4 (16/10/23)

Lecture 2/4 of Text Formatting | Manipulating the Grid

When dealing with font size, line length, leading and paragraph spacing, you have to understand the space you are working within and learn how to manipulate the grid system (a system that allows you to arrange information within a given space).

A good page layout is heavily dependent on an attractive margin space. When you have a space that is equal, it creates no effect on the viewer. Note to not use 4 columns for an A4 document because it makes the space between each column very small and generally makes the line length very short.

Pt size for A3/A4 size is generally between 8-12 pts. Line length is generally between 55-65 characters (minimum 45). Body text is 2-3 pts larger than pt size. Headings are 2x the size of body text leading.

Fig 8.4 Creating dynamism with white space | Week 4 (16/10/23)

Lecture 3/4 of Text Formatting | Connecting Text Fields, Alignment, Paragraph Spacing, and Ragging

Whenever you begin to design anything you must understand the different levels of information that are contained within the document (e.g. heading, subheading, body text, a note in the last paragraph, etc).

Ensure that you maintain the same text width for the same type of information you are dealing with. If they differ it confuses the audience, making them think it's a separate piece of information. Fig 8.5 shows different examples when it comes to different text widths.

Fig 8.5 Different text widths implying different textual information | Week 4 (16/10/23)

To fix ragging and smoothen section of the text, you need to adjust the letter spacing and kerning. If you get the right correlation between pt size, line length, leading and paragraph spacing, the amount of work that you have for ragging will be less.

The rule of thumb for adjusting letter spacing and kerning is to not exceed +3/-3 times (maximum 15). When it comes to ragging, the objective is not to get a straight line, but rather a decent curvature.

When using left align, it is better to turn hyphenate on. However, if there are too many hyphenations, then you will have to make adjustments (letter spacing, kerning or even bringing down the hyphenated words to the next line).

When using full justified, spacing between column intervals needs to be increased from 5 to 7mm, sometimes even 10mm.

Lecture 4/4 of Text Formatting | Cross Alignment & Baseline Grid

Use italic/oblique fonts for subheadings.

To achieve cross-alignment, you need the baseline grid turned on.

In the Preferences setting, make sure “increment every” is set to the same point as leading. In the Text Frame Options setting, make sure the “first baseline” is set to leading.

2. Text Formatting

Fig 8.6 Compilation of Different Layouts | Week 5 (23/10/23)

Mr. Vinod preferred the 1st layout and provided some suggestions on how I could further improve on it. He suggested having the heading in one line instead, occupying 2 columns. He also mentioned that I didn't need to have 2 captions for the same image, only 1. There were some issues with tightness within some of the sentences, and the kerning/tracking could be better.

Fig 8.7 Progress for Layout #1 | Week 5 (23/10/23)

I decided to change the pt size from 10 to 9, while the leading remained the same at 11 pt in order to achieve a minimum of 45 characters per line. However, after making the change, I realized that the amount of white space had increased.

Fig 8.8 Alignment of information | Week 5 (23/10/23)

With some further guidance from Mr. Vinod, I decided to restructure the format of the layout by transitioning from three columns to a two-column format. This change aligns the outset of the first paragraph in the right column with the heading, while also synchronizing the start of the first paragraph in the left column with the third paragraph in the right column in order to create a seamless and cohesive visual flow. I also changed the images because we were only allowed to use images related to the text, and I adjusted their positions to create a balanced layout. Fig 8.10 shows the final text formatting.

Fig 8.9 Final layout with hidden characters turned on | Week 5 (23/10/23)

Final Text Formatting

Fig 8.10 Final Text Formatting (JPEG) | Week 5 (23/10/23)

Fig 8.11 Final Text Formatting (PDF) | Week 5 (23/10/23)

Final Text Formatting (Gridlines)

Fig 8.12 Final Text Formatting with Gridlines (JPEG) | Week 5 (23/10/23)

Fig 8.13 Final Text Formatting with Gridlines (PDF) | Week 5 (23/10/23)

Final Text Formatting (Details)

Head:

Font: Gill Sans Std (Light)
Type Size/s: 48 pt (Headline), 12 pt (Byline)
Leading: 51 pt (Headline), 15 pt (Byline)
Paragraph spacing: 0 pt

Body:

Font/s: Gill Sans Std (Regular)
Type Size/s: 9 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per line: 45 - 50
Alignment: Left align

Margins:

mm: top: 40.5 mm, bottom: 36.5 mm, left: 12.7 mm, right: 12.7 mm
Columns: 3
Gutter: 5 mm

FEEDBACK

Exercise 1 | Type Expression

Week 2

General feedback:

E-Portfolio:

Lectures summaries (must have finished lectures 1 & 2 at the least).
Research and sketches.
Digitized work (Adobe Illustrator).
Feedback, reflection and further reading.

Sketches:

Drawings can’t be too expressive.
Minor distortions are allowed.
Understand the dynamics and what it is you are expressing.
Important to create contrast in drawings.
Sometimes choosing the right typefaces is all you need, not so much of the drawing of the word itself.

Digitalization:

Does the artwork have control in the square or does the square have control of the artwork?
Look at it as a whole and how they react together.
Try to rearrange the squares to make the artwork look balanced.

Specific feedback:

Explored choice of words with a variety of sketches.
Fire: The first 3 sketches were acceptable (other sketches had too many graphical elements/effects and ended up making the word look like ‘burn’ more than fire).
Cry: The first 2 sketches were acceptable (note: orientation of teardrops should portray crying emotion).
Slide: All sketches were acceptable. The main idea for sketches stemmed from using the letter ‘S’ or 'L' as a slide.
Dizzy: 1st (deemed confusing, however, represented the effect of vertigo), 2nd, 3rd, and 5th sketches were acceptable. (4th sketch was too messy).

Week 3

General feedback:

E-Portfolio:

Be diligent and disciplined with documenting work on our portfolio frequently.

Digitalization:

Always look for alignment points.
Learn to build type appreciation and sensitivity.

Animation:

Place a white colour background for each layer. If not when exported as a gif, it won’t show a background.
Observe the mechanics/dynamics of the animation for it to be smooth.
Don't add anything more than what you have expressed.

Specific feedback:

E-Portfolio:

Mr. Vinod was overall satisfied with the layout, just to add and tweak some things.
Highlight the lecture titles to be clearer.
Don’t have to date figures for lectures.
Add more documentation for the digital exploration.
Make sure to update reflections (weekly).

Digitalization:

Fire: Mr. Vinod preferred designs at the top row as the bottom row had distortions. Add more letters, bunching them up as they get closer to the word to give a more dissipating effect.

Slide: Advised to not use the pen tool to draw the letter 'S'. Mr. Vinod provided a demonstration in class on how I could improvise. Maintain a consistent spacing from the baseline of the letter ‘S’.

Cry: Acceptable.

Dizzy: Choose a weight that is less bold as the orientation of the letters already represents the word.

Week 4

General feedback:

Advice:

Creative blocks will happen, repeating the same actions will only make you repeat the same mistakes.
Reminder to take breaks when needed.
Don’t aim for A’s, it's a wrong mindset to have especially in design. At the end of the day, the process of your work is what’s truly important.
In design, learning comes through exploration in order to overcome any challenges faced.

Specific feedback:

Animation:

Animation is acceptable, however would personally like to improve on it.

Exercise 2 | Text Formatting

Week 5

General feedback:

Task1 (pt. 2):

The objective in formatting text is to create an even colour (half close your eyes and you can see the comparison between tight and loose lines).
55 to 65 characters per line (45 minimum).
Gutter space between 10 to 5 to 7 mm.
Space between captions and images should at least be 4 to 5 mm.
Choose images that are related to the text.
Decide if you either want the top, or bottom to have empty space, not both.
When creating a layout (headline and body text), do not use 2 fonts of 2 different serifs as it looks awkward. The point of using serif and sans serif together is to create contrast.
Adjust the grid before changing the layout.

Specific feedback:

Task 1 (pt. 2):

Layout 1: Have the heading in one line, 2 columns. Don't need to have 2 captions for the same image, only 1. Issues with tightness within some of the sentences, kerning/tracking can be better.
Layout 2, 3, 4, 6: Okay, but too basic.
Layout 5: Adjust the right column, and bring the text down to fill up the empty space.

REFLECTIONS

Experience

The lectures, both in-person and recorded, were not just informative but also engaging and captivating. The combination of lectures, tutorials, and projects has provided me with a solid foundation in typography. During the sketching phase, I faced a challenge in generating ideas since we were restricted to using only 10 typefaces and were not allowed to incorporate graphical elements. In the digitalization phase, I had to overcome a learning curve with Adobe Illustrator and Photoshop since I was unfamiliar with these software tools.

Observations

I noticed that I learn best when I can apply the knowledge immediately after a lecture, which allows me to retain the information more effectively. I also realized that there's always room for improvement in anything you do, as long as you're willing to put in the effort.

Findings

Typography has many rules, and it takes some time to understand and remember all the terms. I learned that paying close attention to the small details and being critical of your work is essential for improvement. I also discovered that each typeface has its own unique and complex design process. Designing and arranging type involves considering many factors.

QUICK LINKS

| Task 2: Typographic Exploration & Communication

| Task 3: Type Design & Communication

| Task 4: Final Compilation & Reflection

Typography | Task 1: Type Expression & Text Formatting