Typography - Exercises
28/08/19 - 18/09/19 (Week 1 - Week 4)
Ahmed Yaman Ibrahim (0341119)
Typography
Exercises
LECTURE NOTES
Lecture 1: Briefing
28/08/19 (Week 1)
Our first class consisted of us creating our design blogs, with Mr Vinod and Mr Shamsul giving us a detailed breakdown of what kind of content goes into our blogs and what format it should follow. They emphasized the importance of being methodical with how we put information into the blog. We were also shown examples of how senior students presented their blogs.
This was followed by an introduction to Typography and what to expect from the module; we were shown what kinds of material to read/use for research as well as names of designers specializing in typography that we could look into. We were also taught the difference between a font, typeface and type family. Before concluding the class, we were given our first exercise for the coming week, which was to come up with five different letterings of our name based on a personality of our choosing.
Lecture 2: History of Typography
This was followed by an introduction to Typography and what to expect from the module; we were shown what kinds of material to read/use for research as well as names of designers specializing in typography that we could look into. We were also taught the difference between a font, typeface and type family. Before concluding the class, we were given our first exercise for the coming week, which was to come up with five different letterings of our name based on a personality of our choosing.
Lecture 2: History of Typography
04/09/19 (Week 2)
Class began with a presentation on the developmental timeline of typography. We were shown how early letterforms were developed based on the instruments and materials used to create them (i.e. carving onto clay with a stick or onto stone with a chisel). As such, early letterforms usually consisted of sharp, straight lines and circles as those shapes were easier to carve.
Later on as writing styles developed, the Greeks developed what was known as 'boustrophedon' where they wrote text alternately from left to right for every line. It was interesting to note that whenever the writing changed direction, the orientation of the letters themselves changed as well.
 |
| Fig. 1.1: Boustrophedon |
Square capitals, which were found in Roman monuments had finishes at the ends of the letters, known as serifs. This letterform evolved into what was known as rustic capitals, which was essentially a compressed version of square capitals that allowed one sheet to fit double the amount of words while also taking less time to write, despite being more difficult to read.
 |
| Fig. 1.2: Square capitals |
 |
| Fig. 1.3: Rustic capitals |
Uncials (coming from the Latin word "uncia" meaning a twelfth of anything) and half-uncials are considered the predecessors to what we now know as lowercase letters, incorporating ascenders and descenders into the letterforms.
 |
| Fig. 1.4: Uncials and half-uncials |
When Charlemagne entrusted Alcuin of York to standardize religious texts in Europe, they developed a letterform that incorporated uppercase (majuscule), lowercase (miniscule), capitalization as well as punctuation. This script later on developed to a letterform known as Blackletter or textura in northern Europe, which was quite condensed and had heavy vertical strokes. In southern Europe, a rounder, more humanistic style was developed, known as rotunda.
 |
| Fig. 1.5: Blackletter script |
 |
| Fig. 1.6: Rotunda script |
Johannes Gutenberg, a European blacksmith is attributed with introducing printing to Europe with the printing press; his expertise as a blacksmith and engineer allowed him to create movable type in the form of Blackletter by casting metal alloys with negative impressions of each letter. His 41-line Bible is the first printed version of the Bible and is also considered his best work for its quality.
 |
| Fig. 1.7: New York Public Library's copy of the Gutenberg Bible |
Lecture 3: Text formatting, part 1
11/09/19 (Week 3)
Mr Vinod and Mr Shamsul started off by reviewing our lettering animations for Exercise 1. Afterwards, Mr Vinod began a lecture on text formatting, in order to prepare us for the upcoming Project 1.
The lecture started off with Mr Vinod giving us the basics of type formatting and explaining to us the difference between letterspacing and kerning; letterspacing refers to increasing space between letters, while kerning refers to decreasing space between letters. Doing these together to adjust the space in a word or sentence is what is known as tracking. Mr Vinod explained to us the nuances of text formatting within the type community, and how type designers do not normally appreciate the letterspacing of lowercase letters in their typefaces, as they were already designed with the counter-forms (shapes created by the spaces between the letters) in mind. Conversely, uppercase letters are often letterspaced as they are designed to be able to stand on their own.
We then went over text alignment.
Flush left, ragged right is the format most commonly seen and is closest to the actual experience of writing by hand, which leaves the starting point of each line even, or "flush," and the ends uneven, or "ragged." This alignment is easily readable, as the asymmetry at the ends of the lines help you keep track of which line you are on when reading—science has proven that we read text through patterns and not by the letters themselves. The spaces between the words are consistent and creates an even grey value (the color balance created by the text and the negative space).
The purpose of understanding and following these guidelines is to ensure that intended message is clearly and appropriately through the text as opposed to having the type draw attention to itself.
We then went through the differences between different typefaces in terms of their characteristics, as well as type anatomy.
We then looked further into formatting text in a paragraph, with understanding how leading and line length work.
Leading is the spacing between lines of text in a paragraph; if the leading is set too tightly, it makes it easy for the reader to lose their place on a line, and if it is set too loosely, it creates striped patterns in the paragraph that are visually unappealing.
Line length refers to the length of one line of text on a paragraph. The general rule of thumb for line length on a paragraph is to leave it around 55-65 characters. Body text on a paragraph is maintained around 8-12pts on average, and so this line length is generally appropriate at reading distance. As such, the paragraph's leading is also determined by the type's point size; as a general rule, 3pt leading should be added to a paragraph based on the type's point size. In other words, a paragraph in 8pt size should maintain 11pt leading.
Lecture 4: Text formatting, part 2
The lecture started off with Mr Vinod giving us the basics of type formatting and explaining to us the difference between letterspacing and kerning; letterspacing refers to increasing space between letters, while kerning refers to decreasing space between letters. Doing these together to adjust the space in a word or sentence is what is known as tracking. Mr Vinod explained to us the nuances of text formatting within the type community, and how type designers do not normally appreciate the letterspacing of lowercase letters in their typefaces, as they were already designed with the counter-forms (shapes created by the spaces between the letters) in mind. Conversely, uppercase letters are often letterspaced as they are designed to be able to stand on their own.
 |
