Typography / Task 1 Exercises

25/8/2021 - 22/9/2021 Week 1 - Week 5
Loh Shu Huan / 0349621

Typography / Bachelor of Design in Creative Media

Task 1 Exercises 

 

---

LECTURES

Week 1 25/8/2021

Introduction / Briefing 

During our first class, Mr.Vinod briefed us about the modules and how to create our e-portfolio. After showing us some example from our senior, we were given some time to watch a step-by-step instructions video regards to how to upload and arrange the content of the blog by Mr.Vinod. Besides, Mr. Vinod also introduced us about Typography, as well as the short history and the terminology of it.

Development 

This lecture are more focused on the history of Typography. From this lecture I learned that in the early days, the tools of writing is important which influence the type of created letters. Before the Greeks changed the direction of writing, Phoenician were still wrote from right to left. There is an interesting style of writing call "Boustrophedon" which the lines of text read alternately from right to left and left to right. The most interesting part is they changed the direction of reading they also changed the orientation of the letterforms.

Fig 1.1 Boustrophedon writing Style

Etruscan and the Roman carvers will draw the letters out before they chisel it. The stroke of the letters are broadening based on their skills of using paintbrush.

Fig 1.2 Late 1st century B.C.E., Augustan Inscription in the Roman Forum, Rome.

Within a thousand year, the letters had developed a lot. The more refined version based on the brush that being used of the letter A in 100 B.C.E..

Fig 1.3 The Development of Letter Form within a thousand years.

From 3rd to 10th century C.E., the difference of hand script are quite obvious. There is a written style with serif added to the finish of the main strokes call Square Capitals can be found in Roman Monuments.

Fig 1.4 4th or 5th century: Square Capitals

However, in the late 3rd century C.E.,a compressed version of the square capitals were introduced due to the need of fit more words on a sheet of parchment and took lesser time to write which call Rustic Capitals.

Fig 1.5 Late 3rd - Mid 4th century: Rustic Capitals

In everyday transactions, the cursive hand was used because its form were simplified for speed.

Fig 1.6 4th century: Roman cursive

Uncials, a written style which had some similarities with Roman cursive hand. It didn't have lowercase and uppercase letter form. The board form of uncials are more readable at small sizes than rustic capitals. Half-uncials mark the formal beginning of lowercase letterforms.

Fig 1.7 4th - 5th century: Uncials

Fig 1.7 C.500: Half-uncials

The first unifier of Europe since the Roman -- Charlemange, issued an edict to standardise all ecclesiastical text. With the dissolution of Charlemagne's empire, in the Northern Europe, a condense strongly vertical letterform known as Blackletter or 'textura' gained popularity. In the south, a more rounder letter gained popularity, called 'rotunda'.

Fig 1.9 C.925: Caroline Miniscule

Fig 1.10 C.1300: Blackletter (Textura)

Fig 1.11 Rotunda

Week 2 1/9/2021

The Basic in Typography 

1. Description of letterform

 X-height: The medium section between the median line and the baseline. 

Ascender height: The line above that is cap height and the highest line. 

Descender height: The line above baseline. 

The interesting part is the capital letters are smaller than the ascender height as the capital letters are generally wider and have more surface on the top. 

Fig 2.1 The Basic in Typography

Stroke: Any line that defines the basic letterforms. 

The point created by joining two diagonal stems is know as an Apex and Vertex. 

The apex is the section above and the opposite section is the vertex. 

Fig 2.2 Strokes

Fig 2.3 Apex & Vertex

The short stems that extend from the stem stroke of the letterforms are called ARM, either horizontal (E, F, T) or inclined upward (K, Y). 

The stroke that exceeds the median line is known as Ascender. 

Fig 2.4 Arm

Fig 2.5 Ascender

Barb: is the half-serif finish on the curve stroke.

Beak: is the half-serif finish on the horizontal stroke. 

Bowl: is the round form that describes the counter, it may be either opened or closed. 

Bracket: is the bottom on the baseline and the transition between the serif and the stem. 

Fig 2.6 Barb

