Typography - Task 3: Type Design & Communication

11 Oct 2022 - 15 Nov 2022 (Week 7 -Week 12)
Vincent Lee // 0359386
Typography // Bachelor of Design (Hons) in Creative Media // Taylor's University (TDS)
Task 3: Type Design and Communication (Font Design)

LIST

Task 3: Type Design and Communication

Feedback
Reflection
Further Reading

LECTURES

All lectures 1 to 6 are completed in Task 1: Exercise 1 & 2.

Week 7

Class Summary

Mr. Vinod briefed us on Task 3. We were instructed to watch the pre-recorded video in YouTube and watch the other video subsequently. According to Mr. Vinod, Task 3 is explore further in advanced typography, he wishes us to master it as it is crucial if we want to retain not only the foundation of our advance typography in our next semester and also if we want to understand the spiritual aspect of Typography.

Typo_Task 3_Typeface Construction (Shapes)

Select three alphabets, encourage to select one lowercase with ascender and one with descender, and m which is within the x-height
Do visual research
Sketching (minimum 5)
Upon selecting the option, look for a reference of the existing typeface that come close to the design we are working on
Type out the letter using the one of those font types then deconstruct it - to look on the details on how the letterforms is constructed.
Based on the knowledge gain in deconstructing the letterform then apply when digitising, create or construct the steps we have developed.

Week 8

Class Summary

Week 8 is our independent learning week. However, The Design School of Taylor's have organised a special talk for us to expand our knowledge on what typography can do and to what extend the letterforms can do. Mr Rainer is kind, friendly and I thought it would be somewhat boring and confused, but things went well, I able to catch the flow of the entire session.

Week 9

Class Summary

During class, Mr. Vinod provided feedback on our font design sketches and demonstrated how to digitize them using Adobe Illustrator. He emphasized that even small changes in one letter can have an impact on the entire font design. Mr. Vinod stressed the importance of following the foundation and rules of the module to ensure consistency in the design. We were instructed to base our font designs on three determined fonts and ensure that they have the same style and shapes. Students who have not digitized their designs were told to do so during the practical class, while those who have done so were given the opportunity to make amendments to any inconsistencies. Lastly, we shared our amended sketches and designs with Mr. Vinod, and I learned that when digitizing, it's essential to focus on building the structure first, followed by the thicknesses, and only then add details such as curvatures and points.

Week 10
Class Summary

During our feedback session with Mr. Vinod, we received individual critiques on our digitized font designs. He emphasized the importance of maintaining consistency in style and shape, and avoiding over-replicating design elements, which can cause the letterforms to lose their unique identity. We also learned that opting to introduce gaps in some letters doesn't necessarily mean all letters should have them. Mr. Vinod provided guidance on optically adjusting the width of letters such as G and M to ensure proportionate and consistent design.

We were instructed to complete pre-recorded videos to export our designs from Adobe Illustrator to FontLab, where we did kerning, letter spacing, and other necessary details before creating an A4-sized poster with the sentence "MAKE TYPE GREAT AGAIN." Our typeface had to be large and not drowned out by white space, with our name, font name, and the year 2022 added in Helvetica. We were given the freedom to align and position the elements as we saw fit, and to adjust leading as needed.

Week 11

Class Summary

"Creativity is about being Uncertain about what We've Created"

In class, Mr. Vinod emphasized the importance of regularly updating feedback, with deductions applied for those who did not. During the session, Mr. Vinod provided feedback on our digitized font designs, highlighting the need for wider strokes in the small letter "i" and suggested starting with the letter "o" to improve consistency in constructing small letters such as "a," "e," "g," "y," "p," and "n." He also advised reducing the length of the shoulder in the letter "r" to avoid excessive counter-space.

We then discussed the requirements for task submissions and the Final Compilation and Reflection blog, with Mr. Vinod reminding us to provide evidence of designing our font from scratch and making the link to the font public. We were also required to provide evidence of kerning and letter-spacing by screen-grabbing the process of importing our digitized font to FontLab. Lastly, Mr. Vinod briefed us on the Special Task and Final Compilation and Reflection blog before dismissing the class earlier.

Figure 1.1 - Evidence on Constructing of Letterforms demonstrated by Mr. Vinod.

Reminder:

