Advanced Typography | Task 3: Type Exploration and Application

17/6/24 - 26/7/24 | Week 10 - 14

Iman Mikudim | 0338004 | Section 3

Course Name | Bachelor of Design (Hons) in Creative Media 

Task 3: Type Exploration and Application

---

SECTIONS

|  Lectures (All lectures documented in Task 1)

|  Instructions

|  Feedback

|  Reflections

|  Further Reading

---

INSTRUCTIONS

1. Brief

For this task, we have three directions to choose from:

• Font creation for problem-solving: Create a font that is intended to solve a larger problem or is meant to be part of a solution in the area of your interest.
• Exploration of existing letterforms: Explore the use of an existing letterform in an area of interest, identify areas that could be improved upon, and explore possible solutions that may add value to the existing letterform/lettering. 
• Experiment: For your idea to qualify as an experiment it must be novel and unique — working with material that might be 3-dimensional, digitally augmented, edible, unusual, typographic music video or fine art. 

The end result of this task should be a completely generated font (.ttf) with applications.

2. Process

Part 1 | Type Exploration

(i) Illustrator

For this task, I planned to expand the font I created in task 1 because I couldn't find any other fonts that combined the use of sharp points and slab serifs. My main goal with this font expansion is to create a font that has a sci-fi futuristic feel and can be used in a variety of applications such as video games and movies.

Fig 1.1 Letterforms from Task 1 (Exercise 2) | Week 10 (24/6/24)

Fig 1.2 Font Guidelines | Week 10 (24/6/24)

Before I began, I created the guidelines that Mr. Vinod had taught us and that would be used throughout the construction of the letterforms for this and previous tasks.

Fig 1.3 Font Process | Week 12 (8/7/24)

After receiving feedback from Mr. Vinod, he mentioned to make the width of letter 'j' shorter.

Fig 1.4 Completed Initial Letterforms | Week 12 (8/7/24)

After receiving feedback from Mr. Vinod again in Week 13, he stated that the strokes of my letterforms were inconsistent and that I relied too heavily on other existing letterforms for reference, causing my own letterforms to appear odd. He also advised choosing either slab serifs or pointy edges, as a combination of the two looks odd and inconsistent. Finally, Mr Vinod mentioned reconstructing the stroke thickness for vertical, horizontal, and diagonal. 

Fig 1.5 Establishing Stroke Thickness | Week 13 (15/7/24)

As the submission deadline approached, Mr. Vinod kindly demonstrated how I could proceed and make my letterforms more consistent by determining the strokes I would use in my revised letterforms.

Fig 1.6 Establishing Widths | Week 13 (15/7/24)

When I expressed my concerns about establishing width sizes, Mr. Vinod responded that letters will generally follow the width of the letters 'O' and 'H'. However, the letters 'M' and 'W' would typically be wider. With this in mind, I proceeded to create the revised letterforms, doing my best to be as consistent as possible. 

Fig 1.7 Adjusting Uppercase Stroke Widths | Week 13 (15/7/24)

When I was creating some of the letterforms, I mentioned to Mr. Vinod that if I kept all vertical and horizontal strokes the same thickness, some of them would appear thicker than others. Mr. Vinod then advised me to change the strokes on one side of each letter, referring to existing letterforms of the same nature.

Fig 1.8 Other Uppercase Letter Refinements | Week 13 (15/7/24)

Throughout the letterform constructions, after placing letters next to one another, I noticed some inconsistencies, primarily in terms of width, which I had followed the other letters and had to adjust by eye. 

Fig 1.9 Uppercase Construction Process | Week 13 (18/7/24)

When constructing the letterforms, I also made sure to keep a copy of the original, with the shapes used to construct them on one artboard and the combined (united) right next to it, so that if I needed to return and work on them again, it would be easier. 

Fig 1.10 Comparing Uppercase Letterforms | Week 13 (18/7/24)

Before moving on to lowercase, I created some words to see how the letters looked next to one another, making sure they were as consistent as possible. 

