Typography Project 3 - Type Design & Communication ( Font Design )

Ms Hsin introduced to us the expectations and guidelines for this new project and gave us an outlook on the final work expected from us. Mr Vinod brief us on the types of pens to get for our typeface sketching and also provided some example videos for us to look through before we begin. He also suggested us to do ample research before constructing our own letterforms.

Week 8 :

Recces Week

Week 9 :

Ms Hsin and Mr Vinod went through our 9 sketches and gave us their opinion on which design style will work best. After choosing, we spent the day sketching out more letters and symbols in that preferred style. Before doing digitalision, Mr Vinod taught us a few methods to do it - either using lines , shapes or strokes to digitalise our typeface. We were also introduced to new tools like the width tool and pathfinder tools which may aid us in our digitalision process.

Week 10 :

Ms Hsin and Mr Vinod went through our first draft of digitalised typeface and gave us many feedbacks on how to work on it. We spent most of our time getting individual feedback and improving on it as recorded in my process below. Nearing end of the class, Mr Vinod told us some things to take note before importing our designs into FontLab.

Week 11 :

Ms Hsin gave us one more week to further refine our illustrator and we mainly spent the time fixing minor details and gettting feedback.

Week 12 :

Mr Vinod and Ms Hsin instructed us to download FontLab 7 and import our fonts over. We need to set the correct guidelines and preferences inside before copy and pasting the design over from illustrator. We were given a short lecture on how to work with kerning inside fontlab and proceeded to kern our own typeface. We needed to export our typeface from fontlab and create a poster based on it.

Week 13 :

Ms Hsin went through our final poster designs and gave us opinions on how to make it better, we were told not to add too much other elements as the main point of it is to promote our typeface. After that, we were briefed on how to do our final compilation and write our reflection for the entire module.

2. Project 3 - Type Design & Communication (Font Design)

2.1 Research

Before I get started on anything, i decided that it is vital to do some background research to understand letterforms more.

Anatomy of typefaces :

I looked into depth the small details that contributes to a typeface and used it to provide a guide and baseline to what i should take note of when constructing my own letterform.

Fig 2.1.1 Anatomy of typeface source , Week 7 (11/8/2023)

Types of typefaces :

I also looked into the different typefaces available to give myself a better insight on what kind of typefaces i can construct.

Serifs : Serif typefaces includes a slight projection finishing off the strokes of its letterforms , within serifs there are many types which some are called oldstyle serifs, transitional serifs , modern serifs , slab serifs and glyphic serifs , below is a reference image for the full list

Fig 2.1.2 Types of serif source , Week 7 (11/8/2023)

Sans serif : Typefaces that do not have any projections at the end of its stroke in its letterform.

Some popular serifs includes grotesque sans serifs, neo grotesque sans serif , geometric sans serif & humanistic sans serif

Fig 2.1.3 Types of san serifs source , Week 7 (11/8/2023)

Script and Display : Typefaces based on the fluid strokes of handwriting and can range from formal to casual , they are suitable for display use (Script) , Decorative typefaces are very illustrative and should be used only in large size and headlines

Fig 2.1.4 Script & Display typeface source , Week 7 (11/8/2023)

Counter spaces in typography :

It is known as an empty space within a letter that is generally closed off , letters that possess that are capital letters A,B ( has two counters ) , D , O , P , Q , R and lower alphabets a,b,g,o,p,q . The counter of lowercase 'e' is also known as 'the eye' .

In many cases, the part of the letter that encompasses the counter is known as the bowl as in rounded shapes in capitals B/d and D/d.

An empty space that is not closed off as in letters 'v' and 'n' are called aperture otherwise known as open counter. Small letters 'a' and 'e' exhibit both counter and open counter.

Fig 2.1.5 Alphabets & their counter spaces , Week 7 (11/8/2023)

Stress in Typography :

