Typography / Task 3: Type Design & Communication
10.11.2023 - 24.12.2023 / Week 7 - Week 13
Bong Sue Zhiun / 0366866
Typography / Bachelor of Design ( Hons ) in Creative Media
Task 3 : Type Design & Communication
.png)
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task
4. Feedback
5. Reflection
1. LECTURES
Refer to :
2. INSTRUCTIONS
3. TASK
Task 3: Type Design & Communication
We are going to design a limited number of western alphabets which are o l e d s n c h t i g , . ! # .
Before that, there are few things that we need to do first:
- Select an existing font design ( the 10 fonts given ) that follows the direction we want to go and analyse the font closely by dissecting its components.
- Start with rough sketches and look over several choices.
- Once approved, start digitising the designs using Adobe Illustrator and FontLab software.
1. Analyse ( Week 7 )
The font I chose to analysis is Futura.
 |
| Fig.3.1.1 Analysing the font , Week 7 , 10.11.2023 |
- H : The two vertical stems of the 'H' are straight and equal thickness.The horizontal crossbar is positioned at the midpoint of the vertical strokes and the thickness of it is not same as the stems.
- o : It is a slightly circular shape. Even width around the entire letter. The stress is vertical.
- g : The strokes are geometrically proportioned. The bowl of the 'g,' is slightly elliptical.
- b : Elliptical bowl similar to the 'g'. A straight, vertical stem that connects to the bowl.
2. Sketches ( Week 7 )
The materials that we are going to use for the sketching: Graph paper and 3 marker pens ( The pen point must be above 3.0 ).
 |
| Fig.3.2.1 Graph paper and marker pens, Week 7 , 10.11.2023 |
Sketch ODHNG using the 3 pens. We have to explore three different writing styles for each of 3 pens. My preferred sketches are 1 & 7.
Fig.3.2.3 &4 (Left) Calligraphy pen 3.0mm, (Right) Sketches#1 , Week 7 , 10.11.2023
Fig.3.2.5&6 (Left) Permanent marker 4.0mm, (Right) Sketches#2 , Week 7 , 10.11.2023
Fig.3.2.7&8 (Left) Brush pen 3.0mm, (Right) Sketches#3 , Week 7 , 10.11.2023
After receiving the feedback from Mr Vinod, I choose #2 and use the same marker pen to write o l e d s n c h t i g , . ! # in the writing style of #2.
 |
Fig.3.2.9, Letters in writing style of #2, Week 8 , 17.11.2023 |
I create guidelines based on 500pt for x-height ( median to baseline ) using the font of Myriad Pro Regular.
 |
Fig.3.3.1, Guidelines, Week 8 , 17.11.2023 |
Measurements (from baseline)
Ascender: 732 pt
Cap height: 696 pt
X-height overshoot: 513 pt
X-height: 500 pt
Baseline: 0 pt
Baseline overshoot: -13 pt
Descender: -215 pt
First Attempt:
Following that, I commence the digitisation of my font based on my initial sketches. I use rectangular tool to create some different widths and heights of rectangles as strokes , subsequently arranging them to form individual letters.
Below are the shapes that I created to compose into the letters:
 |
| Fig.3.3.2, Shapes , Week 8 , 17.11.2023 |
 |
| Fig.3.3.3, Composing shapes into letters, Week 8 , 17.11.2023 |
 |
| Fig.3.3.4, Outline of the letters, Week 8 , 17.11.2023 |
Fig.3.3.5&6, (Left) Unite in Pathfinder, (Right) Unite into individual letters, Week 8 , 17.11.2023
 |
| Fig.3.3.7, Outline of merging all letters, Week 8 , 17.11.2023 |
I use direct selection tool to adjust the corners that I want to be rounded.
 |
| Fig.3.3.8, Make the corner rounded , Week 8 , 17.11.2023 |
 |
| Fig.3.3.9, Outlines , Week 8 , 17.11.2023 |
First Attempt
 |
| Fig.3.3.10, First attempt with guidelines , Week 8 , 17.11.2023 |
 |
| Fig.3.3.11, First attempt of digitisation , Week 8 , 17.11.2023 |
Second Attempt ( Week 9 ):
To give my previous work a special touch, I tweaked it a bit – made the left side of the letter thicker and the right side thinner.
Below are the shapes for the second attempt:
 |
| Fig.3.3.12, Shapes ( second attempt ) , Week 9 , 24.11.2023 |
 |
