Advanced Typography - Task 3: Type Exploration & Application

12.06.2024 - 21.07.2024 / Week 8 - Week 13

Teo Mei Hui / 0358315

Advanced Typography / Bachelors of Design (Honors) in Creative Media / Taylor's University

Task 3: Type Exploration & Application

---

CONTENTS

1. Lectures
2. Instructions
3. Task
4. Feedback
5. Reflections
6. Further Reading

---

LECTURES

All lectures completed in Task 1 and Task 2.

---

INSTRUCTIONS

---

TASK

Task 3: Type Exploration & Application 

We are tasked to created a font. To begin, we are to propose of our ideas based on the following three options:

• Create a font that is intended to solve a larger problem or meant to be part of a solution in the area of your interest be it graphic design, animation, new media or entertainment design or any other related area not necessarily reflecting your specialisation.
• Explore the use of an existing letterform in an area of interest, understand its existing relationship, identify areas that could be improved upon, explore possible solutions or combinations 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  video or fine art. End result is defined by student.

Once the idea is approved, we must digitize it in Adobe Illustrator then import to Font Lab. The end result should be a complete generated font (.ttf) with applications (except for experimental typography).

Idea Proposal

Figure 1.1 Idea Proposal, Week 10 (24/06/2024)

When brainstorming for ideas, I thought about anime and movies that I liked, that was how I came up with Idea #1 and #2. I also browsed online for fonts that caught my interest, I saw cute cat fonts so I started thinking about how it can be applied to solve a bigger solution, then came up with Idea #3. I personally preferred idea #1, and it was approved by Mr. Vinod.

References

Figure 1.2 Reference fonts, Week 10 (24/06/2024)

Figure 1.3 Reference fonts, Week 10 (24/06/2024)

These are the reference fonts that I used for my own font. I referred to the futuristic fonts as well as the Japanese words in the anime title to create a cyber/mechanical-feel font. Then, I referenced Bodoni MT, because it was similar to the font used in the two anime titles, I wanted to try to keep the retro feel to it by adding serifs to my font.

Sketch

Figure 1.4 Sketch, Week 10 (24/06/2024)

I started sketching out the how I visioned my font to be. I tried to use a similar pattern for different letters. Once I roughly figured out how my font should look, I proceeded to digitizing.

Digitization

Figure 1.5 First attempt at digitization, Week 10 (24/06/2024)

This was my first attempt at digitizing, from here I started to grasp how I should design my font. I used rectangles and trapezoid elements to make the fonts.

Figure 1.6 Second attempt at digitization, Week 11 (01/07/2024)

This was my second attempt at digitizing, I created the fixed elements to be used for all letters and made sure all the angles were set nicely so that I can maintain font consistency and hopefully won't run into any issues while digitizing. I found a pattern to follow in my design as well: the top left and bottom right corner are slanted; the thin trapezium element fall on the inner side of the top right stroke and bottom left stroke; trapeziums at the outside of a stroke to act as serifs.

Figure 1.7 Digitizing all letters, Week 11 (06/07/2024)

Then, I digitized all the letters. Due to the nature of my font, I found difficulty in making the diagonal lines look nice, such as in K and R. Besides that, S, V, W, X, Y, Z were considerably challenging for me to create as well. For M and N, I made the top-right corner slanted instead because the other way around looked a little weird, however that makes these two letters a little different from the rest. Lastly, it was the most difficult to get Y right, it still looks a little funky in the final.

Figure 1.8 Digitizing numbers & punctuations, Week 11 (06/07/2024)

Then, I digitized the numbers and punctuations. Due to 0 looking similar to O, 2 looking similar to Z and 5 looking similar to S, I decreased the width of the numbers so that they can be differentiated easily. As for the punctuations, they were also created with the design pattern in mind.

Figure 1.8 Unifying and rounding the edges of final font, Week 12 (12/07/2024)

After I digitized all the letters, I unified them and removed any unnecessary anchor points. Then, I rounded the edges to 13-15px.

Figure 1.8 Finalizing font in Adobe Illustrator, Week 12 (12/07/2024)

I made sure all the finalized letterforms are placed according to the baseline and cap-height. I also created the small caps for each letter, the height for which I referred to Bodoni ST. Once everything was set, I moved on to Font Lab.

Font Lab

     