the Final Compilation and Reflection blog must be prepared by Week 13 and the reflection can complete by Week 14.
Exporting of file must be 300 dpi, grayscale, if failed to upload, reduce the pixels (maximum 2468 px) in Photoshop.

Week 12
Class Summary

Mr. Vinod give individual feedback and guide us on creating an eye-catchy poster design based on our current poster design attempts and allow us to continue our Special Task: AngPow Design.

INSTRUCTIONS

Module Information Booklet

Task 3:

Design a limited number of western (latin) letters.
Study one out of those ten typefaces and analyse its anatomical parts.
Minimally produce 5 type/ letterform sketches of possible typefaces.
Ensure the files size does not exceed 2468.
Show the field that we have the kerning and screen grab that to showcase that we have transferred all the letterforms to fontlab.
Upload to google drive and ensure it is downloadable to anybody and placed the link in our e-portfolio.
Create a typeface that has the hallmarks of a good typeface; subtlety, character, presence, legibility and readability.
The canvas maximum size in fontlab is 1000pt.
The capital letter is 700pt.
Ideal x-height is 500 pt.

Task 3: Type Design and Communication

1. Research on Type Design

Figure 1.1 - Anatomy of Typography
(by Martin Silvertant)

As mentioned in the pre-recorded video, we are required to construct the ascender line, capline, x-height, baseline and descender line to achieve consistency in creating our font. In addition, I also utilise this image to help me on identify the terms of the letterform.

Overshoot
- the part of a letterform that extends above or below the vertical dimensions of flatter glyphs.

Figure 1.2 - Overshoot
(by BootCamp)

Figure 1.3 - Overshoot Guideline

Due to round and pointed letters look slightly smaller than other letters of the same size because they have so much extra negative space surrounding them in the areas where they meet the guidelines. To compensate for this, we will need to create the optical illusion that they are the same size as the other letters by making them slightly bigger (Fig. 1.2). The way to do this is to let them slightly overshoot the standard guidelines (Fig 1.3).

Figure 1.4 - Punctuations, Week 11 (08 Nov 2022)
(by Grill Type)

On Week 11, Mr. Vinod suggested us to watch this video to learn on constructing punctuations for our font. From this video, I had learned that full stop also have overshoot when it is a circle, while a square full stop will sit on the baseline.

2. Identify and Deconstruct References

According to Mr. Vinod, learn to deconstruct of letterforms allow us to have better confidence and knowledge on constructing of letterforms. Thus before starting my sketching, I decided to deconstruct a typeface.

The typeface chosen is Serif Typeface - ITC New Baskerville (Roman) and Sans Serif Typeface - Univers Lt Std (67 Bold Condensed).

Figure 2.1 - Deconstruction of Serif Letterforms, Week 8 (18 Oct 2022)

Before conducting this process, I knew that letterform mostly not look equally same. However after I deconstructing the letterforms, I was surprised by the differences. Besides. I also learned that the construction of a letterform including shapes like circle and triangle.

Figure 2.2- Deconstruction of Sans Serif Letterforms, Week 9 (01 Nov 2022)

Due to the inconsistency on my first attempt of digitised font, I decided to conduct one more time on deconstructing a sans serif typeface as the previous deconstruction is a serif typeface, thus is hard for me to identify the details. While deconstructing these letterforms, I learned that the vertical and horizontal width of letterforms is not exactly the same, but they somehow create and show balance and consistency throughout the entire font. From these deconstructions, I learned that the both side of the counter of the letter A is slightly narrow. In addition, arm of the letter Y is not the same width.

Figure 2.3 - Study on Punctuations, Week 10 (01 Nov 2022)

On Week 10, Mr Vinod teaches us that when comes to bold typefaces, the punctuations like hashtag will have minor thin strokes, thus I went on to deconstruct two sans serif typefaces' hashtag. I found that there are minor differences between the upper and bottom crossbars. Besides, in deconstructing Futura Std (Bold), I found that there are slight slanted/ curves on it, as shown by the red circle.

3. Sketches

Figure 3.1 - Font Design Sketches, Week 8 (18 Oct 2022)

After conducting some visual research, I created five sketches in a grids paper with a pencil. The grids paper allow me to calculate and sketch it precisely with the thickness of my font. The fonts I created is all sans-serif typefaces, this is because sans-serif is more neatly and more geometrical to me.

4. Digitalising of Font

