Typography - Exercises

17/04/2020 - 15/05/2020 (Week 1 - Week 5)
Yeo Hui Qi / 0334134 / B' CS
Typography
Exercises: Type Expression & Type Formatting

---

LECTURES

Week 1 - Introduction (17/4/2020)
Pre-recorded lecture notes: (Typo_0_Introduction)
Definition:

1. Typography
• Creation of typefaces / families
• Oxford: The style and appearance of printed matter
• Wikipedia: The art and technique of arranging type to make written language legible, readable, and appealing when displayed.
• Can be applied in GIF / animation, movies, website design, app design, signs / navigation, labels, books, etc.
2. Font
• derived from the word "foundry"
• refers to the process of making / casting of a font at a foundry (made of metal - used for printing)
3. Typeface
• refers to the individual type / weight within the typeface (regular, bold, italic)
4. Type Family
• refers to the entire family of fonts that share similar characteristics
• refers to the many weights within an individual typeface

Online lecture on Friday:
The first week of lecture was slow going because of all the things Mr. Vinod had to brief us about  such as the course, how we will be conducting the class, how we will take attendance, and most importantly how to document our work in Blogger. The lecturer made sure he was clear on all fronts so we won't be confused or lost in the process. After the morning and mid-morning sessions of briefing, we moved on to the first exercise which is Type Expression where we have to express words using 9 type families and their type faces.

We were also briefed by Mr. Shamsul about how to use a few features on Adobe Illustrator so that we can achieve the effects we want in our Type Expression exercise, such as masking, the difference between an outline and type, rotation, duplication, shape tools and margins.

Week 2
Pre-recorded lecture notes: (Typo_1_Development)
Development:

1. Initially
• scratching into wet clay with sharpened stick / carving into stone with chisel
• Uppercase forms - simple combination of straight line and circles.
2. Greeks
• "Boustrophedon" - how the ox ploughs 
• Written and read from right to left then left to right and repeated. As the direction changed, so did the letterforms.
3. Etruscan (then Roman)
• Working in marble - painted letterforms before inscribing them, this developed modern serif fonts by adding weight to certain strokes because of using a chisel brush when painting
4. Hand Script (Square Capitals - 3rd to 10th century C.E.)
• These letterfroms have serifs added to the finish of the main strokes.
• Tool: reed pen held at a 60 degree angle off the perpendicular.
• For speed in writing - developed lowercase
5. Uncials
• small letters
• the brood forms of uncials are more readable at small sizes than rustic capitals
6. Half-uncials
• formal beginning of lowercase letterforms
• replete with ascenders and descenders.
7. Gutenberg
• Helped develop modern printing press
8. Typeforms
• developed in response to prevailing technology, commercial needs and aesthetic trends

History:

1. Blackletter (1450)
2. Oldstyle (1475)
3. Italic (1500)
4. Script (1550)
5. Transitional (1750)
6. Modern (1775)
7. Square Serif / Slab Serif (1825)
8. San Serif (1990)
9. Serif / Sans Serif / Semi Serif (1990)

Online lecture on Friday:
This week, we went straight to the point when lecture started since the class has more than 60 students. Everyone had a chance to show both lecturers their work and progress on their sketches and digitized work. Then, after lunch we were taught more techniques on how to use Adobe Illustrator for some of us who wanted to make the wave affect for "drown" and how to export our work properly. Next, students were allowed some time to show their work again after they've done amendments from the feedback given in the morning. Lastly, we were briefed on how to make the animation for Exercise 1 using Illustrator and Photoshop.

Week 3
Pre-recorded lecture notes: (Typo_2_Text_P1)

The lecture was on text formatting relating to our second exercise. We learned what kerning, leading and tracking meant and how to apply them effectively. Ragging is the edges of a block of text after it's been formatted to flush left, right, or center and we should avoid having jagged edges. A typographer's first job is to provide clear, appropriate presentation of the author's message. If you take notice of the type before the you see the message, change the type because it shouldn't call attention to itself.