Fig. 1.8: Kerning |
 |
| Fig. 1.9: Normal, loose and tight tracking |
We then went over text alignment.
Flush left, ragged right is the format most commonly seen and is closest to the actual experience of writing by hand, which leaves the starting point of each line even, or "flush," and the ends uneven, or "ragged." This alignment is easily readable, as the asymmetry at the ends of the lines help you keep track of which line you are on when reading—science has proven that we read text through patterns and not by the letters themselves. The spaces between the words are consistent and creates an even grey value (the color balance created by the text and the negative space).
Centered format forces symmetry on the general shape of the paragraph, but also leaves both ends of the paragraph ragged. This makes the shape of the paragraph very prominent; as opposed to having it seem like actual text, center aligning a paragraph gives it more of a pictorial quality, which then in turn also affects its relationship with other text on the page that it is on.
"Flush right, ragged left" is the opposite of left alignment, as this makes the ends of each line even and the starting points uneven. This alignment is most often used in situations such as adding captions to images, but not often recommended for large paragraphs as it can confuse the reader as to which line they are on, due to the starting points being uneven.
Justified text also forces symmetry on the shape of a paragraph, by increasing and decreasing spaces between words on a line. In large blocks of text, the unevenness between spaces can lead to what is known as "rivers" of space running down vertically through multiple lines of text. This is avoided by paying attention to line breaks and hyphenation.
 |
| Fig. 1.10: Identifying rivers in justified text |
The purpose of understanding and following these guidelines is to ensure that intended message is clearly and appropriately through the text as opposed to having the type draw attention to itself.
We then went through the differences between different typefaces in terms of their characteristics, as well as type anatomy.
 |
| Fig. 1.11: Anatomy of a typeface |
We then looked further into formatting text in a paragraph, with understanding how leading and line length work.
Leading is the spacing between lines of text in a paragraph; if the leading is set too tightly, it makes it easy for the reader to lose their place on a line, and if it is set too loosely, it creates striped patterns in the paragraph that are visually unappealing.
Line length refers to the length of one line of text on a paragraph. The general rule of thumb for line length on a paragraph is to leave it around 55-65 characters. Body text on a paragraph is maintained around 8-12pts on average, and so this line length is generally appropriate at reading distance. As such, the paragraph's leading is also determined by the type's point size; as a general rule, 3pt leading should be added to a paragraph based on the type's point size. In other words, a paragraph in 8pt size should maintain 11pt leading.
Lecture 4: Text formatting, part 2
18/09/19 (Week 4)
We picked up where we left off in last week's text formatting lecture; we reviewed the content from the lecture and continued on with paragraph formatting.
There are a couple ways to indicate paragraphs in a text; one is to use a pilcrow (¶), which was used since medieval times, as it saves space on a page.
More commonly used is a paragraph space; the size of the space should be equal to that of the type's point size, as this ensures what is known as cross-alignment between columns of text on a page.
Another form of indicating paragraphs is to use indentation, also used to save space. A rule of thumb is to maintain the indent the same as the point size of the text.
We also reviewed the difference between line space and leading.
In order to maintain cross-alignment in a situation where there are large and small point size paragraphs on a page, we are advised to double the leading.
We then looked into some of the dont's in typography, namely widows and orphans; a widow is a short line of text left at the end of a text column, while an orphan is the same but at the start of a new column.
These issues can be mitigated via careful tracking and line breaks where necessary.
We then learned some nuances of highlighting text in a paragraph, as well as how to compensate for difference in visual balance between highlighted and non-highlighted text. We also looked into different ways of adding headlines within text.
After the lecture, we were tasked with preparing for Project 1 by next week (cont. in Project 1 post)
There are a couple ways to indicate paragraphs in a text; one is to use a pilcrow (¶), which was used since medieval times, as it saves space on a page.
 |
