TYPOGRAPHY / TASK 1 : EXERCISES

04.04.2023 - 28.04.2023 (Week 1 - Week 5)
TAN JIE YING / 0353959 / BACHELOR IN DESIGN OF CREATIVE MEDIA
TYPOGRAPHY
TASK 1 / EXERCISES

JUMP LINK

Lectures

Week 1 // Typo_0_Introduction

Week 2 // Typo_1_Development // Typo_2_Basic

Week 3 // Typo_3_Text_P1 // Typo_4_Text_Part 2

Week 4 // Typo_5_Understanding

Week 5 // Typo_6_Screen&Print

Instructions

Task 1

Exercise 1 – Type Expression

Exercise 2 - Text Formatting

Feedback

Reflections

LECTURES

Week 1 // 'Typo_0_Introduction'

What is typography? Typography is a fundamental aspect of every design study. It is an act of creating letters. It can be involved in animation, website design, signage design, etc. Typography has 500 years of evolution (Calligraphy > Lettering > Typography ).

2 types of terminology of typography - font and typeface：

- Font: A font refers to an individual font or weight within a typeface.

Eg. Georgia Regular, Georgia Italic, and Georgia Bold.

- Typeface: A typeface refers to the various families that do not share characteristics.
Eg. Georgia, Arial, Helvetica, Times New Roman, Didot, Comic Sans and Futura

Figure 1.1.1 Examples of Fonts

Figure 1.1.2 Examples of Typeface

Week 2 // 'Typo_1_Development'

1. Timeline
Early letterform development: Phoenician to Roman.

Writing means scratching into wet clay using a sharpened stick or carving into a stone using a chisel.

The uppercase letter (the only form of lettering for nearly 2000 years) has evolved out of the tools and materials. It was a font of a combination of pieces of circles and straight lines.

Figure 1.2.1 Evolution from Phoenician Letter

Phoenicians and other Semitic peoples had written from right to left. The Greeks liked the ways of Phoenicians wrote. It did not make use of letter spacing or punctuation. The Greeks developed a style of writing called "boustrophedon, lines of text are read alternately from right to left and left to right. As they change direction, the orientation of the letterforms changes too.

Figure 1.2.2 'Boustrophedon'

Figure 1.2.3 Greek Fragment, Stone Engraving.

Figure 1.2.3 Evolution of The Letter 'A' (from Phoenician to Roman)

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

Square capitals were the written version that can be found in Roman monuments. They were designed with serif added at the end of the main stokes.

Figure 1.2.4 Square Capitals (4th / 5th century).

Rustic capitals are a compressed version of Square capitals, which allow for twice as many words to be written on a sheet of parchment while also requiring less writing time. These letterforms are easier and faster to write, but slightly difficult to read due to their compressed nature.

Figure 1.2.5 Rustic Capitals (late 3rd - mid 4th century)

Square and Rustic capitals were often used in formal documents. Due to every transaction, cursive writing forms have been developed with simplicity and speed.

Figure 1.2.6 Roman Cursive (4th century)

Uncials incorporated some features of Roman cursive script, expecally the shape of A, D, E, H, M, U, and Q. The word 'uncial' in Latin is called 'uncia,' which means a twelfth. Some scholars used to believe that these letters were one inch tall. However, it is more likely that uncials were just simply smaller letters. Uncials are easier to read at small sizes than Rustic capitals.

Figure 1.2.7 Uncials (4th - 5th century)

Half-uncials are a further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, which are replete with ascenders and descenders. This is formed 2000 years after the Phoenician alphabet.

Figure 1.2.8 Half-uncials (C. 500)

Charlemagne, Europe's first unifier since the Romans. Issued in edict to standardized ecclesiastical texts in 789. Alcuin of York, Abbot of St Martin of Tours entrusted to standardize all ecclesiastical texts. The monks rewrote the texts using both majuscules (uppercase), minuscule (lowercase), capitalization, and punctuation which set the standard for calligraphy for a century.