This is the guidelines that we need to establish when digitising our sketch to Adobe Illustrator.

Figure 4.1 - Establishing of Guides, Week 7 (11 Oct 2022)

- Creating Guidelines

We are require to establish the guidelines as demonstrated in the pre-recorded video then based on the guidelines, digitise our sketches.

Figure 4.2 - Establishment of Guidelines in AI, Week 9 (25 Oct 2022)

As followed to the pre-recorded video, I had created a 500 pt x 500 pt box and use Myriad Pro (Regular) to determine my guidelines. The guidelines' measurements is as stated below:

- Ascender Height: 737 pt
- Cap Height Overshoot: 711pt
- Cap Height: 699 pt
- X-Height: 500 pt
- Baseline: 0 pt
- Baseline Overshoot: -12pt
- Descender Height: -230 pt

- Process of Digitising Font

First Attempt (Week 8)

Figure 4.3 - Constructing of Letterforms A E G, Week 8 (18 Oct 2022)

Tools Used: Rectangle Tool, Eclipse Tool, Pen Tool,

Corners: 20pt for outer corners, 10pt for inner corners

After creating the guidelines, I decided to start digitising. As I mainly using Pen Tool to digitise my sketch, I open the grids and guides to allow me to determine the width of the stem, arm, leg and other anatomy. After that, I used direct selection tool and select the corners and curve the corner into 20pt. For corners that is inside, for instance the letter E, the corners is 10pt.

Figure 4.4 - Progress of constructing letter K, Week 8 (18 Nov 2022)

Figure 4.5 - Progress of constructing letter G, Week 8 (18 Nov 2022)

Figure 4.6 - Progress of constructing letter Y, Week 8 (18 Nov 2022)

Figure 4.7 - First Attempt of Digitising, Week 8 (18 Oct 2022)
Press here to view

Second Attempt (after Week 9 feedback)

After receiving feedback from Mr. Vinod, I agreed that my overall optical illusion of letterforms is inconsistent thus, in this attempt, I mainly using rectangle tool and eclipse tool to construct my letterforms to achieve the consistency.

Figure 4.8 - Alter the height of guides, Week 9 (25 Oct 2022)

As I forget to construct a 500pt x 500pt box to determine my baseline, thus in Week 9, I establish new guidelines to digitise my letterforms.

Figure 4.9 - Progress of re-constructing letter G, Week 9 (25 Oct 2022)

Figure 4.10 - Before and after on constructing letter G after feedback, Week 9 (25 Oct 2022)

In Fig, 4.10, I had improved my letterforms based on the feedback given. For instance, I have improved my letter G become thicker as compared with my first attempt in Week 8.

Figure 4.11 - Comparison of without (left) and with (right) overshoot, Week 9 (25 Oct 2022)

As shown in Fig. 4.11, without applying overshoot to the letter G, it is slightly not consistent with the letter K. However, on the right, after adjusted to have overshooting on the top and bottom, the letter G is now more presentable and consistent to read.

Figure 4.12 - Using shapes to construct letterforms and punctuations, Week 9 (25 Oct 2022)
Press here to view

After week 9 review session, to ensure consistency, I used shapes and pen tool to form my letters. Then I use pathfinder and shape builder tool to merge/ divide the shapes.

Figure 4.13 - Second Attempt on Digitising, Week 9 (25 Oct 2022)
Press here to view

Third Attempt (after Week 10 class)

In week 10, after discussing the optical illusion of my digitising font, I decided to further enhance my letter A by changing the counter to become a triangle. For letter T and Y, is adjusted based on the feedback given.

Figure 4.14 - Progress of re-constructing letter A, Week 10 (01 Nov 2022)

Figure 4.15 - Evolution on constructing letter T, Week 10 (01 Nov 2022)

Figure 4.16 - Progress of re-constructing letter Y, Week 10 (01 Nov 2022)

Figure 4.17 - Third Attempt on Digitising, Week 10 (01 Nov 2022)
Press here to view

Final Attempt (after Week 11 feedback)

Figure 4.18 - Re-Constructing Letter R during the weeks, Week 11 (08 Nov 2022)

On week 11, I had learned that for bowl, tails, shoulder, and arm mostly require overshoot to achieve optically consistency. For instance, letter G and O, we need to make it slightly bigger than the other letters like A and E so to achieve the consistency. Thus, I quickly alter the bowl of my letter R in this case.