| Fig. 1.12: Pilcrows used in early texts |
More commonly used is a paragraph space; the size of the space should be equal to that of the type's point size, as this ensures what is known as cross-alignment between columns of text on a page.
 |
| Fig. 1.13: Paragraph spacing |
Another form of indicating paragraphs is to use indentation, also used to save space. A rule of thumb is to maintain the indent the same as the point size of the text.
 |
Fig. 1.14: Standard indentation |
 |
Fig. 1.15: Extended indentation, less commonly used |
We also reviewed the difference between line space and leading.
 |
| Fig. 1.16: Line space vs leading |
In order to maintain cross-alignment in a situation where there are large and small point size paragraphs on a page, we are advised to double the leading.
We then looked into some of the dont's in typography, namely widows and orphans; a widow is a short line of text left at the end of a text column, while an orphan is the same but at the start of a new column.
 |
| Fig. 1.17: Widows and orphans |
We then learned some nuances of highlighting text in a paragraph, as well as how to compensate for difference in visual balance between highlighted and non-highlighted text. We also looked into different ways of adding headlines within text.
After the lecture, we were tasked with preparing for Project 1 by next week (cont. in Project 1 post)
INSTRUCTIONS
EXERCISE
Lettering (Week 1 - 2)
For Week 2, we were tasked with coming up with 5 letterings for our name based on a personality of our choosing. In my case, I decided to go with "expressive" as my personality as I felt it best represented me - I tend to be quite vocal about my opinions and don't often keep things to myself. I sketched out a few designs and tried to refine them to see if I could make them look better.
 |
| Fig. 2.1: Exercise 1 - Expressive: Sketch 1, a simple speech bubble-style |
 |
| Fig. 2.2: Exercise 1 - Expressive: Sketch 2, ink scratch-style |
 |
| Fig. 2.3: Exercise 1 - Expressive: Sketch 3, a loud comic book-style exclamation |
 |
| Fig. 2.4: Exercise 1 - Expressive: Sketch 4, Extending loudspeaker-style |
 |
| Fig. 2.5: Exercise 1 - Expressive: Sketch 5, Graffiti-style |
Based on my sketches, Mr. Vinod and Mr. Shamsul suggested that I go ahead with the fourth design (loudspeaker style) and begin the digitization process.
 |
| Fig. 2.6: Exercise 1 - Expressive: Tracing the sketch on Illustrator |
 |
| Fig. 2.7: Exercise 1 - Expressive: Fixing proportions |
 |
| Fig. 2.8: Exercise 1 - Expressive: digitized version on Illustrator |
Fig. 2.9: Exercise 1 - Expressive: final digitzed version
 |
| Fig. 2.10: Exercise 1 - Expressive: experimenting with the loudspeaker motif |
After experimenting a bit, I decided to move away from the loudspeaker theme as I realized that it might communicate the wrong message, and focused on the movement of the letters themselves in the animation as I felt that would be more true to my theme of being "expressive." My challenge was trying to somehow express the weight of the letters without it coming off as "loud." I decided to transition the letters into the animation one by one; this way, I felt I could convey the intended message and display the added weight of each letter, without making the "loud" aspect of the word more apparent than I need to, if that makes sense.
 |
| Fig. 2.11: Exercise 1 - Expressive: animation frames on Illustrator artboards (66 frames) |
 |
| Fig. 2.12: Exercise 1 - Expressive: final animation |
I added a very subtle movement at the end of the last letter to add some emphasis to the weight of the letters.
Type Expression (Week 3)
For this week's exercise, we were given a list of six words (SNEEZE, CLEAN, PARTY, GIGANTIC, EXPLODE, EMERGE) for us to express using type. We were give nine type families to work with and could only make the type expressions using said families.
I sketched out my ideas and consulted with Mr Vinod and Mr Shamsul; based on their feedback I made a few adjustments and went ahead with digitizing my sketches.
Fig. 2.16: Type Expressions - Final version
Afterwards, we were asked to choose one of the words to animate. I decided to go with "clean" as I originally digitized it with an animation in mind.
I sketched out my ideas and consulted with Mr Vinod and Mr Shamsul; based on their feedback I made a few adjustments and went ahead with digitizing my sketches.
 |
| Fig. 2.13: Type Expressions - Sketches for SNEEZE, CLEAN, PARTY and GIGANTIC |
 |
