TYPOGRAPHY / TASK 3: TYPE DESIGN AND COMMUNICATION

TYPOGRAPHY / TASK 3: TYPE DESIGN AND COMMUNICATION

10/10/2022–13/11/2022 / Week 7–Week 11

Jason Antony / 0356335

Typography / Bachelor of Design (Hons) in Creative Media / The Design School

Task 3: Type Design and Communication

Lectures

See lecture notes in Task 1: Exercises.

It is important to understand the terminology used in typography.

• Baseline: The imaginary line that is the visual base of the letterforms
• Median: The imaginary line defining the top of the x-height of letterforms
• X-height: The height in any typeface of the lowercase 'x'
• Stroke: Any line that defines the basic letterform
• Apex/vertex: The point created by joining two diagonal stems. Apex is when it is done above, like in the letter 'A', and vertex is when it is done below, like the letter 'V'
• Arm: Short strokes off the stem of the letterform, either horizontal (eg. 'L') or inclined upward (eg. 'Y')
• Ascender: The portion of the stem of a lowercase letterform that projects above the median
• Barb: The half-serif finish on some curved strokes (eg. 'C')
• Beak: The half-serif finish on some horizontal arms (eg. top of the 'T')
• Bowl: The rounded form that describes a counter, and it may be open or closed
• Bracket: The transition between the serif and the stem
• Crossbar: The horizontal stroke that joins two stems together
• Cross stroke: The horizontal stroke that extends out of both sides of one stem
• Crotch: The interior space where the two strokes meet
• Descender: The portion of the stem of a lowercase letterform that projects below the baseline
• Ear: The stroke extending out from the main stem or body of the letterform
• Em: The width of an uppercase 'M'
• En: Half the size of an em
• Finial: The rounded non-serif terminal to a stroke
• Leg: Short stroke off the stem of the letterform, either at the bottom of the stroke (eg. 'L') or inclined downward (eg. bottom of 'K')
• Ligature: The character formed by the combination of two or more letterforms
• Loop: The bowl created in the descender (eg. lowercase 'g')
• Serif: The right-angled or oblique foot at the end of a stroke
• Shoulder: The curved stroke that is not part of a bowl
• Spine: The curved stem of the 'S'
• Spur: The extension that articulates the junction of the curved and rectilinear stroke
• Stem: The significant vertical or oblique stroke
• Stress: The orientation of the letterform, indicated by the thin stroke in round forms
• Swash: The flourish that extends the stroke of the letterform
• Tail: The curved diagonal stroke at the finish of certain letterforms
• Terminal: The self-contained finish of a stroke without a serif. They can be flat (eg. on top of a sans serif 'T'), flared, acute, grave, concave, convex, or rounded as a ball or a teardrop (eg. finial)
• The full font of a typeface contains much more than 26 letters, numerals, and a few punctuation marks. Working successfully with type means working with the full font.
• Uppercase letters include capital letters, certain accented vowels, the c cedilla (Ç) and n tilde (Ñ), and the a/e and o/e ligatures (æ and œ).
• Lowercase letters include the same characters as uppercase.
• Small capitals are uppercase letterforms drawn to the x-height of the typeface, primarily found in serif fonts.
• Uppercase numerals are the same height as uppercase letters and all set to the same kerning width. They are most successfully used with tabular material or situations that call for uppercase letters.
• Lowercase numerals are set to the x-height with ascenders and descenders. They are best used with upper and lowercase letterforms. Lowercase numerals are far less common in sans-serif typefaces than in serif typefaces.
• Italics are slanted letters that are produced with most fonts. Small caps rarely have an italic form. The forms in an italic refer back to fifteenth-century Italian cursive handwriting (see Week 1 lecture notes).
• Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface.
• Ornaments are used as flourishes in invitations or certificates. They are usually provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family.
• The roman letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments. A slightly later stroke in roman is called 'Book'.
• Oblique is based on the roman form of italics.
• Boldface is characterized by a thicker stroke than a roman form.
• Light typefaces use a lighter stroke than the roman form.
• Condensed is a version of the roman form that vertically compresses the characters.
• Extended is a variation that extends the typeface.