Figure 4.19 - Re-Constructing of Punctuation, Week 11 (08 Nov 2022)

Figure 4.20 - Final Attempt on Digitising, Week 11 (08 Nov 2022)
Press here to view

Figure 4.21 - Overview of Attempts on Digitising, Week 11 (08 Nov 2022)
Press here to view

5. Developing the Final Font in FontLab 8

Typo_Task 3A_Illustrator to FontLab Demo

Notes:

- name

- metrics and dimensions

- importing of fonts by dragging the X and Y coordinates (AI) so it direct attach to exact X and Y coordinates of the font (FontLab)

- Then edit kerning by adjusting all the bearings to zero then manually do kerning to each letters and pairs.

- create space

- file > export font as > TTF. > export

Typo_Task 3A_FontLab7 Demo

Notes:

- ensure just one vector artwork

- File > Preferences, to ensure it is import as a vector artwork/ format

- Launch text bar and matrix table for kerning process

- Process of Kerning

Figure 5.1 - Metrics and Dimensions, Week 11 (08 Nov 2022)

First, I key in all the dimensions based on the heights of my guidelines that established in AI.

Figure 5.2 - Importing of Letterforms, Week 11 (08 Nov 2022)

Second, I drag the X and Y guidelines and copy my letters in AI then paste it in FontLab. The letter attach to the X and Y coordinates exactly.

Figure 5.3 - Kernings with various combinations, Week 11 (08 Nov 2022)

Third, after importing all the letters, I do kerning with different combinations of text and punctuations, as shown in Fig. 5.3.

Figure 5.4 - Final Kerning in FontLab, Week 11 (08 Nov 2022)

Figure 5.5 - Exporting of Font, Week 11 (08 Nov 2022)

After I am satisfied with the kerning of letters, I followed the instructions in Typo_Task 3A_FontLab7 Demo to export my font.

6. Poster Design

- Use the text - MAKE TYPE GREAT AGAIN to create a poster in A4 size.

- Maintain the point size of our typeface.

- Upon completion, use Helvetica to add our name, name of our font and 2022 within the white area of our poster.

- Free to align, position, increase or reduce leading

Figure 6.1 - Poster Design, Week 11 (08 Nov 2022)

Final Task 3A: Type Design and Communication

1) Final Kerning

Figure 6.2 - Final Kerning, JPEG, Week 11 (08 Nov 2022)

2) Final Font Design

Download my font here: AerynBold.ttf

Figure 6.3 - Final Font Design "Aeryn Bold", JPEG, Week 11 (08 Nov 2022)
Pree here to view

Figure 6.4 - Final Font Design "Aeryn Bold", PDF, Week 11 (08 Nov 2022)

3) Final Poster Design

Figure 6.5 - Final Poster Design (Black Version), JPEG, Week 12 (15 Nov 2022)

Figure 6.6 - Final Poster Design (White Version), JPEG, Week 12 (15 Nov 2022)

Figure 6.7 - Final Design Poster, PDF, Week 12 (15 Nov 2022)

FEEDBACK

Week 9

Specific Feedback -

Fig. 1.5 - Sketches

Sketch #4 - if I decided to go with the combination of rounded and squared, then I should be consistent in the other letters as well.

Sketch #5 - the E is a good letter E, except for the middle crossbar and the last crossbar as it seems to extend beyond the boundary. Same goes to the letter A, the apex of letter A are too pointed and the diagonal strokes on the left is not consistent.

Fig. 4.7 - Digitising of Sketch #3

The stem of M and N is okay. However, the vertical stem letter A E G I K P R T Y is not consistent as what have been seen in letter M and N.

General Feedback -

The sketches looks almost the same, minor differences. The differences looks unsure, such as rounded and squared appeared in a same design. Sketch #2 and Sketch #3 is generic, no other comment given.

Week 10

Fig. 4.13 - Second Attempt on Digitising

Specific Feedback -

Letterform T and Y is not consistent and does not have the same width as compared to the other letters. Besides, relook the whole digitise font as to ensure that the letterforms are maintaining the consistency of width.

General Feedback -

Better than what had been presented in Week 9, minor changes needed on the width of letter T and Y.

Week 11

Fig. 4.17 - Third Attempt on Digitising

Specific Feedback -

