Typography - Task 3: Type Design and Communication

15.05.2023 -09.06.2023 (Week 7-Week 10 ) Task 3

CHEN NAN/0363533

Bachelor of Design in Creative Media

Lectures

Detailed lectures are in Task 1.

week 7

During the week, Mr. Vinod learned that we use five different pens to practice typefaces, they can write five different strokes, and through these five typefaces we need to design typefaces, which must be legible and distinctive.

INSTRUCTION

Figure 1  Booklet PDF

1.Research

Figure 1.1 Internet

The readability and legibility of the font are necessary in the font design, and the typesetting baseline, bottom line, upper and lower case letters, and X-ray height need to be unified in the font design. The baseline is to provide horizontal alignment for the font, and the X-ray is the relative height of upper and lower case letters.

About row height

The line height can be understood as an invisible box wrapped around the font, and the upper and lower space between the font and the box is half a line.According to the W3C principle, the distance from the eyes to the screen is 25cm for the best reading distance. The base line height in Western is usually about 1.2 times the font size.

iOS row height Settings

Figure 1.2 Internet

Fluent Design line height Settings

Microsoft's official Fluent Design corresponds to the font size and line height as follows

Figure 1.3 Internet

About word weight

Word weight refers to the thickness of the font, generally indicated after the font family name Thin, Light, Regular, Medium, Bold, Heavy, etc., are word weight names.
Different word weights reflect different hierarchical relationships and emotional feelings. Thin fonts give people a feeling of delicacy and lightness, while bold fonts give people a feeling of solemnness and seriousness. Therefore, when defining font norms, we need to consider what scene to use what word weight, so as to maintain a good reading experience.

Figure 1.4 Internet

Google Dosis font

This is 200 size

Figure 1.5 Internet

This is 300 size

Figure 1.6 Internet

This is 600 size

Figure 1.7 Internet

This is 800 size

Figure 1.8 Internet

The design style of the Dosis typeface is concise and clear, with each letter having a clear structure and line, which is easy to read and recognize. This makes it ideal for large blocks of text or design projects that need to emphasize individuality.

2.sketches

We use five different pen tips to draw typefaces.

Figure 2.1 Calligraphy, Super Fine, Round, Standard Broad, Brush

Use 5 different pens to draw on grid paper and draw the characteristics of their strokes.

Figure 2.2 Sketches

I practiced the letters "a e t k g r I y m p n" for each pen.

Figure 2.3 Sketches

After completing the simple symbol exercises, I began to practice "a e t k g r I y m p n". When practicing these letters, I repeat each letter many times, and after repeated practice, I get the best side of the letter out and move on to the next step.

Figure 2.4 Sketches

Figure 2.5 Sketches

After much practice I chose a good line of writing and took it out.

3.Digitization

After thinking about it, I started designing in AI, first I created a 1000x1000 canvas and expanded its length so that I could lay the fonts on it.

Figure 3.1 Sketches

Figure 3.2 Sketches

After creating the canvas, I transferred the ruler function of the AI software through Mr.Vinod's classroom guidance, allocated the space, and positioned the height, baseline and bottom line.

Figure 3.3 Sketches

For the first time, I used the pen tool to draw, I kept every part of the font round, because this is the style of the font I designed, and copied my strokes in the draft to make it look special.

Figure 3.4 First try sketches

After Mr.Vinodd's explanation and modification, I should make each part the same, and make each part detailed and smooth. The round parts of my letters P, R, and G are not consistent, and the vertical parts of my letters are not consistent and I need to modify them.

Figure 3.5 Second  try sketches

Figure 3.6 Second  try sketches

After the modification, I created the punctuation symbol ",. ! # ”.

Figure 3.7 Punctuation mark

I ended up doing this in AI.

Figure 3.8 Final AI

4.FontLab

After AI production, I began to use FontLab, the software recommended by Mr.Vinod, for follow-up production. I copied and pasted the fonts I designed in the AI into Fontlab.

Figure 4.1  Copy and pasting fonts to Fontlab

我将我制作的所有字体导入其中。

Figure 4.2  Copy and pasting fonts to Fontlab

After I imported all the fonts I made into FontLab, I adjusted the spacing and size of them to make the fonts look nice.

Figure 4.3  Copy and pasting fonts to Fontlab

After adjusting the formatting of all fonts, I exported them。

Figure 4.4 Export the font from FontLab.

5.0 Poster Design

After exporting the font, I chose a few words for the poster creation.

Figure 5.1 Select font

I copied the selected fonts in AI for the overall production of the poster, which was my first poster design.

Figure 5.2 Poster design

Under the guidance of Mr.Vinod, I made a second attempt. In the first production, my character spacing was too large and the format of letter size was different. After improvement, I made two typesetting.

Figure 5.3 Poster design

Figure 5.4 Poster design