The ten typefaces provided in the module have been developed and used for centuries due to their easy readability. They all have differences in their form that leads to a difference in expression and mood. 

Instructions

Module Information Booklet

TASK 3: TYPE DESIGN AND COMMUNICATION

Research

I want to create a geometric sans-serif font. I love the design of minimalist and geometric typefaces as it looks sleek, modern as well as very easily readable. Out of the 10 given typefaces, I want to deconstruct and analyze the font Futura Std. Futura Std is a highly influential and successful typeface, and it is one of my favorite typefaces. I just love the simplicity and elegance that typeface provides. The geometric Bauhaus design aesthetic, which peaked between 1919 and 1933, served as the basis for the font. The Bauhaus philosophy was centered on straightforward, contemporary, and practical geometry. Choosing the function above form led to the creation of a font without extraneous decorative components. This makes the font extremely easy to read while maintaining a modern and beautiful aesthetic. 

Fig.1.1 deconstruction and analysis of lowercase "a" 15/10/2022

• What I find most interesting in the deconstruction of "a" is the asymmetry of the point where the two defining circles are tangent to the edges of the counter and bowl. This means that the bottom part of the bowl is ever so slightly larger than the top. 
• Even though Futura Std is a sans serif, letterforms still have contrast to the strokes.

Fig.1.2 deconstruction and analysis of lowercase "o" 15/10/2022

• "O" is completely symmetrical and constant. There is no contrast present in the strokes. In my opinion, that feature is quite elegant and satisfying. Both the bowl and the counter are perfectly aligned at the same center point. this means that the radii of both the bowl and the counter directly overlap one another.

Fig.1.3 deconstruction and analysis of lowercase "t" 15/10/2022

• The stroke of the Crossbar and Stem of the letter "t" seems to be equal at first glance, however, it really isn't. The stroke of the stem is slightly wider than the crossbar, producing contrast. The position of the crossbar with respect to the stem is also very asymmetrical, causing a differentiation between the left and right sides of the letterform. 
  
  
  
  

Fig.1.4 deconstruction and analysis of lowercase "y" 15/10/2022

• The letter "y' is very interesting to me. It seems that the letter form is symmetrical, however, it is far from symmetrical when observed correctly. the arms of the letterforms have different angles with respect to the triangle that was used for observation. The triangle used was equilateral, meaning that all angles were equal, but the arms and crotch of the letter "y" weren't of equal length, resulting in different angles. the right arm of the letterform is slightly shorter than the left arm, causing the vertex of the crotch to be shifted right of the midline of the letterform.
• The strokes of the letterform are also not equal. The areas of the arms and descender of the letterform closer to the crotch of y are slightly thinner than the edges. 

Sketches

I want to create a geometric sans-serif for my type of design. With that in mind, these are the designs I made.

Fig.2.1 sketch 1 23/10/2022

Fig.2.2 sketch 2 23/10/2022

Fig.2.3 sketch 3 23/10/2022

Fig.2.4 sketch 4 23/10/2022

Sketches were all made in procreate. 

Out of the 4 sketches, I like the first and the third sketches the most.

Digitization

Adobe Illustrator 

Sketch 1

Fig.3.1 sketch 1 exploration 1 28/10/2022

Fig.3.2 sketch 1 exploration 2 28/10/2022

Sketch 3 

Without contrasting strokes (Purely Geometric)

Fig.3.3 sketch 3 exploration 1 28/10/2022

Fig.3.4 sketch 3 exploration 2 28/10/2022

With contrasting strokes

Fig.3.5 sketch 3 exploration 3 28/10/2022

Documentation

Guides and Grids

Fig.3.6 guides and grids 28/10/2022

Measurements (from baseline 0 pt)

Ascender: 725 pt

Capital height: 700 pt

X-height: 500 pt

Descender: -225 pt

Fig.3.7 minor changes to letter m 08/11/2022

Fig.3.8 outline view of illustrator workspace 08/11/2022

Fig.3.9 outline view of letterforms m, o, and p 08/11/2022

Fig.3.10 workspace illustrator 08/11/2022

Shortlisted typeface

Fig.4.1 shortlisted typeface 28/10/2022