| Fig.3.3.13, Composing into letters ( second attempt ) , Week 9 , 24.11.2023 |
 |
| Fig.3.3.14, Outlines ( second attempt ) , Week 9 , 24.11.2023 |
Since the Direct Selection Tool isn't applicable for adjustments in certain corners, I watched a tutorial video that demonstrated an alternative method for rounding corners. Therefore, I decided to follow the steps from the video to achieve rounded corners in my work.
Tutorial: How to round corners , Week 9 , 24.11.2023
Steps:
- Align the circle to the corner we want.
- Select both the circle and the object, then click "Divide" in the Pathfinder menu.
- Remove the unnecessary area.
- Use "Unite" in the Pathfinder menu to combine the circle and the object.
 |
| Fig.3.3.15, Process of rounding corner followed the tutorial above , Week 9 , 24.11.2023 |
 |
| Fig.3.3.16, Outlines after rounding the corners( second attempt ) , Week 9 , 24.11.2023 |
Second Attempt
 |
| Fig.3.3.17, Second attempt with guidelines and grids , Week 9 , 24.11.2023 |
 |
| Fig.3.3.18, Second attempt of digitisation, Week 9 , 24.11.2023 |
Third Attempt ( Week 10 ):
After the feedback session, I implemented the changes that were highlighted by Mr Vinod. I adjusted the height of 't' to align it with the correct height.
 | |
|
To sharpen the right corner part of 'g,' I utilised the rectangular tool. I created a rectangle on the curved corner and then used "Unite" in the Pathfinder tool to merge them together.
 | |
|
This week, the task is to continuously improve and perfect our letters until we are completely satisfied with the outcome. I'm quite pleased with how things turned out, and I only made a very small tweak to my final result.
1. comma
I wish to make the bottom-right corner of the comma smoother.
 | |
|
 | |
|
 | |
|
2. The letter 'g'
 | |
|
 | |
|
 | |
|
 | |
|
 | |||
|
 |
| Fig.3.3.30, Third attempt of digitisation, Week 10 , 1.12.2023 |
Final Attempt ( Week 11 )
I made some minor adjustments to enhance the perfection of my font.
* The figures below show the before-and-after comparison, with each left side representing the initial state and each right side representing the modified version.
Fig.3.3.31 & 32, Adjust hashtag & comma to the correct format, Week 11 , 8.12.2023
 |
| Fig.3.3.33, Shorten the cross stroke of 't', Week 11 , 8.12.2023 |
Final Outcome
 |
| Fig.3.3.34, Final Typeface design, Week 11 , 8.12.2023 |
4. Developing final font in Fontlab 7 ( Week 11 )
After finalising my font design, I watched Mr. Vinod's demo video to learn how to develop and export the font on Fontlab 7.
Fig.3.4.1&2, Import the letters oledsnchig,.!# from Illustrator into Fontlab 7, Week 11, 8.12.2023
Progress of kerning
 |
| Fig.3.4.3, Kern the letters oledsnchig,.!# , Week 11, 8.12.2023 |
 | |
|
I chose the name 'Bongbloc' for my font, incorporating my surname 'Bong' and reflecting the cube-like appearance of the font.
5. Poster Design ( Week 11 )
I've generated multiple poster designs for my font using the text 'silent night, golden echoes!' showcasing the font I've designed.
 |
| Fig.3.5.1, Poster#1 , Week 11, 8.12.2023 |
 |
| Fig.3.5.2, Poster#2 , Week 11, 8.12.2023 |
 |
| Fig.3.5.3, Poster#3 , Week 11, 8.12.2023 |
After receiving the feedback from Mr Vinod, I create another new poster design that is more impactful.
 |
| Fig.3.5.4, Poster#4 , Week 12, 15.12.2023 |
Font Tester
Try to type out the characters: o l e d s n c h t i g , . ! #
Final Task 3: Type Design & Communication
Download font here: https://drive.google.com/file/d/1_qITd5ceGus5kPboG6sNctUAzY9WFiuM/view?usp=sharing
 |
| Fig.3.6.1, Screenshot on Fontlab, Week 12, 15.12.2023 |
 |
| Fig.3.6.2, Final Font Design ' Bongbloc Regular ' ( JPEG ), Week 12, 15.12.2023 |
Fig.3.6.3, Final Font Design ' Bongbloc Regular ' ( PDF ), Week 12, 15.12.2023
 |
