Typography / Task 1 : Exercises

27.8.2021 - 24.9.2021 (Week 1 - Week 5)
Michelle Angeline Gunawan / 0349760 / Bachelor of Design in Creative Media
Typography
Task 1 / Exercises

---

LECTURES

In the first week of class, Mr. Vinod made sure that we had joined the Facebook group, which contained information about the class. He then explained how to make a good e-portfolio. He explained it in great detail, he gave us a video on how to set up the e-portfolio format. After that, he checked some of the progress of our e-portfolio, he also gave some feedback. And then at the end of the class, he made a voting session about our first task. We were asked to give some ideas and then vote for them. The word "terror" is mandatory and the other 3 words are free for us to choose.

Typography : Development / Timeline

Early letterform development: Phoenician to Roman

• Writing meant scratching wet clay with a sharpened stick or carving stone with a chisel

Figure 1.0 Evolution from Phoenician Letter 

• The Greeks changed the direction of writing when Phoenicians, like other Semitic peoples wrote from right to left.
• Boustrophedon : the lines of text read alternately from right to left and left to right.
  
  
  

  Figure 1.1 Phoenicians' Reading Orientation
  
  
• Etruscan (and later Roman) carvers worked in marble-painted letters before inscribing them.
  
  
  

  Figure 1.2 Roman Inscription
  
  

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

• These letterforms has a serifs added to the end of the main stroke.
  
  
  
  Figure 1.3 Square Capital (4th - 5th Century)
  
  
• Although rustic capitals were faster and easier read, they were slightly harder to read due to their compressed nature.
  
  
  
  Figure 1.4 Rustic Capitals (Late 3rd - mid 4th Century)
  
  
• Both square and rustic capitals were typically reserved for documents of some intended performance.
  
  
  
  Figure 1.5 Roman Cursive (4th Century)
  
  
• Uncials incorporated several aspects of Roman cursive hands, most notably in the A, D, E, H, M, U and Q forms.
• Uncia : Latin for a twelfth of anything.
  
  
  
  Figure 1.6 Uncials (4th - 5th Century)
  
  
• A further formalization of the cursive hand, half-uncials mark the formal beginning of the lowercase form, full of ascenders and descenders, 2000 years after the origins of the Phoenician alphabet.
  
  
  
  Figure 1.7 Half-uncials (C. 500)
  
  
• In 789, Charlemagne as the first unifier of Europe since the Romans, issued an edict to standardize all ecclesiastical texts. The texts were rewritten by the monks using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century.
  
  
  
  Figure 1.8 Caloline Miniscule (C. 925)
  
  
• In northern Europe, a condense strongly vertical letterform know as Blackletter or Textura gained popularity. In the south, a rounder more open hand gained popularity, called 'rotunda'.
  
  
  
  Figure 1.9 Blackletter (Textura) (C. 1300)
  
  
• Gutenberg marshaled his skills to build pages that accurately mimicked the work of the scribe's hand - Blackletter of northern Europe.
  
  
  

  
  Figure 1.10 Line Bible, Johann Gutenberg (C. 1455: 42)
  
  

Text Type Classification

• 1450 Blackletter
  Its forms were based upon the hand-copying styles that were then used for books in northern Europe.
  
  
  
  Figure 1.11 Blackletter (1450)
  
  
• 1475 Oldstyle
  Based upon the lowercase forms used by Italian hum
  anist scholars for book copying and the uppercase forms found inscribed on Roman ruins.
  
  
  
  Figure 1.12 Oldstyle (1475)
  
  
• 1500 Italic
  Italics were soon cast to complement roman forms, although it was originally considered their own class of type
  
  
  
  Figure 1.13 Italic (1500)
  
  
• 1550 Script
  Originally and attempt to replicate engraved calligraphic forms.
  
  
  
  Figure 1.14 Script (1550)
  
  
• 1750 Transitional
  A refinement of oldstyle forms which was achieved in part because of advances in casting and printing.
  
  
  
  Figure 1.15 Transitional (1750)
  
  
• 1775 Modern
  This style represents a further rationalization of oldstyle letterforms.
  
  
  
  Figure 1.16 Modern (1775)
  
  
