Typography/ Task 1: Exercises

2.9.2022 - 7.10.2022 / Week 1 - Week 6
Sylvia Lau (0356130)
Bachelor of Design (Hons) in Creative Media
Task 1 / Exercises

---

LECTURES

Lecture 1

Typography: Development

Early Letterform Development

Figure 1.1 The evolution of letters from Phoenician

Figure 1.2 Boustrophedon

Boustrophedon is a style writing that developed by the Greek, which meant the text will be read from right to left and left to right. They also changed the orientation of the letterforms.

Figure 1.3 Hundred years of development from Phoenician to Roman

Hand Script from 3rd- 10th century C.E

Figure 1.4 Square Capitals

These letterforms have serifs added to the finish of the main strokes.

Figure 1.5 Rustic Capitals

These letterforms took less time to write, however it was slightly harder to read because of their compressed nature.

Figure 1.6 Roman Cursive

These letterforms were simplified for speed.

Figure 1.7 Uncials

Uncials didn't have lowercase and uppercase letterforms, they incorporate the capitals and lowercase into the writing system. The broad forms of Uncials are more readable at small size than rustic capitals.

Figure 1.8 Half Uncials

It mark the formal beginning of lowercase letterforms, replete with ascenders and descenders.

Figure 1.9 C.925: Caloline Miniscule

Charlemagne: The first unifier of Europe since Romans. He introduced uppercase letters, lowercase letters, capitalization and punctuation which standardized writing systems and also convey messages more accurately.

Black Letter to Gutenberg's Type

Figure 1.10 Blackletter (Textura)

Blackletter is a condense strongly vertical letterforms which gained popularity in northern Europe. However, Rotunda gained popularity in the south. Both letterforms were developed after the dissolution of Charlemagne's empire.

Gutenberg marshaled them all to build pages that accurately mimicked the work of the scribe's hand- Blackletter of northern Europe. Gutenberg's type mold required a different brass matrix, or negative impression for each letterform.

 Figure 1.11 Gutenberg's type

Text Type Classification   

Lecture 2

Typography: Text

Kerning and Letterspacing

Figure 2.1 Kerning

Kerning refers to the automatic adjustment of space between letters. Letterspacing means to add space between the letters. Tracking refers to the additional and removal of space in a word.

Figure 2.2 Tracking

Designers always letterspace uppercase letters because uppercase letterforms are drawn to be able to stand on their own. Whereas lowercase letterforms require the counter form created between letters to maintain the line of reading.

Formatting Text

Figure 2.3 Flush Left

Its most closely mirrors the asymmetrical experience of handwriting. Spacing between words are consistent throughout the text, allowing the type of create an even gray value. Flush left have a ragged right and it is important to always make the ragging on the right smooth, which mean a little bit of curve.

Figure 2.4 Centered

As centered type create such a strong shape on the page, its important to amend line breaks so that the text does not appear too jagged.

Figure 2.5 Flush Right

This format places emphasis on the end of a line as opposed to its start. It can be useful in situation like caption because it might be ambiguous without a strong orientation to the right.

Figure 2.6 Justified

Justified is achieved by expanding or reducing spaces between words and sometimes between letters. The resulting openness of line can occasionally produce 'rivers' of white space running vertically through the text. Careful attention to the line breaks and hyphenation is required to amend this problem.

Texture

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

Figure 2.7

Figure 2.8 

The figure above shows different typefaces, same reading and same font size, which can clearly see the differences in the look and feel of gray value and determine which is more readable.

Leading and Line Length

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

Type Size: Should be large enough to be read easily at arm length.

Leading: Text that is too tightly encourages vertical eye movement ( a reader can easily looses his or her place). Text that is too loosely creates striped patterns that distract the reader.

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. A good rule of thumb is to keep line length between 55-65 characters.

Type Specimen Book

Figure 2.9 Sample Type Specimen Book

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

Lecture 3

Typography: Text

Indicating Paragraphs

 Several options for indicating paragraph:

Figure 3.1 Pilcrow

A holdover from medieval manuscripts seldom use today.

Figure 3.2 Line Spacing

When typeface is 10pt, the leading space will be 12pt, the paragraph spacing should be 12pt. The purpose is to maintain cross alignment. 

Figure 3.3 Standard Indentation

The indent is the same size of the line spacing or the same as the point size of your text. Indentation is best used when the text is justified, it should never used when the text is left alignment and ragging on the right.

Figure 3.4 Extended paragraph