Fig 2.7 Beak

Fig 2.8 Bowl

Fig 2.9 Bracket

Cross bar: is the horizontal stroke in a letterform that connects two stems together. 

Cross stroke: is the horizontal stroke in a letterform (lowercase letterforms: f, t) that connects two stems together. 

Crotch: is the interior space that two strokes meet, such as the space between on above the vertex is a crotch.

Fig 2.10 Cross Bar

Fig 2.11 Cross Stroke

Fig 2.12 Crotch

Descender: is anything below the baseline.

Ear: is the stroke extending out from the main stem or body of the letterform.

Ligature: is the character formed by the combination of two or more letterforms.

Swash: is the flourish that extends the stroke from the letterforms. 

*Don't ever use the capital forms with these swashes together to form a letter.

Fig 2.13 Descender

Fig 2.14 Ear

Fig 2.15 Ligature of fi

Fig 2.16 Swash

2. The Font

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

Fig 2.17 Small Capitals

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

Fig 2.18 Uppercase Numerals

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

Fig 2.19 Lowercase Numerals

The forms in an italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.

Fig 2.20 Italic

Although all fonts contain standard punctuation marks, miscellaneous characters can change form typeface to typeface.

Fig 2.21 Punctuation, miscellaneous characters

Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family.

Fig 2.22 Ornaments

Week 3 8/9/2021

Text / Tracking: 

1. Kerning and Letter-spacing 

Kerning: refers to adjust automatically of space between letters.

Letter-spacing: means to add space between letters. 

Tracking: The addition and removal of space in a word or sentence.

Fig 3.1 Kerning

Fig 3.2 Different type of tracking

When we add the letter spacing, we'll breaking the counter form and it will reduce the readability of the particular word of sentence.

Fig 3.3 Counter Form

2. Formatting Text 

Flush left: Closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. It will always have ragging on right.

Ragging: The jagged edge at the end point of aligned text. *It's important to make it smooth.

Leading: The space between each line of text.

Fig 3.4 Flush left, Ragged right

Centered: This format imposes symmetry, equal value and weight to both ends of any line of text. It transforms fields of text into shapes, thereby adding a pictorial quality. Centered type creates such a strong shape on the page, it's important to amend line breaks so that the text does not appear too jagged. *Not suitable in long paragraphs.

Fig 3.5 Centered, Ragged right and left

Flush right: This form places emphasis on the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right. *Way more difficult to read. Not suitable in large amounts of text. But maybe in certain situations such as axial layout.

Fig 3.6 Flush right, Ragged left

Fig 3.7 Axial Grid Type Layout (sources: Pinterest)

Justified: This format imposes symmetrical shape on the text, achieved by expanding or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce ‘rivers’ of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem. *More readable, but be careful with the letter-spacing and kerning.

Fig 3.8 Justified with last line aligned left

*The first job of typographer is clear, appropriate presentation of the author's message.

*Avoid using script typeface in capital letter. 

3. Text / Texture

Fig 3.9 Anatomy of A Typeface

Fig 3.10 Different grey value with different typeface       

In Fig 3.10, there are different typeface with same font size and same leading size. But in comparison, they show the differences in grey value which is different readability. Middle grey value is the perfect choice, not light grey, not dark grey.

4. Text / Leading and Line-length 

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

Leading: The text that is set too tightly encourages vertical eye movement; reader will lose his/her place easily. Type that is set too loosely creates striped patterns that will cause distraction. (Generally, 2-3 points bigger than the font size is perfect)

Fig 3.11 Loose leading VS Tight leading 

Line-length: Shorter lines required less leading; longer lines more. Always try to keep line length between 55-65 characters. Extremely short or long lines lengths impairs reading.

5. Text / Type Specimen Book

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

Fig 3.12 Sample Type, Specimen Sheet

Compositional Requirement: Text should create a field that can occupy a page or a scree. Think of your ideal text as having a middle grey value (on the left, Fig 3.13), not a series of stripes (on the right, Fig 3.13).

Fig 3.13 Different grey value

