Typography / TASK 3: Type Design & Communication
Daphne Lai Yu Cheng / 0366380
GCD 60104 / Typography / Bachelor of Design (Honours) in Creative Media / Taylors' University
Task 3 / Type Design & Communication
LECTURES
Lectures have been completed in Task 1 & Task 2.
TASK 3: Type Design & Communication (11/1/2024)
- Choose a font similar to our typeface design sketches from the 10 fonts provided and attempt on dissecting the letters 'h,o,g,b' in Adobe Illustrator and write down observations.
- Sketch 'h,o,g,b' using 3 different pens (explore at least 3 different writing styles)
- Select a favourite writing style and further write the following letters and punctuations: o l e d s n c h t i g , . ! # then attempt on the digitalisation of the letters.
Figure 1.1 Letter Dissection
Typeface used: Serifa Std Roman
Observations:
- Serifs size are the same as 'g' and 'b'.
- Stem height and width are the same as 'b'.
- The left stem is slightly thicker than the right stem.
o
- Counter within is slightly bigger and wider than 'g' and 'b'.
g
- Serifs size are the same as 'h' and 'b'.
- Tail is bigger and wider than the stem.
- In between the stem and upper bowl is smaller than the stem and lower bowl.
b
- Serifs size are the same as 'h' and 'g'.
- Stem height and width are the same as 'h'.
- In between the stem and upper bowl is bigger and wider than the stem and lower bowl.
Figure 1.2 Type Anatomy
1) Ascender
2) Cap height
3) Median (X-Height)
4) Baseline (X-Height)
5) Descender
6) Overshoot : Circular areas
exceed the x height because rounded form tend to look smaller
compared to flat edge forms.
2) Sketches
I used 3 chisel markers of different sizes 3mm, 7mm and 12mm. I did some exploration and test tries on different angles and writing styles in class and below were the results :
Figure 1.3 Exploration Sketches (4/11/2024)
I did my sketches separately according to the marker sizes to compare the difference of writing styles while using different markers.
Figure 1.4 Sketches using Different Markers (13/11/2024)
Figure 1.5 Final Typeface Design Sketch (16/11/2024)
After sketching, I decided on a typeface design I want to digitalise which is this design by combining the 12mm chisel marker #1 and #2 because I am a big fan of extended and flat fonts and also decided to add serifs onto my design.
3) Inspirations / Research
Figure 1.5 Bambino Piccolino
Figure 1.6 Courier
4) Process
Digitalisation in Adobe Illustrator:
%20%202_12_2024%202_08_11%20AM.png)
Figure 1.7 Shapes Used
.png)
Figure 1.8 Process (18/11/2024)
During feedback session, Mr Vinod said that the serifs of my typeface design are too long and might affect the readability so I shorten them in a new layer. The image above shows the evolution of the serifs, 1 of the example is 'c'. Personally, the more I look at the initial design, it kind of looks like a duck's face.
Figure 1.9 Process (16/11/2024)
Above was 1 of the process, I showed Mr Vinod my initial typeface design and he said to change the ear of 'n' because the way I designed 'n' was incorrect, the ear of 'n' should not stick together to the shoulder of 'n'.
Figure 1.10 Process (16/11/2024)
I also did some changes on the tails of the letter 'n' and 'h' according to Mr Vinod's feedback because he said that the tails are inconsistent and incorrect. The bottom serifs should be face the same direction as the shoulder of the letter.
.png)
Figure 1.11 Process (25/11/2024)
Red: I did changes to the punctuations by deleting the serifs because Mr Vinod mentioned that it is unnecessary and not to add serifs to them. He showed me an example of the punctuations for Bodoni Std, all letters have serifs except for the punctuations.
Blue: Aside from ,.! , Mr Vinod said it's okay to add a little serifs to the #.
%20%2025_11_2024%209_53_24%20AM.png)
Figure 1.12 Digitalisation Evolution (25/11/2024)
This screenshot of the digitalisation evolution shows the changes did in every layer. It is important to have process and not to stick to the same work in order to show progress.
Figure 1.13 Finalised Type Design (25/11/2024)
I named my font Retrospace. This font reminded me about the space because of the angular shapes and the serifs gives off vintage and retro vibes. The overall design depicts futuristic yet slight retro concept. Looking at my designed font, it also reminded me of a psychological horror game called 'Mouthwashing' about being stranded in the outer space after a spaceship wreck.
%20%2016_12_2024%2010_28_10%20AM.png)
Figure 1.14 Measurements
Measurements
Cap Height: 697 pt
Digitalisation in FontLab:
Figure 1.15 Importing Typeface Design to FontLab (2/12/2024)
After the final type design construction in Adobe Illustrator, we were to proceed and import our letters into FontLab. I keyed in my font measurements into font info > family dimensions then transferred the fonts into FontLab.
Figure 1.16 Side Bearings Adjustment (Before) (6/12/2024)
Figure 1.17 Adjustment in pairs (9/12/2024)
Before that, I tried to adjust them in pairs according to the chart Mr Vinod provided. All the letters' side bearings weren't adjusted yet so they looked very loose.
Figure 1.18 Side Bearings & Kerning Adjustments (After) (9/12/2024)
After getting feedbacks from Mr Vinod, he guided me on adjusting the side bearings for each letters and the problematic letters after side bearing adjustments were 'i' and 'g' so I had to do some kerning to them. This is the final outcome of the letters after side bearing adjustments and kerning.
I finalised all adjustments and placements then exported and installed the font to create a poster to showcase my final type design.
Figure 1.19 Inspirations from Pinterest
We were to create a poster design in A4 size and grayscale format. I started by finding ideas and inspirations on Pinterest. I decided to combine both types of designs into my poster design.%20%2015_12_2024%207_40_20%20PM.png)
Figure 1.20 Poster Design Process (11/12/2024)
These are the processes of my poster design. I decided to use 'the design school' or 'the # design ! school' for my poster design. I experimented with different text placements and also thought that applying white colour could stand out and emphasise the word 'design' more.
Figure 1.19 Poster Designs (11/12/2024)
I created a few designs and finalised based on my personal favourites. Out of these 3 poster designs, my favourites are #2 and #3.
#2: I added '#' and '!' because I thought and felt like the punctuations can add a chaotic concept to it.
#3: For #3, I decided to highlight the word 'design' by repeating the word 'design' and changed the colours for the letters to white like a highlight text in word search.
Mr Vinod chose design #3 but he mentioned to do some changes on the small text to give the overall poster more balance.
Figure 1.20 Final B&W Poster Design (JPG) (16/12/2024)
This is my final poster design after some changes to the text placements.
5) Final Typeface Design (Submission)
Download Font here: Retrospace ☆
Figure 1.21 Screen Grab of FontLab Process (side-bearings) (9/12/2024)
Figure 1.22 Final AI Type Design Construction "Retrospace' (PNG) (25/11/2024)
Figure 1.23 Final AI Type Design Construction 'Retrospace' (JPG) (25/11/2024)
*I have uploaded PNG just incase if JPG is unavailable to view*
Measurements
Cap Height: 697 pt
Descender: -225 pt
Figure 1.24 Final AI Type Design Construction 'Retrospace' (PDF) (25/11/2024)
Figure 1.25 Final B&W Poster (JPG) (16/12/2024)
Figure 1.26 Final B&W Poster (PDF) (16/12/2024)
Font Tester/Preview
Try typing words that include any letters from 'o l e d s n c h t i g , . ! #'
Example: design, test, sign, scent, etc...
INDEPENDENT LEARNING WEEK
Week 9
Specific feedback: Shorten the length of serifs to avoid excessive counterspace, keep some edges sharp instead of making every edge rounded. Tails for 'n' and 'h' are wrong and inconsistent, an example to follow is 'l'. Some changes to be made to the ear of 'n'.
General feedback: It is normal to have an evolution while attempting on digitalisation, the design process are important. Cross strokes should not be too wide and be more matter of a fact when it comes to designing punctuations, be consistent when it comes to thickness. While removing anchor points, hold on shift key to retain the shape of your design.
Week 10
Specific feedback: Letters are consistent. Do some changes on the punctuation , and . by removing the serifs as it is unnecessary. Proceed with the next step in FontLab.
General feedback: Update task 3 e-portfolio and watch tutorial on creating punctuations and Illustrator to FontLab demo video.
Week 11
Specific feedback: Good to go, proceed to FontLab. Do changes on the placement of the comma, it should go below the baseline.
General feedback: Make sure to watch all the videos provided before transferring fonts from Illustrator into FontLab.
Week 12
Specific feedback: Letters need to be tighter. Adjust the side bearings according to the chart and using eye. Need some kerning in between 'i' and 'g'. Proceed to poster.
General feedback: Sentences for poster does not have to make sense but the design has to be impactful on the poster. Follow the chart provided to adjust side bearings, only apply kerning if letters are still problematic after kerning.
Week 13
Specific feedback: Good. Out of the 3 designs, Mr Vinod chose #3. He mentioned to balance the small text and do some changes.
General feedback: Make sure to update e-portfolio, start on compiling all 3 tasks into an e-portfolio compilation. Add all 3 tasks' hyperlinks in the final compilation, all hyperlinks should navigate to each task's e-portfolio.
Findings
From my experience designing a typeface from
scratch, I found that it requires a long process to make the designs
perfect, including adjustments to the side bearings and kerning. Mr.
Vinod's feedback and guidance were helpful in improving my work,
especially during the typeface digitalization phase, where I focused on
refining side bearings and applying kerning. I realised that side
bearings and kerning play a crucial role in typeface design to ensure
the final outcome maintains readability.
1. What Font Should I Use? 5 Principles for Choosing and Using Typefaces (Dan Mayer, 2010)
5 Principles:
1) 'Dress for the occasion', picking a typeface is like getting dressed every morning. Pick a typeface that expresses a particular aesthetic/concept.
2) Know your families: Grouping fonts.
3) Decide on how to mix and match fonts/combine fonts, create contrast and make sure they look good together. 1 simple rule: keep the fonts exactly the same or change it a lot.
4) A font that oozes with personality.
5) It is worth trying everything just to see what happens.
2. The Visual History of Type: A Visual Survey of 320 Typefaces (Paul McNeil, 2017)
%20_%20Are.na%20-%20Google%20Chrome%202_12_2024%208_07_19%20AM.png)
Figure 2.2 The Visual History of Type: A Visual Survey of 320 Typefaces
This book shows a detailed survey of the major typefaces produced since the mid fifteenth century to the present day. The typefaces are arranged chronologically to provide context with a brief history and description of key characteristics of the typeface.
This book was highly recommended on the web while I was searching for books and I found a few interesting pages, Universal Type, Chicago and Found Fount / Bits to give this book a read.
Figure 2.3 Universal Type
- Designer: Herbert Bayer (1900-1985)
- Characteristics: Sans Serif, Geometric construction, lower case only and repeated modular forms.
- Herbert Bayer was commissioned by his school's director, Walter Gropius in 1925 to design a typeface to be used for all Bauhaus communications, Herbert Bayer then took this opportunity to test his ideas by developing an idealized, rational alphabet which became his proposal for Universal Type.
Figure 2.4 Chicago
- Designer: Susan Kare (born 1954)
- Characteristics: Variable width, proportionally spaced characters, not monospaced, large x-height, short ascenders and descenders, strong stroke contrast, 'K M N W' Wide, 'a' Arch touches bowl at left, '&' Has flourish and '#%7\*@*" Thin strokes.
- Chicago contains no curves, only pixel staircases, but at a normal reading distance the jagged corners seem smooth and rounded while the main stems and crossstrokes remain straight and evenly spaced.
Figure 2.5 Fount Found / Bits
- Designer: Paul Elliman (born 1961)
- Characteristics: No glyph is ever repeated, glyphs as objects, glyphs as photographic images of objects and glyphs as vectored images of object.
- Found Fount consists of a huge collection of rubbish such as small discarded objects discovered on the street. He uses rubbish in trashcans or in industrial waste without any modification to represent linguistic signs.
Comments
Post a Comment