Typography Task 3 / Type Design & Communication
26.05.2023 - 29.06.2023 (Week 8 - Week 13)
Sorcha Griselda / 0353056
Typography / Bachelor of Design in Creative Media / Taylor's University
Task 3 | Type Design & Communication
LECTURES
Refer to Task 1
Typo Task 3A Typeface Construction (Shapes)
During the deconstruction process (Figure 1.1), we can examine the subtle differences as well as details of how the letterform is produced.
 |
| Figure 1.1 Deconstruction Process by Mr. Vinod |
The image below shows that the letter 'd' is known as 'Overshoot' since the circular area of the bowl surpasses the x-height below and above. This is because rounded forms appear smaller since they have less surface area than flat-edged forms. As a result, the curve areas tend to exceed the x-height of the letterform's borders.
 |
| Figure 1.2 Guidelines for Designing Letterforms |
There are two ways to design the typeface letterforms: Shape Tool and Pen Tool.
 |
| Figure 1.3 Demonstration of Using Shape Tool |
Important notes:
- Artboard settings: 1000 x 1000 points
- Size of the x-height (by creating a box): 500 x 500 points
- Font design need to follow the terms of Typography, including X-height, ascender height, descender height, cap line and many more.
- The size of the counter space/aperture is usually the same as the size of the stroke. If we want more streamlined letterforms, we can reduce the stroke to half.
- Unite base shapes: Pathfinder > Unite
- Remember the curvatures setting to achieve consistency.
Typo Task 3A Illustrator to Fontlab5 Demo & Fontlab 7 Demo
- Always measure the height of the letters which can be done by creating box):
- Cap height
- Ascender height
- Descender height
- Once the measuring is done, make sure to combine the letterforms and there are no anchor points that are too close within each other.
- combine the letterforms using Pathfinder > Unite Tool
- In FontLab:
- go to File > Create a new font file
- File > Font Info > Names (to name our own font)
- File > Font Info > Family Dimensions and Font Dimensions to key in the ascender height, descender height
- It is recommended to include underlines beneath the descender.
- Side Bearing = Left and Right Bearing
- Individual kerning for the pair, so that when we type the letters, the kerning for the specific pair will be utilized.
- Export it as TTF (True Type Font) File
INSTRUCTIONS
Task 3: Type Design & Communication
For task 3, we are tasked to design a limited number of western alphabets. We could use an existing font design that is related to the direction that we want to follow. To start, we need to do the preliminary sketches and then continue to digitization upon approval. "You will endeavor to create a typeface that has the hallmarks of a good typeface: subtlety, character, presence, legibility and readability. Upon competition of the font, you will create a basic A4 size poster displaying your font." The letters that we will design for this task are a e t k g r i y m p n ! # , .
(a) Visual Research
Before I began working on my sketches, I did some research and looking through Google Fonts for some inspiration. Since I did not have any specific idea on what type of style I wanted to create, I tried to look at different styles that a can be found on Google Fonts.
 |
| Figure 2.1 Google Fonts Visual References (19.05.2023) |
After browsing thoroughly, I was influenced by the idea of creating a 'handwriting' type design. I also conducted some further reading (see Fig 6) in order to help me in creating my own typeface.
 |
| Figure 2.1 Google Fonts Visual References [handwriting category] (19.05.2023) |
(b) Exploration and Sketches
After doing some research, I came up with the following five written sketches using five different tools. The tools that I used are: Pentel Touch (super fine), Mildliner Brush, Milliner Bold (semi-broad), Sharpie (fine point), cotton buds with using blank ink.
 |
| Figure 3.1 First Exploration Using Five Different Tools (26.05.2023) |
 |
| Figure 3.2 First Written Sketch Using Five Different Tools (26.05.2023) |
 |
| Figure 3.3 Second Written Sketch | after writing it along the baseline (26.05.2023) |
As this was my first time creating a type design, I decided to create something simple in order for me to be able to execute it properly. Initially my first pick is the second one as I wanted to develop a brush-looking font. However, after getting feedback from Mr. Vinod, I choose sketch #3 as he said that it is much better in character.
 |