Fig 1.11 Lowercase Letter Refinements | Week 13 (15/7/24)

Fig 1.12 Comparing Lowercase Letterforms | Week 13 (18/7/24)

Fig 1.13 Lowercase Construction Process | Week 13 (21/7/24)

Fig 1.14 Punctuation Guide | Week 13 (24/7/24)

Mr. Vinod provided us with a guide for constructing common punctuation, which I then used and applied in the image below. Other punctuations, however, were created by referencing existing letterforms. 

Fig 1.15 Punctuation & Numbers Construction Process | Week 13 (24/7/24)

Fig 1.16 Final Letterforms | Week 13 (24/7/24)

(ii) FontLab

Fig 1.17 Before and After Adjusting Bearings | Week 14 (25/7/24)

After receiving the greenlight from Mr. Vinod, I then went ahead and started importing my letterforms into FontLab to begin adjusting the bearings for each letter.

Fig 1.18 Exporting Font | Week 14 (25/7/24)

Part 2 | Type Application

Fig 2.1 Font Presentation Process | Week 14 (26/7/24)

When it came to designing the font presentation and application, I wanted to keep the sci-fi, futuristic feel. For the displayed characters, I used some outlined letters from my typeface as a background. When I was satisfied with the layouts, I added some glow effects to improve the look and feel of scifi.

Fig 2.2 Font Application Process (Design) | Week 14 (26/7/24)

I originally wanted to use an existing game for the background, but I thought why not just create a very simple one myself for my own game titled "Valor"?

When designing, I used a lot of repetitive elements, like the binary code of numbers 0's and 1's from my typeface, which mimicked the Matrix rainfall effect.

(ii) Photoshop

Fig 2.3 Font Application Process (Mockup) | Week 14 (26/7/24)

For the Photoshop process, I mostly just added the designs to the mockups and applied gradient backgrounds and some filters to match the purple theme I was going with. 

Final Type Exploration

[ Link to Download Font ]

Fig 3.1 Completed "Valor" Regular Font (JPEG) | Week 14 (26/7/24)

Fig 3.2 Completed "Valor" Regular Font (PDF) | Week 14 (26/7/24)

↓ Try typing Characters from the Set as shown above ↑

Fig 3.3 Font Tester / Preview | Week 14 (26/7/24)

Final Type Presentation (JPEG)

Fig 3.4 Final Font Presentation #1 | Week 14 (24/7/24)

Fig 3.5 Final Font Presentation #2 | Week 14 (24/7/24)

Fig 3.6 Final Font Presentation #3 | Week 14 (24/7/24)

Fig 3.7 Final Font Presentation #4 | Week 14 (24/7/24)

Fig 3.8 Final Font Presentation #5 | Week 14 (24/7/24)

Fig 3.9 Final Font Presentation #6 | Week 14 (24/7/24)

Final Type Application (JPEG)

Fig 3.10 Final Font Presentation #1 - Billboard | Week 14 (25/7/24)

Fig 3.11 Final Font Presentation #2 - Bus Ads | Week 14 (25/7/24)

Fig 3.12 Final Font Presentation #3 - T-shirt | Week 14 (25/7/24)

Fig 3.13 Final Font Presentation #4 - Stickers | Week 14 (25/7/24)

Fig 3.14 Final Font Presentation #5 - Game Disc | Week 14 (25/7/24)

Final Type Compilation (PDF)

Fig 3.15 Final Type Compilation (PDF) | Week 14 (25/7/24)

---

FEEDBACK

Week 9 (17/6/24)

*Public holiday (Hari Raya Qurban)*

Week 10 (24/6/24)

General Feedback:

• Avoid textures when making letterforms. Only use clean strokes to build letterforms and apply textures afterward.
• Letterforms should be developed on a 1000x1000px artboard.
• Set letterform width/thickness first.
• Create 5 presentation artboards.
  
  

Week 11 (1/7/24)

General Feedback:

• Look at Instagram video for the punctuations.
• Make sure to use Fontlab 7. In Fontlab, make sure to key in ascenders/defenders cap height/x-height etc.
• When transferring letterforms from illustrator to fontlab, make sure the letters are combined already.

Specific Feedback:

• When unsure, remember to always reference to existing fonts when creating letterforms.
• Make width of letter 'J' shorter and make bottom diagonal stroke of letter 'K' thicker.
  
  

Week 12 (8/7/24)

*Public holiday*

Week 13 (15/7/24)

General Feedback:

• Finish uppercase, lowercase, punctuations and numbers by this week (insertion of letterforms in FontLab), as well as font presentation to showcase in next week's final class. 

Specific Feedback:

• Pick either slab serifs or pointy edges, having a mixture of both looks odd and doesn't look consistent.
• Reconstruct thickness of strokes for vertical, horizontal and diagonal. 
  
  

Week 14 (22/7/24)

General Feedback:

• Last week to finalize everything before submission.

Specific Feedback:

• Shift the top half of letter B upwards, having the top and bottom equally will make the B look top heavy. 
  
  

---

REFLECTIONS

Experience

My journey with this task has been a long one. It’s been on my mind since we first learned we had to create an entire font. Given the effort it took to develop just a few letters in the Typography module, I never thought I'd make it through this. I felt the time constraints were too tight to fully develop an entire typeface, including kerning, font presentation, and application. Despite these challenges, I’m pleased to have completed the final task. Although I feel I could have done better with more time, I'm overall satisfied with finishing the project, even though there’s room for improvement in the font presentation and application.

Observations

One key observation I made is the importance of small details. Finding the right proportions for each letter proved to be both difficult and time-consuming. I also realized the necessity of maintaining consistent stroke widths (both horizontal and vertical) across the letterforms. Without this consistency, the letterforms appeared messy and dissimilar. Initially, I didn’t notice this issue until Mr. Vinod pointed out how some letters were significantly larger than others due to inconsistent strokes.

Findings

Creating a typeface demands considerable effort and patience. There’s a lot of research involved in understanding the fundamentals of typeface design. Without this research, setbacks are inevitable, as I experienced when designing letterforms without a grid. Additionally, font presentation and application provide valuable insights into your design, helping identify areas for improvement and whether the font meets its intended purpose. The process of creating a typeface is complex, and I have a newfound respect for typeface designers.

---

FURTHER READINGS

Article | Letter Construction

Fig 4.1 Letter Construction by KellsCraft

Variations in Proportions:

• Letters differ in width & height. They can be classified as normal, compressed (narrow), or expanded (wide).
• The proportion of the stroke thickness to the height of the letter also varies, influencing the classification into Light Face or Bold Face.
  
  

Optical Illusions:

• Stability Illusion: Letters like B, E, K, S, X, Z, and numbers 3 and 8 should be slightly smaller at the top to appear stable, countering the optical illusion where horizontal lines appear below the middle.
• Height Perception: Round letters of the same height as square letters appear smaller. To maintain equal height perception, round letters should extend slightly above and below the guide line.
  
  

The Roman Letter

The Roman letter has 3 main forms: Classic, Renaissance (Old Roman), and Modern. It features 2 line weights, corresponding to the downstroke and upstroke of a broad reed pen. Correct shading requires maintaining these strokes, with downstrokes thicker & upstrokes thinner, to preserve the letter’s traditional form.

Fig 4.2 Line Weights of Roman Letters

All inclined shaded strokes in the Roman letter, except for Z, are downstrokes from left to right (\). This creates a secondary rule applicable to letters like X and Y, ensuring their consistent design.

Rules For Shading Roman Letters

1. Heavy Lines—all down strokes. This includes all vertical lines (except as noted above in M, N, and U), and all lines slanting downward, left to right.

2. Light Lines—all horizontal strokes. All strokes upward from left to right (except Z)

Fig 4.3 Parts of a Roman Letter