Letter R doesn't seem to mimic the stem stroke of letter T. Not a good job with the exclamation mark, it does not fit with the rest of the strokes. Suggested to maintain the width on the bottom and alter the upper width as the stem of letter Y so my exclamation mark can be tapered. Thinner strokes in hashtag sometimes is acceptable especially comes to letterforms that are very thick such as Univers LT Std.

General Feedback -

Interesting typeface but still some issues with regards to the thickness letter R. Proper analysis needed for hashtag as the strokes are too thick. Comma and full stop good, but the dot of exclamation marks should mimic the full stop ideally.

Week 12

Fig. 6.1 - Poster Designs

Specific Feedback -

Poster Design #1 is not good. The text is drowning in the white space.

General Feedback -

Poster Design #3 is better. Try to change it to black background and white font.

Week 13

Complete. Competency: Mastering

Week 14

W14, T4: Complete. Nice type

REFLECTIONS

Experience
The beginning is frustrated and I hate it. On week 9, before our the review session, I told my friend that whatever feedback I will received later, I would not change as I specifically fed up on this task. After receiving feedback, I spent my weekends to make amendments and improvement on those letterforms that looks inconsistent. I was quite upset too when I couldn't achieve the illusion balance. Thus, I think I still care about this task and still have the eagerness to learn although I have not much interest in this module. On week 12, I had completed all the requirements for submission, I was so tired on doing this task. However, I know that this is the process of learning, thus I does not feel really bad or anything, just maybe need some rest. Last, it was kinda relieve and satisfied after completed this task.

Observation
There are so much consideration to construct a letter, not to mention creating a full set. Proper study and research on relevant materials for this task definitely help in conduct this task. I thought I will be lucky enough to just attempt one or two times then got approved, however things seems not to be as simple as I thought. While doing my third attempt on digitising, I found that the table in the book - Exploring Typography, page 260, are helpful and effective in doing this task as it teach us how to keep our font consistent when digitising in AI. In addition, I observe that most of my peers are being bold when comes to creating the font, they are so persistent in creating their font although the feedback they received are not getting any approval.

Findings
I had learned that studying relevant materials able to assist me in doing this task. The more I read and conduct visual research, I am nourishing my confidence level. At week 10, I kept spending my weekends on altering the part that seems to be inconsistent, while making alteration, I realised that outcome does show how much time and effort you put into one task. This is due to the reason that my peers spent her whole independent learning week on doing research and study relevant materials for this task, However, I spend roughly one day to finish mine. So when receiving feedbacks, I literally have to alter all the letters, while she does not make any major mistakes. In addition, I found that being consistency is to use a letter form to create another letters, which is not applying in my initial digitising of letterforms. Thus, after couple weeks of feedback and struggles , I had learned a lot from Mr. Vinod and my peers for my advanced typography.

FURTHER READING

