Typography - Task 1: Exercise 1 & 2

2/4/2021 - 7/5/2021 / Week 1 - Week 6

Lui Hsiao Hui (Tressa) / 0342003

Typography / Bachelor of Design (Hons) in Creative Media

Task 1: Exercise 1 & 2

LECTURES

WEEK 1 - LECTURE 1

Font: The individual font or weight within the typeface.

Typeface: The entire family of fonts/weights that share similar characteristics/styles.

Typography: Development and Timeline

1. Early letterform development: Phoenician to Roman

Fig. 1.1 Phoenician to Roman

Fig. 1.2 Evolution from Phoenician letter

Writing direction:

Phoenicians: Right to left.

The Greeks: 'Boustrophedon’ (how the ox ploughs), read alternately from right to left and left to right. The same goes to the direction of the letterforms.

Like the Phoenicians, the Greeks did not use letter space or punctuations.

Fig. 1.3 Direction of writing for the Greeks, ‘boustrophedon’

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

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

Fig. 1.5 4th/5th century: Square capitals

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

Fig. 1.6 Late 3rd – mid 4th century: Rustic capitals

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

Fig. 1.7 4th century: Roman cursive

Roman cursive: Written for everyday transactions, forms were simplified for speed. Roman cursive is the beginning of lowercase letterforms.

Fig. 1.8 4th – 5th century: Uncials

Uncials incorporated some aspects of the Roman cursive hand. Uncials – small letters. The broad forms of uncials are more readable at small sizes than rustic capitals.

Fig. 1.9 C. 500: Half-uncials

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

Fig. 1.10 C. 925: 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.

Blackletter to Gutenberg’s type

Fig. 1.11 C. 1300: Blackletter (Textura)

With the dissolution of Charlemagne’s empire came regional variations upon Alcuin’s script. In northern Europe, a condensed strongly vertical letterform know 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.

3. Text type classification

Fig. 1.12 Text type classifications

WEEK 2 - LECTURE 2

Typography: Text

1. Kerning and Letterspacing

Fig. 2.1 Kerning and letterspacing

Kerning: Automatic adjustment of space between letters.

Tracking: The addition and removal of space in a word or sentence.

Letterspacing: To add space between letters.

Fig. 2.2 Normal tracking, loose tracking and tight tracking

2. Formatting Text

Fig. 2.3 Flush left

Flush left: 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.

Fig. 2.4 Centered

Centered: Imposes symmetry, equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality. Centered type creates such a strong shape on the page, it's important to amend line breaks so that the text does not appear too jagged.

Fig. 2.5 Flush right

Flush right: 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.6 Justified

Justified: Imposes symmetrical shape on the text, 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.

3. Texture

Fig. 2.7 Anatomy of a typeface

Fig. 2.8 Different typefaces, different gray values

Compositional requirement: Ideal text to have a middle gray value. Fig. 6.2 shows how different typefaces have different gray values, some lighter, some darker. The best choice would be to choose the middle gray value.

4. Leading and Line Length

Type size: Text type should be large enough to be read easily at arm's length.

Fig. 2.9 Leading and line length

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily lose track. Type that is set too loosely creates striped patterns that cause distraction.

Line Length: Shorter lines require less leading; longer lines more. Keep the line length between 55-65 characters. Extremely long or short line lengths impair reading.

5. Type Specimen Book

A type specimen book shows samples of typefaces in various different sizes. Its to provide an accurate reference for type, type size, type leading, type line length, etc.

Fig. 2.10 Sample Type Specimen Sheet

WEEK 3 - LECTURE 3

6. Indicating Paragraphs

Pilcrow (¶): A holdover from medieval manuscripts seldom use today.

Line space (leading*): Between the paragraphs. If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.

Fig. 3.1 Line space vs leading

Fig. 3.2 Standard indentation

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

Fig. 3.3 Extended paragraphs

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

7. Widows and Orphans

Fig. 3.4 Widows and orphans

Widow: Short line of type left alone at the end of a column of text.

Orphan: Short line of type left alone at the start of a new column.

8. Highlighting Text

Fig. 3.5 Highlighting text with quotation marks

Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom.

Fig. 3.6 Prime and quote

A prime is not a quote. The prime is an abbreviation for inches and feet. Due to the limited number of keys on a typewriter, they were substituted. They were later known as ‘dumb quotes’.

9. Headline within Text

Fig. 3.7 A heads

A head indicates a clear break between the topics within a section.

Fig. 3.8 B heads

The B head here is subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as A heads do. Here the B heads are shown in small caps, italic, bold serif, and bold san serif.

Fig. 3.9 C heads

C heads highlight specific facets of material within B head text. They don't interrupt the flow of reading. C heads in this configuration are followed by at least an em space for visual separation.