• 1825 Square Serif / Slab Serif
  It was originally heavily bracketed serif, with little variation between thick and thin strokes.
  
  
  
  Figure 1.17 Square Serif/ Slab Serif (1825)
  
  
• 1900 Sans Serif
  Occasionally, strokes were flared to suggest the calligraphic origins of the form (Optima). Sans serif is also referred to as grotesque (from the German word grotesk) and Gothic.
  
  
• 1990 Serif / Sans Serif
  Recent development, sans serif enlarges the notion of a family of typefaces to include both serif and sans serif alphabets (and often stages between the two).

Figure 1.18 Serif/ Sans Serif (1990)

Typography : Basic / Describing Letterforms

Knowing the component parts of a letterform makes it easier to identify specific typefaces.

• Baseline : The imaginary line the visual base of the letterforms.
• Median : The imaginary line defining the x-height of the letterforms.
• X-height : The height in any typeface of the lowercase 'x'.
  
  
  

  Figure 1.19 

  
  

• Stroke : Any line that defines the basic letterform
  
  
  Figure 1.20 Stroke
  
  
  
• Apex / Vertex : The point created by joining two diagonal stems.
  Stems : Apex - Above, Vertex - Below
  
  
  
  Figure 1.21 Apex/ Vertex
  
  
  
• Arm : Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).
  
  
  
  Figure 1.22 Arm
  
  
• Ascender : The portion of the stem of a lowercase letterform that projects above the median.
  
  
  
  Figure 1.23 Ascender
  
  
• Barb : The half-serif finish on some curved stroke.
  
  
  
  Figure 1.24 Barb
  
  
• Beak : The half-serif finish on some horizontal arms.
  
  
  
  Figure 1.25 Beak
  
  
• Bowl : The rounded form that describes a counter. It may be either open or closed.
  
  
  
  Figure 1.26 Bowl
  
  
• Bracket : The transition between the serif and the stem.
  
  
  
  Figure 1.27 Bracket
  
  
• Cross Bar : The horizontal stroke in a letterform that joins two stems together.
  
  
  
  Figure 1.28 Cross Bar
  
  
• Cross Stroke : The horizontal stroke in a letterform that joins two stems together in this lowercase letter f and t.
  
  
  
  Figure 1.29 Cross Stroke
  
  
• Crotch : The interior space where two strokes meet.
  
  
  
  Figure 1.30 Crotch
  
  
• Descender : the portion of the stem of a lowercase letterform that projects below the baseline.
  
  
  
  Figure 1.31 Descender
  
  
• Ear : The stroke extending out form the main stem or body of the letterform.
  
  
  
  Figure 1.32 Ear
  
  
• Em/en : Originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface.
  
  
  
  Figure 1.33 Em/en
  
  
• Finial : The rounded non-serif terminal to a stroke.
  
  
  
  Figure 1.34 Finial
  
  
• Ligature : The character formed by the combination of two or more letterforms.
  
  
  
  Figure 1.35 Ligature
  
  
• Link : The stroke that connects the bowl and the the loop of a lowercase G.
  
  
  
  Figure 1.36 Link
  
  
• Loop : The bowl created in the descender of the lowercase G in some typefaces.
  
  
  
  Figure 1.37 Loop
  
  
• Serif : The right-angled or oblique foot at the end of the stroke.
  
  
  
  Figure 1.38 Serif
  
  
• Spine : the curved stem of the S.
  
  
  
  Figure 1.39 Spine
  
  
• Spur : The extension of the articulated the junction of the curved and rectilinear stroke.
  
  
  
  Figure 1.40 Spur
  
  
• Stem : The significant vertical or oblique stroke.
  
  
  
  Figure 1.41 Stem
  
  
• Stress : The orientation of the letterform, indicated by the thin stroke in round forms.
  
  
  
  Figure 1.42 Stress
  
  
• Swash : The flourish that extends the stroke of the letterform.
  
  
  
  Figure 1.43 Swash
  
  
• Tail : The curved diagonal stroke at the finish of certain letterforms.
  
  
  
  Figure 1.44 Tail
  
  