Figure 1.1 - Exploration Typography by Tova Rabinowitz Deer
(source from Taylor's University Library)

Chapter 8 - Designing Type (pg 246 - pg 296)

Figure 1.2 - Typography Guideline

A good way to begin our typeface design is to write a short description of the project, Describe our intended meanings, moods, and feel of the typeface, how it will be used, who will use it, and so forth. The answer to those questions will help us make specific decisions along the way about which design elements and strategies to choose and use. Referring back to your initial description throughout the process will keep is on track during the time it takes to complete the design of a whole font.

- Finding Inspiration

Before starting our design, we should view and study as many typefaces as possible, so we can know what is already out there and what is being used to serve similar purposes to yours. This knowledge will help you differentiate your typeface from the others, while learning from other designers' mistakes and successes.

We can view hundreds of fonts online, and this can be very helpful; however, because of the computer's poor screen resolution, we'd do better to view the typefaces in print so you can appreciate the detailed nuances that make each typeface unique. Scrapbooking can be another good source of ideas. When you see examples of type that interest you, collect and/or record them in your scrapbook, and write notes to ourself about what interested us in particular about each design. This will help with our brainstorming later.

- Preparations

A good typeface is consistent enough that it doesn't interrupt the reading of the content. This mean that when we look a page of body text, no one letter should stand out from the others. allowing a smooth reading flow. Because of the varying shapes shapes of letters, several optical illusions can take effect that make consistent letterforms appear to be inconsistent. Thus, there are several key decisions we must make at the onset of designing our font to ensure consistency. These essential elements can be divided into four categories: Guidelines, Contrast, Angle of Stress, and Terminals.

1. Guidelines

Baseline, x-height, cap height, ascender line, and descender line don't just help designers lay out type, they are also essential to designing type. They compose a grid that lets the designer make sure that all the characters of a font are proportioned consistently. We will use an em square as a grid to design each glyph so that all the glyphs of the typeface will be sized in relation to one another. Your em square will be a square bounding box, divided into some number of unis, established by us. This grid will need to accommodate not only each individual glyph, but also some extra space on all sides to prevent overlap of adjacent characters and lines of text.

The more finely the em square is divided, the higher the resolution. The maximum em square that most font editing software can accommodate is 4000 units; however, since the average printer cannot reproduce much more derail than the average 1000 to 1024 units, this level of detail is generally excessive. Even fonts developed for output on high-quality imagesetters are adequate when based on a doubled em square divided into 2000 units for PostScript or 2048 units for True Type.

Figure 1.3 - An em square divided into 1024 units and 2048 units.

The em square is generally divided by the baseline into two areas -- the ascent, which is the area above the baseline, and the descent, which is the area below (Figure 1.4). The proportions at which you divide the em square, and thus set your guideline measurements to, are up to you, however, it will help to be aware of standard guideline proportions, so you can make educated decisions about deviating from tradition.

The baseline traditionally divides the em square at about 20 percent up from the bottom (Figure 1.4). For an em square of 1000 units, this would mean an ascent of about 800 units and a descent of about 200 units.

Figure 1.4 - Ascent and descent of an em square showing the baseline to be 20 percent up from the bottom.

The cap height is generally about 75 percent to 85 percent of the height of the ascent, starting at the baseline (Figure 1.5).

Figure 1.5 - The cap height of an em square is generally about 75 percent to 85 percent of the height of the ascent.

The x-height is traditionally sized at around 50 percent to 80 percent of the cap height. So, for our em square of 1000 units with an 800 unit ascent and a 600-700 unit cap height, a traditional x-height would be somewhere between 300 and 560 em units above the baseline, as seen in Figure 1.6.

Figure 1.6 - The x-height of an en square is traditionally sized at around 50 percent to 80 percent of the cap height.

There is a lot of flexibility here, an x-height that a low x-height will make our type appear smaller than a tall x-height at the same point size. If the x-height is too short, the letters may become too small to read at smaller point sizes. On the other hand, if the x-height of the font is too tall, legibility will be decreased because short ascenders can become difficult to recognise. For instance, an h with a very short ascender might be hard to distinguish from an n.
The ascender line is traditionally either the same height or slightly taller than the cap height.
The descender line can be the full descent size (in this case, 200 em units), as shown in Figure 1.7, or it can be slightly shorter.

Figure 1.7 - Em square showing ascender and descender lines. In this case, the descender line is the same as the lower boundary of the em square.

Before deciding upon the proportions of your font, we should examine many typeface examples with a variety of proportions to get a sense of what will work best for our design.

Unfortunately, the guidelines we've discussed so far won't satisfy the needs of every character. Rounded and pointed letters look slightly smaller than other letters of the same size because they have so much extra negative space surrounding them in the areas where they meet the guidelines. To compensate for this, we will need to create the optical illusion that they are the same size as the other letters by making them slightly bigger. The way to do this is to let them slightly overshoot the standard guidelines.

We will need to establish a set of overshoot guidelines to help our round and pointed letters maintain optical consistency with the other characters, as shown in Figure 1.8. The overshoot guidelines include the baseline overshoot, the x-height overshoot, the cap height overshoot, the ascender line overshoot, and the

descender line overshoot (optional). Standard overshoot amounts range between 10 to 20 em units for a 1000 unit em square. That's an extra 1 to 2 percent above (or below) each guideline.

Figure 1.8 - Overshoot guidelines are represented by the dotted lines.

Determining the width of characters within the em square tends to be a bit more subjective, unless we are creating a monospaced font in which all characters have the same width. A good traditional strategy is to start out by establishing three basic widths: a narrow width (for letters like i, j, I, and t), a wide width (for letters like M and w), and a medium width for all other characters. Then vary the width when needed, as you design each letter; those with strong horizontals may need narrowing, since horizontals create an optical illusion of added character width, as illustrated by Figure 1.9. Trust your eyes as you make adjustments for optical consistency.

Figure 1.9 - Characters with strong horizontals may need narrowing, since horizontals create an optical illusion of added character width.

2. Contrast

Contrast in typography refers to the variance between the thick and thin letter parts; that is, the difference between the widths of the stem and hairline strokes and between the thick and thin parts of curved strokes. Extremely low-contrast fonts may look dull and detract from the legibility of body texts by robbing letterforms of their distinctive uniqueness. Extremely high-contrast fonts may detract from the legibility of body texts by dazzling the eyes and by distorting letterforms past easy recognition. Again, we should study real examples to get a sense of what sort of contrast we want to establish.

For a traditional-looking font, we can base your stroke weights on the cap height we've already established by using the following percentages:

Vertical capital stem stroke: 13 to 18 percent of the cap height
Vertical capital hairline stroke: 5 to 8 percent of the cap height

We can then select our vertical lowercase stroke measurements based on our vertical capital stroke weights.

Vertical lowercase stem stroke: 80 to 90 percent of the vertical capital stem stroke
Vertical lowercase hairline stroke: 70 to 80 percent of the capital hairline stroke (note: crossbars are often thicker)

We can then determine the curved and diagonal stem widths based on our vertical stroke measurements. Curved and diagonal stems will need to be slightly wider to optically match their straight counterparts; this is because curved and diagonal lines look narrower than straight lines of the same width, as we can see in Figure 1.10.

Curved stem widths; approximately 10 percent wider than their corresponding vertical counterparts

Figure 1.10 - The glyph on the right has been corrected to compensate for the optical illusions that curved strokes look narrower than straight strokes of the same width.

It is good idea to make templates of each strokes weight, like the ones shown in Figure 1.11, so we can easily and consistently apply them to appropriate strokes.

Figure 1.11 - Sample stroke templates.

3. Angle of Stress

The angle of stress is another factor that should be optically consistent in a font. Although fonts have become somewhat removed from their calligraphic heritage, the consistent distribution of thick and thin letter parts still adds grace and distinctiveness to many fonts. A typical font has an angle of stress anywhere between 60 to 90 degrees, relative to the baseline, as shown by Figure 1.12.

Figure 1.12 - A typical font has an angle of stress anywhere between 60 to 90 degrees, relative to the baseline.

4. Terminals

Finally, we must consider the nature of your font's terminals; that is, the ends of the characters' strokes. Sometimes terminals have serifs; sometimes they don't. If a font does have serifs, they might or might not be bracketed. Whether we are designing a serif or sans-serif font, it is likely that there will be some variation in terminal shape and size depending on position, and we will need to make some decisions about these variations up front, to ensure overall consistency for the font.

For fonts that have serifs, we will need to determine the shapes and sizes of both uppercase and lowercase serifs, barbs, and beaks. We will also need to decide on the slope and height of the brackets that connect the serifs to the stems. Brackets that ease the transition from the stem to the serif can be short or tall, wide or narrow, and lightly or heavily sloped, as shown in Figure 1.13.

Figure 1.13 - Bracketed Serifs

For all fonts, we will need. to apply consistent shapes and sizes for terminals including tails, ears apexes, vertexes, and swashes, as applicable.

Chapter Summary:

Designing a font well is a long, arduous, and painstaking task. People seem to either love it or hate it, depending on their preferences for detail-oriented work and their feelings about type. Those who wish to try their hand at designing a font can make their task much easier by keeping good records, conducting a significant amount of research, selecting an appropriate design strategy, and making well- planned decisions about the font's design elements. The quality of a font is often judged by its optical consistency, it's legibility, and its readability. Since appropriate spacing is incredibly important to the legibility and readability of a font, assigning side-bearing and kerning values should be done with great care and extensive testing and retesting. Once completed, designers and foundries produce type specimens to market their fonts to the public, using a wide variety of formats.

QUICK LINKS

Task 1: Exercise 1 &2

Task 2: Typographic Exploration and Communication

Special Task: Type Design & Communication (AngPow Design)

Final Compilation and Reflection

References

Deer, T. R. (2015). Chapter 8 - Designing Type. In T. R. Deer, Exploration Typography, Second Edition (pp. 249 - 296). Boston, Massachusetts, USA: Cengage Learning.

Vincent Lee | 0359386