It creates unusually wide columns of text. There can be strong compositional or functional reasons for choosing it

Widows and Orphans

Figure 3.5 Widow and Orphan

Widows and orphans are two unpardonable gaffes. A widow is a short line of type left alone at the end of a column of text. An orphan is a short line of type left alone at the start of the new column.

The solution to widows is to rebreak your line endings through out your paragraph so that the last line of any paragraph is not noticeably short. 

Highlighting Text

When decided to change the typeface to san serif of the highlighted text, must reduce the size of highlighted text. For example, X-Height of serif typeface is not match with san serif typeface.

Headline within text

Figure 3.6 Different Headlines

A head indicates a clear break between the topics within a section. A heads are set larger than the text, in small cap and in bold. B heads indicate a new supporting argument. As such they should not interrupt the text as strongly as A heads do. C heads are not common, but it highlights specific facets of material within B head text. They not materially interrupt the flow of reading. C heads in this configuration are followed by at least an em space for visual separation. 

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. 

Lecture 4

Typography: Basic

Describing Letterforms

The Fonts

Figure 4.2 Uppercase Letter (Capital letters)

Figure 4.3 Lowercase Letter

Figure 4.4 Small capitals

It often called expert set, uppercase letterforms draw to the X-Height.

Figure 2.5 Uppercase Numeral

Uppercase numeral is also called lining figures. It has the same height as uppercase letters, most successfully used with tabular materials or in any situation that calls for uppercase letters.

Figure 2.6 Lowercase Numeral

Lowercase numeral is known as old style figures. It is set to X-Height with ascenders and descenders, best used when using upper and lowercase letterforms.

Figure 2.7 Italics

Small caps only in Roman, it refer back to 15th Century Italian cursive handwriting.

Figure 2.8 Punctuation, miscellaneous characters

Miscellaneous characters can change from typeface to typeface. It's important to be acquainted with all characters available in a typefaces before choosing the appropriate type.

Figure 2.9 Ornaments

It is used as flourishes in invitations and certificates, Adobe Caslon Pro contain ornamental fonts as part of the entire typeface family.

Describing Typefaces

Figure 2.10

Roman: It derived from inscriptions of Roman monument. Slightly lighter stroke in Roman is known as 'Book'.

Italic: This typeface is designed based on handwriting.

Oblique: This typeface is not designed based on handwriting, conversely are based on Roman form of typeface.

Bold face: A thicker stroke

Light face: A light stroke

Condensed: A version of the roman form and extremely condense style.

Extended: An extended variation of roman form.

Comparing Typefaces

Two goals: Easy readability and an appropriate expression of contemporary esthetics.

Figure 2.11 

Beyond the gross differences in X-Height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling. These feelings connote specific use and expression. It is important to choose an appropriate typeface when conveying and presenting a message.

Lecture 5

Typography: Letters

Understanding Letterforms

Figure 5.1

Uppercase letterforms above suggest symmetry, but it is not symmetrical. Each bracket connecting the serif to the stem has a unique arc.

Figure 5.2

The uppercase letterform may appear symmetrical, but the width of the left slope is thinner than the right stroke.

Figure 5.3 Comparison of typefaces - Helvetica and Univers

The complexity of each individual letterform is neatly demonstrated. Figure above show a comparison of how the stems of the letterforms finish and how the bowls meet the stem quickly reveals the palpable difference in character between the two. 

Maintaining X- Height

Figure 5.4

X- Height generally describe the size of the lowercase letterforms. However, curved stroke, such as '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 stroke they adjoin.

Counter Form

Just as important as recognizing specific letterforms is developing a sensitivity to the counter form - the space describes, and often contained by the strokes of the form.

Figure 5.5

One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. It provide a good feel for how the balance between form and counter is achieved, which also give a glimpse into the process of letter making.

Contrast

The basic principles of Graphic Design apply directly to typography, for example Contrast. The simple contrasts produces numerous variation: small + organic/ large + machined; small + dark/ large + light.

Figure 5.6

Lecture 6

Typography: Different Medium

Print Type VS Screen Type

Type for Print:
Most common typefaces that is used for print is Caslon, Garamond, Baskerville. As these typefaces are elegant and intellectual but also highly readable when in small font size. 

Type for Screen:
Typefaces intended for use on the web are optimized and often modified to enchance readability. This include a taller X-Height, wider letterforms, more open counters, heavier than strokes and serifs, reduce stroke contrast, as well as modified curves and angles for some design. Another important adjustment is more open spacing. All these factors serve to improve character recognition and overall readability in the non- print environment.