• Terminal : The self-contained finish of a stroke without a serif. Terminals may be:
• Flat ('T' above)
• Flared
• Acute ('t' above)
• Grave
• Concave
• Convex
• Rounded as a ball or a teardrop.
  
  
  

  

  Figure 1.45 Terminal

  
  

Typography : Basic / The Font

• Uppercase (Capital Letters) : Including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.
  
  
  
  Figure 1.46 Uppercase
  
  
• Lowercase : Include the same characters as uppercase.
  
  
  
  Figure 1.47 Lowercase
  
  
• Small Capitals : Uppercase letterforms draw to the x-height of the typeface. They are primarily found in serif fonts (often called as expert set)
  
  
  
  Figure 1.48 Small Capitals
  
  
• Uppercase Numerals (Lining Figures) : They are the same height as uppercase letters and are all set to the same kerning width.
  
  
  
  Figure 1.49 Uppercase Numerals
  
  
• Lowercase Numerals (Old Style Figures or Text Figures) : They are set to x-height with ascenders and descenders. They are far less common in sans serif type-faces than in serif.
  
  
  
  Figure 1.50 Lowercase Numerals
  
  
• Italic : The forms in italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.
  
  
  
  Figure 1.51 Italic
  
  
• Punctuation, miscellaneous characters : Miscellaneous characters can change from typeface to typeface although all fonts contain standard punctuation marks.
  
  
  
  Figure 1.52 Punctuation
  
  
• Ornaments : Used as flourishes in invitation or certificates and usually are provided as a font in larger typeface family.
  
  
  
  Figure 1.53 Ornaments
  
  

Typography : Basic / Describing Typefaces

• Roman : The letterform is so called because the uppercase forms are derived from inscriptions or Roman monuments.
  
  
  
  Figure 1.54 Roman
  
  
• Italic : Named for fifteenth century Italian handwriting on which forms are based.
  
  
  
  Figure 1.55 Italic
  
  
• Oblique : Based on roman form of typeface.
  
  
  
  Figure 1.56 Oblique
  
  
• Boldface : Characterized by thicker stroke than roman form.
  
  
  
  Figure 1.57 Boldface
  
  
• Light : A lighter stroke than the roman form.
  
  
  
  Figure 1.58 Light
  
  
• Condense : A version of the roman form, and extremely condense styles are often called 'compressed'.
  
  
  
  Figure 1.59 Condense
  
  
• Extended : An extended variation of a roman font.

Figure 1.60 Extended

Typography : Text tracking : Kerning and Letterspacing

• Kerning : refers to the automatic adjustment of space between letters.
  
  
  
  Figure 1.61 Kerning
  
  
• Tracking : there are three types of tracking:
• Normal tracking
• Loose tracking
• Tight tracking
  
  
  
  Figure 1.62 Tracking
  
  

Typography : Text / Formatting Text

• Flush Left : the format most closely mirrors the asymmetrical experience of handwriting.
  
  
  
  Figure 1.63 Flush Left
  
  
• Centered : this format imposes symmetry upon the text, assigning equal value and weight to both ends of any line.
  
  
  
  Figure 1.64 Centered
  
  
• Flush Right : this format places emphasis on the end of a line as opposed to its start.
  
  
  
  Figure 1.65 Flush Right
  
  
• Justified : this format imposes a symmetrical shape on the text.
  
  
  
  Figure 1.66 Justified
  
  

Typography : Text / Texture

• It is important to understand how different typefaces feel as text.
• The different typefaces suit different messages.

Typography : Text / Leading and Line Length

• Type size : Text type should be large enough to be read easily at arms length - imagine yourself holding a book in your lap.
• Leading : Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place.
• Line length : Appropriate leading for text is as much a function of the line length as it is a question question of type size and leading.
  

Typography : Text / Type Specimen Book

• A type specimen book shows samples of typefaces in various different sizes
• A Type specimen book (or e-book for screen) is to provide an accurate reference for type, type  size, type leading, type line length.
• Compositional requirement : Text should create a field that can occupy a page or screen.

Typography : Text / Indicating Paragraphs

• Widow : a short line of type left alone at the end of a column of text.
• Orphan : a short line of type left alone at the start of new column.
  
  

Typography : Text / Highlighting Text