Figure 1.2.9 Caroline Minuscule (C. 925)

As Charlemagne's empire was dissolved, regional variations of Alcuin's script emerged. In northern Europe, a condensed strong letterform known as Blackletter or textura became popular; In the south, a more open and rounded hand called "rotunda" gained popularity. In Italy, the humanistic script was developed based on Alcuin's minuscule.

Figure 1.2.10 Blackletter / Textura (C. 1300)

Blackletter to Gutenberg's Type :

Gutenberg's skills included engineering, metalsmithing, and chemistry. They were been marshaled up to build pages that mimicked the Blackletter style of northern Europe. It needed a unique brass matrix or negative impression for each letterform to achieve it.

Figure 1.2.11 42 Line Bible, Johann Gutenberg, Mainz (C. 1455)

3. Text Type Classification :

Figure 1.2.12 Text Type Classification.

Typo_2_Basic

1. Describing Letterforms :

Figure 1.3.1 Letterform PDF

2. The Font :

Uppercase Capital letters, including certain accented vowels, the cedilla and n tilde, and the a/e and o/e ligatures.
Figure 1.3.2 Uppercase
Lowercase letters include the same characters as uppercase.
Figure 1.3.3 Lowercase

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 an expert set.

Figure 1.3.4 Small Capitals

Uppercase numerals also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width.

Figure 1.3.5 Uppercase Numerals

Lowercase numerals, also known as old-style figures or text figures, are set to x-height with ascender and descender.

Figure 1.3.6 Lowercase Numerals

Italic: Refer back to 15th-century Italian cursive handwriting. Oblique is typically based on the Roman form of the typeface.

The form of italic refers back to fifteenth-century Italian cursive handwriting. Oblique are often based on the Roman form of the typeface.

Figure 1.3.7 Italic

Figure 1.3.8 Italic vs Roman

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.

Figure 1.3.9 Punctuation & Miscellaneous Characters

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

Figure 1.3.10 Ornaments

3. Describing Typefaces:

Figure 1.3.11 Describing Typeface

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

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

Boldface: Characterised by a thicker stroke than the 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 a 'Poster".

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

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

Extended: An extended variation of a Roman font.

4. Comparing Typefaces :

Figure 1.3.12 500 Years of Type Design

These typefaces differ in their types, x-height, line weight, relative stroke widths, and feeling. The Rs display a range of attitudes, some whimsical, some stately, some mechanical, others calligraphic some harmonious, and some awkward.

Figure 1.3.13 Differences in Typefaces

Week 3 // Typo_3_Text_P1

1. Kerning and Letterspacing :

Kerning refers to the automatic adjustment of space between letters. Letterspacing means adding space between the letters. The addition and removal of space in a word or sentence are referred to as 'tracking'.

Shortcut keys:

- Increase font size: Ctrl + Shift + </>, Ctrl + Shift + Alt

- Hide grids and guides: Ctrl + ;

- Kerning: Alt + Left/Right Arrow

Figure 1.4.1 Kerning
Figure 1.4.2 Tracking

2. Formatting Text :

Flush left is the format that 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, which creates an even gray value.

Figure 1.4.3 Flush Left

Centered is the format that makes the text symmetry (both ends of the line are equal). it transforms fields of text into shapes, which adds a pictorial quality. It creates a strong shape on the page. Also, it is important to amend one break so that the text does not appear too jagged.

Figure 1.4.4 Centered

Flush right is the format that emphasizes the end of the line as opposed to its start. It can be useful in situations (Exp, caption) where the relationship between the text) and the image might be ambiguous without a strong orientation to the right.

Figure 1.4.5 Flush Right

Justified is similar to centering. It creates a symmetrical appearance for the text, by adjusting the spaces between words or letters. The resulting openness of lines can occasionally produce 'rivers' of white space running vertically through the text. To solve this, pay attention to the line breaks and hyphenation. Adjust it if possible.

Figure 1.4.6 Justified

3. Texture :

To get the readable text, make sure the X height is larger than normal (ascender and descender).