After the final modification, I chose one of them for the final design. I chose a picture with texture to blend with the poster to make the poster richer.

Figure 5.5 Poster design

6. Final Outcome

Preview of font:

A downloadable link to the font:

https://drive.google.com/file/d/1miNhiVlPebJkuustPO-MdFPaKpbaIwh0/view?usp=sharing

Final project:

Figure 6.2 Final Outcome JPEG

Figure 6.3 Final Outcome JPEG

Figure 6.4 Final Outcome JPEG

Figure 6.5 Final Outcome JPEG

Figure 6.6 Final Outcome PDF

Figure 6.7 Final Outcome PDF

Figure 6.8 Final Outcome PDF

FEEDBACK

week 12:

General feedback:Mr.Vinod made changes to each of our posters and helped us change the texture of the posters, which should keep the font size the same when designing the posters. Specific Feedback:I should set the font size the same, the spacing of each character should not be too much, and keep good typography to make the poster more beautiful.

week 11: General feedback:Make sure all the letters are at the same level, pay attention to the angles, and have a consistent style of letters. Specific Feedback:Make sure all the letters are at the same level, pay attention to the angles, and have a consistent style of letters. The structure of the letter G needs to be redesigned to make the shape of the G round, the circular letter structure should be made smooth, and the # should be thinner.

week 10: General feedback:We need to improve our font, if the font is not smooth enough, we should make the outline of the font smooth, and when using the brush, we should draw each letter in the same direction, and use the baseline to make them the same size. Specific Feedback:The horizontal and vertical strokes should be the same, my strokes are all different and I should unify them to make them the same, refine the curve to make it look round, smoother. week 9: General feedback:When writing letters we should put the whole letter in a line, the characteristics of each line of letters should be similar, the size of each line of letters should be the same, the font structure is also important. week 8: Specific Feedback:The letters should be proportionally aligned, choosing the best one to explore and develop. General Feedback :It was an independent study week and we got on with our task.

REFLECTION

Experience

After a period of study, Mr.Vinod gave me a certain understanding of layout. In task 3, I learned how to make fonts, which is very interesting. In the future, I can make many interesting fonts by myself, and I can use my own fonts to complete some graphic designs without worrying about copyright issues. At the same time, it also allowed me to find out my own font design style, which gave me a deeper understanding of typography.

Observation

In the process of production, I discovered the process of font design and the tools of production. In the production process, we need to use AI to design the font first. In the design process, we need to make the morphological characteristics of each font consistent, equal height, equal ground, and common sense, and the font must be readable and easy to read. In FontLab, I learned how to adjust the spacing of fonts, and adjust the spacing to make fonts more beautiful.


Finding

Through task 3, I learned the importance of typography. Its beauty can make people want to read it more easily, and it is indispensable in graphic design. Effective typography can make typography more influential in design communication.

FURTHER READING

Figure 1 typographic design

Form and Communication: Typographic Design (Form and Communication: Typographic Design) is a book about typographic design. It covers a number of topics related to typography and aims to explore the importance of typography design in conveying information and expressing meaning.

The book explores the basic principles and techniques of typographic design, such as layout, font selection, calculation, solution, and layout application. It explains how these design elements are used to create typographic works that are attractive, easy to read, and fully informative.

In addition to the technical aspects, the book also discusses the cultural and social implications of typographic design. It explores typography styles and trends in different cultural contexts, as well as the application of typography design programs in areas such as advertising, brand image, and social media.

Figure 2 typographic design

Because early capital letters were cut into stone, these letters developed with a minimum number of curved lines, for curved strokes were difficult to cut (Fig. 2-3). Lowercase letters evolved with reed-pen writing. Curved strokes could be written quickly and were used to reduce the number of strokes needed to write many characters.

Figure3 typographic design

Capline: An imaginary line that runs along the tops of capital letters and the ascenders of lowercase letters. 

Meanline: An imaginary line that establishes the height of the body of lowercase letters.

 x-height: The distance from the baseline to the meanline. Typically, this is the height of lowercase letters and is most easily measured on the lowercase x. 

Baseline: An imaginary line upon which the base of each capital rests. 

Beard line: An imaginary line that runs along the bottoms of descenders.

Figure 3 typographic design

The proportions of the individual letterform are an important consideration in typography. Four major variables control letterform proportion and have considerable impact upon the visual appearance of a typeface: the ratio of letterform height to stroke width; the variation between the thickest and thinnest strokes of the letterform; the width of the letters; and the relationship of the x-height to the height of capitals, ascenders, and descenders

Figure 4 typographic design

Typefaces that defy historical classification are sometimes called decorative or novelty typefaces. Most often these are used as display types or as text when appropriate. These typefaces provide context for typographic messages, adding visual accent and charisma.

In summary, the book introduces the importance, basic principles and techniques of typographic design, as well as its role in disseminating information and resonating with the audience