Typography | Task 3: Type Design and Communication

November 12, 2024

Typography | Task 3: Type Design and Communication

|| 12/11/24 – 10/12/24 (Week 8 – Week 12)

|| Tee Zi Tong, 0366165

|| Typography

|| Task 3: Type Design and Communication

TABLE OF CONTENT

1. LECTURES
2. INSTRUCTIONS
3. TASK PROGRESSION
4. FEEDBACK
5. REFLECTION
6. FURTHER READING

LECTURES

Lecturer have been completed

INSTRUCTIONS

TASK PROGRESSIONS

Description:

Specifically for this project, I will be designing a selected set of the Western alphabet characters looks like. It may sound obvious, but my starting point will be selecting an existing font and adjusting it to a desired style or direction. I will examine it to understand that where it has made without a doubt that the very design of this object has been put through a considerable amount of thought as to where and how it should be constructed and what its characteristics should be. To start with, there will be the initial drawings produced to identify the range of options for a specific case. When my designs are developed to the final stage, I will raster and vectorize them in Adobe Illustrator and then fine tune in FontLab respectively. The artworks will be printed for critique sessions in which refinements will be made according to the comments made. That is why, if I have the time, I would like to apply the font in practice. The goal for me is to design a typeface that is discreet yet unique, fully readable, and visibly assertive.

The characters I’ll be working on include:

letters: (o l e d s n c h t i g , . ! #)

Learning Goals:

Through this project, I aim to:

Increase my skills in the creation of fonts that are both easily readable and which complement each other sensibly.
Design a typeface that will feature specific characteristics and is based on comprehensive research of its precedents.

Letter Dissection:

Based on the project specifications, we were expected to pick a font from the ten offered choices and dissect the H, o, g, and b, letters.

Looking at the types of fonts, I chose Univers LT Std Regular font for this analysis.

Fig 3.1.1, The Measurement of "H o g b"

The following is a summary of the size of letters: Overall, the ascender height of these letters is more significant compared to the cap height in the chosen size of 970 pt, and the x-height is slightly greater in size as reflected below in mm; The baseline and descender height of the letters are also as follows in mm.

Letter "h" Analysis:

Fig 3.1.2, Letter "h" Dissection

Stem:

These vertical stems are to be of equal thickness and show Univers LT Std’s precise sans-serif finery in a structural way.

Ascender:

The ascender height is a little more than the x-height so it helps in vertical proportion and better alignment.

Bowl:

The base is smoothly curved to transition into the wall of the bowl, and where the vertical stem attaches it remains both visually and feasibly integrated.

Counter:

The counter is rather aikylic and S-shaped, which makes it clearly read while keeping the balance between the proportion of the letter and the proportion of the whole form in general.

Proportions:

That is why the ascender and x-height has chosen to be proportionally balanced in order to enhance readability.

The stems are well attached in the baseline to ensure that the design is steady and closely connected to the base.

Letter "o" Analysis:

Fig 3.1.3, Letter "o" Dissection

Shape:

The letter o is slightly oval; modest signs of humanism are present throughout Univers LT Std despite its modernist construction.

Bowl:

A monolinear look is achieved due to the consistent stroke weight of the closed bowl appearing as one unbroken curve.

Overshoot:

A minimal overshoot over the baseline and the cap height eliminates optical illusions, thus making the o appear balanced and native.

Counter:

The inner counter reflects the outer shape in proportional scale thus improves the readability and maintaining the standard design of the typeface.

Proportions:

Equal stroke width will be a stable form and easy to translate.

The balanced wieght of Univers LT Std’s design is thus preserved and is joined in the middle by equally balanced sections.

Letter "g" Analysis:

Fig 3.1.4, Letter "g" Dissection

Stem:

The left line is straight and accurate in descending; it adds a vertical texture to the letter’s particular design.

Loop:

The loop is provided rounded with nice compact form, the connection with the bowl narratives a good balance and smooth transition to the whole composition.

Overshoot:

The descender hardly goes below the baseline so that it does not offset with the forms surrounding it.

Bowl:

It is a fully closed bowl type, interior counter is rounded and has a form continuity with the geometrical rhythm of the letter.

Proportions:

There is continuity between strokes and strokes consistently repeat with the same stress.

This loop is proportioned concerning the overall architecture so that its lettering is legible, and its scale corresponds to the other components.

Letter "b" Analysis:

Fig 3.1.5, Letter "b" Dissection

Stem:

The vertical stem is constantly of the same width throughout the height of the letter providing a sense of weight with a sharply defined vertical median.

Bowl:

The rounded bowl connects evenly to the stem, and shapes a closed counter with organic outlines and proper symmetry.

Counter:

The negative space inside the bowl is circular and somewhat ellipsoidal to facilitate readabilities and integrate better into the font type.

Proportions:

The ascender height is in line with other letters thus giving the benefit of high metrics.

This slightly exceeds the baseline and an optimal cap height in order to achieve a balanced look and correct the optics.

Sketch Letters:

In order to get an idea of what I was going to design, I drew rough drawings at first. After that, I wrote the letters Hogb/ hogb both in large and small letters using three kinds of pens, at least three different styles for each kind of them. To further develop my ideas, I expanded the exploration to include additional letters and punctuation: c, h, t, i, g, e, d, s, n, o, l, being alphabets and , . ! #. In parallel with this process, I have performed research for references and to be able to discover unique forms of writing.

Fig 3.1.1, Sketches 1 Fig 3.1.2, Sketches 2 Fig 3.1.3, Sketches 3

Digitize Letterforms

Later, I endeavored to make the same changes to the case types, scanning and recreating all the letters and punctuation marks in Adobe Illustrator. When working in the outline mode, I made sure that curve of each letter was perfectly executed without jagged edges and untidy shaped of any sort at the junctions of the curve. Then using the shape tool I slowly built the underlying bones of the letters, paying attention to the orientation and relative size as per the sketching motifs. Lastly, I fine-tuned some features by selecting the anchors manually with the Direct Selection Tool on each shape to make the contours neater in order to establish cohesion in the art piece.

In order to give her more choices, I did two different forms of digitization projects and let her choose whether to follow either approach.

Fig 3.2.1, Digitize Words progress with Outline View (Design 1)

Fig 3.2.2, Digitize Words progress with Outline View (Design 2)

In the standard view, after the shape of the letter had been defined, I added the fill and fine-tuned the shapes. To add more curves and make some attempts to smooth out the outlines, I used the Pen Tool. Also, I endeavored to regulate the distance between the characters as well as the space between two consecutive letters. This step made the set of letters and the punctuation to complement each other to have a very neat and synchronized look on the font.

Fig 3.2.3, Digitizing progress (Design 1)

Fig 3.2.4, Digitizing progress (Design 2)

Ms. Vitiyaa choose design 2 and suggested me to add two more letters (b and p) after reviewing my digitization.

Fig 3.2.5, Digitizing progress (with b and p)

FontLab

Then, for every character, I opened the corresponding image in FontLab, scanned barcodes of all the input details, and arranged the characters significantly. Thus, to ensure the right distance between the letters, I evenly aligned the side bearings, thus enhancing the interrelation between different elements of the typeface. After that the changes were made, I exported the final changes to the font and then checked to ensure they were fully functional.

Fig 3.3.1, Importing Fonts to Fontlab 7

After decision making on the vertical dimensioning, I concentrated on the regulation of the bearings and the distance between the font lines. There are small gaps, bearings, that separate characters on both sides and are equally important for legibility and harmony of characters in the considered font. Within each letter, I adjusted the left and right margins as to avoid forming void spaces or combining the contents excessively.

Finally, to improve the feel for the rhythm I carefully fine-tuned the relative amount of space between successive lines the whole font was thus spaced evenly. This ensured that typeface was harmonized because it may not look good when used in different layouts. By tweaking these aspects precisely now when working in FontLab, I was able to achieve perfect balance and readability of the font as well as enhance the overall style making it appropriate for various project areas.

Fig 3.3.2, adjusting letter spacing

Measurement:

Ascender height - 707pt

Cap height - 670 pt

Median height - 495pt

Descender - -205pt

Final Work

Link to download fonts - Circulo.ttf - Google Drive

Fig 3.4.1, Screen Grab of FontLab process

Fig 3.4.2, Final "Circulo" Font Construction (JPEG)

Fig 3.4.3, Final "Circulo" Font Construction (PDF)

<iframe src="https://drive.google.com/file/d/1Mhfznj2lN1e5clCjp92QF_G0K9O4lIIP/preview" width="640" height="480" allow="autoplay"></iframe>

Link to final "Circulo" font construction PDF - Task 3

Fig 3.4.4, Final "Circulo" Font Poster (JPEG)

Fig 3.4.5, Final "Circulo" Font Poster (PDF)

<iframe src="https://drive.google.com/file/d/1yElgiRwbOYoxAIOrUqLUysCA93bz1tR0/preview" width="640" height="480" allow="autoplay"></iframe>

Link to final "Circulo" font poster - Task 3 - Font Poster

FEEDBACK

Week 9

General Feedback: I had to miss this class because of matters that needed my attention. In order not to fall behind in the class, I hope to check any instructions or resources posted in Teams. I will also seek my classmate’s help in order to know what has been done. This will categorically enable me to learn of any new updates and make sure that I do not lag behind in doing the tasks or missing on the coming deadlines.

Specific Feedback: N/A

Week 10

General Feedback: This week in class, a specific note given to us was to check whether our e-profile is updated, neat with all the necessary requirements met. Ms. To this, Vitiyaa added that it is important that the portfolio shows our work as a work in progress and evolving. Further, she urged us to focus on the critiques of our work given by others as the same as the critiques received from him help avoid repeating the mistakes in own work. The main concern was on keeping working on the development of our Task 3 portfolio to moving forward and along pretty well with the project schedule.

Specific Feedback: Ms. Vitiyaa gave useful input on my digitized design as shown below. She said that my words were funny or strange to her, which did not reflect the desired perspective. She explained that it would be maybe wiser for me to go back to a different sketch and design the outcome more in line with what was intended. Furthermore, she suggested that I should put more efforts in making shapes of the words unambiguous and intentional rather than the actions of the Pen Tool. This would serve to filter out the clutter and be more precise when solving design problems thus improving the quality of my designs.

Week 11

General Feedback: I missed this week’s class but tried as much as possible to cover for the topics discussed by communicating with the rest of the group. Ms. Vitiyaa told the class to go download FontLab 7 as soon as we complete that particular lesson. This software is critical as we proceed to the optimization of our letter designs in the next part of the project. She said that to complete the task, we need to get acquainted with the tools that will help in getting through it faster and preparing us for Task 3 and other tasks based on the software.

Specific Feedback: N/A

Week 12

General Feedback: However, I missed this week’s classes I kept updated through friends. Ms. Vitiyaa pointed out that there is a pending e-portfolio Task 3 that should be worked on and submitted by the coming week. She said it was important not to fall behind in class especially when the semester is well under way. To be able to manage the end result of our work to the exterior and demonstrate daily progress, it is pertinent that the portfolio be continuously updated and perfectly arranged.

Specific Feedback: N/A

REFLECTION

Experience

In all stages of this project, I was able to develop specializations in the creating of typography designs and digital arts. I used several programe such as Adobe Illustrator and FontLab which were most important in designing and completing my chosen typeface. Lessons learnt from converting simple drawings into vector forms were equally educative they made understand that every detail that is moved can greatly affect the final look of the design. I tried different structures of the letters and optimized them as many times as possible to come up with simple and effective forms. Moreover, the work on the united typeface and the poster helped me improve the insight on how ideas can be adjusted where typographic consistency and nuanced design is concerned.

Observations

What I realized is that designing a typeface that one has not created from scratch to suit a specific need requires keen attention to detail as a small alteration to curves or angles, letter stemming or even letter kerning can sharply affect the readability and balance of the typeface. It was important to find the smooth aesthetics and functional use of the space, and this was only achievable through several attempts of drawing trying out the use of the tools with different varieties of balance and aesthetics. I saw that varying design experience with different design styles and contexts was crucial to finding out the best solution. Through importing my design into FontLab, I learned aspects like ascenders, descenders as well as the cap-height, and I learnt that these were important in not only technical considerations but usability as well.

Findings

By learning about it, I found out what typography actually is: an art that implements calculation. Virtually every idea that is conveyed through design must be distinguished and must also be correct, functional. This is because once I wrote text messages using the typeface, I was in a position to see any problems that would be hard to note if the typeface was in its digital form. Modifying the spacing and bearings in FontLab also revealed the manner in which such features affected the legibility of fonts within various type sizes and uses. Lastly, this project explained that improvement and optimization are the basis of all products. Finally, through the typeface and the poster, I was able to come up with a design that fulfilled the creative objectives I had set as well as mechanical ones that are most important to ensure success of the project.

Search This Blog

Tee Zi Tong (0366165)