TYPOGRAPHY - PROJECT 2

Typography

09/10/19 - 16/10/19

(Week 7 - Week 10)

Natalie Leong Yuin May (0334127)

Typography Project 2

Lecture Notes

Lecture 7 (09/10/19) - Anatomy of Letterforms

For this week's lecture, Mr. Vinod taught us the parts of letterforms.

Baseline is the imaginary line as the visual base of the letterforms, while median is the imaginary line defining the x-height of letterforms and x-height is the height in any typeface of the lowercase 'x' (Fig. 1.1).

Fig. 1.1: Baseline, median and x-height.

Stroke refers to any line that defines the basic letterform (Fig. 1.2).

Fig. 1.2: Stroke.

Apex/vertex is the point created by joining two diagonal stems (apex above and vertex below) (Fig. 1.3).

Fig. 1.3: Apex/vertex.

Arm is short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K,Y) (Fig. 1.4).

Fig. 1.4: Arm.

Ascender is the portion of the stem of a lowercase letterform that projects above the median (Fig. 1.5).

Fig. 1.5: Ascender.

Barb is the half-serif finish on some curved stroke (Fig. 1.6).

Fig. 1.6: Barb.

Beak is the half-serif finish on some horizontal arms (Fig 1.7).

Fig. 1.7: Beak.

Bowl is the rounded form that describes a counter. The bowl may be either open or closed (Fig. 1.8).

Fig. 1.8: Bowl.

Bracket is the transition between the serif and the stem (Fig. 1.9).

Fig. 1.9: Bracket.

Cross bar is the horizontal stroke in a letterform that joins two stems together (Fig. 1.10).

Fig. 1.10: Cross bar.

Cross stroke is the horizontal stroke in a letterform that goes across a vertical stroke (Fig. 1.11).

Fig. 7.11: Cross stroke.

Crotch is the interior space where two strokes meet (Fig. 7.12).

Fig. 1.12: Cross stroke.

Descender is the portion of the stem of a lowercase letterform that projects below the baseline (Fig. 1.13).

Fig. 1.13: Descender.

Ear is the portion of the stroke extending out from the main stem or body of the letterform (Fig. 1.14).

Fig. 1.14: Ear.

Em refers to the width of an uppercase M. Em today is the distance equal to the size of the typeface. En refers to half the size of an em (Fig. 1.15).

Fig. 1.15: Em & en.

Finnial is the rounded non-serif terminal to a stroke (Fig. 1.16).

Fig. 1.16: Finnial.

Leg is the short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K ,R) (Fig. 1.17).

Fig. 1.17: Leg.

Ligature is the character formed by the combination of two or more letterforms (Fig. 1.18).

Fig. 1.18: Ligature.

Link is the stroke that connects the bowl and the loop of a lowercase G (Fig. 1.19).

Fig. 1.19: Link.

Loop is the bowl created in the descender of the lowercase G (in some typefaces) (Fig. 1.20).

Fig. 1.20: Loop.

Serifs are the right-angled or oblique foot at the end of the stroke (Fig. 1.21).

Fig. 1.21: Serif.

Shoulder is the curved stroke that is not part of a bowl (Fig. 1.22).

Fig. 1.22: Shoulder.

Spine is the curved stem of the S (Fig. 1.23).

Fig. 1.23: Spine.

Spur is the extension that articulates the junction of the curved and rectilinear stroke (Fig. 1.24).

Fig. 1.24: Spur.

Stem: The significant vertical or oblique stroke (Fig. 7.25).

Fig. 1.25: Stem.

Stress is the orientation of the letterform, indicated by the thin stroke in round forms (Fig. 1.26).

Fig. 1.26: Stress.

Swash is the flourish that extends the stroke of the letterform (Fig. 1.27).

Fig. 1.27: Swash.

Tail refers to the curved diagonal stroke at the finish of certain letterforms (Fig. 1.28).

Fig. 1.28: Tail.

Terminal is the self-contained finish of a stroke without a serif (Fig. 1.29).

Fig. 1.29: Terminal.