Stress is the transition angle between the thickest and the thinnest points in a character's stroke. It can be measured by drawing dotted lines - an axis that connects the thinnest point in a character. The axis can be horizontal, diagonal , vertical and ever horizontal. Stress can help a character create harmony and a visual juxtaposition between fonts.

Fig 2.1.6 Types of stress in typography , Week 7 (11/8/2023)

2.2 Deconstruction of letterforms

Ms Hsin tasked us to choose a serif and sans serif typefaces to deconstruct and analyse how did they designed that particular font and understanding what was changed.

I chose Futura ST Book for my sans serif font and Bembo STD Book for my serif font to deconstruct

- Deconstruction of Futura ST Book

Fig 2.2.1 Deconstruction of Futura ST Book , Week 7 (11/12/2023)

- Letter 'H' : I can tell that both the vertical stems has been kept consistent on both sides but the black stroke of the inner cross bar has been made thinner.

- Letter 'o' : The vertical stress is the same on both axis

- Letter 'g' : The size of the closed counter of 'g' is not consistent on the letters and i can tell that the black stroke has been reduced

- Letter 'b' : Similar to letter 'g' , the closed counter of the letter 'b' is not the same as the size of the bowl outside, the black stroke has been reduced

- Deconstruction of Bembo STD Book

Fig 2.2.3 Deconstruction of Bembo STD Book , Week 7 (11/12/2023)

- Letter 'H' : The vertical stroke of the letter has been made much thinner compared to the two vertical strokes

- Letter 'o' : I can tell they used diagonal axis stress on the letter 'o' and the inner counter form has been shrinked

Fig 2.2.3 Deconstruction of Bembo STD Book , Week 7 (11/12/2023)

- Letter 'g' : For the bowl of letter 'g' they used diagonal axis as well and the stroke of the ear has been made thinner as well. The stroke of the link has been made thinner and the loop has been adjusted as well

- Letter 'b' : The stroke of the head has been made thinner and the stroke of the bowl has been thinned too

2.3 Sketching of alphabets

We were tasked to come up with 9 different sketches using 3 different types of pen, I chose the art line calligraphy pen, pointed nib brush and round tip brush as they all have varying strokes.

Fig 2.3.1 Pointed Nib brush sketch , Week 9 (11/21/2023)

Fig 2.3.2 Artline calligraphy pen sketch , Week 9 (11/21/2023)

Fig 2.3.3 Rounded Nib Sketch , Week 9 (11/21/2023)

