Typography - Task 3: Type Design & Communication

10 Oct – 21 Nov 2023 || (Week 7 – Week 13)
Kek Han Shin || 0352571
Typography || Bachelor Of Computer Science || Faculty of Innovation & Tech.
Task 3: Type Design & Communication.

LECTURES

Typo Task 3A Typeface Construction (Shapes)

✅before starting ensure decent amount of research is done to know what direction to head towards and form ideas

The websites available:
https://fonts.google.com/
https://motaitalic.com/font-preview/
https://www.barrettrm.com/
https://www.fontshare.com/

Figure 3.0.1 - Font research process and exploration , Week 07 (10 Oct)

✅by starting it is a good idea to first revise the 10 given fundamental font types and develop ideas based on the selected font

Figure 3.0.2 - the 10 fundamental font type we should refer to, Week 07 (10 Oct)

✅in occurrences where it is unsure of determining whether current font type is the right one to refer to, deconstruct the font face, look at the nuances and details

Figure 3.0.3 - a deconstructed letter "r", Week 07 (10 Oct)

The anatomy of Typography to consider:

🖊 Ascender height

🖊 Capital height

🖊 Mean/median line

🖊 Baseline

🖊 Descender line

Things to note:

- X-height is to be set 500 points

- Ascender descender line be within 1000 x 1000 pt artboard

- Counter space recommendation: same amount of space (thickness) between 2 stems or half the size of stem

INSTRUCTIONS

design the letters: a b d e g i m o p t y ! , .
take into account that hallmark of a good typeface: subtlety or character, presence, legibility and readability.

Task 3: Type Design & Communication

3.1 Research

I was quite clueless to start of as in my opinion font typefaces designing is very "grand" and every details have to be perfect hence I am afraid I will not meet up the expectations.

To start with I first search up the anatomy of font formation, as I found there are so many structural nuances and curvature I have to take note of.

Figure 3.1.1 - Anatomy of Typography, Week 07 (10 Oct)

Moving on I wanted to know what are the general classifications of typefaces, after general research

Figure 3.1.2 - Typeface classifications, Week 07 (10 Oct)

1️⃣SERIF

- Old style, Transitional, modern

- characterized by small lines attached to the main strokes of characters within face

- commonly used in body text or headlines online

2️⃣SANS SERIF

- Grotesque: thinner-than-normal stroke weight and squared curves on some letters like G

- Humanistic: blending their structure with classical Roman form and old style lowercase with calligraphic influence

- more modern version of serif

3️⃣SCRIPTS

- formal, casual, calligraphic, handwriting

- very fluid letterforms

- scripts formal typefaces used wide rage of glyphs

4️⃣BLACKLETTER

- densely black texture

- highly decorated capitals

- dramatic thick-to-thin strokes and serifs on their lowercase latters