Uppercase letters are capital letters, which includes certain accented vowels, the c cedilla (Ç)and n tilde (Ñ), and the a/e (Æ) and o/e (Œ) ligatures (Fig. 1.30). Uppercase letterforms are drawn to the x-height of the typeface, and small caps are primarily found in serif fonts as part of what is often called an expert set.

Fig. 1.30 Uppercase letters.

Lowercase letters include the same characters as uppercase (Fig. 1.31).

Fig. 1.31: Lowercase letters.

Uppercase numerals, which are also called lining figures are the same height as uppercase letters and are all set to the same kerning width (Fig. 1.32).

Fig. 1.32 Uppercase numerals.

Lowercase numerals, which are also known as old style figures or text figures, are set to the x-height with ascenders and descenders (Fig. 1.33). They are less common in sans serif typefaces than in serif typefaces.

Fig. 1.33 Lowercase numerals.

Punctuation and miscellaneous characters can differ from typeface to typeface (Fig. 1.34).

Fig. 1.34 Punctuation & miscellaneous characters.

Ornaments are used as flourishes in invitations or certificates and are usually provided as a font in a larger typeface family (Fig. 1.35).

Fig. 1.35 Ornaments.

There are a few types of letterforms:

Roman: uppercase letterforms are derived from inscriptions of Roman monuments (Fig. 1.36).

Fig. 1.36 Roman typeface.
Book: a type of letterform that has a slightly lighter stroke in roman (Fig. 1.37).

Fig. 1.37 Book vs roman typeface.
Italics: a type of letterform are based off 15th century Italian handwriting (Fig. 1.38).
Oblique: a type of letterform that is slanted and based on roman form of the typeface (Fig. 1.38).

Fig. 1.38: Italics vs oblique typeface.

Boldface: possesses a thicker stroke than a roman form (Fig. 1.39).

Fig. 1.39 Boldface typeface.
Light: possesses a lighter stroke than the roman form (Fig. 1.40).

Fig. 1.40 Light typeface.
Thin: has even light strokes than light (Fig. 1.41).

Fig. 1.41 Thin vs Light typeface.

Condense: an extremely condensed version of the roman form, which are often called 'compressed' (Fig. 1.42).

Fig. 1.42 Condense typeface.
Extended: an extended variation of a roman font (Fig. 1.43).

Fig. 1.43 Extended typeface.

When analyzing fonts, what is worth noting isn't the similarities but the differences. Other than just x-height, forms have other factors that contributes to their variations such as line weight, relative stroke widths and in feeling (Fig. 1.44).

Fig. 1.44 Variations in each typeface.

Mr. Vinod then ended the lecture with a quote "You can't be a good typographer, if you aren't a good reader" by Stephen Cole.

Lecture 8

Mr. Vinod conducted a short lecture today which is mostly about how letterforms look symmetrical but are not. For an example, the uppercase letter 'A' from the typeface Baskerville (Fig. 1.45).

Fig. 1.45 Dissection of 'A' from Baskerville typeface.

The contrast in the left stroke and right stroke are obvious, but what isn't obvious at first is that each bracket connecting the serif to the stem has a unique arc.

Another example is the uppercase letter 'A' from Univers (Fig. 1.46). The width of the left slope in reality, is thinner than the right stroke.

Fig. 1.46 Dissection of 'A' from Univers typeface.

Helvetica and Univers may seem similar however in the Fig. 1.47 (below) demonstrates the differences between the lowercase 'a' from both the typefaces where the way the stems of the letterforms finish and how the bowls meet the stems are different.

Fig. 1.47 Lowercase 'a' from Helvetica vs Univers.

Curved strokes, such as 's' should rise above the x-height and/or sink below the baseline to appear the same size as the vertical and horizontal strokes (Fig. 1.48).

Fig. 1.48 Curved strokes should rise above the x-height and/or sink below the baseline.

When designing a typeface, it is also important to take into account the spaces between the letters and spaces contained within the letters--counterform (Fig. 1.49). As how we handle the counters when the type is set determines how well words hang together or how easily the text can be read.

Fig. 1.49 Counterform.

Lecture 9

There was no lecture as we continued to work on Project 2.

Instructions

Mib Gcd60104 Typography Bdc... by Natalie Leong on Scribd

Project 2

Week 7

