Typography - Task3 / Type Design & Communication

21/6/2024 - 12/7/2024 (Week9-Week12)
Amber Tan Jing Jing (0372746)
Typography / Bachelor of Design in Creative Media / Taylors University
Task 3

TABLE OF CONTENTS

3. TASK


LECTURES

Lectures have been completed in Task1 & Task 2. 


INSTRUCTIONS





TASK 3 - TYPE DESIGN AND COMMUNICATION

In this task, we were to design a type of letters (o l e d s n c h t i g , . ! #).

1. References and Sketches

Before I start sketching, I find some references on Pinterest.

Figure 1.1 References

Then, I started to draw my sketches.

Figure 1.2 Sketches

Sir choose Sketch#7 for me to digitize.

Figure 1.3 Reference of Final Sketches


Figure 1.4 Final Sketches (23/6/2024)

After my sketch is approved, I write all letters (o l e d s n c h t i g , . ! #) in the approved style.

Figure 1.5 Practice final outcome (1/7/2024)


Figure 1.6  Final outcome (1/7/2024)

2. Digitizing the written letters

Then, I started digitize my final outcome. I first create a square and rectangle as a basis for making font. This makes me more easier to create my font. 

Figure 1.7 First Step to create font 

I use shape tools to create many rectangles with different angles and lengths.

 
Figure 1.8 Start to create font



Figure 1.9 Final sketches and digitize


Figure 1.10 Height of the letters




Figure 1.11 Before and after shape builder tool

Figure 1.12 Font

3. FontLab

Ascender Height: 697pt
X-Height: 500pt
Baseline: 0pt
Descender Height: -232pt
 
 

Figure 1.13 Font Lab


Figure 1.14 Character Map



4. Final Work

Download font here: 




Figure 1.15 Screen Grab of FontLab process (side-bearings),(12/7/2024)



Figure 1.16 
Final Type construction, JPEG (1024px, 300ppi, Grayscale),(12/7/2024)


Figure 1.17 Final Type construction, PDF,(12/7/2024)


Figure 1.18 Final JPEG A4 black & white poster,(12/7/2024)


Figure 1.19 Final PDF A4 black & white poster,(12/7/2024)



FEEDBACK

Week9
General feedback : We need to come out with 9 sketches of typeface and digitize the final option before the next class.
Specific feedback : Post the sketches on Facebook. Then sir will choose the final option. Sketch#7 can be use to digitize.

Week10
General feedback : We need to digitize the final option before the next class.
Specific feedback : Sketch#7 can be use to digitize. 

Week11
General feedback : We need to done the font lab before the next class.
Specific feedback : The corner of the letter 'L' is a little too fast and needs to be changed. There is nothing wrong with the rest. I can do the font lab after I correct the letter ' L'.

Week12
General feedback : We need to done the Task3 eportfolio before next class and post the FontLab Screengrab on Facebook.
Specific feedback : Spacing and kerning need to refer Mr Vinod's post.

Week13
General feedback : We need to complete the Final Compilation & Reflection eportfolio before the next class.
Specific feedback : Overall my Task3 eportfolio is ok.



REFLECTION

Experience
Through this exercise, I learned how to create my own font. I first found the references on Pinterest to look for some ideas. There are so many creative design to choose from. I think the hardest part is sketching. It is because I had to calculate the grid on the graph paper. I feel like my eyes become very tired after I draw all the sketches. This is my first time using Font Lab 7, I am not very good at using it, so I spend more time to researching it.

Observations
Somethings I have observed is that I first create a square and rectangle as a basis for making font before I start to create my font. This makes me more easier to create my font. My font looks more balance, doesn't look big or small. I feel like make the letter 'O' first, it will be easier to make other letters. I basically copy and paste and delete some extra rectangle, then my other letter is done.

Findings
This is more interesting for me because I can create my own font. I can make money with the letter I made! Although the process of making font is very hard, I am quite satisfied with the result. Overall through this exercise, I saw a lot of different fonts and learned a lot. I found that good fonts can enhance visual appeal and improve readability.



FURTHER READING

Typography Design Form And Communication

Figure 2.1 Typography Design Form and Communication

1. Typography on Screen (pg133 - pg148)

As more designers become involved in on-screen design, the need to preserve typographic integrity in this environment becomes paramount. Doing so, however, is complicated by rapidly changing technology: screen sizes, screen resolutions, and new types of interactivity.

Typographic considerations for printed communications carry over to on-screen environments. However, designing with type on screen poses special additional challenges, and attempts by designers to simply mimic the appearance of the printed page are mistaken. This chapter discusses the relationship of typography to screen environments, especially as concerns legibility, visual hierarchy, and structuring type on digital pages. 

Figure 2.2 The more pixels used to generate the letterform
Figure 2.3 Small type appears on-screen with too few pixels

Screen fonts are bitmaps, which are digitized images made up of tiny dots. To render an outline letterform stored as a Bézier curve on a computer screen, it must be rasterized, or converted into tiny dots called pixels, which is short for picture elements. The relatively low resolution of many contemporary computer screens, which typically have a bitmap matrix of 72 or 96 pixels per inch, cannot display the subtle nuances of a beautifully designed font. When a type’s outline is rendered on a screen, details such as stroke weight, subtle curves, and serif detail are reduced to a coarse approximation of the refined forms found in the original design. This occurs because curved and diagonal edges rendered as pixels on a raster-scan display have a jagged stairstep quality, called “the jaggies.” The more pixels used to generate the letterform, the higher the resolution (Fig. 2.2). When small type appears on-screen with too few pixels to accurately display the subtle forms of the letter, a catastrophic decrease in legibility can occur (Fig. 2.3).

Figure 2.4 Type selection matrix

With rare exception, effective web pages utilize no more than two or three different typefaces. Using more than this number compromises hierarchical clarity. The most important consideration for selecting multiple typefaces is contrast, and variations in contrast are abundant: serif/sans serif, roman/script, bold/light, thick/thin, simple/complex, and functional/decorative. Plenty of contrast between typefaces ensures that each will effectively fulfill its task. Effective contrasts can also be achieved when using different typefaces within the same family, or using all capital letters in relationship to capitals and lowercase. The process of selecting typefaces is one of comparing several combinations on screen until the best possibilities emerge.

















Comments