Advanced Typography - Task 3: Type Exploration and Application

June 15, 2024 - (Week 8 - Week 14 )

linchenyi/ 0367008

Advanced Typography / Bachelor of Creative Media Design (Honours)

Task 3: Type Exploration and Application

TABLE OF CONTENTS

1. Lecture
2. Instructions
3. Task 3
4. Feedback
5. Reflection
6. Further reading

1.LECTURE

Lecture 5: AdTypo_5_Perception & Organisation

Perception in Typography

Perception involves how something is perceived, understood or interpreted. In typography, it is about how readers visually navigate and interpret content through contrast, form and organisation.

Contrast

Carl Dair’s seven types of typographic contrast:

Attract attention through noticeable size differences, such as making the title larger than the body text.

Example: Amnesty International’s campaign poster uses large text to attract the reader’s initial attention, rather than using small text.

Contrast of size - Awareness posters by Amnesty International;
The big text will first draw the reader's attention before the small text.

Weight contrast: Bold text stands out among lighter fonts of the same style. Heavier areas created by rules, spots and blocks add visual emphasis.

Example: Bold text in Venngage’s graphic stands out among lighter text.

Contrast of weight

Form contrast: Differences between uppercase and lowercase, roman and italic variants, condensed and expanded versions of a typeface.

Example: Fashion Gone Rogue uses a variety of typefaces to create contrast.

Contrast of form

Structural contrast: Different typefaces in a variety of fonts, such as a monoline sans serif versus a traditional serif, or an italic versus a boldface.

Example: Fabian Fohrer’s poster juxtaposes different types of structure.

Contrast of structure - Poster by Fabian Fohrer

Textural contrast: Combining size, weight, form, and structural contrasts in blocks of text to create texture that affects readability and aesthetics.

Example: Yve Ludwig’s Yale School of Architecture poster uses texture to draw visual interest.

Directional contrast: Differences in direction, such as vertical versus horizontal lines or angles.

Contrast of texture -Yale School of Architecture Poster by Yve Ludwig;

Example: Benjamin Kowalski’s poster uses directional contrast to direct the eye.

123

Color contrast: Using color for emphasis, where the secondary color is not emphasized as much as the black text on a white background.

Typographical Contrast by Rudi Ruegg 

Form

Form refers to the overall visual impact and first impression of a printed element. It emphasizes the unique characteristics of a typeface and its abstract presentation when manipulated through distortion, texture, and enlargement.

Organization

Derived from the German words for “to place” or “to put together,” Gestalt theory emphasizes that the whole is greater than the sum of its parts. Max Wertheimer’s Gestalt principles include:

1. Law of Similarity: Similar elements are perceived as a unified group.
2. Law of Proximity: Elements that are close to each other are perceived as a group.
3. Law of Closure: The mind completes incomplete figures.
4. Law of Continuity: Intersecting objects are perceived as continuous.
5. Law of Simplicity (Prägnanz): Simple, orderly structures are preferred.

These principles guide how elements should be organized to create a cohesive and visually appealing design.

2. INSTRUCTIONS

Task 3｜Type exploration and application

In order to accomplish this task, I need to choose a general direction.

1. By creating completely new fonts, you can solve some problems in a specific area or provide solutions for areas of interest.

2. By improving on the basis of existing fonts, it can better adapt to specific needs or fields

3. Identify potential weaknesses or areas for further improvement in existing areas and propose innovative solutions.

1. Creative Proposal

I came up with two initial ideas.

I came up with two initial ideas. The first idea was that I happened to see a lot of hand-painted graffiti on the wall of ss15, and I wanted to make a font that was more regular but with a little bit of hand-painted brushwork. The second idea was to change the heavy font on the existing packaging design.

Finally, after Mr. Vinod. explanation, I chose the first one. It looks more interesting.

Preliminary sketches

Hand-drawn sketches: Sketch some letters on paper, trying different strokes and line thicknesses.

2. Font Construction

Digital design

Stroke adjustment: Unify the stroke thickness and style of each letter to ensure the overall consistency of the font.

Detail processing: Fine-tune the details of each letter, retaining the casualness of hand-drawing while ensuring its structure.

After class feedback I adjusted the details：

refining the edges of the letters to make them look smoother or sharper, depending on your style choice.Make sure the style is consistent between each letter, the thickness of the lines. Thicken the outlines of the letters to give them a graffiti style. You can make some parts extra bold to enhance the visual impact.