Fig.4.2 shortlisted typeface superimposed vs Futura Std 06/11/2022

Final typeface design illustrator

After minor changes and tweaking were made to the typeface, below is the final design baseline in adobe illustrator. 

Fig. 5.1 Final design baseline in adobe illustrator 12/11/2022

Fontlab

Fig.5.1 all letters in Fontlab 06/11/2022

Fig.5.2 creation of letter g documentation 06/11/2022

Fig.5.3 baseline kerning in Fontlab 06/11/2022

Fig.5.4 letter pair kerning in FontLab 06/11/2022

Final Task 3: Type design and communication

Font download

https://drive.google.com/drive/folders/1itszlfYGhVfco2vb4o0Ffc7RTVoOAXJz?usp=sharing

Fontlab kerning

Fig.6.1 Final Task 3 Type Design and Communication, kerning in Fontlab 12/11/2022

Baseline

Fig.6.2 Final Task 3 Type Design and Communication "Level Sans" Baseline - JPEG, 12/11/2022

Fig.6.3 Final Task 3 Type Design and Communication "Level Sans" Baseline - PDF, 12/11/2022

Poster

Fig.6.4 Final Task 3 Type Design and Communication "Level Sans" Poster Black - JPEG, 12/11/2022

Fig.6.5 Final Task 3 Type Design and Communication "Level Sans" Poster White - JPEG, 12/11/2022

Fig.6.6 Final Task 3 Type Design and Communication "Level Sans" Poster Black - PDF, 12/11/2022

Fig.6.7 Final Task 3 Type Design and Communication "Level Sans" Poster White - PDF, 12/11/2022

Feedback

Week 10:

General Feedback: 

Typeface design is hard and meticulous. Each letterform has to be consistent.

Specific Feedback:

Good research and letterforms are very consistent, although the design is similar to Futura.

Punctuation needs work and still needs to do more research, for instance, 't' and 'e'.

Week 11:

General Feedback: 

Make sure process work is all documented. 

Specific Feedback: 

All good, however, minor details can be changed, like the m and y. remove or make the slants in the same direction.

Reflection

Experience

This is the most interesting typography project so far. It was a fairly good experience because I got to develop my first typeface. I had fun coming up with concepts and watching the typeface progressively take shape after being digitalized. I'm very grateful that this project has allowed us to create and explore our own personal styles to make our own personal typeface. I improved my observational skills while studying the principles of typeface design via this endeavor. I will put the lessons that I have learned through this project to good use in all my next projects.

Observations

Through my research on letter deconstruction, I've discovered that despite a font design appearing to be the same, it is actually not. Every factor matters, from the baseline, x-height, etc., as well as the stroke and aesthetic. Because of the illusion it produces when viewed from a distance, such subtleties and intricacies are significant and must be taken into consideration while developing a typeface. Through observation of successful typefaces, I have implemented subtle changes and tweaks from my original sketches to make a better and more readable, as well as a more aesthetic typeface. 

Findings

It seems to me that creating a typeface or font requires a lot of work, research, patience, and observational abilities. It is very laborious and meticulous, and numerous technical considerations must be made. A lot of time is also needed to be dedicated to perfecting a typeface. This made me appreciate successful typefaces a lot more because now I know, the painstaking process of fabricating both a legible and aesthetic font.

Further Reading

Fig.7.1 Typographic design: Form and communication (2015)

I chose the book "Typographic design: Form and communication" for my further reading material.

Reference:

Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M.

(2015). Typographic design: Form and communication.

Hoboken, New Jersey: John Wiley & Sons, Inc

Fig.7.2 Typographic processes and the computer, page 227

In the digital era, the typographic design process becomes much easier. There are many ways to do and develop the design, such as beginning with sketches or designing straight away in computer software. however, All approaches are acceptable so long as they result in an original and useful solution. 

What I found very useful about designing with the computer is the ability to organize and archive all the design explorations. In Fig.7.2, it shows that the design Guilherme Villar compiles every iteration of each design on one board. This makes it easy for him to compare and select which designs of his to be shortlisted and finalized. I believe this method of archiving can help with my design process in future works and projects.