Quote of the lecture: The devil is in the details. - Jane Jacobs

6. Text / Indicating Paragraphs

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

Line space (leading): Between a paragraph, if the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.

Fig 3.14 Line space VS Leading

Standard Indentation: Indent is the same size of the line spacing the same as the point size of your text.

Fig 3.15 Standard Indentation

Extended Paragraph: It creates usually wide columns of text. Despite these problem, there can be strong compositional or functional reasons for choosing it.

Fig 3.16 Extended Paragraph

7. Text / Widows and Orphans

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

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

*The only 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.

*Orphans, required more care. Make sure that no column of text starts with the last line of preceding paragraph.

Fig 3.17 Widows and Orphans

*Shift + Enter to force line break

*Option + Left arrow/ Right arrow to do kerning, bear in mind - Max 3 times

Fig 3.18 Force line break symbol 

8. Text / Highlighting Text

Different kind of emphasis require different kind of contrast.

Fig 3.19 Highlighting by using Italic or Bold

Fig 3.20 Highlighting by changing type family or colour 

*The sans serif font (Univers) has been reduced by 0.5 to match the x-height of the serif typeface. 8 ≠ 7.5

Fig 3.21 Example

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

Fig 3.22 Example

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.

Fig 3.23 Highlighting by using Quotation Marks

A prime is not a quote. The prime is an abbreviation for inches and feet. Due to the limited number of keys on a typewriter, they were substituted. They were later known as ' dumb quote'.

Fig 3.24 Prime and quote

9. Text / Headline within Text

A head indexes a clear break between the topics within section.

Fig 3.25 Different type of A head

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

Fig 3.26 Different type of B head

The C head highlights specific facets material within B head text. They don't interrupt the flow of reading. 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.

10. Text / Cross alignment

Cross aligning headlines and captions with text type reinforces the architecture sense of the page - the structure - while articulating the complimentary vertical rhythms.

Fig 3.27 Example of Cross Alignment

Quote of the lecture: Typography is two-dimensional architecture, baes on experience and imagination, and guided by rules and readability. - Hermann Zapf

Week 4 15/9/2021

1. Letters / Understanding Letterforms 

The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical. There are two different stroke weights of the Baskerville stroke form (below); each bracket connecting the serif to the stem has a unique arc.

Fig 4.1 Baskerville 'A'

In Fig 4.2, it shown that the width of the left slope is thinner than the right strike. Both Baskerville (Fig 4.1) and Univers (Fig 4.2) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Fig 4.2 Univers 'A'

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.

Fig 4.3 Helvetica 'a' VS Univers 'a'

2. Letters / Maintaining x-height

X-height: generally describe the size of the lowercase letterforms. 

But, curved strokes, such as in '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 strokes they adjoin.

Fig 4.4 Median and Baseline

3. Letters / Form / Counter-form

Counter-form (or counter): The space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counter form includes the spaces between them.

How well you handle the counters when you set type determines how well words hang together- in other words, how easily we can read what's been set.

Fig 4.5 Counterform

4. Lettes / Contrast

As applied to type, based on a format devised by Rudi Ruegg

*The simple contrasts produces numerous variations: small+organic / large+machined; small+dark / large+light

Fig 4.6 Contrast

Quote of the lecture: On the streets, you look at girls [or boys]. I look at type. - Hannaes von Döhren

Week 5 22/9/2021

1. Typography / Different Medium

In the past, typography was viewed as living only when it reached paper. Once the publication was edited, typeset and printed, it was done. Good typography and readability were the result of skilled typesetters and designers. Nowadys, typography exists not only on paper but on a multitude of screens. It is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and screen itself, the viewport and more.

Fig 5.1 Typographical art works designed for print purpose

Fig 5.2 Typographical art works designed for screen purpose

2. Type for Print

The characteristics of a good typeface for print are elegant and intellectual but also highly readable when set at small font size. Example typefaces- Calson, Garamond, Baskerville.

Fig 5.3 Example of Type of Print

3. Type for Screen

Typefaces intended for use on the web are optimised and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs. 