| Figure 3.4 Final Sketch Option (02.06.2023) |
(c) Deconstruction
Out of the ten available typefaces, Futura Std (Bold Condensed) is the typeface I chose as a reference for me to later deconstruct on. I decided to deconstruct on Futura's letters 'm' and 't' as I believed that they were the most close to my sketch in terms of the disparity in stroke widths.
 |
| Figure 4.1 Deconstructed 'm' | Futura Std (05.06.2023) |
 |
| Figure 4.2 Deconstructed 't' | Futura Std (05.06.2023) |
After analyzing these letters closely, I have noticed that despite their outward similarity, there are distinct differences between them, particularly in the shape of the 'm' and 't; curves.
(d) Digitization
Once I had analyzed the structure of the letters, I proceeded to create my own. Initially, I established the guidelines for the baseline, x-height, ascenders, descenders, and cap height. Then, I utilized the brush tool to construct the letter 'a', which served as the foundation for designing the remaining letters. I focused on completing the entire set of letters and punctuation marks without making any customizations.
 |
| Figure 5.1 Construction of the letters (09.06.2023) |
 |
| Figure 5.2 Digitization Process (12.06.2023) |
Following that, I commenced the process of personalizing the letters to align them with my initial sketch.
 |
| Figure 5.3 Digitization Process Feedback (16.06.2023) |
After receiving feedback from Mr. Vinod, I proceeded to address the necessary adjustments to the letters.
Final Outcome
 |
| Figure 5.4 Final Digitized Typeface | JPEG (20.06.2023) |
Measurement
Acender: 733 pts
Cap Height: 696 pts
X-height: 500 pts
Descender: -205 pts
(e) Illustrator to FontLab
After completing my typeface design using Adobe Illustrator, I started to develop and export my font using FontLab.
 |
| Figure 6.1 Unite Base Shapes of the Letterform (20.06.2023) |
 |
| Figure 6.2 Copying and Pasting the Letters into Fontlab 8 (21.06.2023) |
 |
| Figure 6.3 File > Font Info > Names [Inkspire SG] (21.06.2023) |
 |
| Figure 6.4 File > Font Info > Family Dimensions (21.06.2023) |
 |
| Figure 6.5 File > Font Info > Font Dimensions(21.06.2023) |
 |
| Figure 6.6 File > Font Info > Note (21.06.2023) |
 |
| Figure 6.7 File > Font Info > Legal (21.06.2023) |
Once I had inserted all the letters into Fontlab8, I proceeded to perform individual kerning for each glyph within the metrics tab, following the instructions shown in the provided demo video. Subsequently, we were instructed to export and install our fonts onto the laptop for the purpose of creating an A4 poster.
 |
| Figure 6.7 Fontlab 8 Screen Grab (23.06.2023) |
The sentence that I decided to use for my A4 poster is: get my !nk, type my art.
 |
| Figure 6.8 Final Poster | JPEG Format (23.06.2023) |
Final Task 3: Type Design & Communication
 |
| Figure 7.1 Screen grab of "New Metrics Window" with sentence (23.06.2023) |
 |
| Figure 7.2 Final Digitized Typeface | JPEG Format (20.06.2023) |
Figure 7.3 Final Digitized Typeface | PDF Format (20.06.2023)
 |