Figure 1.4.7 Anatomy of A Typeface

4. Leading and Line Length :

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

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

Line Length: Shorter lines require less leading; longer lines more. A good rule of thumb is to keep the line length between 55-65 characters. Extremely long or short line lengths impair reading.

Figure 1.4.8 Bad Leading

Figure 1.4.9 Different leading

5. Type Specimen Book :

A type specimen book is to provide an accurate reference for type, type size, type leading, type line length, etc. Without printed pages showing samples of typefaces of different sizes, no one can make a reasonable choice of type. You only determine the choice on screen when its final version is read on screen.

Figure 1.4.10 Type Specimen Sheet

Typo_4_Text_Part 2

1. Indicating Paragraphs

Pilcrow ¶: A holdover from medieval manuscripts seldom used today.

Paragraph space: If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.

Figure 1.4.11 Cross-alignment

Cross-alignment: Lines of the text are aligned with each other when they are placed in symmetry.

Figure 1.4.12 Cross-alignment

Figure 1.4.13 Line Spacing vs Leading

Standard indentation: Indent is the same size as the line spacing or the same as the point size of your text. (If using indentation, the alignment should be justified.)

Figure 1.4.14 Standard Indentation

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

Figure 1.4.15 Extended Paragraph

2. Widow or Orphans :

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

Orphans: A short line of the type left alone at the start of the new column.

To avoid widows and orphans use Kerning (max +/- 3) or Force line break (Shift + Enter).

Figure 1.4.16 Widow and Orphans

3. Highlighting text :

Using Italic / Increasing the boldness or weight of the text / Changing the type family and making it bold / Changing the color of the text / Placing a field of color at the back of the text.

Figure 1.4.17 Highlighting Text

Figure 1.4.18 Highlighting Text

When highlighting text by placing a field of color at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best.

Figure 1.4.19 Highlighting Text

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

Figure 1.4.20 Typographic Elements

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.

Figure 1.4.21 Quotation Mark

4. Headline within the text.

'A' head indicates a clear break between the topics within a section. In the following examples 'A' heads are set larger than the text, in small caps and in bold. The fourth example shows an 'A' head 'extended' to the left of the text.

Figure 1.4.22 'A' Head

The 'B' head here is subordinate to 'A' head. '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.

Figure 1.4.23 'B' Head

The 'C' heads, highlight specific facets of material within the 'B' head text. They do not materially interrupt the flow of reading. As with 'B' heads, these '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 for visual separation.

Figure 1.4.24 'C' Head

Week 4 // Typo_5_Understanding

In week 4, Mr. Vivod reviewed our animated type expression works. He also gives us feedback while reviewing. After the feedback section, he picked some students to check their portfolios, just to make sure we were in progress. Moving on, he briefed us on the upcoming exercise (text formatting). He explained and went through the details that were required in the brief sheet. Before we start the exercise, we have to watch the lecture videos on YouTube.

1. Understanding Letterforms

The uppercase letter 'A' (Baskerville & Univers)

Both of them suggest symmetry, but they are not actually symmetrical. Both of them demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Baskerville: The left stroke is thinner than the right stroke.

Univers: The width of the left slope is thinner than the right stroke.

Figure 1.5.1 Uppercase 'A' Baskerville (left) and Univers (right)

The lowercase letter 'A' (Helvetica & 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.

Figure 1.5.2 Lowercase 'a' Helvetica (Left) and Univers (Right)

2. Maintaining x-height

X-height: The size of the lowercase letterforms.

Curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) to appear to be the same size as the vertical and horizontal strokes they adjoin.

Figure 1.5.3 Maintaining X-Height

3. Form / Counterform

Counterform (or counter): It is important for readability. It was the space between the letter and the letter's stroke.

Figure 1.5.4 Counterform

4. Letters / Contrast

Contrast is to differentiate the information.

Figure 1.5.5 Contrast

Week 5 // Typo_6_Screen&Print

