Advanced Typography/ Task 3: Type Exploration & Application

26.10.22 - 30.11.22 (Week 9 - Week 14)

Janaan Ahmed (0353333)

Advanced Typography/ BDCM

Task 3: Type Exploration & Application

Lectures

AdTypo #4: Designing Type

Why design a typeface?

It carries a social responsibility: one must continue to improve its legibility.
It is a form of artistic expression.
Establish unique visual branding

1. Frutiger

Font family: Sans-serif
Designer: Adrian Frutiger (Swiss type designer known for Frutiger, Univers, Avenir)
Year: 1968
For: Charles de Gaulle International Airport, France

Purpose:

To create a clean, distinctive and legible typeface that is easy to see from both close and far away.
Extremely functional.

Considerations/ Limitations:

Letterforms needed to be recognised in poor light conditions or when reader was moving quickly past the sign.
He tested with unfocused letters to see which letterforms could still be identified.

picture of frutiger arabic

The logo of TM uses Frutiger.

At the request of the NID, Adrian Frutiger designed a new Devanagari font for modern typesetting and printing processes. His goal was to simplify the sacred characters without compromising their ancient calligraphic expression

2. Verdana

Font family: sans-serif
Designer: Matthew Carter
Year: 1996
For: Microsoft

Purpose:

To be extremely legible at very small sizes on the screen due to popularity of the internet and electronic devices

Considerations/ limitations:

Exhibits characteristics derived from the pixel.
Commonly confused characters such as the lowercase i, j, l

AT&T commisioned him to improve upon Bell Gothic.

Paper was printed quickly, and result looked blurry and corners were rounded. Bell Centennial was designed with ink traps that solved this issue (letterforms looked straight).

3. Johnston Sans

Font family: sans-serif
Designer: Edward Johnston
Year: 1916
For: London's Underground railway

Purpose:

To unite the London Underground Group (posters and signage).
Typeface had to embody 'bold simplicity' be modern with traditional roots.

Considerations/ limitations:

The signage and advertising used by the companies under the London Underground group were different.
Applied proportions of Roman capital letters.

Eric Gill (former student) based his typeface Gill Sans on Johnston's work.

GENERAL PROCESS OF TYPE DESIGN

1. Research

Understand type history, type anatomy, type conventions.
Know terminologies, side-bearing, metrics, hinting...
Determine type's purpose and applications it'll be used in (for school busses or airport signages, etc)
Examine existing fonts being presently used for inspo, ideas, reference, context, usage patterns, etc.

2. Sketching

Traditional tool sets + scanned for digitisation
Digital tool sets directly into font design software

3. Digitisation

Font generating softwares: FontLab, Glyphs
Adobe Illustrator, and then font apps
At this stage, pay attention to form AND counter form as readability is dependent on it.

4. Testing

Results of testing is part of refinement process and correcting aspects
Prototyping also helps with feedback
Readability + legibility is important depending on typeface category (display/text)
If display type, form can afford to look expressive (however still should be to some level readable).

5. Deploy

Revision doesn't end here
This step can help see how a letter behaves in its environment
Testing is important so teething issues remain minor

Typeface Construction

Using grids (with circular forms) can facilitate the construction of your letterforms.
Roman Capitals and Blackletter utilises grids and squares.

Fig 1.1: Construction grid for the Roman Capital using 8x8 cells

Construction and considerations

The 26 characters of the alphabet can be arranged into groups depending on their form and construction.
Distinctions are made between a group for lowercase and capital letters.

Fig 1.2: Classification according to form and construction

Many different forms and constructions must be taken into account when designing a new type. Some important visual corrections:

the extrusion of curved or protruding forms past baseline and capline
the vertical alignment between curved and straight forms
the distance between letters (white space) should appear equal (called 'fitting the type')

Have a clear objective when designing a typeface.

AdTypo #5: Perception & Organisation

Perception: how something is regarded/understood/interpreted.

Perception in typography: visual navigation & interpretation of reader via contrast, form, organisation of content.

1. CONTRAST

Contrast is important to make distinctions between different types of information.

Fig 1.3: Typographical contrast - Carl Dair (left), Rudi Ruegg (right)

Carl Dair adds 2 more principles to the above: texture, and direction.

Typographical Contrast (Carl Dair)

a. Contrast / Size

Size contrast draws reader's attention. Often used to make title or heading noticably bigger than body text.

b. Contrast / Weight

Weight= how bold type can stand out in the middle of lighter type of same style. Can be used to highlight pieces of text.