Figure 2.1 Setting dimensions in Font Lab, Week 13 (15/07/2024)

Once I opened up Font Lab, I started by setting the dimensions as measured in Adobe Illustrator, such as cap height, x-height, as well as ascender and descender height.

Figure 2.2 Importing letters into Font Lab, Week 13 (15/07/2024)

Figure 2.3 Importing all letters, numbers & punctuations into Font Lab, Week 13 (15/07/2024)

Then, I imported all the letters into Font Lab and made sure they were the right size.

Figure 2.4 Adjusting kerning for each letter, Week 13 (15/07/2024)

Figure 2.5 Adjusting kerning for specific letter pairs, Week 13 (15/07/2024)

Lastly, I adjusted the kerning for each letterform. I also tested out different words to see any letter pairs with overly loose or tight kerning. Once I was satisfied with everything, I exported and installed my font, Genesis Regular into my laptop.

Font Presentation

Figure 3.1 Font presentation references, Week 13 (19/07/2024)

After exporting and installing my font, I proceeded with making the font presentation posters. I looked for references online that would match the design and vibe of my font. I then tried to apply the same style to my font presentation posters.

Figure 3.2 Font presentation process, Week 13 (19/07/2024)

Font Application

Figure 3.3 Font application process - importing pictures, Week 13 (19/07/2024)

Figure 3.4 Font application process finished artwork to apply on mockup, Week 13 (19/07/2024)

For the font application, I started with finding images as well as free mockup PSD templates on the internet. After planning out what to design and what mockups to use, I started designing the artworks in Adobe Illustrator.

Figure 3.5 Editing mockup in Photoshop, week 13 (19/07/2024)

Figure 3.6 Editing mockup in Photoshop, week 13 (19/07/2024)

Figure 3.7 Editing mockup in Mockey, week 13 (19/07/2024)

Once I was done with the artworks, I applied it onto the mockups in Photoshop.

Final Submission

Final Font

Download Font HERE.

Figure 4.1 Font Information, week 13 (19/07/2024)

Final Font Presentation

Figure 4.2 Final Font Presentation #1, week 13 (19/07/2024)

Figure 4.3 Final Font Presentation #2, week 13 (19/07/2024)

Figure 4.4 Final Font Presentation #3, week 13 (19/07/2024)

Figure 4.5 Final Font Presentation #4, week 13 (19/07/2024)

Figure 4.6 Final Font Presentation #5, week 13 (19/07/2024)

Figure 4.7 Final Font Presentation - PDF, week 13 (19/07/2024)

Final Font Application

Figure 4.8 Final Font Application #1, week 13 (19/07/2024)

Figure 4.9 Final Font Application #2, week 13 (19/07/2024)

Figure 4.10 Final Font Application #3, week 13 (19/07/2024)

Figure 4.11 Final Font Application #4, week 13 (19/07/2024)

Figure 4.12 Final Font Application #5, week 13 (19/07/2024)

---

FEEDBACK

Week 10

Specific Feedback:

(Wednesday) No issues with the idea of futuristic cyber fonts, but make sure to do research before zeroing into your direction. (Friday) So far they seem to be in the same font family, except for S, maybe you can just take the base shape of O and just add a diagonal line. When digitizing, make sure you have a fixed grid, all the width must be consistent, except for M and W that might be bigger. After you are done, consider rounding the edges, it is up to you though.

General Feedback: 

Ensure consistency in stroke thickness and letterform width.

Week 11

Specific Feedback: 

Sometimes different angles can give a different feel to your design, you need to experiment with different angles. Do speed up your progress.

Week 12

Specific Feedback:

Overall looks fine, except for Y, the vertical stroke is on the wrong side, should be either on the middle or on the right. Also, you need to allow more flexibility in your fonts, it is okay for some letters to have exceptions from the design pattern. Cap height of numbers should be the same as the letters!

---

REFLECTIONS

Experience

At first, I was quite excited to work on the font after my proposal was approved, as I've always found the cyber/mechanical-style designs to be fascinating. However, it was more difficult than I thought, it certain letters that required curves and diagonals were challenging to create with the same consistency of my font, they always turn out kind of weird. This task was a long, tedious and difficult process, there is need for a lot of thinking, attention to detail and patience for each letterform. On the other hand, once I finalized my font and exported through Font Lab, it was satisfying to type out a font that I personally designed, even more so to see it on my font presentation and application. I also had fun exploring different ways to present my fonts as well as apply them on different mockups.