Hyperlink:
A word, phrase, or image that can click on to jump to a new document. Hyperlink are 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; because we read books pretty close, only a few inches away, they are typically set at about 10 point.

System Fonts for Screen/ Web Safe Fonts:
Each device comes with its own pre-installed font selection, which is base largely on its operating system. Windows- based devices might have one group. While Mac OS ones pull from another. Then Google's own Android system uses their own as well.

Pixel Differential Between Devices:
The screen used by our PCs, tablet, 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.

Static VS Motion

Static typography has minimal characteristic in expressing words, from billboards to posters, magazines to fliers, we encounter all forms of static typography with wide ranging purposes.

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. It has developed to become expressive, helping to establish the tone of associated content or express a set of brand values.  

---

INSTRUCTIONS

---

Task 1: Exercise 1 -Type Expression

For this exercise, we are given to choose four words to do type expression from these six words - fire, shatter, ring, tall, whisper, freak. We are required to use the 10 typefaces which are provided to finish the task. 

Sketches:

Figure 1.1 Sketch of the word "Shatter" 8/9/2022 (week2)

As far as I understand this word, which mean break suddenly and violently into pieces, I decided to design some part of the word that were shattered into pieces and falling apart like a broken glass. 

Figure 1.2 Sketches of the word "Tall" 8/9/2022 (week2)

I designed the first 'TALL' word like a building, which present tall. For the second design, I presented the letter 'A' as a Eiffel Tower. Lastly, I designed the word into a shape of Eiffel Tower which is a famous and iconic tower that is tall.

Figure 1.3 Sketch of the word "Freak" 8/9/2022 (week2)

I wanted to design the word to a unusual deformed shape, so I sketched it like a melted or slimy form to represent the freakishness.

Figure 1.4 Sketches of the word "Ring" 8/9/2022 (week2)

I chose to design the words in a swirl pattern because I think the word "RING" is a phone ringing, and the ringing sound is from very loud volume and slowly turning into small volume. For the second design, the words are taking turn from fading fonts to more clearer fonts, which represent the old time telephone ringing sound.

Digitalization: 

Figure 2.1 Digitalized 'Shatter' 11/9/2022 (week3)

I have learned about knife tool in Illustrator from the class, so I could do the effect of a broken or cracked glass according from my sketch.

Figure 2.2 Process of Digitalized 'Tall'  11/9/2022 (week3)

For the first attempt, I found the space of letters was too far. So I set the leading to 56 pt and increase the font size, which shown like the figure on the right. 

  

Figure 2.3 Process of Digitalized 'Freak'  15/9/2022 (week3)

For the first attempt, I used brush tool to draw out the dripping slime under each letters to present the freakishness. But I found out it repeated in every letter, which didn't seem good. So I deleted some of it and it turned out like the figure on the right.

Figure 2.4 Process of Digitalized 'Ring'  15/9/2022 (week3)

I used spiral tool as a guideline before I put in the words. With the spiral guideline, I can know where to place the words and easy get my work done.

Final Submission:

Figure 2.5 Final work of Type Expression (PDF) 15/9/2022 (week 3)

Figure 2.6 Final work of Type Expression (Jpg) 15/9/2022 (week 3)

Animation of Type Expression: 

After we had finished our four type expression, we are required to choose one of the type expression and do a animation of it. I decided to choose "Tall" , because I had inspiration from a game called "Tower Builder". 

Figure 3.1 First Attempt of Progress Animation 18/9/2022 (week 4)

I tried to let the letters dropped from above to the ground, so it presented like a stacked up tower.

Figure 3.2 Second Attempt of Progress Animation 18/9/2022 (week 4)

I redo the animation of tall as I found it quite boring by just letting the letters dropped and landed peacefully. I added some shakiness when each letters landed on its place. 

After exporting all the artboards as jpeg, I used photoshop to animate the type expression. 

Figure3.3 Process of animation in Photoshop 19/9/2022 (week 4)

Final Submission:

Figure 3.4 "TALL" GIF 19/9/2022 (week 4)

Task 1: Exercise 2- Text Formatting

We are given a new exercise about text formatting using Adobe InDesign. In the first lecture videos, I have learned about kerning and tracking. I tried to kern and track using different 10 typefaces which were given.

Figure 4.1 Text formatting with kerning and tracking 27/9/2022 ( week 5)