Fig. 3.10 Hierarchy in a sequence of subheads

10. Cross Alignment

Fig. 3.11 Cross alignment

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

WEEK 4 - LECTURE 4

Typography: Basic

1. Describing letterforms

Fig. 4.1 Describing letterforms - PDF

2. The font

- Uppercase and lowercase

- Small capitals

- Uppercase and lowercase numerals

- Italic

- Punctuation and miscellaneous characters

- Ornaments

Fig. 4.2 Small capitals

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

Fig. 4.3 Uppercase numerals/lining figures

Same height as uppercase letters and set to the same kerning width. They are most used with tabular material and uppercase letters.

Fig. 4.4 Lowercase numerals/old style figures or text figures

Set to x-height with ascenders and descenders. Best used when using upper and lowercase letterforms.

Fig. 4.5 Italic

Italics refer back to 15th century Italian cursive handwriting. Oblique is typically based on the roman form of the typeface.

Fig. 4.6 Italic vs roman

Fig. 4.7 Punctuation, miscellaneous characters

Miscellaneous characters can change from typeface to typeface. It’s important to ensure that all the characters are available in a typeface before choosing the appropriate type.

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

3. Describing typefaces

Fig. 4.9 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: Characterized 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. Comparing Typefaces

Fig. 4.10 Comparing typefaces

Differences in x-height, line weight, forms, stroke widths and in feeling. Feelings connote specific use and expression. Examining typefaces allows us to know how we feel about certain types, and also see the appropriateness in type choices.

WEEK 5 - LECTURE 5

Typography: Letters

1. Understanding letterforms

Fig. 5.1 Baskerville 'A'

The uppercase letterforms 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.

Fig. 5.2 Univers '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 (previous) and Univers (Fig. 4.2) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Fig. 5.3 Helvetica vs Univers

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.

2. Maintaining x-height

Fig. 5.4 Median and baseline

X-height: The size of the lowercase letterforms. 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.

3. Form / Counterform

Fig. 5.5 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—how easily we can read what’s been set.

4. Contrast

Fig. 5.6 Contrast

WEEK 6 - LECTURE 6

Typography in Different Medium

1. Print Type Vs Screen Type

Fig. 6.1 Type for print

Type was designed for reading from print long before screen. It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read. Good typefaces for print: Caslon, Garamond, Baskerville. Because of their characteristics which are elegant and intellectual but also highly readable when set at small font size.

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

Hyperactive Link/ hyperlink: A word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Found in nearly all Web pages. Text hyperlinks are normally blue and underlined by default.

Font Size for screen: 16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting 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.

System Fonts for Screen/Web Safe Fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.

Fig. 6.3 Pixel differences between devices

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.

2. Static Vs Motion

Fig. 6.4 Billboard showing static typography

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

Fig. 6.5 "Seven" (1995) title credits - film by David Fincher, showing motion typography

Film title credits present typographic information over time, often bringing it to life through animation/motion graphics. Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of the music. It establishes the tone of associated content or expresses 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

For Exercise 1, we are given a set of words to create type expressions of. Those words are scream, slice, wave, punch, point and eat. No graphical elements are allowed, we are limited to only 10 typefaces which are Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, Garamond, New Baskerville, Janson, Serifa and Univers.

1. Sketches

Fig. 7.1 Type expression sketches, Week 2 (8/4/2021)

Words I chose: Scream, wave, punch and slice. These are my rough sketches drawn digitally in Photoshop. Under each sketch, I included a few notes on variation in the weight of the typeface, scale and colour value details.

My personal favourites for each word would be scream #2-4, wave #3, punch #1 and #3, slice #3. I think these are more of the stronger and more effective expressions for the words. After the peer feedback session, my final choices are scream #3 (merged with #4), wave #3, punch #3, slice #3.

2. Digitisation

Fig. 7.2 First attempt at digitalising "scream", Week 2 (9/4/2021) Practical

Fig. 7.2 shows my first try at digitalising during the practical session of week 2's class (9/4/21). For "scream" I had to go through 5 tries to get the desired look I wanted. The first try (Fig. 7.2) was done with Futura, but I stretched the S, C and R, which isn't allowed. Futura Condensed wasn't tall enough for my liking so I switched to Univers for my next attempt.

Fig. 7.3 "Scream" digitalisation progress, Week 3 (11/4/2021)

For the 'M' of "scream", I moved the anchor points to extend the height for the 'M', creating a triangular alignment for the type expression. I think it looks better that way since it creates better visual weight and leading line. The 'M' in the middle "scream" looks cut off and awkward, while the extended 'M' continues the triangular leading line. I also adjusted the kerning for each letter and changed the colour values to create more contrast.

Fig. 7.4 "Punch" digitalisation progress, Week 3 (11/4/2021)