Observation

There is many considerations and attention to detail needed behind designing a visually aesthetic and legible font. When designing a font, we should always have a reference font so that we know how to manipulate the different parts in a letterform, as well as to ensure the consistency and legibility of our font.

Findings

Although consistency is highly emphasized in creating fonts, sometimes a little flexibility can be allowed in the design of your font to achieve the best possible outcome.

---

FURTHER READING

Font design: 17 top tips to create your own typeface

from https://www.creativebloq.com/typography/design-your-own-typeface-8133919 

1. Create a brief for your font design

• It's wise to start out with a clear vision of what your font's purpose will be in order to provide some focus.
• Your brief should make it clear what your font needs to achieve and how it will be used.

2. Make your fundamental font design choices

• Font design involves a number of important choices that you need to make early on. (eg. Sans serif or serif? Handwriting or geometric? Text face or display face?)
• Designing a sans-serif typeface is often more challenging for beginners because the features that distinguish such typefaces are much more subtle.

3. Start your font design from scratch

• One good way to get started with font design is by digitising your own handwriting.

4. Try designing fonts by hand

• Tt's a good idea to define your letterforms by hand in the first instance. Articulating certain shapes via a computer from the outset can be awkward and time-consuming.
• Try to create graceful shapes on paper for the first few characters, and then refine them digitally. 

5. Use control characters for your font design

• It makes sense to start your font design with certain characters (control characters) that will help set the style of your typeface. You can then bring in the other characters in a harmonious way.
• In a lowercase Latin typeface, they would be the 'n' and o, and in the uppercase, 'H' and 'O' are often used.

6. Move to your computer

• There are a variety of ways to get your drawings onto the computer.
• Tracing.

7. Choose your software

• Adobe Illustrator. For drawing individual letterforms and experimenting, this is fine, but it will soon become obvious that this isn't the right tool for creating a whole typeface.
• It's better to start working in an environment that gets you thinking about letter spacing and word creation. For instance,  FontLab Studio, Glyphs and Robofont are popular type-based software options for font design.

8. Draw some letters

• For greater control of your font design, where possible, place your points on the extremities of the letterform curves (top, bottom, left, right).

9. Switch to text view mode

• Once you have drawn a few letters, you can start typing words using the text view mode. (Glyphs)
• You can then begin making adjustments to the letter spacing, looking at the rhythm of the counters and refining the overall proportions, like the x-height, weight and width of your typeface.

10. Test your font design at line level

• As type designer Matthew Carter is often quoted: "Type is a beautiful group of letters, not a group of beautiful letters". With this in mind, aim to start looking at your design from a line and paragraph level as early as possible.

11. Study other typefaces

• To create a credible typeface, you need to study other good examples of font design and looking at them in a critical way from a contextual or historical perspective. This can help you understand why certain design choices in these, and in your own typeface, have a particular effect. 

12. Scale your font design down

• It's important to review your typeface at different sizes in your test document. 
• Depending on your brief, readability might be critical at smaller sizes, or you might be concerned with how your display text reads at a distance.

13. Print your font design

• Printing your progress so you can see it away from the confines of pixels and backlighting will help you view it from a different perspective. 

14. Add special characters to your font design

• Your typeface might have a limited set of characters because that's what's needed for a specific project or because it's a very decorative design. 
• However, if your aim is for for other designers to be able to use your font design in a variety of projects, then it needs to be flexible.

15. Explore different styles, weights and widths

• When a designer is choosing a particular typeface, they usually want a palette of different options to design with. 
• Does your typeface have a true italic, not just a slanted roman? Would your typeface suit a condensed version? These questions go back to your brief and the intended uses of your typeface.

16. Take your font design global

• There's a growing market for non-Latin typefaces and some scripts are woefully under-served.
•  But can someone design a good script for a language they can't read? The answer is emphatically yes. 
• It takes a lot of research into the script's history and culture, meetings with native speakers and exploration of historical examples, but a great number of excellent typefaces have been designed this way.

17. Put your font design to the test

• One you've crafted something you're happy with, you'll want to start seeing how it performs at a range of tasks suited to the original brief. 
• Try using your font on some previous design projects, replacing the original typeface.