In week 5, each of us has a short introduction of ourselves in class. After the introduction, we begin our class. As usual, Mr. Vivod has reviewed and given out his feedback. We discussed our due date for Task 1 and received a briefing for the next task (Task 2: Typographic Exploration & Communication).

1. Typography in Different Medium

Print Type vs Screen Type Back before, Type was intended for reading from printing long before we read from the screen. The responsibility of the designers was to make sure that the text is easy to read, flowed well, and it is pleasing to read.

Based on these characteristics, it is elegant, intellectual, and highly readable when set in a small font. Typefaces such as Caslon, Garamond, and Baskerville are the first typographical fonts to consider.

Figure 1.6.1 Print Type

Figure 1.6.2 Print Type

Typefaces designed for web usage have been optimized and modified to improve their legibility and performance on digital platforms. This required increasing the x-height (while reducing ascenders and descenders), widening fonts, turning on counters, using thicker thin strokes and serifs, reducing stroke contrast, and altering curves and angles for specific designs.

Figure 1.6.2 Screen Type

Add on, typefaces that have smaller sizes require larger font spacing for enhanced readability. In conclusion, these adjustments help improve character recognition and overall legibility in non-print media such as the web, e-books, e-readers, and mobile devices.

2. 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 on nearly all Web pages, allowing users to click their way from one page to another. Text hyperlinks are normally blue and underlined by default.

3. 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. As we often read at a close distance (a few inches away), the Printed text is 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

4. System font for screen / Web safe font :

Different devices have their own designed fonts based on their system. For example, Windows, macOS, and Google's own Android system.

"Web-safe" fonts are fonts that are available on all operating systems (Windows, MacOS, and Google). Fonts like Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, and Garamond are types of "web-safe" fonts.

5. Pixel Differential Between Devices :
Different screen devices have different text sizes because they have different-sized pixels.

Figure 1.6.3 Variation In Pixel and Screen Size

6. Static vs Motion :

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. Different static typography forms are used for different purposes. E.g. billboards, posters, magazines, and flyers.

Figure 1.6.4 Static 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.

Figure 1.6.5 Motion Typography. (credits: YouTube)

INSTRUCTIONS

Task 1 / Exercise 1 – Type Expression
In this Task 1 Exercise 1, we will suggest the words for voting. Based on the voting, the top seven words will be our options for the exercise. We were required to choose 4 words and come out with 3 idea sketches for each word.

Sketches

Figure 2.1 Type Expression Sketches (9.4.2023)

Digitization

First Attempt

Figure 2.2 First Attempt Digitized in Type Expression (10.04.23)

Second Attempt

Figure 2.3 Second Attempt Digitized in Type Expression (17.04.23)

Final Task 1 - Exercise 1: Type Expressions

Figure 2.5 Final Digitized in Type Expression (17.04.23)

Figure 2.5 Final Digitized in Type Expression pdf (18.04.23)

Animation

From the final of Task 1 Exercise 1, we get to choose one out of four (or more as you like) type expressions to make an animation expression. Mr. Vivod has provided a YouTube video as a demonstration for us to view (Making a set of the word jpg in Ai > open in Ps > adding the time> download).

I have my first attempt at the word "Freedom".

When I think about freedom, the word "free" pops out in my mind. Then, I felt happy when I had an imagination about when I was free. As you saw in Figure 3.1 a happy face appears at the end.

Figure 3.1 First Attempt in Animated Type Expression (24.04.23)

I got the feedback from Mr. Vivod: 'It was nice that it got movement, but I don't understand why is this freedom. It doesn't express the word "Freedom".

I felt a bit hard to express it, so I changed to the word "Crush".

As you see in Figure 3.2 the two black objects that used to crush "crush" got a bit of movement from down to up (end part), and shaking a little bit (middle part). The purpose of designing these is to make a shaking version to make it look interesting. It will be better than just letting them stay in one position to crush "Crush".

Figure 3.2 Second Attempt in Animated Type Expression (25.04.23)

Final Animated Type Expression

