Typography / Task 3 : Type Design & Communication

5/11/2024  - 10/12/2024 (Week 7 - 12)

Rachel Ng Jie Ting/ 0378902

Typography/ Bachelors of  design (Honours) in creative media

Task 3 : Type Design & Communication


Table of content


Lectures

Instructions

Feedback

Reflections

Further reading



Lectures

It's in Task 1


Instructions

<iframe allow="autoplay" height="480" src="https://drive.google.com/file/d/14IDwGxpS5EDzyiNH3i-cGhPgyP-0GHDQ/preview" width="640"></iframe>


Task

  • You will be tasked to design a limited number of western alphabets. To begin, choose an existing font design that adheres to the direction that you would like to head in. Study the font carefully by analysing its anatomical parts.  
  • Start with rough sketches, explore a variety of options and upon approval begin digitization of the drawings—software for digitization Adobe Illustrator and later FontLab. Artworks shall be printed out for critique sessions followed by refinements. If time permits we shall generate the font for actual use. 
  • You will endeavour to create a typeface that has the hallmarks of a good typeface; subtlety or character, presence, legibility and readability. Below are the letters you will design: o l e d s n c h t i g , . ! # 
  • Upon completion of the font, you will create a basic A4 size poster displaying your font (further instructions in class). 



Task 3 : Type Design & Communication

Select a preferred font from the 10 fonts provided. Using the following letters H,o,g,b, do a detail dissection of the letters (see attached) in Adobe Illustrator (artboard size: 1000pt x 1000pt). Write your observations in the eportfolio). 

Sketch the following letters HOGB / hogb (in both lowercase and uppercase) using the 3 different pens. 

Explore at least 3 different writing styles for each of the 3 pens. Note: don't draw your letters, write them.



Fig 1.1 - Different writing style examples



Additional reference for TASK 3: the writing tools and letterform styles. Resource: Typography: theory in practice (notes & thoughts), Keith Tam (2014).

1. The broad-edge pen  (aka. flat nib)

2. The flexible pointed pen (aka. pointed nib / brush)

3. The pointed pen (aka. ball point pen, rounded felt-tip)



Fig 1.2 - Additional reference 




Research

Before beginning, I looked up many different fonts designs to gather ideas and inspiration. 





Fig 1.3 - Top font designs from Dafont.com, Week 7 (7/11/2024)


Sketches

Then, we had to test out writing the word 'HOGB/hogb' on a graph paper, by exploring at least 3 different writing styles with 3 different types of pens, that is the Fine Tip Marker, Chisel Tip Marker, and Calligraphy Brush Tip Marker.

First, I tested some of the writing styles with the 3 pens. This is also the first time I used a chisel tip marker.


Fig 1.4 - Testing and learning how to using new pens, Week 8 (15/11/2024)


Then, for each of the 3 pens, I picked out some writing styles I liked the best.


Pen 1 : Fine Tip Marker


Fig 1.5 - Writing styles with Fine Tip Marker, Week 8 (15/11/2024)

Pen 2 : Chisel Tip Marker


Fig 1.6 - Writing styles with Chisel Tip Marker, Week 8 (15/11/2024)

Pen 3 : Calligraphy Brush Tip Marker


Fig 1.7 - Writing styles with Calligraphy Brush Tip Marker, Week 8 (15/11/2024)


Deconstructing

We were to select a preferred font from the 10 fonts provided. Using the following letters H,o,g,b, do a detail dissection of the letters in Adobe Illustrator (artboard size: 1000pt x 1000pt). Then, we are to our observations in the eportfolio.

For this part, I chose the font "Futura Std Book" 



Fig 1.4 - h,o,g,b letter analysis, Week 9 (22/11/2024)


Observations

  • Seemingly perfect geometric forms make up character shapes the Futura typeface
  • True to the sans-serif style, Futura Book has no serifs, giving it a smooth, uninterrupted flow, ideal for both display and body text.
  • Low x-height, with tall ascenders
  • Monolinear: vertical and horizontal strokes are the same weight in each stroke weight.


Fig 1.5 - h,o,g,b letter analysis (more detailed), Week 9 (22/11/2024)


Digitisation 

For digitisation, I choose to digitise the 2nd writing style using the fine tip marker. First I wrote down the letters o l e d s n c h t i g , . ! # in that writing style as a guide for me to look at while digitalizing in adobe illustrator.

I have shortlisted 2 design and after some adjustments, I chose to digitize the top row design because it looked cooler.


Fig 1.6 - Font guide for digitization, Week 9 (24/11/2024)


Then i started building my typeface design in illustrator.



Fig 1.7 - building letter design, Week 9 (24/11/2024)



Fig 1.8 - using grids and checking raw shapes, Week 9 (22/11/2024)



Fig 1.9 - digitized version 1, Week 9 (24/11/2024)



Finishing the first version, I realized that I didn't like the look of the letter 'i', so I came out with a few alternative designs and selected the design on the left at my new 'i' design.



