Typography- Task 1 Exercises

28/3/2022- 25/4/2022 / Week 1 - Week 5

Chuah Kwai Pin / 0348376

Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 1: Exercises 1 & 2

LECTURES:

Week 1: Typography- Development and Timeline

In our first class, we were introduced to our assignments, MIB, pre-recorded lecture playlist as well as our e-portfolio. Mr. Vinod, our lecturer for this module also guided us through the typography group in Facebook where we can get most of our study materials from.

For this first week, we kickstarted with 3 videos which were Introduction, E-portfolio briefing as well as our lecture for week 1 on Development. For the Introduction, we learned what Typography is all about and the difference between "Font" and "Typeface".

Font- Individual font or weight within the typeface (Georgia Regular, Georgia Bold)
Typeface- The entire family of fonts/weights that share similar characteristics (Georgia, Helvetica, Comic Sans)

Mr. Vinod also instructed us to watch the E-portfolio briefing video in class so we can all understand how to start up our individual e-portfolio on blogger.com. It was a very well-explained and detailed video as I could get it started quickly.

Our first lecture on the Development of Typography, we learned about the different types of letterform and how it progressively changed to the universal letters we use today.

1. Early letterform- Phoenician to Roman

Initial Writing
The tools we hold has an influence onto the style of scripts we create.

Fig. 1.2 Scratching into wet clay with sharpened stick

Fig. 1.3 Carving into stone with a chisel

Direction of Writing:
Phoenician: Right to left

Greeks: Left to right (boustrophedon)

Fig. 1.4 Greek's direction of writing

2. Hand script (3rd - 10th century C.E)

Fig. 1.5 Square Capitals

Square Capitals: Written versions found in Roman monuments. They have serifs added to the finish of main strokes.

Fig. 1.6 Rustic Capitals

Rustic Capitals: Compressed version of square capitals. Allowed twice as many words and took much lesser time to write.

Fig. 1.7 Roman Cursive

Roman Cursive: Written for everyday transactions. Simplified for speed with introduction of lowercase letters.

Both Square Capitals and Rustic Capitals were typically reserved for documents of intended performance.

Fig. 1.8 Uncials

Uncials: Incorporated some of Roman cursive hand. Broad forms are more readable than Rustic Capitals when in smaller sizes.

Fig. 1.9 Half-Uncials

Half-Uncials: Marked the formal beginning of lowercase letterforms

Charlemagne, the first unifier of Europe since the Romans, entrusted Alcuin of York, Abbot of St Martin of Tours to oversee and standardise all ecclesiastical texts. The monks then rewrote the texts using both majuscules (uppercase), miniscule, capitalisation, and punctuation which set the standard for calligraphy for a century.

Blackletter to Gutenberg's type

Fig. 1.10 Black Letter

With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script. In northern Europe, a condense strongly vertical letterform known as Blackletter or textura gained popularity. In the south, a rounder more open hand gained popularity, called "rotunda".

3. Text Type Classification

Fig. 1.11 Text Type Classification

Week 2: Typography- Basic Letterforms

In our second week's lecture, we learned about basic letterforms and the terms used to describe them.

Fig. 1.12 Basic Letterform Terms

1) Baseline: The imaginary line the visual base of the letterforms.
2) Median: The imaginary line defining the x-height of letterforms.
3) X-height: The height in any typeface of the lowercase 'x'.
4) Stroke: Any line that defines the basic letterform.
5) Apex / vertex: The point created by joining 2 diagonal stems (apex above, vertex below)
6) Arm: Short strokes off the stem of the letterform, either horizontal or inclined upwards
7) Ascender: The portion of the stem of a lowercase letterform that projects above the median.
8) Barb: The half-serif finish on some horizonal arms.
9) Bowl: The rounded form that describes a counter (may be open / closed)
10) Bracket: Transition between serif and stem.
11) Cross bar: Horizontal stroke that joins two stems together.
12) Cross stroke: In a letterform (lowercase) that joins 2 stems together.
13) Crotch: Interior space where 2 strokes meet
14) Descender: Portion of stem of a lowercase below baseline.
15) Ear: Stroke extending out from main stem of body of letterform.