| Figure 7.4 Final Poster | JPEG Format (23.06.2023) |
Figure 7.5 Final Poster | PDF Format (23.06.2023)
https://drive.google.com/file/d/1HmnrHkqaNUw-_Kd8saeYGM9gzTwQMyc-/view?usp=drive_link
FEEDBACK
Week 8 | Independent Learning Week
Specific feedback: Mr. Vinod suggested that the third tool has a better character. I also should practice more writing in that style, so then I can later identify the best letters that I can use for digitization.
Week 9 | General feedback: Mr. Vinod reminded us to write the letterforms on the baseline and it is important for us to understand the typography's anatomy when formatting the letterforms.
Specific feedback: Always remember that the end result does not need to be similar as the initial letterforms' sketch.
Week 10 | General feedback: The digitizing of the sketch is just the beginning of the process. Use the same strokes (vertical/horizontal/diagonal/curve) for each letter, so it would look consistent. For the curve stroke, you may create two versions: baseline to cap-line and x-height to baseline. Look up on Google Font for inspiration that resembles your font the closest.
Specific feedback: Excellent work on the refined strokes, but Mr. Vinod reminded me to pay attention on some minor details of the fonts.
Week 11 | General feedback: Never lose the touch of the original writing strokes, however keep in mind to always follow the convention of writing.
Specific feedback: The letter 'k' is too complicated, and the tail is too long. The ascender of the letter 'k' should reach the ascender. The letter 'y' needs to be more refined. The '#' is wrong and needs to be drawn again.
Week 12 | General feedback: Understand the balance between the white space and dimension of the poster.
Specific feedback: The second poster idea seems to be more interesting, however adjust the placement of the fonts to create an impact.
REFLECTION
Experience
In comparison to the previous tasks, I believe this is the most challenging task as there are a lot of steps that need to be done while paying attention to each details. At first, I thought that developing typefaces is going to be enjoyable and easy. However, I was completely mistaken after proceeding with this task. To be honest, this task was quite stressful for me as I need to continuously polishing the fonts and adding small details to them. Nonetheless, I was able to develop my own font design through this experience.
Observations
Throughout this assignment, I learned how to design typeface in Adobe Illustrator using the shape and pen tools, as well as how to import the font into FontLab to adjust the side bearings and kernings. I observe that there are various approaches to designing typefaces. Not only that, I notice that there are a lot of unique typefaces designs as I looked the work of my classmates. As a result, I feel like I have grown more conscious of the typefaces around my surroundings, knowing how much work goes into the design.
Findings
I find that I learned the most during this task as I need to make my typeface from sketch and followed by the digitization. Furthermore, I have discovered that several font designs appear aesthetically similar but they are actually not. Each letter has its own set of traits and subtleties. Overall, I must say that I learned a lot of technical skills while developing my typeface as this task required a good amount of technical abilities in order to produce a good typeface's design.
FURTHER READING
 |
| Figure 8.1 Typography Referenced |
"Typographic Referenced" is a comprehensive typography and typeface design reference book. It covers a wide range of topics, from typography history to contemporary design practices. Furthermore, it also includes over 1800 illustrations and delves into the creative process of some of the world's most prominent designers. The book is a great resource for anyone who is interested in typography.
 |
| Figure 8.2 Type Design and Development | From a Letter to a Typeface [page 38-39] |
Type Design and Development | By Gerry Leonidas
It is not difficult to create a single or a few letters. However, in order to create a complete alphabet, a designer must balance complementary and contrasting elements over a wide character set. The first stage in creating a new typeface is ensuring that the variety of shapes combine to make a coherent whole. This underlying homogeneity distinguishes typefaces from letters and enables for the incorporation of distinctive elements that add individuality and style while retaining readability.
 |
| Figure 8.3 Type Classification and Identification by Allan Haley [page 52-53] |
Type Classification and Identification | Allan Haley
Most typefaces are classified into three types: those with serifs (small feet and tails), those without serifs, and scripts (intended to resemble cursive handwriting). Many more definitive classification systems in which some with more than 100 distinct categories have been created. A classification system could assist in the identification and combination of distinct typefaces. Though three categories may be insufficient, hundreds of them become self-defeating.
.png) |
| Figure 8.4 Typographic Design: Form and Communication, 6th Edition |
 |
| Figure 8.5 The Anatomy of Typography | Letterforms Analyzed (page 32-33) |
Chapter 2: The Anatomy of Typography | Letterforms Analyzed
Over time, an alphabetical system that identifies the many components of distinct letterforms has developed. Designers and typographers can have a better knowledge and sensitivity to the visual harmony and complexity of the alphabet by acquiring this terminology. Horizontal guidelines were used in medieval times to restrict and align each line of letters. To add uniformity to typography, letterforms and t heir pieces are now drawn on imaginary guidelines. All characters are optically aligned on the baseline.
 |
| Figure 8.6 Typographic Design Process (page 242-243) |
Drew had to extract these different inspirations and studies from their original context in order to convert hem into a typeface. By establishing a modular grid, a structural framework was enforced that organized these disparate inspirations and defined Ludd's visual vocabulary. It was critical to the process to remain open to new findings and diverse combinations. Several letterforms are out of the ordinary, with a quirky incompleteness and progressive typographic appearance.
Comments
Post a Comment