Fig 1.10 - new 'i' designs, Week 10 (24/11/2024)



I have also made some adjustments to the comma after reading up on some notes that shows how to design punctuations. Apparently, the downstroke terminal's angle could be related to the angle in the 'S'.



Fig 1.11 - new comma design, Week 10 (24/11/2024)



Then, I measured the height of the fonts from the baseline for kerning and adjustments in Fontlab7 later.

Measurements (from baseline)
Ascender: 939 pt
Cap height: 872 pt
Median: 500 pt
Descender: - 439 pt


Fig 1.12 - Guides and measurements, Week 11 (29/11/2024)





Final Type Designs



Fig 1.13 - Final Type Design, Week 11 (29/11/2024)




Importing to FontLab7

After finalising the design of my typeface on Illustrator, I began the process of developing and exporting my font using FontLab7.

However, after importing the letters, and kerning each of the glyphs as instructed, I realised that some of the letters sit very awkwardly next to each other due to my design (Example: The letter "l" looks very weird when sitting on the left of "o" "e" "n" and "c"), which I had not noticed while designing my typeface.



Fig 1.14 - FontLab Process #1, Week 12 (10/12/2024)



Therefore, I went back to Illustrator and readjust the letter "l". While doing so, my friend had pointed out to me that the size of my letters where too small.



Fig 1.15 - The letter "l" adjustments in Illustrator, Week 12 (10/12/2024)


Thus, I repeated the entire importing process on FontLab again, this time with the correct font size.




Poster

After exporting my font, which I decided to name 'Simple Tech', and installing it on my laptop, I created a poster as instructed.



Fig 1.16 - Poster making in Illustrator, Week 12 (10/12/2024)




FINAL 

Download font here: 

Measurements (from baseline)
Ascender: 939 pt
Cap height: 872 pt
Median: 500 pt
Descender: - 439 pt



Fig 1.17 - FontLab Screengrab, Week 12 (10/12/2024)





Fig 1.18 - Final Task 3A: Type Design and Communication "Simple Tech" (jpg), Week 12 (10/12/2024)





Fig 1.19 - Final Task 3A: Type Design and Communication "Simple Tech" (PDF), Week 12 (10/12/2024)





Fig 1.20 - Final Poster Black (JPG), Week 12 (11/12/2024)





Fig 1.21 - Final Poster White (JPG), Week 12 (11/12/2024)





Fig 1.22 - Final Poster Black and White (PDF), Week 12 (11/12/2024)



Feedback

Week 7: 

General feedback : Finish Task 2 e-portofolio and by today and submit design layouts on the Facebook post in the Typography Facebook group. We also have to watch the YouTube video regarding the next task with the markers and graph papers.  

Specific feedback : (Regarding task 3)  Need to fix the leading issues. Bold and Italic sentences cannot be continued with regular sentences, must bring the regular sentence down.


Week 8: 

General feedback : -

Specific feedback : -


Week 9: 

General feedback : -

Specific feedback : Design looks nice.


Week 10: 

General feedback : Complete Task3 e-portfolio until next week. Refer to other student's feedback and don't make the same mistakes, otherwise your e-portfolio will be 0.

Specific feedback : The comma design can be based on the "s" or "g"


Week 11: 

General feedback : Give feedback in TES. Update E-portfolio. After using Fontlab 7 demo on your own computer, you can use the computers in D7. 04 that has the complete version to finish your work.

Specific feedback : -


Week 12: 

General feedback : -

Specific feedback : Looks great. Remember to showcase the text design in a poster, including the period, comma, number sign, and exclamation mark.


Reflections

Experience :

I had fun designing new type designs. I myself prefer simple and clean type designs. When I started designing my type design, I found out that simple sometimes can be hard to design, I had to change the design of the letter "i" many times because It didn't look right and it didn't fit in with the rest of the design.


Observations :

During class time, I get to see my friend's works. By looking as how they designed their typefaces, from simple to complex, artistic to minimalistic, I was inspired and thought of new ideas and design for my own works. 


Findings :

Slanted type designs are slightly harder to digitize as compared to upright type designs. Designing letters such as "i" and "t" require a bit more care a thought to make them fit in with the other letters, while still looking unique. Overall, designing a new typeface is not an easy process, a lot of care and thought goes into every single letter and symbols.




Further reading

Week 8 :  Typographic design: Form and communication (2015)

Picture :



Fig 2.1, Typographic design: Form and communication (2015)


Summary :

This week, I have referred to chapter 2, the anatomy of typography, to assist me in task 3. First, I started with sub chapter "letterforms analyzed"


Fig 2.2, The Anatomy of Typography: letterforms analyzed,  (Page 33)

I used this page to help me identify and analyze the 4 letters. Each letter has specific parts, like the stem, stroke, counter, ascender, descender, and serifs, which all contribute to its identity. By analyzing these parts, it helps me to understand the form and functionality of each character and how they create a cohesive typeface.













Comments

Popular Posts