Besides, these typefaces are also intended for small sizes which is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.

a. 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. Text hyperlinks are normally blue and underlined by default.

b. Font Size for screen

Most of the people read books with only a few inches away, so they are typically set the font size about 10points. Some fo the reader may read them at arm's length, so it will need at least 12points, which is about the same size as 16 pixels most screens.

* 20-24 points are prefer for screen reading.

c.System Fonts for Screen/ Web Safe Fonts

Each device comes with its own pre-installed font selection base on its operating system. The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the next you see on-screen differs in proportion too. Even within a single device class there will be a lot of variation.

Fig 5.4 Example of different type of screen

4. 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. We encounter all forms of static typography with wide ranging purpose. Whether they are informational, promotional, formal or aspirational pieces of designs, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.

Fig 5.5 Example of Static Design

Motion typography

Temporal media offer typographers opportunities to "dramatise" type, for letterforms to become "fluid" and "kinetic". 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.

Quote of the lecture: A great designer knows how to work with text not just as content, he treats text as a user interface. - Oliver Reichenstein

---

INSTRUCTIONS

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

EXERCISE

Task 1: Exercise - Typo Expression

Week 1

We were asked to do typo expression of FOUR words which are voted by student. 

One is mandatory - TERROR, and for the rest three words we were allowed to pick by ourselves from top 7 of our vote.

The four words that I choose is TERROR, LIGHT, GONE, ERROR.

Fig 1.12 Terror Sketches, 27th Aug. 2021 

Fig 1.13 Light Sketches, 27th Aug. 2021 

Fig 1.14 Gone Sketches, 27th Aug. 2021 

Fig 1.15 Error Sketches, 27th Aug. 2021 

Fig 1.16 EROR, 27th Aug. 2021 

After trying the "error" in Pixel style, I realised that there is an error in this "error" which it lost a "R". And I found it is quite interesting.

Week 2

In this week, we were required to digitise our sketches by using Adobe Illustration. I didn't get the specifics feedback from Mr. Vinod but he broke us into small groups to give and receive feedback from our peers. During the section, I received some feedback and suggestions from my peers and I pick the best design to digitise.

Fig 2.17 Work In Progress, 5 Sept.2021

Besides doing the task by myself, I've also asked my peer for the feedback and suggestions. From her feedback, she asked me if he word "error" without the "error face" will it still looks error? So I made some changes on there. Putting the face in the "O" and make other words "error".

Fig 2.18 Different Expression, 5 Sept.2021

With the advice from Mr.Vinod which try not to have too much distortion, I kept all my design with a simple concept. 

TERROR - The reason that I use the typeface is I want it to be like a word on a horror movie poster and I do did some research on that.

LIGHT - The concept of it is a chandelier with a switch there and I choose to use a light font to make it looks minimal.

GONE - The concept of it is the word start fading.

ERROR - The concept of this is the error 404 with a "paper face" but in the letter "o" and with a little bit glitch effect.

Final Type Expression

Fig 2.19 Final Type expression, 5 Sept.2021

Week 3

In this week, we were required to do an animation of one of our type expression design by using adobe Illustration and Adobe Photoshop. 

Fig 3.28 First Attempt (class time), 10 Sept.2021

After receiving feedback from Mr.Vinod I choose "error" for my animation exercise and I've try it several times with different way.

Fig 3.29  First Attempt of Error, 10 Sept.2021

Fig 3.30  First GIF of Error, 10 Sept.2021

I did a bit changes on the colour, which shows the faded effect.

Fig 3.31  Second Attempt of Error, 10 Sept.2021

Fig 3.32  Second GIF of Error, 10 Sept.2021

I decided to make the gif move a bit to achieve a better expression.

Fig 3.33  Third & Final GIF of Error, 10 Sept.2021

Final Animated Type Expression

After receiving feedback from Mr.Vinod, I pick the version without moving as my final animated type expression.

Fig 4.7  Final GIF of Error, 13 Sept.2021

Task 1: Exercise 2 - Text Formatting 

Week 4