We also learned typographic terms as shown below:

Other than that, there were other elements to typography such as small capitals, uppercase and lowercase numerals, and ornaments that might be useful to us in Exercise 2 Type Formatting.

There was no online live lecture this week as it was labour day on Friday.

Week 4
There was no assigned pre-recorded lecture this week. The class taught by Mr. Vinod was mostly about Adobe InDesign and how we are supposed to carry out our 2nd Exercise. It was a thorough demonstration lesson on the tools we needed such as margins and columns and how to create guides to help us format text properly. We learned some important facts and terms during this class as well:

1. Point size, line length and leading are the 3 things that govern readability.
2. Leading should be 2.5 to 3 point sizes bigger than the point size of the font.
3. We should only use a maximum of 3 columns in an A4 size template.
4. Use kerning and letterspacing to adjust the ragging.
5. Cross alignment is to have a common baseline in separate columns.
6. Force line break follows the leading, while paragraph break follows the space-after or paragraph spacing.
7. Not all font families have small capitals.
8. Widow is the single word that is left out in the last line of a paragraph. Orphan is the single word or last line in a paragraph that got separated into another column. Both of these are a big no-no when formatting text.

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1VsRGHGWoQFNmTIgEpapn2aeOq0o1WA4P/preview" width="640" height="480"></iframe>


Exercise 1 : Type Expression
We are required to express the following 6 words typographically to reflect the words' meaning. We are only allowed to use 9 type families which are, Bembo, Futura, Gill Sans, ITC Garamond, ITC New Baskerville, Janson Text LT, Serifa, and Univers LT. The words given to us are LOUD, DROWN, DISAPPEAR, PUSH, FLY, HIDDEN, KILL, LOVE and we are required to choose 6.

Steps:

1. Identify the appropriate typeface
2. Sketch some ideas out for each word
3. Digitize artwork in Adobe Illustrator

My Process:

Figure 1.1 Type expression for LOUD

At first when I was sketching the word, I was trying very hard to make it look like a loud speaker shape with only the words itself. Then I ended up experimenting with the size of the words and eventually ended up using some small graphical elements.

Figure 1.2 Type expression for DROWN

For drown I was trying to make the O and W look like a man drowning while waving his arms for help. That proved to be an issue when I tried to digitize it with the font families provided as there were no fonts where the W's middle peak is shorter that the sides.

Figure 1.3 Type expression for DISAPPEAR

For this word, I intend to make the words fade off. I played around with the direction of the word making it look like it's disappearing down a road or highlighting "appear" but fading out the "dis" to reflect the meaning of the word.

Figure 1.4 Type expression for PUSH

There wasn't many ideas for Push but I knew that I wanted the "P" to be pushing the other alphabets away and I experimented with the way I positioned the P and its type faces.

Figure 1.5 Type expression for HIDDEN

At first I wasn't sure about this word because it's hard to express it's meaning by hiding it. My first idea was to put the 2 "D"s facing each other to express it as something "hidden behind closed doors". My final idea for the word search was inspired by my favourite MCO past time because I printed word search off the internet. So, I ended up hiding the word "hidden" inside the word search puzzle.

Figure 1.6 Type expression for KILL

I really enjoyed expressing this word because I'm a fan of murder mysteries. My favourite idea was the one inspired by the famed Zodiac Killer's symbol. I used a small graphical element; a circle, to make the symbol. Other than that I was inspired by murder mystery posters and book covers, many featured knives and guns as weapons. So, I tried making the Chinese word for knife "刀" by using 2 "L"s, one uppercase and one lowercase. The first picture is also using the "K" like a knife, making it look like it's stabbing the rest of the alphabets. 

My First Attempt:

Figure 1.7 Digitization First Attempt

It took me a really long time to figure out how to use Illustrator properly but thank god there's google but of course I can improve on my techniques. But for now, I think I did okay for my first time using Illustrator.  : ]