(Others: Em/En, Finial, Leg, Ligature, etc.)

Fig. 1.13 Small Capitals

Small Capitals: Uppercase letterforms drawn to the x-height of the typeface.

Fig. 1.13 Uppercase & Lowercase Numerals

Uppercase Numerals: Lining figures, same height as uppercase letters. Set to the same kerning width.

Lowercase Numerals: Old style figures / text figures. Set to the x-height with ascenders and descenders.

Fig. 1.14 Punctuation, Miscellaneous Characters

Punctuation, Miscellaneous Characters: Although all fonts have the standard punctuation marks, miscellaneous characters can change from typeface to typeface.

Fig. 1.15 Roman, Oblique, Italic

Roman: Given its name because uppercase letterforms are derived from inscriptions of Roman monuments.

Oblique: Slants slightly to the right, used for the same purpose of Italic. Uses the same glyphs as roman type, except slanted.

Italic: Named for 15th century Italian cursive handwriting.

Fig. 1.16 Ornaments

Ornaments: Used as flourishes in invitations or certificates. Provided as font in larger typeface family. (eg. Adobe Caslon Pro)

Week 3: Typography- Text

In this lecture we learn about Text Tracking, Formatting Text, Texture and Leading and Line length.

1. Kerning and Letterspacing

Fig. 1.17 Kerning and Tracking

Kerning: Automatic adjustment of space between letters.
Tracking: Addition and removal of space in a word or sentence.
Letterspacing: Addition of space between letters.

2. Formatting Text

Flush left: Most closely mirrors the asymmetrical experience handwriting. Each line starts at the same point but ends wherever the last word on the line ends.

Centered: Imposes symmetry upon the text, assigning equal value and weight to both ends of any line.

Flush right: Places emphasis on the end of a line as opposed to its start.

Justified: Imposes a symmetrical shape on the text. Achieved by expanding or reducing shapes between words and sometimes between letters.

3. Texture

Requirements on composition: Ideal text is to have a middle gray value. Different typefaces have different gray value. Some can be lighter, some are darker, but the best would still be choosing the middle gray value.

4. Leading and Line Length

Type size: Text type should be large enough to be read early at arms length.

Leading: Text that is set too tightly encourages vertical eye movement. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.

Line Length: Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short lines lengths impairs reading.

Week 4: Typography- Text Pt 2

For this week's lecture we learned about indicating paragraphs, highlighting text, headline with text and cross alignment.

1. Indicating paragraphs

Fig. 1.18 A Pilcrow

Pilcrow: A holdover from medieval manuscripts seldom used today.
Leading (line space): Ensures cross-alignment across columns of text.

Fig. 1.19 Difference between line spacing and leading

Line spacing: Jelly + Bread
Leading: Jelly

Fig. 1.20 Standard Indentation