Mr. Vinod told us to choose a typeface from the 9 typefaces he uploaded and then deconstruct them. He then showed us some examples of what the deconstruction looks like.

Basically, we have to line every loop and straight line of the letters to understand every nook and cranny of the letter. After all, one tiny change can affect the entire look and feel of the typeface.

We were to deconstruct 4 letters but I deconstructed 7 letters because I felt that jut deconstructing 4 letters was not enough for me to understand.

I chose to deconstruct ITC New Baskerville Std.

Fig. 1.1: Deconstruction of 'd'.

Fig. 1.2: Deconstruction of 'e'.

Fig. 1.3: Deconstruction of 'g'.

Fig. 1.4: Deconstruction of 'i'.

Fig. 1.5: Deconstruction of 'k'.

Fig. 1.6: Deconstruction of 's'.

Fig. 1.7: Deconstruction of t'.

Fig. 1.8: Sketch of typeface.

The typeface I had in mind was 'soft' but yet still elegant, without the sharp serifs of New Baskerville. After I showed Mr. Vinod my sketch, I proceeded to digitize the letter 'd'.

I had to experiment with what the letter 'd' looked like so I did different variations. At first I tried to sketch it exactly like how I did in my sketch but it looked weird. However after receiving feedback from Mr. Vinod, I had a clearer idea of what it should look like.

Fig. 1.9: parts and variations of 'd'.

I had to do the same for the letter 'g'. I reused the 'o' in letter 'd' when creating 'g'.

Fig. 1.10 parts and variations of 'g'.

Week 8

As I was not done with my typeface, I showed my progress to Mr. Vinod and Mr. Shamsul then I continued creating the letters. Again I had to create a few variations of the letters as the actual outcome seemed to differ from my sketch and what I had initially envisioned.

For the letters 'h' and 'n', I reused the same parts as they were quite similar.

Fig 1.11 parts and variations of 'h'.

For the letter 'k', I realized that the leg was longer than the arm so with that in mind, I created 'k'.

Fig. 1.12 parts and variations of 'k'.

Fig. 1.13 parts and variations of 'n'.

I was a bit confused as to how wide the terminal for 't' should be, so instead I placed it next to the letter 'h' and then I tried to see whether there was any visual harmony for the different thickness of the strokes.

Fig. 1.14 Digitization of my font.

Fig. 1.14 variations of 't'.

Fig. 1.15 parts of 's'.

I ran into the same problem I did with 'r' when I created 't'. So I tried to look for visual harmony as well.

Fig. 1.16 parts of 'r'.

Fig. 1.17 parts of 'i'.

Fig. 1.18 variations of 'o'.

Fig. 1.19 variations of 'e'.

Fig. 1.20 Attempt 1.

Week 9

As Mr. Vinod pointed out some inconsistencies in my typeface, I made a few changes.

Initially, Mr. Vinod advised me to change the width of the n and h as well as the 'o' in 'g'.

Fig. 1.21 Changing 'n', 'h' and 'g'.

However, after showing me my work he advised me to change the stroke for 'n' and 'h' with the stroke I used in 'i'.

Fig. 1.22 Changing the stroke for 'n' and 'h'.

After changing 'n' and 'h', I felt that I should change 'r' as well. So I made changes to 'r'.

Fig. 1.23 Changing 'r'.

Then Mr. Vinod said that I might as well changed 'k' too. So I made changes to 'k'. Additionally, he and Mr. Shamsul both told me to change the layout of the text. So I did a few attempts.

Fig. 1.24 Attempt 2 (JPEG).

Fig. 1.25 Attempt 3 Variation 1 (JPEG).

Fig. 1.26 Attempt 3 Variation 2 (JPEG).

Fig. 1.27 Attempt 3 Variation 3 (JPEG).

Fig. 1.28 Attempt 4 (JPEG).

Fig. 1.29 Attempt 5 (JPEG).

Fig. 1.30 Attempt 6 (JPEG).

Fig. 1.31 Attempt 7 (JPEG).

Fig. 1.31 Attempt 8 (JPEG).

I think that the attempt 3 variation 3 looks the best, so I chose it as my final design.

Fig. 1.32 Attempt 3 Variation 3 (PDF}; Submitted piece.