Final Product (after feedback):

Figure 1.8 Final Product (exported as JPEG)

Figure 1.9 PDF version

Animated Version:

Figure 1.10 GIF animation (First Attempt)

I animated the word "HIDDEN" for this part of the exercise because I thought it wasn't too simple yet the concept was interesting enough to be turned into a GIF. Overall, I think it turned out great. The GIF makes it look like I'm hiding the word among all the other letters like in a word search puzzle yet still making sure the audience knows HIDDEN is the word I intended by highlighting it in the beginning then blending it in by making the letters all black.

After Feedback (Final Product):

Figure 1.11 Final Product of GIF animation

After corresponding with Mr. Vinod, he noted that the meaning of the word didn't show as much in my first animation (Figure 1.9) and suggested that I change the order of the animation to slowly reveal the word "HIDDEN". I made the amendments and I see that it does look better and I also removed the fading of letter by letter of "hidden" at the end.

Exercise 2: Type Formatting

We are required to learn how to use leading, tracking, kerning and paragraph formatting effectively to format text according to hierarchy of information and appropriate styling. For this exercise, we used Adobe InDesign. This was done in Week 4 and 5.

Week 4 Instructions:

1. Type out all 10 type families on the first page.
2. Choose a type face that is suitable to your personality or preference and type your name in a 90mm x 55mm rectangle. Kern the spaces between the letters so that there is even spacing.
3. Experiment with different styles and placement for your name, address and contact information. You should create a style that is suitable to differentiate the information hierarchy.
4. Using the style of the name card of your choice. It now becomes a letter heading. We are to type out a 200 word piece about ourselves and style using columns and row guides being mindful of the ragging, tracking and leading.

Figure 2.1 Type Formatting Exercise in PDF

Final Product:

Figure 2.2 Business Card Formatting (JPEG format)

For the business card formatting, I chose to go with Futura Std Book because it's simple and clean. I did face some problems formatting my address because of the length. For example, if I put the "Jalan Permata 1" with the "Taman Permata" together it looks a too long compared to the rest of the address lines and if I separate then then it looks too short. So i did different options according to the space I am provided with.

Figure 2.3 Letterhead Text Formatting (JPEG format)

Figure 2.4 Letterhead, Envelope, Business card (JPEG format)

Figure 2.5  3 Grids (Screen capture)

For this page, we were asked to screen capture because if exported, it appears as a blank page.

Figure 2.6 Type Setting and Layout 1 (JPEG format)

Figure 2.7 Type Setting and Layout 2 (JPEG format)

Figure 2.8 Type Setting and Layout 3 (JPEG format)

For the final page of the Text Formatting Exercise, I placed my content in 3 columns. Using the first column for my image with the caption aligned left. I did cross align for the caption and content, as well as the main heading aligned to my name on the right. The content point size is 10pt while the caption is 8pt but they both have the same leading and paragraph spacing of 13pt in order to make them cross align. 

Final PDF Version:

Figure 2.2 Final Product Exercise 2 PDF version

---

FEEDBACK

Week 1
General Feedback:

1. Make sure sketches are properly scanned with good ensure that there is good lighting and no gradient visible
2. In the digitized version, we should be using all the white space effectively
3. Make sure digital version is exported as a jpeg file
4. Finish work / tasks ON SCHEDULE
5. We are not allowed to stretch / distort type faces when doing digitization

Specific Feedback:

1. Sound lines for LOUD move inside the O
2. KILL can be improved
3. DISAPPEAR can be straightened
4. Raise water level on DROWN
5. Design for HIDDEN is good

Week 2
There was no general feedback since we didn't have class because of labour day.

Specific Feedback:

1. Change order of animation to show the word HIDDEN becoming clearer as the GIF progresses.

Week 3
There was no feedback, during lecture we didn't show Mr. Vinod our work and he did demonstrations on InDesign only.

Week 4
General Feedback:

1. Envelope usually only has name and address and maybe the website too.
2. Ragging shouldn't be too neat either.
3. When making the business card in 2 columns, the text shouldn't invade the space of the next column.

Specific Feedback:

1. Change my choice of letterhead and the one used in the envelope as well.
2. Letter spacing and ragging is good.
3. Layout 2, make the text flow into the next column a bit more.
4. The 3rd layout i did on my own was good, just need to align the caption under the image to the left.

---

REFLECTIONS

Week 1

1. Experience
• I appreciate that the lecturer took things slow because I was actually very nervous about studying in a field that I have no experience in. I was afraid of being the odd one out and that I had no artistic talent.
• There were breaks at appropriate intervals that gave me time to digest everything.
2. Observations
• I observed the lecturer being very patient and took the time to explain everything clearly
• I also see that the lecturers don't expect me to be experienced in using Adobe Illustrator for the exercise and taught us how to use a few features.
3. Findings
• I found the class enjoyable and I hope that it can be a safe space where I can express myself freely without harsh scrutiny.

Week 2

1. Experience
• Generally chill lecture. Everyone showed their progress on sketching and digitization. It was interesting to see all the ideas that we came up with and there were some ideas that I didn't think of that genuinely intrigued me.
2. Observations
• I observed that many students didn't follow instructions but I'm not one of them so my review from the lecturers was quick and concise.
3. Findings
• I found that although the lecturers were patient with us, they value our cooperation when it comes to abiding by the deadlines set for certain tasks. I have been following their instructions and deadlines and will continue to do so.

Week 3

1. Experience
• Since it was Labour Day, there was no online class but we were given instructions through pre-recorded video and the instructions were clear and examples given were helpful.
• There was a one hour consultation period in the morning for students who were seeking feedback for their work on Exercise 1.
2. Observation
• It was my first time using InDesign, and I found out through following the video tutorial that text formatting is no easy task and there's so many elements to consider.
3. Findings
• I made a mistake with the leading and realized on my own afterwards that I reduced the point size of the text without reducing the leading and the text took up too much space. So now I pay close attention to my point size and leading.

Week 4

1. Experience
• The lecturer gave a thorough demonstration and I was able to follow and understand terms and concepts.
• I already made sure to update my e-portfolio to what was expected of me.
2. Observations
• I found the demonstrations to be helpful and he explained all the tools we will need for the exercise.
3. Findings
• I discovered new terms and concepts such as cross alignment, widows and orphans in typographic terms.

---

FURTHER READING

Week 1
Excerpt from: Typography Best Practices (published by Smashing Magazine)
The Perfect Paragraph by Heydon Pickering

Figure 3.1 Smashing Magazine - Typography Best Practices

This section discussed about how type faces affect the readability of a paragraph whether in print or digitally.

"A well-set paragraph of text is not supposed to wow the reader; the wowing should be left to the idea or observation for which the paragraph is a vehicle"

The appearance of the text shouldn't be said to have no appeal at all, but on the contrary, well-balanced, comfortably read typography is a thing of beauty. It's just not the asserting sort of beauty that might distract you from reading. Your choice of font is important, but the kind of type family you choose is project-specific. The conventional wisdom among web designers is that sans-serif fonts are suitable body text is just a rule of thumb. The x-height refers to the distance between the baseline and the midline, a measure of lowercase character height. A diminutive x-height could impair the readability of a font.

Things to consider:

1. Breadth of the font family
• making sure the font includes all of the necessary bold, semi-bold, bold-italic and italic styles to use for a variety of purposes such as headings or emphasis.
2. Relating to rendering
• some fonts might not render well at small sizes
• Notice that embedded fonts are often reserved for headings, while system fonts such as Verdana are relied on for body text
3. Font size and measure
4. Leading and vertical rhythm
5. Word spacing and justification

Week 2
The Visible Word: Experimental Typography and Modern Art, 1909-1923
by Johanna Drucker