c. Contrast / Form

Distinction between capital/lowercase equivalent or roman/italic or condensed/expanded versions.

d. Constrast / Structure

Different letterforms of different kinds of typefaces, e.g monoline sans serif + traditional serif/ italic + blackletter

e. Contrast /Texture

Applying contrasts of size + weight + form + structure to a block of text on a page = contrast of texture.

Texture: how the lines of type look as a whole up close and from a distance. Partially dependent on letterforms themselves, and partly on how they're arranged.

f. Contrast / Direction

Opposition between vertical and horizontal and angles in between. Change in direction to a block of text, to a word changes impact.

g. Contrast / Colour

Be mindful of where you introduce colour to, as too much can counterproductive to organisation.

2. FORM

Form is the overall feel and look of elements that make up the typographic composition. Form creates the most visual impact. Typography means to write in accordance with form: 'typo' = form; and 'graphis' = writing (Greek).

Sensibility in form is important in creating harmonious alignment in textual information.

Fig 1.4: Examples of harmonious form + alignment

Interplay of meaning + form brings balanced harmony to function + expression. When a typeface is perceived as a form it no longer reads as a letter ( manipulated by distortion, texture, enlargement, extruded in space.

3. ORGANISATION /GESTALT

Gestalt theory: the whole of anything is greater than its parts, based on we experience things as a unified whole.

In design, we have to look at how everything relates to each other, and how they affect the visual overall form.

Gestalt Principles of Grouping

Fig 1.5: Gestalt Principles

Similarity: can refer to a number of features (colour, orientation, size, motion).
Proximity: elements close to each other are perceived as unified group
Closure: our mind fills in the gaps of incomplete, partially hidden objects to see the complete form
Continuation: we see two or more objects as singular/ uninterrupted even when they intersect (reading rhythm)

Instructions

TASK 3: TYPE EXPLORATION & APPLICATION

Like the title, this task calls for us to develop a font (the complete set: uppercase, lowercase, numbers, punctuation) and explore its usage. We have a choice of 3 routes:

Develop a font intended as part of solution to a problem within an area of your interest; generate complete typeface (.ttf) + applications
Explore the use of an existing typeface within an area of interest; generate complete typeface (.ttf) + application
Experimental; end-result defined by student

1. Proposal Ideations:

Fig 3.1: Proposal slides (26.10.22 / W.9)

To be honest my ideations are not as well-thought out as I would've liked. Admittedly, I just pursued what came to mind at the best interest of time. After consulting with Mr. Vinod, I made the decision to go with ideation no 2: the expansion of the titular Hilda font.

2. Visual Research

Before making any sketches, I wanted to study a similar font to get a sense of how features such as the stroke thickness, contrast, and angles varied across the glyphs in the font. The Hilda graphic novels utilise a font called Hilda Header, however, I also happened across a beautiful font called John Muir Sans by Vicarel Studios (inspired by vintage US National Park posters).

Fig 3.2: Similar reference fonts

Given the setting of Hilda and her connection to adventure and the wilderness, it couldn't have been a coincidence that the title font has characteristics similar to fonts used in NPS posters.

3. Sketches

After gathering my reference fonts, I then set off to sketch my letterforms on graph paper, beginning with the uppercase characters of course. The title already had given me H, L, D, and A, however they sit on different places along the baseline as shown in figure x, and so it was a little tricky to standardise their height and widths.

Fig 3.3: HILDA font with guides

I decided to establish the baseline along the bottom edge of D, and then proceeded to trace these core characters. As H and O set the foundation for building uppercase forms, I proceeded to draw O next. The next forms were made keeping in mind the angles, stroke and overall character widths of H and O.

Fig 3.4: Scans of sketches: uppercase, lowercase, and numbers

I did the same for the lowercase however, building off of o and n. The 'i' helped me establish the left bearing of the lowercase n. The numbers are made to be as high as the cap height. In terms of where the ascender and descender would be, I referenced Myriad Pro as in last semester.

4. Digitalisation

The sketches once done (why did it take me forever though) were then imported onto Illustrator on a template layer and aligned according to the guidelines set by Myriad Pro.

Fig 3.5: Referencing Myriad Pro for guides

I understand from previous tasks that many letterforms are manually crafted to be optically balanced instead of numerically equivalent. Therefore, I constantly studied and compared forms of Futura Std (Bold Condensed) and Universe Lt Std (67 Bold Condensed) throughout the process to better gauge sensitivity to detail.

a. Uppercase

I traced the existing uppercase letters H, L, D, A on Illustrator, and first tried to follow my sketch.

Fig: Existing letterforms in Hilda

As one of the fundamental forms for building the uppercase, I needed to develop the O next. The existing D provided clues as to how I could do this.

Fig 3.6: Uppercase O alongside D and H

There is a clear imbalance in the stroke widths, and I made the mistake of developing the O from the DIGITISED SKETCH of the D instead of the DIGITALLY TRACED D. And so I went back and fixed the O. I also studied the overlay of O and H to determine width of overall form.

Fig 3.7: Studying 'O' and 'H' forms

Fig 3.8: Development of uppercase O

Fig 3.9: Before and after making amends to O and D

There is still much to do. Though there are still refinements to be made, I proceeded to move on and get all the letters on canvas first. I used the left side of D and H to determine the stroke width for side bearings.

Fig 3.10: Progress of digitisation

Digitisation for uppercase forms followed the sequence of:

O = C, G Q
Left of D + lowercase i = I, J, sides of B, P, R, E, F
I = N, M, T
O + I = U
A = V, W, X, Y, K
Z, S

I paid special attention to crafting the bowls and counters of P, B, R which deceptively looks equal in size to me.

Fig 3.11: Comparing counters of D, P, R, B

Similarly, the angles formed at the vertices of V, W, X, and Y were something to be mindful of.

Fig 3.12: Studying vertex angles of V, W, X, Y

I ran into several issues trying to balance my letterforms as they were angled at the terminals. One such example is shown below with N.

Fig 3.12: Trying to achieve balance of the form N

I eventually managed to complete the rest of the uppercase set in a manner similar to as shown above. Though I added the triangular element to some of the glyphs in my sketch, I decided not to do so in the interest of saving time. Perhaps I can go back and make a variant set in the future.

Fig 3.13: Uppercase forms (pre-refinement stage)

b. Numbers

As I have decided to use proportional lining numerals for this font, it made sense to tackle the numbers before commencing on the lowercase forms (seeing as how their height matches the cap height).

I studied Futura Std (Bold Condensed) to figure out how to craft my numerals. I observed that the widths of the overall forms were relative to that of zero as shown below:

Fig 3.14: Width of 0 superimposed over the numerals

And so this is what I made first. It is a narrower version of uppercase O. Since they have the same height (cap height) we need to slightly increase the height of zero's counter to achieve balance within the form:

Fig 3.15: Uppercase 'o' and number zero comparison

Based on my experience building the uppercase forms, the next foundational form to create for the numbers would be 1. I used the uppercase i as reference, however decided to straighten the terminal, similar to that of Hilda header.

Fig 3.16: The creation of number 1

Digitising the sketches exactly as they were didn't always produce a balanced letterform on screen. Therefore many adjustments had to be made to balance the characters. The '2' also had to be distinguishable from uppercase Z, as was the case with zero and O.

Fig 3.17: Development of 2

Fig 3.18: Uppercase Z and number 2

I then began to work on the 3, using uppercase B, S and 2. In hindsight though, I should have crafted 8 first, and then used that to build the 3. We push on though.

Fig 3.19: Refinement of 3

Fig 3.20: Number 3 before and after refinement

Realising my mistake, I went on to develop the 8 next. I referred to the 3 and 0 to do this. I observed that the edges of the counters are different from 0.

Fig 3.21: Comparing 8 and 0 of Futura

Fig 3.22: Development of 8

I then made the 6 and 9. They were fairly easy to make, but have slight differences:

Fig 3.23: Comparison between 6 and 9

I then made 7, referencing the corners of uppercase Z. The 5 was then refined using the 7 and 3 as reference.

Fig 3.24: Development of 7 and 5

The 4 was a bit of a challenge in terms of achieving a balanced appearance (weight, angles, counterspace: form balance. I referenced uppercase z and i to refine my digitisation of the sketch.

Fig 3.25: Development of 4

Here are all the numbers side by side:

Fig 3.26: Digitalised Numerals

c. Lowercase

After realising my canvas was in pixels and not points, I devastatingly went back and resized everything on a new canvas. I tried to be more sequential and methodical with the lowercase than I was with the uppercase forms by grouping them in batches :

Fig 3.27: Development of lowercase forms

I often had to go back and study my reference fonts to understand the nuance and subtle details especially in similar-looking letterforms such as p, b, d, q, and v, w, x, y. I used Univers Lt Std (67 Bold Condensed) for this:

Fig 3.28: Studying nuance in Univers letterforms

Fig 3.29: Development of lowercase p

Fig 3.30: Development of lowercase w

The angled feature of the uppercase forms are much subdued in the lowercase ones so that it doesn't impede their utilitarian purpose (as mentioned by Mr. Vinod). Hence they were easier to get done:

Fig 3.31: Lowercase forms

d. Punctuation

For punctuation, we are to free to select half of the following:

`~!@#$%^&*()_-+=\|}{[]:;”’<,>.?/

This means we have to create 16 punctuation marks. I did not make sketches for them and worked directly on Illustrator. The link to an instagram post provided by Mr. Vinod is a godsend. The page had visually digestible and easy-to-understand posts about developing punctuations (and other type-related stuff) which were perfect for my pea brain. Anyways I constantly referred to them while working on the punctuations.

Fig 3.32: Development of punctuation

The ampersand in particular was a tough nut to crack (good thing I saved it for last). The foundation was built from the number 8 and uppercase Q. I spent an entire hour adjusting anchor points trying to get the form to look balanced! I stopped myself when it got to a stage where the form looked okay-ish.

Fig 3.33: Creating the ampersand AKA the biggest roadblock istg

Here are the punctuations:

Fig 3.34: Punctuation marks

e. Refinements

I rounded some of the corners and edges in the letterforms to soften their appearance.

Fig 3.35: Before and after rounding corners

With everything in one place, it is time to evaluate the characters next to each other. Some lowercase forms in particular had some changes to go through in terms of stroke width:

Fig 3.36: Identifying inconsistencies

Fig 3.37: Making adjustments to selected letterforms

Now we move onto the next phase: importing the letterforms into FontLab.

5. FontLab

a. Entering key info

We need to measure the cap height, ascender and descender heights to enter into the font info tab:

Cap height: 696
Ascender: 733
Descender: -205

Fig 3.38: Importing letterforms from Illustrator

During imports, sometimes the overshoot would be lost i.e they sat on the baseline on FontLab. Letterforms with descenders also ended up this way and so I had to manually adjust the positions so that they aligned with the designated heights.

Fig 3.39: Setting guides for overshoot according to measurement on Illustrator

With all the characters imported, the next thing to be done would be to tackle the metrics of the side bearings. An additional 'character' to give a value to is the space.

Fig 3.40: The letters on FontLab

I first set the side bearings of all the characters to zero. I then grouped letters with similar side bearings (such as H, I, P) in a separate metrics window as advised in senior student's demo.

Fig 3.41:Setting side bearings

With that out of the way, our senior showed us how to utilise the contour features to clean up and optimise our anchor points.

Fig 3.42: Cleaning up anchor points

Afterwards is the most tedious and painstakingly time-consuming stage of kerning. This has been done for uppercase letters, lowercase letters, and upper-lowercase letters.

Fig 3.45: Kerning progress for lowercase letters

Fig 3.46: Kerning progress for upper-lowercase letters

To check for inconsistencies I also tested several phrases to see the pairings in action.

Fig 3.47: Kerning phrases

Since learning that effects could be applied on FontLab itself, I decided not to make a custom brush on Illustrator as earlier planned. On a duplicate master layer, I added the distortion effect to match the texture as in the original Hilda title. To my dismay though, the export was faulty no matter what I did. As I am already way overdue the deadline, I have decided to exclude the texture :/

Fig 3.48: Adding effects export error

After importing the regular version, I tested it out on word and Illustrator. I went back and altered some kerning and also increased the width of the underline stroke.

Fig 3.48: Initial testing on Word - what disastrous kerning!

After fixing the kerning, I exported the font again.

Fig 3.49: Screenshot of font information

6. Application

As Hilda is an animated tv series, I decided to make the applications related to something like merchandise and live events. I also thought to find mockups that that fit a wilderness / outdoorsy, exploration theme to complement Hilda's story. While Hilda does have some merch, I mainly preferred to reference Adventure Time since they have a broader range of collateral.

I thought to make:

A trading card set.
DVD set
T-shirt (scrapped)
Waterbottle (scrapped)
Backpack (changed to fanny pack)
Panel Discussion Event Poster

I was afraid that I was using too many of the graphical elements as Mr. Vinod advised that the type should be at the forefront of our application.

Fig 3.50: Progress on Illustrator

For all the mockups except the event banner and card deck, I purely utilised the Hilda font we made. The card deck and event banner combines Hilda Animated with Nunito and Josefin Sans respectively.

Fig 3.51: Adding artwork to mockups on Photoshop

Fig 3.52: Scrapped mockup (poor lighting on mockup)

Fig 3.53: Event banner attempts

For the event poster, I decided to go with one that had the character AND one without. Somehow an event like this seemed weird to not include any character seeing as how the fanbase revolves around them. It looked too empty. Putting the character may be risky though seeing as how the type should have the spotlight.

FINAL OUTCOME:

Download Hilda Animated here.

Fig 4.1: Hilda Animated Showcase [JPEG] - (03.12.22)

Fig 4.2: Hilda Animated uppercase forms [JPEG] - (29.11.22)

Fig 4.3: Hilda Animated lowercase forms [JPEG] - (29.11.22)

Fig 4.4: Hilda Animated numbers & punctuation [JPEG] - (29.11.22)

application

Fig 4.5: Trading Card Design with box [JPEG] - (03.12.22)

Fig 4.6: Trading Card Design [JPEG] - (03.12.22)

Fig 4.7: Trading Card alternate card showcase [JPEG] - (03.12.22)

Fig 4.8: 'Adventurer' Fanny Pack [JPEG] - (03.12.22)

Fig 4.9: DVD case and disc [JPEG] - (03.12.22)

Fig 4.10: Event Display Banner; version 1 [JPEG] - (03.12.22)

Fig 4.11: Event Display Banner; version 2 (with image) [JPEG] - (03.12.22)

Fig 4.12: Font showcase and characters [PDF]

Fig 4.13: Final Type Application []PDF] - (04.12.22)

Feedback

Note: (I couldn't show my work on time, and so the specific feedback is from occasions where others' feedback was applicable to my font as well)

WEEK 10

General Feedback:

Punctuation marks vary depending on typeface. First analyse 2 of the 10 model typefaces provided so as to observe slight differences while simultaneously avoiding common errors
When evaluating lowercase letterforms, do so beside the uppercase ones
Half-close your eyes to evaluate and compare thickness of letterforms in relation to each other

Specific Feedback:

(If adding texture), consider making 3 versions of a texture brush to use on outlines of the letterforms

WEEK 11

General Feedback:

Generally, the thickness of curved letters is not consistent from top to bottom, so is as thick as other letters in the mid section only (optically will appear equal)
When designing punctuations, there’s generally no need to put a lot of the style of the letterforms. as it will cause difficulty in reading

Specific Feedback:

Have 2 variations of font, one with and without the decorative elements so user has option to choose alternate glyphs
Try to make lowercase forms a more subdued version of the uppercase (lowercase forms are more prevalent within a sentence and hence have a more utilitarian purpose).
Work on consistency of thickness and angle of strokes

WEEK 12

General Feedback:

In application, make sure the visual doesn’t overpower the type as it’s the typeface that’s being showcased.
The more counter space your type has, the more you need to make up for that space in design application.
Clean up excessive nodes using the smooth tool on Illustrator before exporting to FontLab
Your type can be paired with another (text) font in your design application

Specific Feedback:

Consider promoting the font to the fanbase

WEEK 13

Reflection

EXPERIENCE

This task while extremely eye-opening and enjoyable came with many many hurdles. I think the challenge however made it quite interesting. There are a lot of steps to creating an entire typeface, and executive dysfunction unfortunately really got the best of me this time. Despite wanting to give up many times, I am grateful for the experience and look forward to creating another font in my own time, preferably of a more elegant style than a children's book-title variety aha...

OBSERVATION

I looked back on last semester's work to refresh my FontLab memory and was pleasantly surprised to notice the mistakes in the forms of 'Mintea'. It made me realise just how much one's eye for detail can unknowingly develop over the semester. Studying the forms of Futura and Univers made me appreciate the nuances in a letterform even more. HOWEVER I am still enraged by the sorcery that is: the deceptive symmetry of 'x', and the '&'s center of gravity. The kerning stage was quite exhausting, and I could have been more efficient if I used classes.

FINDINGS

I can understand now why it may take YEARS to develop a GOOD font because there are always improvements to be made. It was interesting to see how the slightest adjustments can alter a letterform's white space, center of gravity and overall balance. Seeing a beautifully balanced typeface may have one thinking that it's easily achievable. But if one were to dabble in the crafting of it, they'd find that even the simplest of forms require careful attention to detail- not just in the individual characters themselves, but also in how they interact with one another.

Janaan Ahmed (0353333)

Search This Blog

Advanced Typography/ Task 3: Type Exploration & Application

Comments

Post a Comment