In the Roman letter as shown in Fig 4.3, the heavy line (a) is called the stem or body mark, the light line (b) the hair line, the cross stroke (c) which finishes all free ends the serif, and the curves (d) connecting the serifs with the stem, brackets or fillets.

Old Roman (Renaissance)

Fig 4.4 Two Examples of Renaissance Roman.

During the Italian Renaissance, architects refined old Roman models, leading to variations in letter design. Fig 4.4 shows two examples: the Henry VII, with the largest serifs, and the Marsuppini, with very small serifs.

Fig 4.5 Serifs

Roman letters are significantly influenced by the serifs and spurs at their ends, originally from chisel cuts to prevent over-cutting. These are connected to the stems by small curved fillets or brackets, requiring precise drawing. Even slight deviations in these curves can detract from the letter’s appearance. Fig. 4.5 shows various forms of these terminals:

• (a) is the serif of the classical Old Roman.
• (b) a longer serif as found on some renaissance examples.
• (c) the serif on the hair line of the A, M, and N.
• (d) top and bottom spurs on horizontal lines, such as E and T.
  
  

Fig 4.6 Roman Alphabet, with a Method of Geometrical Construction for Large Letters.

Fig 4.6 display a Renaissance Roman alphabet with stems one-ninth of the letter's height and hair lines half the stem's width. The letter widths are measured in units, with one unit equaling one-ninth of the letter's height.

Fig 4.7 Typical Order and Direction of Strokes

Following the general order and direc­tion of strokes outlined in Fig. 11, always drawing the outlines of the main strokes of the letter first, then the serifs, and finally the fillets. The analyzed 'H' is typical for all the straight letters. The letters with inclined sides should have the outside lines made first as in the 'A' of Fig 4.7.

In the O family the outside curves of the 'O', 'Q', 'C', and 'D' are circles and when done freehand should be drawn in two strokes as shown in Fig 4.7. The inside curve is an ellipse, usually tilted at an angle as indicated.

The Modern Roman

In the eighteenth century, the Modern Roman typeface emerged, differing significantly from its historical predecessors. This typeface, used extensively in government documents and maps, is characterized by its uniformity and mechanical appearance, lacking the artistic detail of older Roman fonts. It features a heavy face with a stem-to-height ratio of 1:6 and very light hairlines and long serifs, which can reduce legibility from a distance.

Fig 4.8 Construction of Modern Roman Letters and Figures

The Modern Roman alphabet, illustrated in Fig 4.8, is shown in a slightly expanded form for better usability. Each letter is six units high, with dimensions marked on a card or paper strip for accuracy. Vertical, inclined, and curved lines are drawn downward, while horizontal lines are drawn from left to right. To address optical illusions in larger letters, slight adjustments in thickness may be needed to maintain uniformity.

Fig 4.9 Curve Shape in Modern Roman.

In the Modern Roman typeface, the curves of round letters like 'O' are not perfectly circular as in the Old Roman. Instead, the curve is slightly flattened at the diagonals, resembling four curves connected by longer curves, as shown in Fig 4.9. This design approach is typical of all curved letters in this typeface and adds a unique grace to the characters that is not present in the more traditional forms.

The inner line is nearly straight, and connected to the outer by a transition curve. Great care must be used to avoid the crescent shape of Fig 4.9.

Fig 4.10 Modern Roman Serifs

The Modern Roman typeface often suffers from poorly executed serifs, more so than other issues. Fig 4.10 shows both correct and incorrect serifs and spurs. This figure also indicates that the terminal ball of the 'J', '2' etc., is a circle joined to the stem by a small fillet.

At (f) is shown the cusp or intersection of the curves of 'R' and 'B', illustrating the rule that two heavy strokes must never touch each other. It will be noticed that the numerals '2', '5', and '7' are exceptions to the rule that horizontal strokes are light.

---

QUICK LINKS

|  Task 1: Typographic Systems & Type and Play

|  Task 2: Key Artwork

|  Task 4: Final Compilation & Reflection