Fig 2.1 Digitalization Attempt #1, Week 11

After some minor adjustments to the font, I noticed that the capital M and H were not consistent with the other letters, so I thickened the capital M again and made the H more regular.

• Redraw the capital M with a thicker stroke to match the other letters in thickness. Make sure the diagonal and vertical strokes of the M are evenly thick.
• I check and adjust the vertical and horizontal strokes of the H to make them consistent with the other letters.

Fig 2.2 Alphabetical Adjustment, Week 11

All capital letters modified again.

Fig 2.3 Digitalization Attempt #2, Week 11

This week I started drawing lowercase letters. At first, I was not sure about the required height of lowercase letters b, d, and h. I observed the examples sent by the teacher on Teams and compared them. I gradually adjusted and finally widened the line height of the lowercase letters to be flush with letters a, e, and c.

Fig 2.4 Alphabetical Adjustment, Week 11

Set the size of the numbers and punctuation marks according to the line height and margin width of the capital letters. Make sure the numbers and punctuation marks are visually consistent with the letters.

Start drawing the numbers 0 to 9. Make sure the outlines of the numbers are consistent with the style of the font, paying attention to the thickness and proportion of the numbers.

Fig 2.5 Digital Progress, Week 12

Fig 2.6 Punctuation, Week 12

Adjust the inner and outer outlines of the numbers so that they look clear and match the style of the letters. Pay attention to the alignment and spacing of the numbers.

Fig 2.7 Illustrator workspace (Type Construction), Week 12

3.Developing the final font in FontLab 7

Final adjustment of fonts, numbers and punctuation

Fig 3.1, Importing Fontlab, Week 13

Import each font into Fontlab and check the visual effects of the entire font set in Fontlab to ensure that all letters, numbers and punctuation meet the design standards. I found that the form of some fonts was not very consistent, so I went back to Illustrator to modify it.

Fig 3.2, Importing Fontlab, Week 13

I start spacing the caps, making sure the spacing between letter pairs looks even. I need to pay special attention to letters like the A, V, and W. Once I have the spacing for the H established, I start experimenting with common letters like "AV" or "WA" because the shapes of these letter combinations can create unnatural spacing.

Fig 3.3 Adjust font spacing Week 13

I look at how kerning works at different sizes and weights. Kerning that works at large sizes may not work at small sizes.

                                      Fig 3.4 Adjust font spacing, Week 13

Adjust the remaining lowercase letters, numbers, and punctuation.

Fig 3.5 Adjust font spacing, Week 13

4. Font rendering

I looked for inspiration from font rendering layout.

Fig 4.1 Illustrator workspace, Week 13

For the font display, I chose a bright orange and white color scheme. Bright orange and white can be very eye-catching and can highlight the details of the font very well.

Make sure the contrast between orange and white is strong enough so that the font is clearly readable.

5. Font Application

Lemmy font is a display font that can be used as titles of publications such as posters, book covers, magazines, etc. For font application, I plan to use the font for posters, fashion magazines, children's picture books, and tote bags.

Work process:

Fig 5.1  Illustrator workspace, Week 14

Fig 5.2, Illustrator workspace, Week 14

Fig 5.3 Artwork content.jpeg, Week14

Fig 5.4 Artwork content.jpeg, Week 14

Fig 5.5 Artwork content.jpeg, Week 14

Fig 5.6 Artwork content.jpeg, Week 14

Fig 5.7 Artwork content.jpeg, Week 14

Fig 5.8 Artwork content.jpeg, Week 14

Fig 5.9 Artwork content.jpeg, Week 14

Fig 5.10 Artwork content.PDF, Week 14

Final Task 3: Type Exploration and Application

6.Final font design

Downloadable font link:https://drive.google.com/drive/folders/1o09du4dJ_k_7dEtvT58JUveLfpMwpfpy

7.Font rendering

Fig 6.1 Font Presentation #1 - JPEG, Week 14

Fig 6.2 Font Presentation #2 - JPEG, Week 14

Fig 6.3 Font Presentation #3- JPEG, Week 14

Fig 6.4 Font Presentation #4 - JPEG, Week 14

Fig 6.5 Font Presentation #5 - JPEG, Week 14

Fig 6.6 Final Font Demo - PDF, Week 14

Font Application

Fig 6.7 Final Application #1: Poster - JPEG, Week 14

Fig 6.8 Final Application #1: Poster - JPEG, Week 14