This book discussed how typography developed to become part of the modern world of advertising, literary journals and design for the general media.

There was self-conscious awareness of design present in the commercial realm, but never clearly articulate as a separate, distinct aesthetic or rhyme and reason. A large number of books described the technical and mechanical process of printing and typography, but books describing design choices and techniques barely existed. The problems of layout, typeface choice and compatibility, or any of the many aspects in composing complex and intricate pages which were the daily task of the compositor, simply did not merit explicit attention. There developed a split in advertising and book design; the suggestions for one were considered so inappropriate for the other that there was never the question of a crossover.

A journal for the advertising trade was published in 1913, discussed typography and advertising, stressing the importance of basic graphic design considerations in advertising.

"Most advertisement would be improved by a better knowledge of typography, and by a sense of the appropriateness of a particular typeface to a particular kind of message. This would communicate the ideas, features and marks of individuality. The judicious use of space available in an advertisement is just as important as the phrases themselves, because the logical placement and presentation determine how the sentences strike the eye"


Week 3 
The Complete Manual of Typography, Second Edition: A Guide to Setting Perfect Type
by James Felici

OpenType Layout Features:
The OpenType font format was designed with internal structures that allow a type designer to populate a font with alternate forms for certain characters. These layout features allow you to have OpenType-savvy programs automatically substitute alternate characters when they’re available. These substitutions can be restricted to a selected passage of text or applied globally to entire documents.

1. Small Capitals
• Reduced-size capital letters are used for setting certain kinds of type, including acronyms and certain abbreviations. Capital letters that have been electronically scaled down in size are ill proportioned in this role, so specifically designed small capitals should be used when available.
2. Alternate Numerals
• The standard numerals contained in most typefaces all sit on the baseline and all have the same width known as tabular lining numerals. Alternate forms with proportional, varying widths—proportional lining numerals—may also be available in a font.
3. Automatic Fractions
• The keystroke sequence 12/25, for example, will be converted to ¹²⁄₂₅
4. Alternate Ligatures
• Ligatures are fused characters designed to alleviate certain awkward character shape interactions and sometimes used for historical or linguistic reasons. 
• All text fonts include the common fl and fi ligatures.
5. Swash Characters
• Swashes are exaggerated extensions to the strokes of certain characters, both upper- and lowercase.
6. Superscripts and Subscripts, Ordinals and Superiors
• Superscripts and subscripts are reduced-size letters and numerals used in mathematical and scientific notation. 
• Ordinals are alphabetic characters used for indicating numeric values.
7.  Titling and Case-specific Forms
• Designed for use in large display sizes. 
• Case-specific alternates include characters such as elevated hyphens for use in all-caps material.
8. Contextual Alternates and Positional Forms
• Applied when the shape and alignment of a character vary according to where in a word it appears. 
9. Slashed Zero
• A slashed zero can be substituted for a normal zero to avoid confusion with a capital O.
10. Stylistic Sets
• These sets are designated by the typeface designer and may consist of a single glyph They may also include sets of lowercase characters with longer or shorter ascenders and descenders.

Week 4
Excerpt from: Pioneers of Modern Typography

Author: Herbert Spencer

The roots of modern typography are entwined with those of twentieth-century painting, poetry, and architecture. Photography, technical changes in printing, new reproduction techniques, social changes, and new attitudes have helped to erase the frontiers between the graphic arts, poetry, and typography have encouraged typography to become more visual, less linguistic, and less purely linear.

But modern typography was not the abrupt invention of one man or even of one group. It emerged in response to new demands and new opportunities. The violence with which modern typography burst upon the early twentieth-century scene reflected the violence with which new concepts in art and design in every field were sweeping away exhausted conventions and challenging those attitudes which had no relevance to a highly industrialized society. During the nineteenth century, the printing industry had failed to properly recognize the fundamental changes which were taking place in society and consequently in the nature of what was printed. The rapid growth of industrialization and of mass production had created demands for new kinds of printing.