For "punch", I first digitised sketch #1, but it looks too bland and the expression isn't as strong as the sketch. So for my final, I switched to idea #3.

Fig. 7.5 "Wave" digitalisation progress, Week 3 (11/4/2021)

For "wave", initially I was going to digitise #3, however, overly distortions weren't allowed so I tried making a similar variation of sketch #1. I also decided to not do any warping because many of my classmates were doing that and I did not want mine to be similar. In my 1st attempt, my intention of arranging the letters this way was to represent the up and down movement of waves. But I thought the 1st and 2nd attempt was lacking and the expression isn't as strong, so in the final attempt, I rearranged the letterforms in the shape of a wave/tsunami.

Fig. 8.1 Digitalised type expressions, Week 3 (11/4/2021)

I only had one attempt at digitalising "slice" because I already had the idea of using two contrasting typefaces, with the slanted cut in the middle. The kerning for the Baskerville "slice" was also adjusted.

Final Type Expressions

Fig. 8.2 Final Type Expression - JPEG, Week 3 (16/4/2021)

Following the week 3 peer feedback session, there is an awkward negative space for "scream", so that was revised. It looks better now since it's commanding the space a bit more. Besides that, I decided to reposition "slice" to make it look like it's hanged up but cut in half with the bottom half falling.

Fig. 8.3 Final Type Expression - PDF, Week 3 (17/4/2021)

3. Type Expression Animation

Fig. 9.1 Type animation demo, Week 3 (16/4/2021) Practical - Basic Type Animation

Mr. Shamsul demonstrated how to create a basic type animation using Illustrator and Photoshop. Fig. 9.1 is a simple test animation I made during the practical session.

Fig. 9.2 First attempt at animating "wave", Week 4 (18/4/2021)

Lacking in details and the wave-like movement. Should add more frames and reposition the letters. The 'v' and 'e' suddenly pop in, slightly jarring.

I chose to animate "wave" because I think animating it would show the imagery of a tsunami wave I was trying to create with the position of the letters.

Fig. 9.3 Final animation timeline (16 frames), Week 4 (18/4/2021)

I ended up using 16 frames because I wanted the animation to be fast as it represents a tsunami wave better.

Final Animated Type Expression

Fig. 9.4 Final Animated Type Expression "Wave" - GIF, Week 4 (18/4/2021)

Task 1: Exercise 2 - Text Formatting

For Exercise 2, we are to create one final layout addressing different areas of text formatting, such as kerning, leading, paragraph spacing, alignment, etc. This exercise will help us practice and develop our skills in spatial arrangement and information hierarchy. We are to use Adobe InDesign for this exercise.

Lecture 1/4 of Text Formatting: Kerning and Tracking

Fig. 10.1 Text formatting with kerning, Week 4 (24/4/2021)

Fig. 10.2 Text formatting without kerning, Week 4 (24/4/2021)

Fig. 10.3 Both with kerning and without kerning overlayed to show the difference, Week 4 (24/4/2021)

Fig. 10.4 Before and after kerning and point size change for italics, Week 4 (24/4/2021)

Fig. 10.5 Before and after changing the 'H' from Black to Bold, Week 4 (24/4/2021)

Fig. 10.6 Before and after kerning the 'H' and 'I', Week 4 (24/4/2021)

Lecture 2 to 4 of Text Formatting

Notes:

- Leading: +2 points of point size / +2.5 or +3 depending on the typeface. Typefaces have different x-height thus may extend over the baseline grid.

- Body text: Negative and positive space has to be equal (middle gray value).

- Line length: 55 - 65 (body text), 35 (subtext).

- Headings: Double point size and leading of body text.

- Paragraph spacing same as leading.

- Keep text width the same for the same text of information. If they differ it confuses the audience, making them think it's a separate piece of information.

- Do not exceed +3/-3 for tracking to reduce ragging (line).

- Turn off hyphenation. If turning on hyphenation, ensure there are not too many else tracking adjustments must be made.

- Either use left align or left justify. Though left alignment is preferred.

- If using justify, ensure there aren't many rivers (large awkward spaces between the words).

- Maintain cross alignment.

- Avoid widows and orphans.

Fig. 11.1 Layout progress, Week 5 (25/4/2021)

The ones marked with a * would be the main layouts to choose a final from.

Fig. 11.2 Without kerning vs with kerning, Week 5 (25/4/2021)

Without kerning, there were a lot of orphans and ragging. Although it makes for an interesting composition, ragging will increase when the line length of the body text is shorter. I had to use force line breaks to bring down a few words and mess with the kerning and tracking to reduce ragging.

Fig. 11.3 Layout #1, Week 5 (25/4/2021)

Fig. 11.4 Layout #2, Week 5 (25/4/2021)

Fig. 11.5 Layout #3, Week 5 (25/4/2021)