• You can highlight text by making them bold, italic, add colors or even change the typeface.
• When we change the typeface make sure to adjust the point size as well.
  
  
  
  Figure xx Point size difference in the same typeface
  
  
• When highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis of the text ensures readability is at its best
  
  
  
  Figure xx Difference of maintaining the left reading axis on text with field of colour
  
  
• It is necessary occasionally to place certain typographic elements outside the left margin of a column of type to maintain a strong reading axis.
• Quotation marks like bullets can create a clear indent, breaking the left reading axis.

Typography : Text / Headline within text 

• Typographers task is to make sure that headline is clearly signify to the reader the relative importance within the text to their relationship to other.

---

INSTRUCTIONS

Task 1 : Exercise 1 - Type Expression

Week 1 : 

When we were asked to choose the available options, I chose water, glitch and broken. The reason is that I find them interesting. I started to sketch them one by one and I actually struggled while sketching the word terror. It's really challenging to me. Then, I went on the internet to look for inspiration and ideas. Firstly I found this broken word. I was inspired to create similar look to it but I found out that my word is not that broken enough.

Figure 3.0 Word Broken Idea, Week 1 (28.8.2021)

Then, I tried to look for water but I ended up just sketching by my own ideas. The first water is actually similar to the second one, the difference is the position. The second water is hanging and has the dripping water. And for the third water, I was actually wanted to make it looked like a water puddles on the road. For the word glitch, I found this idea on the internet. It has the lines and the colored shadow. 

Figure 3.1 Word Glitch Idea, Week 1 (28.8.2021)

Then, I sketched out the first and second glitch similar to the glitch that I found before and decided to make the third glitch different to the other two. And here is the sketch of mine.

Figure 3.1 Type Expression Sketch, Week 1 (28.8.2021)

I actually created the second design for the word water. I get a little confused on choosing my two design of the word water.

Figure 3.2 The Word Water Second Design, Week 1 (28.8.2021)

On week 2, we get to give feedbacks to our breakout room member. And I started to finalize my design on Adobe Illustrator, I did some changes for three words except glitch, for the water I think my sketch has too much distortion so I decided so create wavy background that resembles the water. For the terror I actually improvise the second sketch of mine, instead of having the top effect, I add dark shadow around the word and back shadow as well. For broken, I split the broken more. And here is the final outcome.

Figure 3.3 Type Expression Final Outome, Week 2 (3/9/2021)

Type Expression Final Outcome

Week 3:

In week 3, we were ask to animate our type expression task. We need to choose one of our design and animate them using Adobe Illustrator and then Adobe Photoshop. Mr. Vinod gave us a video about how to animate them. We were then separated into break out rooms. I chose the word 'broken', and this is my first trial on animating type expression.

Figure 3.4 First Trial of the Word Broken, Week 3 (10.9.2021)

I did some changes, I put the word broken upper than before. I added some shaky effect and then the word broken splits into two like the broken heart and then starts to fall down and breaks. I made 12 artboards, some of them are duplicated and become 17.

Figure 3.5 Word 'Broken' Timeline, Week 3 (10.9.2021)

And this is for the final outcome of my animated word 'Broken'.

Figure 3.6 Word 'Broken' First Final Outcome, Week 3 (10.9.2021)

After some feedbacks were given. I changed the first movement of the word and I add more seconds to the last frame and this is how it turns out.

Figure 3.7  Animated Type Expression Final Outcome, Week 4 (17.9.2021)

Week 4 :

Task 1 : Exercise 2 - Text Formatting

For the first video which is the 1:4 video, I learned that we can change the kerning tracking on preferences which we can find under the edit.

Figure 3.8 Kerning Tracking

Then I also learned how to change the typefaces, increase and decrease the word's size, change the word's alignment, etc.

Figure 3.9 Text formatting without kerning, Week 4 (17/9/2021)

Figure 3.10 Text formatting with kerning, Week 4 (17/9/2021)

Figure 3.11 Both with kerning and without kerning overlayed, Week 4 (17/9/2021)

On the second video which is the 2:4 video, firstly I learned how to arrange the page margins. We can find the settings under the layout.

Figure 3.12 Page Margins

I also learned that if we choose some font size, we need to change leading and the paragraph spacing as well.