| Fig. 2.14: Type Expressions - Sketches for EXPLODE and EMERGE |
 |
| Fig. 2.15: Type Expressions - Digitized |
Fig. 2.16: Type Expressions - Final version
Afterwards, we were asked to choose one of the words to animate. I decided to go with "clean" as I originally digitized it with an animation in mind.
 |
| Fig. 2.17: Type Expressions - "CLEAN" animation frames (33 frames) |
 |
| Fig. 2.18: Type Expressions - "CLEAN" final animation |
FEEDBACK
Week 2
After showing my lettering options (based on my chosen personality of "expressive") to Mr. Vinod and Mr. Shamsul, they helped me finalize a design to digitize (the extending loudspeaker-shaped design). On the digitized image, Mr. Vinod suggested that I adjust the center point of the letter "M" to better balance it out, and to experiment with how the animation plays out as it might convey "loud" rather than "expressive" as intended, due to the nature of the design. In general, we were also advised to brush up on the history of typography as it would help provide context for our study material, as well as to practice using Illustrator and Photoshop's tools to get a hang of them.
Week 3
After having a look at my animation Mr. Vinod said it was alright for a first attempt, and addressed the issue of the personality coming off as 'loud' instead of 'expressive.' He advised that I extend the jitter when the last letter hits at the end of the animation. As for general class feedback, he reminded us to label every image uploaded to the blog—figure no. followed by description, and in the case of our name lettering, include the associated personality in every caption. Also in the blog, 'Exercise' should be a subheading under 'Instructions' on the blog and should not be considered a heading by itself.
Week 4
Mr Vinod and Mr Shamsul were pleased with my type expressions, especially with the words "CLEAN" and "GIGANTIC." They were also happy with my "CLEAN" animation. In terms of general feedback for the class, we are to compile them towards the end so as to not have too many subheadings under that heading, when updating our blog.. We are also to label our sketches with captions documenting our development process of the type expressions, in order to show progression. Mr Vinod also reiterated that we are meant to download and install ALL 9 type families given in the type expressions exercise.
REFLECTIONS
Experience:
When we were asked to choose a personality for our lettering design in week 1, I realized it was quite difficult for me to come up with something that I felt represented my personality well, while also being something that I could draw on paper and animate as a word. I decided to sketch out a few rough ideas and tried to refine them by redrawing them slightly differently—it was during this process that I realized I could use "expressive" as my personality, as it was both something I felt I could refer to myself as, while also being able to communicate that theme properly when I sketch it out as my name. In week 2, I spent a lot of time trying to sort out the proportions when I traced my sketch of the lettering on Illustrator. During week 3, I had a bit of trouble with conveying the meaning of the word through the type, in the type expressions exercise. In week 4, when preparing for Project 1, I spent a lot of time coming up with an expressive design for the headline text, but couldn't come up with anything I was personally satisfied with.
Observation:
In week 1, I noticed that a lot of the students, including myself, were wary of how to progress with our work as we had to absorb a lot of information on day one, particularly regarding the process of documenting our work on the blog. As I experimented with different ways to animate my lettering in week 2, I noticed that most of the options I tried out ended up communicating a different message ("loud" instead of "expressive") due to the shape of the design itself. During week 3, I noticed a lot of students had similar ideas for some of the words in the type expression exercise, but with their own different styles. In week 4, I observed that the texts we were given for Project 1 each had a strong personality of their own based on their content, if that makes sense.
Findings:
In the first week, I found that I could refine my ideas well the more I redrew them. In week 2 and 3, I realized that experimenting with how the letters move during the animation process, rather than only trying to focus on theme itself, helped me form my ideas better for the animation. In week 4, I found that you can only convey the meaning of text through design once you've properly read through and understood what it says.
FURTHER READING
Thinking with Type - Ellen Lupton
Week 1 - 4
Fig. 3.1: Thinking with Type by Ellen Lupton
This book serves as a guide to the basics and details of typography along with a quite a bit of history on its development, giving context to how typography has evolved into what it is today. It also delves into the nuances of formatting text in paragraphs, common mistakes and other do's and don'ts that help distinguish between amateur and professional typography. The book emphasizes on the idea that typography is something more evolutionary that mechanical, and that if used appropriately, it can also connect the bridge between language and art.
 |
| Fig. 3.1: Thinking with Type by Ellen Lupton |
This book serves as a guide to the basics and details of typography along with a quite a bit of history on its development, giving context to how typography has evolved into what it is today. It also delves into the nuances of formatting text in paragraphs, common mistakes and other do's and don'ts that help distinguish between amateur and professional typography. The book emphasizes on the idea that typography is something more evolutionary that mechanical, and that if used appropriately, it can also connect the bridge between language and art.