| Fig.3.6.4, Final Poster ( JPEG ), Week 12, 15.12.2023 |
Fig.3.6.5, Final Poster ( PDF ), Week 12, 15.12.2023
4. FEEDBACK
Week 8 ( Sketches )
Specific Feedback: I should not change the angle of my pen when writing #1. I have to practice more.
Week 9 ( Digitise )
Specific Feedback: The font is consistent but not unique. I might try making one side of the letters thicker and another side thinner to give it a distinctive look. Designing the font with grids is useful to keep the thickness consistent.
Week 10 ( Digitise )
General Feedback : Always refer to the existing typeface to ensure the font's accuracy and consistency.
Specific Feedback: There is consistency maintained across the letterforms. The right corner of 'g' don't need to be curved and the height for 't' is not correct. The 't' is typically taller than the x-height, but shorter than the ascender on most typefaces because of the way it is designed.
 |
| Fig.4.1, The mistakes on 't' & 'g', Week 10 , 1.12.2023 |
Week 11 ( Digitise )
Specific Feedback: The comma looks a bit weird, and the hashtag needs the right format. Once I fix these, the letters will be ready for importing into FontLab 7.
Week 12 ( Poster )
Specific Feedback: The font seems consistent in FontLab 7. Try to create more impactful poster designs. For poster #3, there are too many negative spaces between the words.
5. REFLECTIONS
Experience: Creating a font was trickier than I thought. Sketching the letters on paper was tough because I had trouble making them look the same and flow smoothly. When it came to digitising them, it brought a whole new set of challenges. When I was digitising the font, I wasn't really sure about the style I wanted. It was a bit tricky because I had to figure out the exact look and feel while moving from paper to digital. It took some time to decide on the final style that I felt good about. My feelings about my typeface are a bit mixed, but I feel proud of what I accomplished. It's my first step into typeface design, and even if it's not perfect, it's a starting point for me to learn and get better.
Observation: Through this process, I noticed that even the smallest details in font design matter a lot. Every curve and stroke played a role in how the font looked and how easy it was to read. I saw that making a font wasn't just about being creative; it needed a good mix of creativity and technical know-how. Looking at expert font designs, I realised how much precision goes into making fonts look just right.
Findings: The big lesson from designing this font was understanding the basics of typography. It's not just about making good-looking letters but knowing how they work together. This understanding guided me in refining the font, making sure each letter fits well with the others in both style and function.
6. FURTHER READING
 |
| Fig.6.1 Typographic Design: Form And Communication ( 6th Edition ), Week 7 , 10.11.2023 |
Typographic Design: Form And Communication ( 6th Edition ) is written by Rob Carter, Sandra Maxa, Mark Sanders, Philip B. Meggs & Ben Day.
Proportions of the letterform
There are four major variables control letterform proportion.
1. Stroke-to-height ratio
- The ratio of letterform height to stroke width is a crucial factor in typography.
- In Roman letterforms, the stroke-width-to-capital-height proportion is traditionally ten times the stroke width.
- Modifying this ratio, such as reducing or expanding stroke width, significantly affects the weight and appearance of the letterform.
 |
| Fig.6.2, Stroke to height ratio , Week 7 , 10.11.2023 |
2. Contrast in stroke weight
- Changes in the contrast between thick and thin strokes can impact the visual qualities of letterforms.
- Historical evolution, influenced by technology and printing advancements, has allowed designers to create typefaces with thinner strokes.
- The Old Style typography of the Renaissance, inspired by pen writing, featured pronounced stroke thickness variation, especially on curves.
3. Expanded and condensed styles
- The design of a typeface undergoes substantial changes when letterform widths are expanded or condensed.
- Extreme examples, such as the word "proportion" set in different sans serif typefaces, illustrate the dramatic impact of stroke-to-height ratio variations.
- Expanded styles (e.g., Aurora Condensed) and condensed styles (e.g., Information) with different stroke-to-height ratios occupy varying amounts of space on the page.
4. X-height and proportion
- The proportional relationship between x-height and capital, ascender, and descender heights plays a significant role in the optical qualities of typography.
- Setting the same characters in different typefaces with varying x-heights demonstrates how proportional relationships influence the overall appearance of type.
- The impact of x-height on legibility is a key consideration, with different x-heights influencing how text is perceived and read.
 |
| Fig.6.3, X-height and proportion , Week 7 , 10.11.2023 |
Comments
Post a Comment