Typography: Task 3

10/10/2023 to 21/10/2023 / Week 7 - Week 12
Raida Abdoul Kader / 0353038
Typography / Bachelor of Mass Communication / School of Media and Communication
Task 3: Type Design & Communication

---

LECTURES

Week 6: Lecture 6 

SCREEN & PRINT

Typography exist in all form and shape nowadays

Print type vs Screen Type

Type for print:

Type: intended for reading from print long before we read from screen. The designer’s job is to ensure that the text is smooth, flowing, and pleasant to read.

Good typeface for print: Caslon, Garamond, Baskerville

 

Type for screen:

Typefaces intended for use on the web are optimized and often modified to enhance readability and performance on screen. With a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, or modified curves and angles for some designs.

However today most screens have good resolutions, therefore a lot of these problems that used to be there are no longer there. There are still typefaces that are specifically designed for screen (example: Vadana, Georgia)

Hyperactive Link/ hyperlink

Hyperlink: a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. They are found in nearly all Web pages, allowing users to click their way from page to another. They are blue and underlined by default. 

Hyperlinks exist on social media as well, hashtags are a form of hyperlinks

System Fonts for Screen/ Web Safe Fonts

Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Sidebearing chart:

The chart helped us to adjust our sidebearings of our font in FontLab.

---

INSTRUCTIONS

Task 3: Type Design & Communication

For this task we were asked to design a limited number of western alphabets and punctuations:
a e t k r g i y m p n ! # , .

Inspiration & Sketches:

I started by searching for fonts on Pinterest and Google fonts.

Fig 1.1 Inspiration from Pinterest 05/10/2023

Fig 1.2 Inspiration from Goole Font 05/10/2023

Then I started to sketch my letters using a thick pens. When drawing our letters, Mr Vinod advised us to stay consistency in structure and style of our letters and to not complicate it too much.

Fig 2 Sketch 05/10/2023

Digitalization of letterforms:

I used Adobe Illustrator to create my letters based on my references and my sketches. For my base I created these guides by following the demo video by Mr. Vinod, we used the letters Tyd with a 500 point size so the Median line is 500 pt.

Fig 3.1 AI process 16/10/23

First attempt:

At first, I decided to just experiment, to be able to understand how to create my letters. I had a bit of difficulty at the beginning, so I created different shapes like the rectangles below in order to create my first draft of letters.

Fig 3.2 AI process 16/10/23

Fig 3.3 AI process 16/10/23 

Second attempt:

However, I was not satisfied with this first draft, and Mr. Vinod advised me to experiment further. Consequently, I continued my research for inspiration and decided to take inspiration from Passion One and Lilita One. To achieve this, I used the same method, constructing shapes as a foundation for shaping my letters.

Fig 4.1 AI process 31/11/23

I created more letters than necessary, just to experiment a bit and see if I like it or not. 

At first, I had difficulty creating the letters 'c' and 'e,' so Mr. Vinod showed me how to do it and advised me to use the letter 'o' as a base.

Fig 4.2 AI process 31/11/23

In the end, I was quite satisfied with my font, so I finalised the letters and punctuations we were instructed to create.

Fig 4.3 Font design 07/11/23

Fig 4.4 Font with measurements 07/11/23

Measurements (from baseline)

Ascender: 748 pt

Capital height: 620 pt

Median: 500 pt 

Descender: - 240 pt

FontLab 7:

After finalizing my letters on Adobe Illustrator, I downloaded FontLab to generate the font.

Fig 5.1 Fontlab process 07/11/23 

I used Fontlab to adjust the sidebearings of my letters by using a chart that Mr. Vinod provided. 

Fig 5.2 Fontlab process 07/11/23

Creating the poster:

Finally, after completing everything, we had to create an A4 size poster showcasing our font. I exported and installed the font and used Adobe Illustrator to create the poster.

To showcase all my letters, I tried to explore with different the sentences.

Fig 6 poster design in AI 14/11/23

Finals: 

Fig 7.1 Final Type design - pdf form - 21/11/23

Fig 7.2 Final poster design - pdf form - 21/11/23

Fig 7.3 Final poster design - jpeg form - 21/11/23

Fig 7.4 Final poster design with image - pdf from - 23/11/23

Fig 7.4 Final poster design with image - jpeg form - 23/11/23

Font:

---

FEEDBACK

Week 7:

General Feedback: Even the smallest change can make a big difference in your letter. Stay consistent and don't be restricted by your sketches. 

Specific Feedback:

Week 9:

General Feedback: Object - Path - Outline Stroke = strokes to shape

Week 10:

Specific Feedback: Create the letter o first, you can use it as a base for e and c

Week 11:

Specific Feedback: For the poster make sure to balance the white space.

Week 12:

General Feedback: The more dramatic it looks, the better the poster is

Week 13:
Specific Feedback: Adjust the i, there is a design problem

The poster has to make an impact, use a bigger font size

---

REFLECTION

Experience: At first, I didn't really understand the task; I was a bit confused with the instructions. For example, the very first sketches I made did not correspond at all to what Mr. Vinod asked us to do. Afterward, I began to understand, but it took me some time to find fonts that inspire me. This assignment was quite challenging however, in the end, I am quite satisfied with the fonts that I designed. 

Observation: Creating a font was not as easy as I thought it would be because there are rules to follow and it takes a lot of patience. It's not just about making something that looks good; it's about understanding the principles of type design.

Finding: After all that confusion and trial and error, I've finally realised that there's more to fonts than pretty letters. Every curve and every space has a purpose and it actually takes a lot of thinking and creativity to create a new one. Before this exercise, I'd never wondered how fonts were created. I don't know if I'll ever try to create my own font, but I'm glad I learned the process.

---

READINGS

Typographic Design Form Communication 6ed-Rob Carter

The Anatomy of Typography:

The parts of letterforms

• Understanding the evolution of a nomenclature for identifying components of letterforms enhances designers' and typographers' sensitivity to the visual harmony and complexity of the alphabet. 
• For guidelines, the body height of lowercase characters aligns optically at the x-height, and the tops of capitals align optically along the capline.

Major components of letterform construction

Proportions of the letterform 

• Letterform proportions in typography is really important. There are 4 major variables: the ratio of height to stroke width, stroke weight contrast, letter width, and the relationship of x-height to the height of capitals, ascenders, and descenders.  
• Changes in stroke width and contrast, as well as the expansion or condensation of letterforms, significantly impact the visual appearance of a typeface.
• The proportional relationship between x-height and other letterform elements is also emphasized as a key factor influencing the optical qualities of typography.

The series of O’s

Unity of design in the type font

• There is a vast diversity of form within a typographic font with 26 capitals, 26 lowercase letters, numerals, punctuation, and other graphic elements. 
• For example Times Roman Bold font illustrates how visual similarities among letterforms like repeated curves, verticals, horizontals, and serifs, contribute to the unity and variety in typographic designs. 
• The principle of repetition with variety is highlighted as a key aspect of well-designed type fonts.

Times Roman Bold font

Typography on Screen

• The Internet poses challenges for effective typography especially with text sizes.
• Screen fonts, presented as bitmaps, encounter legibility issues due to the low resolution of contemporary computer screens. 
• The rasterization process, converting outline letterforms into pixels, results in a coarse approximation of the original design, with details like stroke weight and curves reduced. 
• Satisfactory on-screen typographic display requires considerations like anti-aliasing, hinting, pixel fonts, and capturing type as an image.
• Factors such as computer operating systems and web browsers also significantly impact the overall typographic outcome on screens.