Figure 3.13 Leading & paragraph spacing

This is how my work on the second video

Figure 3.14 Second Video Work

On the third video which is the 3:4 video, I learned that we can add images. We can find the settings under file and then place which is also ctrl+D. When we use the selection tool, the image won't be affected, so if we want to resize the image and want the image to be affected we can use the direct selection tool.

Figure 3.15 Selection Tools

After watching the lecture videos, I managed to understand some uses of the tools. 

Figure 3.16 Cross Alignment

Figure 3.17 Line Length Characters

Figure 3.18 Text Formatting Layout 1, Week 4 (17/9/2021)

Figure 3.19 Text Formatting Layout 2, Week 4 (17/9/2021)

Figure 3.20 Text Formatting Layout 3, Week 4 (17/9/2021)

Figure 3.21 Text Formatting Final Outcome

Final Outcome

• Fonts:
• Headline : Futura Std Bold
• Sub-Headline : Gill Sans Std Italic
• Body Text : Gill Sans Std
• Point size: 
• Headline : 24 pt
• Sub-Headline : 10 pt
• Body Text : 10 pt
• Captions : 10 pt
• Leading: 
• Headline : 22 pt
• Body Text : 11 pt
• Alignment: Left Justification
  
  

---

FEEDBACKS

Week 1 :

General Feedback : Prevent yourself from using black or white for your blog background. Pay attention to every detail given and shown by the video lecture. Be careful of typos.

Week 2 :
General Feedback : Always update your blog every week. Do not sketch using HB pencil. Less is more. 
Specific Feedback : Too much distortion for the water sketch. Make the word broken looks more broken. You can shape the third water sketch into a pond shape.

Week 3 :
General Feedback : Please decrease the amount of distortion on the typefaces.
Specific Feedback : Try to bring the word broken upper and make it looks like it's falling.

Week 4 :
General Feedback : Make sure we add the proper amount of time for each frame, so that the viewer has more time to digest the design. Our design must convey its meaning.

Specific Feedback : Add more seconds to the last frame so that the viewer has more time to digest the design. Decrease the first movement of the word.

Week 5 :
Specific Feedback : Mr. Vinod said that my exercise 1 can be better and the animation was very good. For exercise 2 Mr. Vinod said that it was Good. Mr. Charles also said that my e-portfolio has good progress and it is well organised.

---

REFLECTIONS

Experience

Since this is the first time I get to learn about typography, I was very nervous. This class is different to others. I get to learn about how to arrange and manage my e-portfolio neatly based on Mr. Vinod's guide.

Observations
I observed that when Mr. Vinod is giving feedbacks to others, I was able to relate to some of them and it helped me a lot. I noticed that it is very important to make sure that our design convey its meaning because it gives a lot of impacts to the viewer.

Findings
I noticed that there are so many rules that we need to follow in typography and those rules are essentials for us to make the design works. I learned that eventhough the ten typefaces that we used seemed simple, there are many things we can use and we can learn from it.

---

FURTHER READING

Week 1 :

https://docs.microsoft.com/en-us/typography/about

This website is about Microsoft Typography.

I read the part of the website that talks about Microsoft Typography. I learned that the purpose of the Microsoft Typography Web site is to explain the benefits and features of OpenType and TrueType, the world's most well-known digital font formats, used by millions of computer users every day. And they aim to bring us the exciting developments in digital typography news. 

Week 2 : 

https://docs.microsoft.com/en-us/typography/about

Still reading the same website, but this time I read about History of typography at Microsoft. And this is what I got:

• At first there was no special typography group, but Microsoft started making software that required fonts.
• Microsoft initially worked with Bitstream, a company founded by former Linotype employees. Microsoft licensed bitmap fonts from Bitstream, but made significant modifications to them.
  
• As the company grew, the font group evolved into a company-wide service group, producing fonts for Office, Windows CE, games, and other products.
• Microsoft Typography became part of the Windows International team, and the focus shifted to the international space in 1997.
• The core team currently consists of five program managers, who work with various vendors on various font production projects, and who also manage the Microsoft Typography Web site, the OpenType specification, and Microsoft's relationships with the font design community.