(Priya, B. (2022) The classification of Typeface Styles: The definitive guide, Hire the World’s Most Deeply Vetted Remote Developers. Available at: https://www.turing.com/kb/classification-of-typeface-styles#old-style)

From above black letter fonts have intrigued me with their bold and cursive strokes as I think they are expressive and unique. Hence by deciding my next move is to conduct research on what are the blackletter variations I can explore on.

Figure 3.1.3 - blackletters research, Week 07 (10 Oct)

Above research process I found out blackletter itself had its own variation, some are more cursive, some had more dramatic thin-thick strokes...

3.2 Sketch

By starting I decided to do font sketching digitally using "Sketchbook" app as it provides a range of brushes to choose from. I started from exploring the brushes, listing down the ones I am interested to use to develop the sketches.

Tools decided:

medium sharp markers
tattoo inker
inking pen

Figure 3.2.1 - 3 choice of pen tool, Week 08 (17 Oct)

Starting to develop the letterforms, I start from trying to add some characteristics like serifs or bolder stems. Keeping in mind that I shouldn't add too much different elements in the font as Mr Vinod mentioned it will only make the font queer or messy.

Figure 3.2.2 - first sketch of fonts, Week 08 (17 Oct)

During class I was introduced to some interesting black letter fonts that inspired me, I like how they are bold and expressive where within the family each font varies and has its own personality

Figure 3.2.3 - blackletter font family, Week 08 (17 Oct)

Also, when further demonstrating what kind of possibility I can explore, Mr Vinod also demonstrated I can explore calligraphy brush and develop sketches

Figure 3.2.4 - font sketch demonstrated by Mr Vinod, Week 08 (17 Oct)

With above inspiration I reworked on sketches and eventually come out with the final sketch I decided to use.

Figure 3.2.5 - final decided sketch, Week 09 (24 Oct)

inspired by black letter fonts
some letters has a consistent short stroke as shown in the dot of "i", "e"
instead of rounded bowl I make it more pointed and sharp

3.3 Digital Exploration

When starting digitizing I immediately found out that it is easy to hand sketch out letters but hard to start building them in illustrator, as I can only use limited shape tools. Mr. Vinod gave advice that a good font is formed when there is eligibility, readability and consistency.

Figure 3.3.1 - first rough attempt on font digitizing, Week 09 (24 Oct)

Mr Vinod showed me how to set up my Illustrator with grids and guides so I can better construct the letter, and I started clumsily with basic shapes and cutting tool.

I encountered difficulty when I tried to make the curve effect in my fonts, after researching I found out that "curvature" tool can produce similar outcome

Figure 3.3.2 - utilizing "curvature" tool to create the bended stroke, Week 09 (24 Oct)

Besides initial sketch, I tried to explore and experiment with other designs, with rounder and a modern approach.

Figure 3.3.3 - more exploration on other possibilities, Week 09 (24 Oct)

But I wasn't really satisfied with the end outcome hence it was not being considered at the end. But along the process I found myself more familiar and faster in constructing letters.

Figure 3.3.4 - more failed attempts and decided to stick to the first version, Week 09 (24 Oct)

Below is the initial first draft mainly using basic shapes, with the outline version.

Figure 3.3.5 - first digitized version merely using shapes, Week 09 (24 Oct)

Figure 3.3.6 - outline of the digitized version, Week 09 (24 Oct)

Going into following week, I was introduced with further ways I can use to construct letters - brush tool and curvature tool. I thought it would really help me to better construct as my sketch is more calligraphic and pointy, as using basic shapes will not achieve the outcome I envisioned.

I set up brush tools with -45 degree angle; size: 100points; and 5% roundness.

Figure 3.3.7 - start utilizing brush tool to construct my letter, Week 10 (31 Oct)

By continuing to construct by using brush tool this time I found it more handy and flexible as I can form curvature as how I wanted.

Figure 3.3.8 - second version of digitization sketch using brush tool, Week 10 (31 Oct)

By week 10 Mr Vinod gave comment that the letter fonts I constructed did not follow the correct proportion, when designing letters what consistency meant is not only certain features but the space between counterforms, of how the curvature shapes etc. Through out the session I felt discouraged but I really learnt a lot as I understand more on the things that I was confused before like there should not be too much anchor points in the letter, it will cause the letter looked crooked.

I should also refer to current letter to study their stroke, counterspace, x height, overshoot, etc.

Hence by restarting, I relearn on using the basic column grid to study the letters so I won't repeat the same mistake again.

Figure 3.3.9 - grid assisting construction process, Week 10 (31 Oct)

I constructed the basic elements that I will use in my letterform: stem, "o", stroke. It will determine the rest of my letters.

Figure 3.3.10 - constructing basic elements, Week 10 (31 Oct)

Also to observe and amend the font to create better consistency and legitimacy, I look into the counter forms of between letters as below. The colored parts are the breakdown of how the angle of curve is aligned.

Figure 3.3.8 - study on the angle of curves within fonts, Week 10 (31 Oct)

Below are the final outcome that I will continue to export to Font Lab as instructed.

Figure 3.3.9 - outline of fonts before converting, Week 10 (31 Oct)

Figure 3.3.10 - after converting into "outline path", Week 10 (31 Oct)

Also it took me some time to remove redundant anchor points so it would not effect the font making process when exporting.

Figure 3.3.11 - final font outcome!, Week 10 (31 Oct)

3.4 Font Lab

For my type design, compared to regular typeface several letters have an outstanding stroke laying on the bowl like "e", "g" and "o". Hence I have to manually adjust that the tip of the stroke to be touching left bearing.

Figure 3.4.1 - adjusting bearing for individual letters after importing to Fontlab, Week 11 (7 Nov)

After importing individual letters, I proceed to adjust individual kerning for each glyph in the metrics tab using the side bearing measurement table. I found out that it is handy when I start kerning the letters "n" and "o" as a lot other letters bearing measurement depends on them.

"o"

- width: 394

- left side bearing: 6

- right side bearing: 21

"n"

- width: 388

- left side bearing: 41

- right side bearing: 10

Figure 3.4.2 - adjusting kernings for "n" and "o" at first, Week 11 (7 Nov)

Then based on the kerning values, I proceed to adjust all other letters. Throughout the process and receiving feedback from Mr. Vinod I found out that by "minimum possible side bearing" it isn't necessary to be 0 but instead you can overlay - negative values, for example for "t" and the kerning between "k" "e"; "a" "t"; "a" "g".

"t": Left side bearing value -9

"k" "e": kerning value -10

"a" "t": kerning value -5

"a" "g": kerning value -12

Figure 3.4.3 - final outlook in metrics tab, Week 11 (7 Nov)

The type design is finally done! When I was brainstorming of what name I should be giving, my friend told me it reminds them of knights. This inspired me to finally decide on the name of my type design! 😀

3.5 Font Poster

Upon finishing, we are instructed to import the font into the system.

Figure 3.5.1 - font preview in the system, Week 12 (14 Nov)

By building the poster there are few requirements:

🔵 use only one point size across all letters

🔵 the visual effect should be as impactful as possible

🔵 the quote should include all letters that are designed

Upon that I explored the possible layouts and experimented with them. Below is the first initial drafts.

Figure 3.5.2 - first version of text poster exploration, Week 12 (14 Nov)

During next class Mr. Vinod proceeds to provide other feedback like when designing keep the counterspace in mind as it constitutes to the design as I whole as well.

Figure 3.5.2 - variation of layouts as second poster version, Week 12 (14 Nov)

Proceeding Mr Vinod instructed us to insert our own portrait and insert them into the type poster, to assist on the visual design. The portrait I chose:

Figure 3.5.3 - my portrait , Week 12 (14 Nov)

Through out the demonstration by Mr Vinod I find the possibilities I can explore on revolving the poster layout I have chosen. For me it wasn't easy as I have to also consider how to position the poster so that it wouldn't interrupt the balance of the layout.

Figure 3.5.4 - First version of text poster with portrait, guided by Mr Vinod , Week 12 (14 Nov)

I like the symmetrical approach as the text poster itself is already in a symmetrical layout. Furthermore I made a few more attempt to see if there are other possibilities I can explore on

Figure 3.5.5 - more explorations on type poster design with portrait, Week 12 (14 Nov)

At the end I chose the symmetrical ones, as after contemplating I feel that they can express my font better. As the font name is Armor and the symmetrical portrait reminds me of how some kingdom flags have two knights standing on the side as guardians of the empire.

✨Try the font out below!

Font available: "a e t k r i y m p n ! #, ."

3.6 Final Outcome

Name:

Armor /ˈɑːmə/ the metal coverings formerly worn to protect the body in battle.

With pointy edges the typeface resembles the armor that protects knights that in turns protect the land.

Font download link:

https://drive.google.com/file/d/1sDv5RfPMMILfmG1w9HSa223Pq3pOc_a7/view?usp=drive_link

Figure 3.6.1 - Final Task 3A: Type Design and Communication "Armor Text" - JPEG , Week 13 (21 Nov)

Figure 3.6.2 - Final Task 3A: Type Design and Communication "Armor Text" - PDF , Week 13 (21 Nov)

Font Poster in A4 size:

Figure 3.6.2 - "Armor Text" Typo Poster - JPEG , Week 13 (21 Nov)

Figure 3.6.2 - "Armor Text" Typo Poster Portrait Version- JPEG , Week 13 (21 Nov)

Figure 3.6.2 - "Armor Text" Typo Poster - PDF, Week 13 (21 Nov)

3.8 Feedback

Week 13 feedback

- make sure the picture insertion is to just enhance the visual effect for the poster, do not adjust the text layout for the picture you will make things messy

Week 12 feedback

- all letters designed should be included in the poster

- can add additional letters in the current designs

Week 11 feedback

- because my o has stroke that stand out hence i have to consider whenever letter with straight like y and k has to stay comparable with “n””o” too

- exclamation mark side bearing too narrow

Week 10 feedback

- the formation is very disproportionate

- when designing letters what consistency meant is not only certain features but the space between counterforms, of how the curvature shapes etc

- too much anchor points causes the curves are “crooked”

- if unsure of the x height median height always refer to current font letters examine how they design the strokes, ascender and arm

- provided me vertical stroke guidelines to better assist me in visualizing how my font structure will form

Week 9 feedback

- not only using shape, start to learn how can we utilize brush tool to create more versatile font family

Week 8 feedback

- always be explorative to figure out different font sketches using different tools

- gave examples like black letter font

- when holding the pen or tool to sketch, have to maintain the same palm angle

3.9 Reflection

🌵Experience🌵

I didn't expect the feeling of accomplishment and satisfaction when I finished this project. By looking back from being totally clueless with Illustrator and falling behind progress, I feel surreal when looking at the final outcome. When I was being first instructed that we have to come up with own typeface I was intimidated as it already took me huge force to pass through past tasks, how am I going to come up with a typeface itself? But along the way through rounds and rounds of feedback and feedback by Mr. Vinod I actually learnt a lot, although my progress was really slow to a point I feel sorry for Mr Vinod haha 💀but I did try my best. Overall, my understanding towards typeface design really improved a lot and I remembered the concepts quite well such and consistency, legitimacy, overshoot, kernings, bearings and all. A timeless typeface does take one's mastery towards detail, and I did not expect to gain a totally new field of learnings in an creative module. When designing the poster there was less grudge as I have already have prior experience in task 2, but I like the simplicity of the outcome and am really proud of it (maybe it is because I designed it lol)

🌵Observation🌵

As mentioned when doing research I found out that designing typeface is not easy, especially when designing a good typeface. A good type design takes a lot of aspects of consideration, how are you structuring the arc, stem, bowl, ascender, ... together to constitute a balanced and legitimate font. I did not know letters itself take involve this much knowledge and it impresses me. Even some letters look symmetrical, they are in most cases more one sidedly weighted; even some letters look identical, some might have overshoot or higher ascender. Hence for a person armature like me, it is not just only sketching out fonts but also follow the conventional practice of typedesigns, for example with letters having round shape they will have overshoot.

🌵Findings🌵

Not only nuances, how you design your typeface with appropriate amount of contrast also counted as an important aspect. With too much contrast the typeface might be crappy but with less contrast it might looked subtle and inconsistent. And combining the things I learnt from past task specifically kerning and helped me be more diligent when deciding the layout for the font poster.

3.9 Further Reading

What have the Romans ever done for us?

- by John Boardley*

Figure 3.9.1 - What have the Romans ever done for us? , Week 10 (31 Oct)

Link: https://fonts.google.com/knowledge/history_of_type/what_have_the_romans_ever_done_for_us

Roman Contributions:

🚥Aqueducts, sanitation, irrigation, medicine, education, and calendar reform are among Rome's technological innovations.

🚥The Latin or Roman alphabet, adapted from the Greek and Phoenician scripts, is a lasting Roman contribution seen on Trajan’s Column.

Figure 3.9.2: Roman square capitals from the base of Trajan’s Column in Rome, c. 113 CE.

Garamont and French Typeface Influence (16th Century):

🚥Designs by Claude Garamont and his French contemporaries replaced those of Aldus, initially in France and later across the Italian Peninsula.

🚥Their designs were highly influential, giving rise to numerous roman typefaces in the emerging French Renaissance style.

🚥Notable differences from their predecessors included higher contrast and more refined modulation in the letterforms.

🚥The adoption of looser letterspacing by Garamont and others contributed to a lighter typographic appearance on the page.

🚥This deliberate shift marked a departure from the gothic aesthetic, creating a more "classical" and airy typographic style.

Figure 3.9.3: EB Garamond, a modern revival of Claude Garamont’s roman and italic.

How typefaces are designed & fonts are made?

- by Jamie Clarke*

Figure 3.9.4 - How typefaces are designed & fonts are made? , Week 13 (21 Nov)

Link: https://fonts.google.com/knowledge/introducing_type/how_typefaces_are_designed_and_fonts_are_made

I found this very interesting and comprehensive introduction of how fonts are made, which I unexpectedly resonate with the process!

Typeface in the making

Type designers are the people who create typefaces and fonts. Enhancements in font production software has definitely boosted the amount of fonts being designed and launched by more diverse range of designers. However, quality typefaces still require substantial time and skill.

While font creation usually follows usual methods and formats, the parameters and quality varies greatly. Font created by enthusiasts may not have the same range of characters or features compared to professional type designers.

Why make more typefaces?

🎶Just as music conveys and enhances a song, a typeface embeds a visual layer into text and communicates in conjunction with it

🎶Each typeface provides a unique, visual tone of voice to written language.

🎶Typefaces also allow documents to present visual hierarchies
🎶And, they enable graphic designers to represent meaningful structures by differentiating annotations, captions, and other parts of textual communication.

Importance of brief?

A brief is the definition of requirements and parameters of a type design during early stages of typeface development:

💭What will the typeface be used for? Is its primary purpose for immersive texts, or for short display headlines?

💭What are its specific requirements? Does the typeface need to perform a certain function, such as to read clearly in very small sizes, or to operate in a particular environment such as an e-reader, or within virtual reality?

💭What languages and characters should it support? Which countries will the font be used in and what written languages are used there? Does the typeface need to include alternate glyphs such as small caps or extended math symbols?

💭How many weights and styles are needed? Regular, italic, bold, and bold italic are expected by most designers; would more weights, or perhaps other widths also be required?

💭What existing fonts are already available and how do they compare? Is the new typeface distinct enough from already available designs to warrant its production, both commercially and creatively?

Kek Han Shin (0352571)