Before starting my text formatting, I referred to the lecture video. From the video, there are some important notes to remember. 

• Font size: between 8 to12pt
• Characters in each line: between 55-65
• Leading: according to font size and +2
• Kerning: change kerning/tracking from 20 to 5 in unit and increments, press alt + </> for kerning but not more than 3 times
• Paragraph spacing: same as leading, must specific pt
• Hyphenation turn off
• Cross alignment maintain

Figure 4.2 First Two Attempt of Text Formatting 28/9/2022 (week 5)

I designed it this way is to keep the texts and image in a square which looked neat. By making sure the number of character is between 55-65, I had tried different typefaces and font size. Then I did the kerning so that the ragging is smoother. 

Figure 4.3 Changes after feedback 2/10/2022 (week 6)

After given feedback, I made some changes of the text formatting, like making the image smaller, trying to rearrange the head text and body text, making sure the text were aligned.

Figure 4.4 Final Text Formatting with baseline 2/10/2022 ( week 6)

Figure 4.5 Final Text Formatting without baseline 2/10/2022 ( week 6)

Figure 4.6 JPG file of text formatting 2/10/2022 (week 6)

Figure 4.7 JPG file of text formatting 2/10/2022 ( week 6)

HEAD

Font/s: Bembo Std- Bold

Type Size/s: 60pt

Leading: 54pt

BODY

Font/s: Bembo Std- Regular

Type Size/s: 10pt

Leading: 12pt

Paragraph spacing: 12pt

Characters per-line: 50 (shortest), 66 (longest), average is between 53 to 64

Alignment: Left Alignment

Margins: 30mm, 30mm

Columns: 2

Gutter: 5mm

---

FEEDBACK

Week 2 

Specific Feedback: 

All of them is okay, except for the "FREAK", do a little less on the freakishness, not too much distortion. For the "TALL", which stack up like a tower is a good idea, so just use that.

General Feedback: 

We are required to use the 10 typefaces only.

Week 3

Specific Feedback: 

Didn't attend the consultation.

General Feedback: 

Make sure the artwork must be 72ppi, not 300ppi when export from illustrator. Besides, it must exported as grayscale. For the size of GIF, set it to 1024 pix or 800 pix (width and height).

Week 4

Specific Feedback: 

Good. Especially the shaky part of every letters after it landed.

General Feedback:

Must use force line break at the top self intro in e-portfolio. For further reading, need to put book name, book cover, summary. For text formatting, must save the work with visible baseline and no baseline in pdf file and jpg file ( must be 300 ppi, grayscale)  

Week 5

Specific Feedback: 

Good type setting, cross alignment is achieved, good ragging. However, the amount of space at the top and bottom is a little safeness and boring. The sub text is not aligned, so aligning the X-height with the X-height or median line of the body text on the right. The image is too big and catch too much attention, it needs to be smaller. The caption and image should be align to the left side of body text.

General Feedback:

Bold, italic, condensed, italic condensed, extended, bold extended, all are for emphasis not for body text. If using san serif typeface, headline or contrasting text has to be serif, to create contrast. 

---

REFLECTION

Experience

The first time attending this class, I felt nervous because I didn't know much about typography. In task 1, it was quite challenging for me because I was required to use the limited typefaces to do my sketches on type expression, and how to design the word to express the meaning of it. I also saw many good pieces of work from other students, which made me felt anxious and lose confident by showing my work.

Observation

From this exercise, I observed that sometimes the design doesn't need to be too complicated, and sometimes a simple design also can bring out the meaning of the word. For example, the type expression that I did "TALL", at first I designed the word in different pattern like Eiffel tower to express the word, but during consultation, teacher told me to pick the first design, which is the most simple design.

Findings

I found out that I need to do lots of research and read more books to increase my ideas on my design. As my ideas are somehow ordinary, simple, and very limited, I need to learn more things to improve my design.

---

FURTHER READING

Figure 5.1 Book Cover

Book Title: Typographic Design: Form and Communication

Published by: John Wiley & Sons, Inc. , Hoboken, New Jersey 

From this book, I read about the evolutionary history of typography, from the earliest writing system, Cuneiform which invented by Sumerians in 3000 BCE to Gutenberg's font that invented in 14th Century. Besides, the materials that the ancient people wrote on, for example, Egyptian used papyrus plant as writing material, parchment was made by animal skin that developed in the Greek state of Pergamum. Until 105 CE, paper was invented by Ts'ai Lun in China.