Figure 3.3 Final Animated Type Expression "Crush" gif (25.04.23)

Task 1 / Exercise 2 - Text Formatting
We are been given a text to format in this task by using type choice, type size, leading, line length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans, and cross-alignment. Lecture videos will help while doing this task.

Kerning and tracking
Before starting this exercise, I practiced kerning and tracking with my name.

Figure 4.1 Text Formatting With Kerning (01.05.23)

Layouts
Follow the tutorial videos by using the text provided, and do some tryouts.

Figure 4.2 Layouts (01.05.23)

Out of these six, I choose to make adjustments to the sixth layout (Figure 4.2).

Adjustments:

- Make the caption in a line

- Make the text symmetrical. (Left and right)

- Change the photo

Final Text Formatting Layout

Headline
Font/s: Bembo Std
Type Size/s: 38pt & 58pt
Leading: 41pt & 61pt
Paragraph spacing: 0

Body Text
Font/s: Bembo Std
Type Size/s: 12 pt
Leading: 14 pt
Paragraph spacing: 14 pt
Characters per line: 66
Alignment: Align left

Margins: Top: 12.7mm top, Bottom: 12.7mm top, Inside: 12.7mm top, Outside: 12.7mm top
Columns: 2
Gutter: 5 mm

Figure 4.3 Final text formatting layout (05.05.23)

Figure 4.4 Final Text Formatting Layout PDF (05.05.23)

Figure 4.5 Final Text Formatting Layout With Guides and Grids (05.05.23)

Figure 4.6 Final Text Formatting Layout With Guides and Grids PDF (05.05.23)

FEEDBACK

Week 2

General feedback: Try not to include graphical elements in it. Express more about the words meaning.

Specific Feedback: Make some changes to the letter instead of adding graphical elements.

Week 3 General feedback: Make it obvious. Maybe can change to a suitable font. Specific feedback: Too many graphical elements for 'rain'. Maybe changing the font and force on the letter is enough. Don't stretch the 'crush', narrow the space between the letters and the walls. Make the '!' more obvious by having some changes in the space. 'Freedom' doesn't show the meaning of it. By designing it from small to big, maybe can arrange it into some kind of emotion.

Week 4 General feedback: Nice idea, but it doesn't relate to the word 'freedom' Specific feedback: The idea of popping out and moving is good, but it doesn't express the meaning of freedom. 'How and why is it freedom?'

Week 5 General feedback: Watch the videos again. Specific feedback: Change the font. choose a picture in black and white that is also relevant to the content.

REFLECTIONS

Experience

Typography is a stressful and enjoyable module. This module was a test to test our creativity. In task 1 exercise 1, I saw most sketches in the comment look quite similar to each other. It looks like we are stuck inside the box. However, after the feedback section, we got to have more ideas for the design and made some big changes. The work we bring out after is getting more creative than before. However, it was still a hard challenge for me to design a 'Freedom' gif. I didn't struggle much with this word, I just changed it to another word that I feel I can express out the word. The most healing part was I got to use Adobe Illustrator to create tidy work (Exercise 2- letter formatting). I am very satisfied with the final work.

Observation

By referring to my sketches, I found out a lot of extra things (graphic elements, pictures). Without these extra things, I still can express the thing with a simple design. Maybe by adding a shape or changing the font size, or without adding something to it it still looks perfect. Mr. Vivod's feedback section is very useful for me. Our work will be screened in front of the class. I get to see and hear other's feedback physically. Based on their feedback, I can figure out easily what is our similar mistakes and how can I fix and improve them.

Findings

Throughout these 5 weeks of classes, typography has been a new knowledge for me. While I did the research, I found out more types of designs of typography that I didn't focus on. Typography can be in a simple design to show the information. I like all the exercises in task 1. I felt excited after receiving the feedback from Mr. Vivod. Ideas popped into my mind. It gave me the motivation to improve it. As a beginner in using Adobe Illustrator and InDesign, I didn't struggle much with these apps.