Indentation: The same size of the line spacing / same as the point size of your text. (Always use it only when text is justified.

Fig. 1.21 Extended paragraphs

Extended paragraphs: Creates unusally wide columns of text

Fig. 1.22 Widows and Orphans

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.

2. Highlighting Text

Different kinds of emphasis require different kinds of contrast.

Italics
Bold- Same Typeface
Bold- Different Typeface
Change colour of text (cyan, magenta, black)
Placing a field of colour at the back of text

Fig. 1.23 Highlighting Text (Italics and Bold)

Fig. 1.24 Highlighting Text (Bold and Change colour)

Fig. 1.25 Field of colour behind text

Sans serif typeface tend to look larger. When using with serif typeface, sans serif font has to be reduced by 0.5 pt.

Fig. 1.26 Serif and Sans Serif typeface

Sometimes it is necessary to place certain typographic elements outside the left margin of a column of type to maintain strong reading axis. Quotation marks, like bullets, can create a clear indent, breaking the left reading axis.

Fig. 1.27 Bullet points outside left margin

Fig. 1.28 Prime and Quotation marks

3. Headline with Text

Make sure these heads signify to the reader the relative importance within the text and to their relationship to each other.

A heads

Clear break between the topics within a section
Set larger than the text, in small caps and bold
Fourth example shows an A head 'extended' to the rest of the text

Fig. 1.29 A head examples

B heads

Subordinate to A heads
Indicate new supporting argument/ example for the topic at hand
Shown in small caps, italic, bold serif and bold sans serif

Fig. 1.30 B head examples

C heads

Highlights specific facets of material within B head text
As with B heads, C heads are shown in small caps, italics, serif bold and sans serif bold
Followed by at least an em space for visual separation

Fig. 1.31 A heads, B heads and C heads comparisons

4. Cross Alignment

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

Fig. 1.32 Cross Alignment

One line of headline type cross-aligns with two lines of text type.

Fig. 1.33 Cross Alignment

Four lines of headline type cross-align with 5 lines of text type.

Week 5: Typography- Understanding

1. Understanding letterforms

Fig. 1.34 Different stroke weights

Uppercase letter forms suggest symmetry but it is actually not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form (above) and each bracket connecting the serif to the stem has a unique arc.

Fig. 1.35 Width of left slope thinner than the right

On a closer examination, the image above shows that the width of the left slope is thinner than the right slope. This shows that both Baskerville (Fig. 1.34) and Univers (Fig. 1.35) have been created with meticulous care whereby they are both internally harmonious and individually expressive.

Fig. 1.36 Comparison of stems and bowls

In these two similar sans-serif typefaces, Helvetica and Univers, it shows a comparison of how the stems of the letterforms finish and how the bowls meet the stems. By putting both side by side, it clearly shows the difference in character between the two.

2. Maintaining x-height

Fig. 1.37 Comparing x-heights of curved strokes

X-heights generally describe the size of the lowercase letterforms, but curved stokes such as 's' must rise above the median (or sink below the baseline). This is to ensure that it appears to be the same size as the vertical and hortizontal strokes they adjoin.

3. Form / Counterform

Fig. 1.38 Forms and Counterforms

Counterform is where the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the space between them. How well you handle the counters when you set type determines how well words hang together and how easily we can read what has been set.

Fig. 1.39 Close details of form and counter

A good way to understand form and counter of letter is by examining them in close detail. It also provides a good feel for how the balance between form and counter is achieved and gives you a clear view of the letterform's unique characteristics.

4. Contrast

Fig. 1.40 Contrast

The above image is an example of contrast, the most powerful dynamic in design as applied to type. The simple contrasts produces numerous variations: small+organic / large+machined ; small+dark / large+light.

Fig. 1.41 More examples of contrast

INSTRUCTIONS:

Task 1: Exercise- Type Expression

Week 1: 31st March 2022

For our first exercise, we were tasked to sketch out a few type expressions based on the list of words given. Mr. Vinod instructed us to suggest some motion words and by majority votes, we shortlisted them down to 6 words: Cough (mandatory), Squeeze, Pop, Explode, Grow, Wink.

Out of these 6 words, I have chosen 4 which are Cough, Squeeze, Explode and Grow.

Visual Research

Fig. 2.1 Research Type Expression for Unloaded, Week 1 (31/3/22)

Fig. 2.2 Research Type Expression for Divide, Week 1 (31/3/22)

Fig. 2.3 Research Type Expression for Balloons, Week 1 (31/3/22)

1. Sketches

Word chosen: Cough

Fig. 2.4 Type Expression for Cough, Week 1
(31/3/22)

I found this word to be quite challenging and I had to crack my brain to find the best way to express it. We were told not to use any graphical elements but given some allowance of a few lines and dots. I tried my best to express the word "coughing" with anything that came to my mind and even tried experimenting as much as possible.

Word chosen: Squeeze

Fig. 2.5 Type Expression for Squeeze

, Week 1 (31/3/22)

Out of the 4 words, I liked this the best as it was rather easier to work on. The first idea that came to mind was the words being literally squeezed in an enclosed space. Then I began playing with the letters itself by closing up the spaces and making them look squeezed and compressed.

Word chosen: Explode

Fig. 2.6 Type Expression for Explode

, Week 1 (31/3/22)

I found this word to be quite challenging as well as it was difficult to express without graphic elements. I tried various approaches to see which expresses the word best and I thought that including tiny version of letters scattered around it would be a good idea.

Word chosen: Grow

Fig. 2.7 Type Expression for Grow, Week 1

(31/3/22)

For this last word, I tried to play with the sizing of individual letters to show that it is progressively growing bigger. I also related the word "grow" to a leaf, hence I tried to fit the word into the shape of a leaf.

Week 2: 4th April 2022

2. Digitisation

Fig. 2.8 Type Expression Digitisation Tryouts, Week 2 (10/4/22)

Based on my ideas and sketches, I have tried to digitise it on Adobe Illustrator. Since it was my first time using Illustrator, I found it to be difficult to navigate and it took me quite some time to figure out how to achieve certain effects.

Fig. 2.9 Type Expression Digitisation Tryouts, Week 2 (10/4/22)

These are some more tryouts from my ideas and sketches that were approved. I thought that it would be much more interesting to express the words in other ways therefore I included a few more possible options.

Final Type Expressions:

Fig. 2.10 Final Type Expressions, Week 2 (10/4/22)

Week 3: 11th April

3. Type Expression Animation

Fig. 2.11 Type Animation tryout, Week 3 (11/4/22)

After finalising all of the 4 type expressions, I watched the tutorial on how to animate the words in the Typography playlist and started drafting out the artboards on Adobe Illustrator. I then exported the artboards as .jpeg file and loaded them into Adobe Photoshop to create frame animation.

Fig. 2.12 Cough Type Animation First Version, Week 3 (11/4/22)

I also tried out a type animation for the word "Cough" because I thought it would be more interesting.

Fig. 2.13 Cough Type Animation Second Version, Week 3 (17/4/22)

After further exploration, I thought that this would look the closest to the action of "coughing out" as the letters "ugh" are separated individually in each frame. It shows the movement of something coming out from the mouth.

Fig. 2.14 Cough Type Animation, 9 Frames, Week 3(17/4/22)

In total, I have used 9 frames to create this type animation.

Final Animated Type Expression

Fig. 2.15 Final Animated Type Expression, Week 3 (17/4/22)

Task 1: Exercise 2- Text Formatting

In this exercise, we were required to watch the 4 lectures on Text Formatting where we learn about kerning and tracking, leading, paragraph spacing, alignment and more. This particular exercise was done in Adobe InDesign.

Fig. 3.1 Text Formatting with Kerning, Week 3 (17/4/22)

We were taught how to kern in this lecture and had to test it out on our names with the 10 fonts that were previously downloaded. Then the next 3 lectures were about formatting a paragraph of text while getting to know what leading, ragging and orphans are and the purpose of using grids.

Fig. 3.2 Progress while watching Text Formatting 2:4, Week 3 (17/4/22)

Fig. 3.3 Outcome from watching Text Formatting 2:4, Week 3 (17/4/22)

In Text Formatting 3:4, we were taught to fix and smoothen the ragging by using kerning and letter spacing. As advised by Mr. Vinod, it is best not to exit 3 units of kerning. We can also turn off the hyphernate function to remove the hyphens that are typically found at the edge of the paragraphs.

Fig. 3.4 Right side ragging, Week 3 (17/4/22)

We also looked into the adjustments of text where we could choose to use flushed left, left justified or central justified. In this case, I used left justified as it looks neater and more complete.

Fig. 3.5 Left Justified, Week 3 (17/4/22)

Moving on to the final Text Formatting 4:4, we get to experiment with some layouts using the text that we had to download from the Google Drive link. In this particular lecture, we were taught about baseline grids and cross alignment.

The use of baseline grid is to guide and ensure that the line of text sits on the baseline grid so that the text on the left and right column will achieve cross alignment.

Fig. 3.6 Using baseline grid to achieve cross alignment, Week 3 (17/4/22)

After watching the lectures, I then tried out some layouts by adjusting the columns and text.

Fig. 3.7 Text Formatting Layout 1, Week 3 (17/4/22)

Fig. 3.8 Text Formatting Layout 2, Week 3 (17/4/22)

Fig. 3.9 Text Formatting Layout 3, Week 3 (17/4/22)

Fig. 3.10 Text Formatting Layout 4, Week 3 (17/4/22)

Fig. 3.11 Screenshot of hidden characters, Week 4 (24/4/22)

After Week 4 and Week 5's feedback, I fixed the rivers and paragraph spacing in the layouts as followed

Fig. 3.12 Layouts after edit, Week 5 (25/4/22)

Final Text Formatting Layout:

Fig. 3.13 Final Text Formatting Layout, Week 5 (25/4/22)

Fig. 3.15 Final Text Formatting Layout with Baseline Grid, Week 5 (25/4/22)

Font: Univers LT Std

Typeface: Univers LT Std (55 roman & 65 bold)

Font size: 21 pt, 16 pt, 9 pt

Leading: 11pt

Paragraph Spacing: 11pt

Average characters per line: 52 ~ 60

Alignment: Left-aligned

Margins: 12.7mm (top, left, right), 12.7mm (bottom)

Columns: 3

Gutter (for columns): 5mm

FEEDBACK:

Week 2
Specific Feedback: Many great ideas that can be further worked on. For "cough", it is possible to add the little face as minimal lines as used. For "squeeze", can proceed with either the squared space or with the use of line. For "explode", can replace the smoke of letters "o" and "p" by breaking off the top parts of each letter. Lastly for "grow", can proceed with the idea of repeating the word but gradually getting bigger.

General Feedback: Out of the 6 words, I chose 4 which are cough, squeeze, explode and grow. I came up with as much variations of ideas as possible for each word to express the words more effectively. I did the sketches manually using pen brush to give more weight and thickness to it.

Week 3
Specific Feedback: For "Cough" there is an awkward amount of space at the top an bottom of the box. The type expression for "Squeeze" can be executed better using a different typeface such as Universe. For "Explode", the lines can be adjusted to the same and consistent font weight throughout.

General Feedback: Digitising the type expressions started off as a challenge but I soon got used to it after exploring and watching tutorials online. Week 4 Specific Feedback: For Text Formatting Layout 1 and 3 (Fig. 3.7 & Fig. 3.9), have to look out for rivers within the text. It can be fixed by adjusting the text size so that each line fits about 55-65 characters.

General Feedback: Overall e-portfolio is fine, lectures and further readings have been incorporated.

Week 5

Specific Feedback: Pay more attention to the river tracking in the layouts. Change image to something related to Helvetica.

General Feedback: Can work on text hierarchy. Make headings and subheadline clearer.

REFLECTIONS:

Experience
While working on these 2 exercises, I have learned a lot about the basics of typography. At first, it was challenging as I have never had experience with type expressions without using graphic elements. During the process of ideation and sketching, it took quite a long time for me to come up with workable ideas that only include the text and some minor lines and dots. However, I was glad that my ideas could be used in the next stage which was digitisation. In this stage, I also had to take some time to explore Adobe Illustrator as I was still new to the software. It took me a couple of YouTube tutorials to figure out how to achieve certain effects, but I believe it was all worth my time. The tutorials in the Typography playlist were also a very great help. They were very detailed and showed every step clearly, which made it easy for me to process and follow.

Observations
As I monitor my progress and outcomes of the exercises I have done, I come to find myself changing and adjusting even the smallest details in the works I have produced. I notice that in Typography, there are certain rules and guidelines to follow in order to produce a pleasing and proper piece of work. With that said, I tried my best to follow the said rules and it definitely helped me in doing my exercises.

Findings

I realised that Typography is more than just fonts and font weights. There is so much more to learn in Typography that it is impossible to master and understand everything overnight. I also find that it is important to understand the history of typography, how everything evolved from pictorial messages to handwriting and later to digital type.