Fig 6.9 Final Application #1: Poster - JPEG, Week 14

Fig 6.10 Final Application #2: Poster - JPEG, Week 14

Fig 6.11 Final Application #3 Poster - JPEG, Week 14

Fig 6.12 Final Application #5: Poster - JPEG, Week 14

Fig 6.13 Final Font Application - PDF, Week 14

FEEDBACK

Week 9

Overall feedback:

The overall shape is very good, very well made.

Specific feedback:

• Contrast is correctly introduced in contrast areas, ensuring consistency and thickness in these areas.
• Continued consistency is needed, especially with varying thicknesses.
• When designing letters, make sure that the planned size is consistent, especially the ratio of the top thickness is consistent, except for diagonal letters.

Week 10

Overall feedback: Enlarge lowercase letters overall, ensuring that the overall lowercase letter size is visually harmonious with the uppercase letters. Comparison of lowercase letters to uppercase letters, lowercase letters do not appear too small or too large when placed next to uppercase letters.

Specific feedback: Fix lowercase letters g, p, q: Ensure that these letters are unified in design, especially their descender

Week 11

Overall feedback The overall design of the letters looks good, with a consistent basic style and proportions.

Specific feedback Place the lowercase and uppercase letters side by side for visual comparison to ensure they are in harmony in proportion. Focus on letter height, width, and stroke weight to keep them visually balanced.

Week 13

Specific feedback:

Font display layout is OK. Complete all work before class in Week 14. Week 12:

Overall feedback:

Add to Fontlab, complete font display (1024x1024) as soon as possible

Specific feedback:

Make sure letters are actual size before importing fonts into FontLab.

REFLECTION

Experience Due to limited time and energy, I have been slow in exploring and creating fonts, and I should have spent more time on it. Observation Through careful observation, I found that most of the characters were designed in a consistent manner. However, some letters, such as the uppercase "M" and "X", and the lowercase "w", "q", and "p", did not fit in with the overall style. Identifying these inconsistencies, as well as the parts that were successfully implemented, provided valuable insights for further refinement and improvement of the font. Findings I realized that in order to achieve high-quality results, it is necessary to invest sufficient time and energy in researching, building, and improving fonts. In the design process, it is also very important to clarify the purpose and intention of the font creation. In addition, there is a lot of room for improvement in the font itself and its application. I realized that I had deficiencies in design knowledge and foundations, including understanding of font creation rules, color theory and matching, layout, and composition. These gaps in knowledge led to a lack of impact and effectiveness in my designs. Therefore, I need to invest more time and energy to strengthen my basic design skills and knowledge.

FURTHER READING

Designing with FONTFORGE

These blogs explore the step-by-step process of constructing alphabets, offering deep insights into how individual letters evolve and interconnect during their creation. By following these posts, readers can gain a comprehensive understanding of the developmental stages of each letter and the relationships between them in the context of typographic design.

Structure

Construction refers to the structure of the underlying strokes that make up a particular glyph, and can be thought of as the skeleton of a glyph. It is one of the most important considerations in glyph design, as it determines the basic form of the glyph and influences other design elements such as width, weight, and terminations. Although the way strokes end (“terminals”) and “serifs” are not usually considered construction, they are the flesh of the glyph, and construction is its foundation.

Rising part height

Ascenders are often slightly taller than cap height in typeface design, especially in text design. Ascenders are usually a bit taller than cap height, but can be the same or lower in some cases. Longer ascenders can add a sense of elegance to a typeface and are often paired with a smaller x-height.

Overall, the combination of a longer ascender and a smaller x-height can add a sense of sophistication to a typeface, but needs to be carefully balanced in a design to ensure readability and visual beauty of the text.

Descending depth

Descent depth, like ascenders, gives a sense of elegance with longer descenders. Longer descenders can add elegance and refinement to a font.

In general, while longer ascenders and descenders can enhance the beauty of a font, they need to be handled with care in design and typesetting to avoid conflicts between lines of text and ensure a balance between readability and aesthetics.

Horizontal weight distribution

Horizontal weight distribution is less common in type design, but can still be seen in many fonts. Compared to vertical weight distribution, horizontal weight distribution is less common.

Bowls

Note that bowls are the stroke part in the below illustrations and not the black inner forms. The inner strokes are referred as “counters”. While designing type, you will often find yourself altering your work not because of the shape or width of the stroke but due to the shape and size of the counter.