Fig. 11.6 Layout #4, Week 5 (28/4/2021)

Fig. 11.7 Layout #5, Week 5 (1/5/2021)

Fonts: ITC New Baskerville Std (Roman, Italic and Bold)

Point size: 11 pt (body text), 9 pt (captions), 18 pt, 25 pt and 29.5 pt (heading)

Leading: 14.4 pt (body text), 28.8 pt (heading)

Paragraph spacing: 14.4 pt

Line length: 51 (layout #1, #2 and #5), 32 (layout #3 and #4)

Alignment: Left align

Fig. 11.8 Mistakes with paragraph spacing to align to the baseline grid, Week 5 (30/4/2021)

I used force line breaks to make the body text align to the baseline grid, when the issue was that I didn't put the same value in for paragraph spacing. To align to the baseline grid, the leading value and paragraph spacing have to be the same.

Fig. 11.9 Screenshot of hidden characters, Week 5 (1/5/2021)

Final Task 1: Exercise 2 - Text Formatting

Fig. 12.1 Final Task 1: Exercise 2 - Text Formatting #1, Week 5 (1/5/2021)

Fig. 12.2 Final Task 1: Exercise 2 - Text Formatting #2, Week 5 (1/5/2021)

Fig. 12.3 Final Text Formatting, Week 5 (1/5/2021)

FEEDBACK

Week 2 - Exercise 1: Type Expression

We were placed into groups for peer feedback.

Questions:

1. Are the explorations sufficient?

2. Does the expression match the meaning of the word?

3. On a scale of 1–5, how strong is the idea?

4. How can the work be improved?

General feedback: Very clear sketches, well-executed. Explored efficiently with good variations. The expressions match the meaning of the word well. Though overly distorted is not allowed.

Specific feedback: All sketches #3 were the strongest ideas, should develop those for my final. Good use of variation in the weights of the typeface. Make sure wave #3 is legible when digitised. Don't stretch the typeface.

Week 3 - Exercise 1: Type Expression

Questions:

1. Do the expressions match the meaning of the words?

2. Are the expression well crafted (crafting/lines/shapes)?

2a. Do they sit well on the art-board

2b. Are the composition engaging? Impactful?

3. Are there unnecessary non-objective elements?

4. How can the work be improved?

General feedback: The expressions match the meaning of the words well, good compositions.

Specific feedback: Reduce the negative space for "scream", left side is awkward, make it fill up the box more.

Week 4 - E-portfolio

Specific feedback: Left align all headers and switch to an off-white background to create separation between images and background.

Week 5 - Exercise 2: Text Formatting

Questions:

1. Is kerning and tracking appropriately done?

2. Does the font size correspond to the line-length, leading & paragraph spacing

3. Is the alignment choice conducive to reading?

4. Has the ragging been controlled well?

5. Has cross-alignment been established using base-line grids?

6. Are widows and orphans present?

General feedback: Good layouts, ragging and cross alignments. Font size corresponds to the leading. No hyphenations, widows and orphans present. Layout #2 looks the best in terms of visual hierarchy. Layout #3 and #4 are good and are usually what we see in the graphic design world but the short line-length is not acceptable for this exercise.

Specific feedback: Do not use force line break. The reason it wasn't aligned to the baseline grid was that the paragraph spacing wasn't keyed in. May submit layout #1 and #2 as final.

REFLECTION

Experience

Doing this exercise has taught me the basics of typography. During my sketching stage, it was slightly challenging to come up with ideas as we are limited to using only 10 typefaces, without graphical elements or abstract typography. Because we can't choose our own words we want, I knew many of my ideas would be very similar to my classmates, so coming up with unique ideas was also one of the challenges. During the digitalising stage, it took a while to get used to Adobe Illustrator because I'm more familiar with Photoshop. The formatting and arrangements were different and took a while to get used to maneuvering during the week 2 practical session. The text formatting exercise was surprisingly challenging as well, the most frustrating part was figuring out the baseline grid because I missed a step (paragraph spacing). It also took a long time to come up with compositions I liked because I knew it can't be complicated or too "out there". Nonetheless, this exercise was a good and effective way of teaching students to work with limitations and explore ways of how to express words, as well as arranging and formatting type.

Observations

Throughout this exercise, I've observed that there are many design elements that go hand in hand with Typography such as alignment in creating a sense of hierarchy and visual weight, letters taking the form of various shapes or images, as well as movement, scale, contrast and value.

Findings

I've discovered that typography has many rules, which took a bit to take in and also understand and remember all terms. I found that we need to train ourselves to scrutinize every little detail while doing typography, at the same time critiquing our work strictly so we can improve. I also learned that simple typefaces (such as the classical ones like Helvetica, Univers, Baskerville, etc) have complicated and in-depth design processes behind them. There's much to think about when it comes to designing and arranging type.