For our exercise 2, we were required to create a layout with different kind of text formatting, such as kerning, leading, paragraph, alignment and etc, by using Adobe InDesign.

Lecture 1/4 of Text Formatting: Kerning and Tracking

Fig 4.8 Text formatting with 10 Provided Typefaces, 17 Sept.2021

Fig 4.9  Before (right) and After (left) Kerning, 17 Sept.2021

Fig 4.10 Comparison between Before and After, 17 Sept.2021             

Fig 4.11 Final for Kerning exercise, 17 Sept.2021    

Lecture 2 to 4 of Text Formatting

Notes:

1. Font size: 8-12

2. Line Length: 55-65 / 50-60

3. Text Leading: 2, 2.5, 3 points larger than font size

4. Ragging:  Left alignment / Rivers: Left Justification 

5. Cross Alignment

6. No Widows / Orphans

7. No more than +3 / -3 tracking to reduce ragging

Fig 4.12 Progression, 17 Sept.2021

Fig 4.13 Layout Exploration, 17 Sept.2021

Fig 4.14 Raging without kerning VS with kerning, 17 Sept.2021

Without kerning, there are a few of Widows and too much ragged, but after kerning it looks more smoother and without widows.

Main layouts to choose as final

Fig 4.15 Layout #1, 17 Sept.2021

Fig 4.16 Layout #2, 17 Sept.2021

Fig 4.17 Layout #3, 17 Sept.2021

Information

Fonts: Univers LT Std (Heading, Body text - 55 Roman) (Lead-in text - 55 Oblique)(Description - 45Light Oblique)

Point size: body text and captions - 9pt , heading - 18pt, sub-heading - 10pt

Leading: body text - 11pt , heading - 22pt

Paragraph Spacing: 11pt

Line length: 55 - 65 (Layout #1,#2) , 30 - 40 (Layout #3)

Alignment: Left Justify (Layout #1,#2), Left Alignment (Layout #3)

Fig 4.18 Final Layout, 17 Sept.2021

Final Text Formatting 

---

FEEDBACK

Week 1

General Feedback - No general feedback was given.

Specific Feedback - No specific feedback was given.

Week 2

General Feedback - Mr. Vinod told us try to use the original typeface to create the expression and not distort the typeface too much.

Specific Feedback - My peers told me that my exploration is sufficient and only one design may not match the meaning of the word. I got 4 in the question of how strong is the idea.

Week 3

General Feedback - No general feedback was given.

Specific Feedback - My LIGHT GIF is too much dependent on graphic.

Week 4

General Feedback - Keep the blog neatly and update weekly. Must recap at least three quarters of the recorded lecture and fill in the feedback sheet.

Specific Feedback - Best for the error word to stay still and the glitch move.

Week 5

General Feedback - We should pay more attention while lecturers are giving instructions.

Specific Feedback - T1, Ex1: Final JPG didn't labeled as Final or under final submission.

T1, Ex2: Good work; Further reading could do with more reading.

---

REFLECTIONS

Experience: I have never been to a Typography class before, everything here is new and fresh to me. Even in a such a big class, the lecturers are also briefed and lead us patiently. Digitise my sketches is an meaningful and interesting experience. Having my own GIF is just amazing, this is the first time I know how to create an short animation.

Observation: Any design can be improved, as long as you are still working on it. We need more patience to create a smooth animation. Something for the text formatting, just like what Jane Jacobs said 'The devil is in the details.' The more you be careful, the better you get.

Findings: I am able to come out with some ideas even it's not perfect but I'm still satisfied that I'm not "empty". Self-learning is important, there's a lot of information and knowledge that I can learn by myself. Actually, animation is not too difficult, as long as we are patient enough and never stop trying.

---

FURTHER READING

[A Type Primer 2] - by John Kane

*Notes: Design is solving problem. Graphic design is solving problems by making marks.

Style belongs to the individuals; delight in thinking and making can be shared by everyone.

Type is physical. Type evolved from handwriting.

Fig 2.20 Pages form [ A Type Primer 2] - by John Kane