My personal preference was rounded nib number 2 and art line calligraphy pen number 1, Mr Vinod and Ms Hsin prefers rounded nib number 2 as well as they find the concept of thinner to thicker strokes interesting. I proceeded with the style to write out the rest of the words (o,l,e,d,s,n,c,h,t,i,g and , . # )

Fig 2.3.4 First attempt at writing , Week 9 (11/21/2023)

Ms Hsin felt that some of my letters like N,H,I looks abit too wide compared to the rest of the letters so she suggested I use the monospace concept ( widths of letterforms are equal ) to resketch the words

Fig 2.3.5 Second attempt at resketching , Week 9

After looking at the second attempt, Ms Hsin felt that it was okay to try digitalising the words in illustrator.

2.4 Digitalising of words

We needed to use Adobe Illustrator to digitalise our words so I started off by setting a guideline as it will be easier for me to align the letterforms.

First Draft :

Fig 2.4.1 First Draft , Week 10 (28/11/2023 )

Ms Hsin felt that there were too many irregular lines and shape and it does not look very consistent. I was told to reduced the number of anchor points and make the lines look less curvy and shaky so I consider this first draft a failure.

Second Draft :

Fig 2.4.2 Second Draft . Week 10 (28/11/2023)

Ms Hsin felt that even though the lines look less curvy and more consistent, the widths of the words are still very irregular as some parts were too thin and some parts were too thick.

Fig 2.4.3 Inconsistency in width , Week 10 , (28/11/2023)

Even though I am aiming for a thin top and thick bottom, the consistency in the width of the thick and thin should be similar for all the letterforms, in the figure above, even though both strokes are at the bottom , the width of the letter L is much wider than the stroke on the letter E

Fig 2.4.4 Thin Stroke on S , Week 10 (28/11/2023)

The curve stroke on the top of the letter S is way too thin compared to other thinner strokes for the rest of the letters. I will need to ensure the consistency in width across letters in the next draft, so even though draft 2 was better , there is still much space for improvement.

Third Draft :

Fig 2.4.5 Third Draft , Week 10 (28/11/2023)

I set the thinnest stroke at around 3mm and the thickest stroke at around 17mm but I felt like it still lacks consistency here. I was suggested that the letterforms still need adjustments.

Fig 2.4.6 Adjustments needed in G and E , Week 10 (28/11/2023)

The stroke on G is not sitting on the median line and the stroke on E still needs to be adjusted as it looks too thin.

Fig 2.4.7 Adjustments needed in symbols , Week 10 (28/11/2023)

Even though my letterform style is thin top thick bottom, for exclamation marks , they are known for thick top thin bottom so an exception can be made for that and the # is too small and in the wrong direction , as well as the comma.

Fourth Draft :

Fig 2.4.8 Fourth Draft , Week 10 (28/11/2023)

I adjusted all the widths to ensure consistency and made changes to the symbols as suggested in the previous draft. I increased the overall width of the letter N as well because it looks too thin compared to the rest of my letterforms.

Fig 2.4.9 Top Before , Bottom After of letter N , Week 10 (28/11/2023)

Overall, it looks way better compared to my first draft as they look more consistent. I reduced the distance of the ascender and descender to my x-height as my design is considered a thin typeface and all the curves are resting on the ascender and descender making them consistent.

Fig 2.4.10 Ascender and Descender guidelines , Week 10 (28/11/2023)

I was told the best way to check is to form words and put them side by side. I decided to use the word " DESIGN SCHOOL ! "

Fig 2.4.11 Word Formation , Week 10 (28/11/2023)

Overview without Grids :

Fig 2.4.12 Without Grids , Week 10 (28/11/2023)

Changes done after feedback session on Week 11 :

Letter G : I reduced the number of anchor points inside to ensure it looks smoother and easier to control the strokes from the 1st to 2nd draft. From the 2nd to 3rd draft, I adjusted the shape and size of the curve inwards to reduce the counter space.

Fig 2.4.13 Changes to letter G , Week 11 (12/5/2023)

Letter S : I reduced the number of anchor points too from 1st to 2nd draft. From the 2nd to 3rd draft, I expanded the letter and manually adjusted the width to ensure it has consistency with other letters.

Fig 2.4.14 Changes to letter S , Week 11 (12/5/2023)

Letter O : I reduced the number of anchor points and adjusted the width from 1st to 2nd draft to make it look a little narrower as my initial letter looks too wide compared to the rest. From 2nd to 3rd draft, I expanded the letter and adjusted the width at the bottom part to make it look thicker to increase contrast.

Fig 2.4.15 Changes to letter O , Week 11 (12/5/2023)

Letter C : I reduced the number of anchor points and increased the length of the upper stroke to decrease the counter space. But, it turned out in the way that it seems that the letter is leaning backwards so I further adjusted and expanded the letter to align the stroke with the letter S.

Fig 2.4.16 Changes to letter C , Week 11 (12/5/2023)

I adjusted and changed the widths and minor details ( including the ones listed above ) in my drafts today as well and expanded them to further enhance the shape. I set new grids and guides to follow to keep my stroke consistent when adjusting the width

Fig 2.4.17 Guides Used , Week 11 (12/5/2023)

Fig 2.4.18 Draft Changes , Week 11 (12/5/2023)

2.5 Development of Font in FontLab 7

After finalising our digital font, we need to import them to FontLab 7 to work on the kerning and spacing of it. I ensured that the settings were right and my guidelines were set correctly before pasting my letters from Adobe Illustrator.

In my first draft. I worked on the kerning to ensure that the spacing looks okay to the eyes but Ms Hsin felt that the curve on my letter 'S' is leaning too much to the left and resulting in too much white space between S and the next letter, hence I proceeded to adjust the curve.

Fig 2.5.1 First Draft of Kerning , Week 12 (12/13/2023)

I experimented with more words after that and included kerning of the symbols as well, the letter 'S' looks much better compared to the previous draft and I also extended the straight line of the letter 'T' to make a better diffrenciation between it and letter I.

Fig 2.5.2 Second Draft of Kerning , Week 12 (12/13/2023)

The last change made after receiving feedback from Ms Hsin was to make the curve of the letter 'D' more downwards as mine looked a bit high so I shifted the curve.

Fig 2.5.3 Final draft of Kerning , Week 12 (12/13/2023)

2.6 Poster Design

We were tasked to form words with the font we created in A4 style and here is a list of words I can think of - light,design,school,god,this,the,lost,song. The words must be of same point size. I came up with 3 drafts for it and I chose the third draft as my final poster design. For the first and second draft, I tried word play with it but i felt that my font is not too suitable as it looks very empty so for my third draft, i placed the words stacked together to give off the feeling of a 'gradient like' feel as my font goes from thin to thick after feedback from Ms Hsin

Fig 2.6.1 Draft 1 of poster design , Week 12 (12/13/2023)

Fig 2.6.2 Draft 2 of poster design , Week 12 (12/13/2023)

Fig 2.6.3 Draft 3 of poster design , Week 12 (12/13/2023)

2.7 Font Tester

Try typing letters any letters ( in uppercaps ) with O,C,G,L,E,D,S,N,H,I,T and symbols !#,.

2.8 Final Project 3 Font Design

Final Kerning

Fig 2.8.1 Final Kerning , Week 12 (12/13/2023)

Final Font Design Link and Image : https://drive.google.com/file/d/1IGu772HKFQRsOZuMLQ0Nk9Mz1KHe3_bS/view?usp=sharing

Fig 2.8.2 Final "Serenity Regular" Design JPEG , Week 12 (12/13/2023)

Fig 2.8.3 Final "Serenity Regular" Design PDF , Week 12 (12/13/2023)

Guidelines

Ascender : 788 pt

Capline : 780pt

X-height : 390pt

Baseline : 0pt

Descender : -4pt

Final Poster Design

Fig 2.8.5 Final Poster Design (12/13/2023)

Fig 2.8.6 Final Poster Design PDF , Week 12 (12/13/2023)

3. Feedback

Week 7

General Feedback : Do not use italic words fully for whole body text, use only in highlighting important details.

Specific Feedback : -

Week 8 : Recces Week

Week 9

General Feedback : Remember to split into 3 artboards when digitalising the letters, keep original strokes so it is easy to make changes to the letters when needed.

Specific Feedback : The concept of thin stroke on the top and thick stroke on the bottom is interesting but can consider using monospace concept to ensure the widths of the letters are all equal

Week 10

General Feedback : Strokes need to be consistent and remember to set artboard to 1000pt when digitalising.

Specific Feedback : Consistency of the thick and thin stroke's width need to be kept and set a guideline for your thickest and thinnest stroke. Exclamation mark cannot follow your style guide from thin to thick as they normally work the opposite. Decrease the distance of your descender line and ascender line to your x-height and baseline as your typeface is thin

Week 11

General Feedback : Try to reduce the number of anchor points in the letter as it will make it harder for us to adjust the shape of the letter. Instead, put anchor points only on the core parts of the design.

Specific Feedback : The curve on the letter C and S and G needs to curve in more to reduce the counter space. The thickness and the thinnest width of the letter should be consistent , set a letter as the guideline to follow

Week 12

General Feedback : Follow the kerning guidelines given as it can help save alot of time in the process. Form words using the letters and observe the kerning, put letters side by side to ensure that kerning is done well.

Specific Feedback: Decrease the kerning space between letter H and O as it looks abit far away and the curve on letter S need to be adjusted to reduce counter space

Week 13

General Feedback : Do not overcrowd the poster, the main point of it is to promote your typeface.

Specific Feedback : Current draft do not bring out the uniqueness of your typeface, your typeface looks good when the words stack together so you can consider another layout.

4. Reflection

Experience

This task is the most tedious and different compared to the rest of the typography projects as it requires lots of attention to minor details and updates on the different versions. Designing a font is a totally new task for me and I never knew how complicated and detailed the process can be.

Digitalising the font and making it consistent was the hardest part for me and i spent the most time there. Initially, I did not take into account the consistency of the widths of the strokes and I was more focused on the general outlook of it, neglecting the small details. However, after much feedback from Ms Hsin, I realised how those small minute details play a huge role in perfecting my font and making it look consistent.

Overall, I was very satisfied on creating my own font and learning how to use Font Lab. Although it was very tedious and time consuming, it taught me the importance of understanding how typeface design works.

Observations

It was fun to learn how to look into how other fonts were being designed, for example - Futura. I understood how counter space works in font design and tried to applied all the knowledge on my own font design, like creating strokes that has curve.

Initially, it was hard to be able to tell how a small nuances in the glyphs can cause such a huge difference but over the process of digitalising, I compared the before and after versions and could really tell how different it will appear in the reader's eyes.

Findings

Creating a typeface requires a blend of artistry, precision and technical skills. The key findings i learnt through this task was :

Consistency Matters : Achieving consistency across characters is essential for readability. This involves maintaining uniform stroke weights, spacing, and visual harmony throughout the typeface.

Digital Transition Challenges: Moving from hand-drawn sketches to digital platforms may present challenges. Learning font design software and understanding vector manipulation becomes essential.

Typography Principles: Delve into typography principles like kerning, tracking, and leading. These impact how characters interact and contribute to overall readability

5. Further Reading

Fig 5.1 Typography Referenced by Allan Haley, Week 12 (12/13/2023)

This is one of the books referred to us by Mr Vinod and I read on the Chapter : Type Design and Development. Below are the points I compiled :

The Past As An Inspiration :

To design a good typeface, designers need to take into account the constraints of type making and typesetting technology. More and more designers wants to publish their own typeface as it sits in the intersection of a designer's originality. The past experiences and to similar conditions by countless designers help as an essential element to every designer as we learn from their thinking and mistakes made.

Fig 5.2.1 A page from a 1958 Fonderie Olive specimen showing an inspired interpretation of Garamond Style , Week 12 (12/13/2023)

Letters, Lines and Paragraphs :

Traditional systems categorizes typefaces by features such as angle of stress, rate of modulation and shapes of serifs. But looking at many typefaces in use now, we realise that the overall texture becomes less important compared to the individual features like line spacing, length of ascenders and descenders and distribution of space within letters.

Fig 5.2.2 A detail from one of the many sketches in the development of Antonio Cavedoni's Enquire, Week 12 (12/13/2023)

From A Letter To A Typeface :

Ideally a designer works with a small set of letters for development and balance the complementary and contrasting features across a character set. Making sure that the range of shapes combine to form a unified whole is the first step to a new typeface. Designers consistently update their sketches and design to ensure that the shape unifies and ensure good readability and consistency at the same time.

Fig 5.2.3 The four stages in the development of Neel Kshetrimayum's Frijky , Week 12 (12/13/2023)

QUICK LINKS

Project 1 : Exercises
Project 2 : Typographic Exploration & Communication

Search This Blog

Winnie Ho (0364866)

Typography Project 3 - Type Design & Communication ( Font Design )

Comments

Post a Comment

Popular posts from this blog

Application Design 2 - Task 1 : App Design 1 Self Evaluation & Reflection

Application Design 2 - Task 2 : Interaction Design Proposal & Planning

Information Design - Exercise 1 : Quantifiable Information