ADVANCED TYPOGRAPHY / TASK 2A & 2B - KEYARTWORK & COLLATERAL DESIGN

week5-week9

Jin Rong/0361701

Advanced Typography / Creative media in design 

TASK 2A & 2B - KEYARTWORK & COLLATERAL DESIGN

---

Instructions

---

LECTURES

Lecture 4: AdTypo_4_Designing Type

Xavier Dupré introduced his typeface Malaga, highlighting two primary reasons for designing fonts:

1. Typeface design carries a social responsibility, making it essential to continuously improve readability.
2. Typeface design is a form of artistic expression.

Frutiger is a sans-serif typeface created by Swiss type designer Adrian Frutiger in 1968 specifically for the newly built Charles de Gaulle International Airport in France. He experimented with blurred letters to determine which letterforms remained recognizable in low-light conditions or when viewed quickly by passing readers.

Verdana is a typeface specifically designed for screens, created by Matthew Carter and commissioned by Microsoft. As a screen font, hinting is crucial for enhancing its readability on digital displays.

fig1.0 Verdana

fig1.1 Hinting of Verdana

Bell Centennial is a special typeface commissioned by AT&T for their telephone directories. The design aimed to address the issue of ink spreading during high-speed printing on low-quality paper, a common challenge in printing phone books.

To solve this problem, the designer introduced ink traps in the Bell Centennial typeface. Ink traps are a design technique where small gaps or indentations are left at the intersections or corners of the glyphs to accommodate excess ink during printing, thereby preventing ink from spreading. This innovative feature made Bell Centennial an ideal choice for AT&T's telephone directories.

fig 1.2 Comparison between Font and Printed

Johnston Sans (formerly known as the Underground typeface) was designed by Edward Johnston for the posters and signage of the London Underground. When creating this typeface, Johnston aimed to blend the proportions of classical Roman type with the warmth of humanistic design.

Initially called the Underground typeface due to its design for the London Underground system, Johnston Sans is renowned for its simplicity, clarity, and readability. These qualities make it particularly well-suited for use in posters, signage, and the wayfinding systems of the subway.

Typeface Design Process

1. Research

- Understand the history of typefaces, type anatomy, conventions, terminology, side bearings, metrics, hinting, etc.

- Determine the purpose of the typeface.

- Examine existing typefaces for inspiration, ideas, reference, context, usage patterns, etc.

2. Sketching

- Use either traditional or digital toolsets for sketching, depending on the designer's preference.

3. Digitization

- Software: Adobe Illustrator, FontLab, Glyphs App.

- Check letterforms and counters to ensure the readability of the typeface.

4. Testing

- Refine and correct various aspects of the typeface.

- Prototyping is a part of this process and provides critical feedback.

5. Deployment

- Deploy the typeface, keeping in mind that revisions might still be necessary as unforeseen issues can arise after prototyping and testing.

Typeface Structure

- Grid Use

  Using a grid (with circular forms) can facilitate the construction of letterforms. For instance, Roman capitals are often built on a grid comprising a square with a circle just touching the lines of the square at four points.

Structure and Considerations

- The 26 characters of the alphabet can be grouped based on their forms and structures, distinguishing between uppercase and lowercase groups.

- General Process

  1. Research

- Understand the history, structure, conventions, terminology, side bearings, metrics, hinting, etc., of typefaces.

- Determine the purpose of the typeface.

- Examine existing typefaces for inspiration, ideas, reference, context, usage patterns, etc.

  2. Sketching

- Use either traditional or digital tools for sketching, depending on the designer's preference.

  3. Digitization

- Use software like Adobe Illustrator, FontLab, Glyphs App.

- Check the letterforms and counters to ensure readability.

  4. Testing

- Refine and correct various aspects of the typeface.

- Prototyping is part of this process and provides critical feedback.

  5. Deployment

- Deploy the typeface and keep in mind the possibility of revisions, as unforeseen issues might arise after prototyping and testing.

- Designing Typeface Structure

- Using a grid with circular forms can help construct letterforms.

- The construction and arrangement of letters should follow principles of optical correction, such as overshoot consistency and spacing.

- The 26 characters of the alphabet can be grouped based on their forms and structures, distinguishing between uppercase and lowercase groups.

- Circular and triangular shapes tend to appear slightly larger than squares of the same height.

fig 1.2 Construction Grid For The Roman Capital

Visual Corrections in Typeface Design

In typeface design, visual corrections are crucial to ensure letterforms appear optically consistent and balanced. These corrections are often classified based on the forms and structures of the letters. Key aspects include:

1. Overshoot

- Curved or rounded shapes of letters extend slightly above the baseline and the cap height line. This adjustment is necessary because curved shapes appear shorter than flat shapes at the same height, ensuring they look optically aligned.

2. Character Spacing

- The distance between letters should be consistent to maintain visual balance and uniformity across the entire word. Proper spacing ensures that text is easy to read and visually appealing.

3. Form Perception

 - Circular and triangular shapes tend to appear slightly larger than squares of the same height. To correct this, designers often make circles and triangles a bit smaller or adjust their proportions to ensure they look visually similar in size to squares and other shapes.

fig1.3 Overshoots

Lecture 5: AdTypo_5_Perception & Organisation

Perception is “the way in which something is regarded, understood, or interpreted”. Perception in typography deals with the visual navigation and interpretation of the reader via contrast, form and organisation of the content. 

fig2.0 Contrast in Typography

Carl Dair's Seven Typographic Contrasts

1. Size Contrast

- Size contrast draws the reader's attention to specific points. The most common use of size is to make titles or headings significantly larger than the body text.

fig2.1 Contrast in Size

2. Weight Contrast

- Weight contrast describes how bold type stands out in the middle of lighter type of the same style. Using rules, spots, and squares also provides a "heavy area" for strong visual points to attract or emphasize.

fig2.2 Contrast in Weight

3. Form Contrast

- Form contrast differentiates uppercase letters from their lowercase equivalents, or Roman letters from their italic variants. The condensed and extended versions of a typeface are also included in form contrast.

fig2.3 Contrast in Form

4. Structure Contrast

- Structure contrast refers to the different letterforms of different types of fonts. For example, a single-line sans-serif versus a fully-serifed typeface, or italics versus blackletter.

fig2.4 Contrast in Structure

5. Texture Contrast

- Texture contrast is created by putting together contrasts of size, weight, form, and structure, and applying them to the page. Texture refers to how the type looks as a whole up close and from a distance.

fig2.5 Contrast in Texture

6. Direction Contrast

- Direction contrast involves the opposition of vertical and horizontal, as well as the angles in between.

fig2.6 Contrast in Direction

7. Color Contrast

- Color contrast suggests using color where color in value is often less important than black on white.

fig2.7 Contrast in Colour

Form

Form refers to the overall look and feel of the elements that make up the typographic composition. It is the part that plays a role in visual impact and first impressions. Displaying type as a form provides a sense of letterforms’ unique characteristics and abstract presentation.

When a typeface is perceived as a form, it no longer reads as a letter because it has been manipulated by distortion, texture, and enlargement, and has been extruded into a space. Displaying type as a form provides a sense of letterforms’ unique characteristics and abstract presentation.

fig3.0 Form in Typography

Organization: Gestalt Laws (Principles)

Gestalt, a German term, refers to the way things have been placed or put together. Gestalt theory emphasizes that the whole is greater than the sum of its parts, which is particularly relevant in designing layouts.

1. Law of Similarity

- Elements that are similar to each other are perceived as a unified group. This similarity can be based on color, orientation, size, or motion.

2. Law of Proximity

- Elements that are close to each other are perceived as a unified group.

3. Law of Closure

- The mind tends to see complete figures or forms even if a picture is incomplete or partially hidden by other objects.

4. Law of Continuation

- Humans tend to perceive each of two or more intersecting objects as distinct, singular, and uninterrupted.

5. Law of Symmetry

- The mind perceives symmetrical elements as part of a cohesive group, enhancing the sense of order and balance.

6. Law of Simplicity

- People will perceive and interpret complex images in their simplest form possible.

---

TASK 2 (A): Key Artwork

We were required to create a key artwork using our first name or pseudonym. In the context of this task, the key artwork serves as both a wordmark/lettering and an artwork. A wordmark/lettering is used to identify a person but it is also used as an artwork that might adorn a lapel pin/T-shirt/poster (collateral). 

We should explore and design various permutations and combinations of our names in the form of a wordmark/lettering. The final key artwork should be in black and white and it must be elegant, well-balanced, and composed, avoiding complexity and confusion to ensure functionality and effective communication.

Because the font for this design requires my own name, and the Chinese Pinyin for my name is "JINRONG", I think the word length is a bit too long, so I plan to use JR, JINR.

Sketches

When drawing the sketch, I found that the idea was somewhat different from mine, and I made changes while digitizing.

Digitization

When digitizing, I want to express simplicity and efficiency.

FEEDBCAK:

The font is now tilted, which is not quite in line with the intended expression. It would be better to make it vertical

Further Refinement (After Feedback) 

FINAL

Colour Palette

Final Task 2A - Key Artwork

---

TASK 2B: Key Collateral

Task 2B is a continuous task from Task 2A. We are tasked to design a t-shirt, lapel pin, etc. an animated key artwork and an Instagram account (or as instructed in class) transforming the key artwork into a brand. The output must result from in-depth exploration and must communicate both visually and textually the desired message and mood set by the key artwork and its function.

Collateral

Collateral ideas I had was:

tote bag,bottle, hat

Instagram Layout

Instagram Link: https://www.instagram.com/rongjin318/

FINAL TASK 2B

---

FEEDBACK

WEEK5

Adjust font spacing to design closer to the idea

WEEK7

The font is now tilted, which is not quite in line with the intended expression. It would be better to make it vertical

---

REFLECTION

This task made me realize the importance of having clear goals and objectives when creating creative works. Learning to create a brand for myself allowed me to express identity and personality. One of the biggest challenges was choosing the right color palette for key artworks and collateral. I discovered that colors significantly impact perceptions and emotions associated with the brand when people see it. If the brand's final presentation on platforms like Instagram lacks visual appeal and fails to convey the brand's message effectively, it is necessary to revisit and reconsider the design choices for key artworks, color palette, and collateral.

This task poses challenges to me in many aspects. But this is a learning process. Sometimes I can't achieve the expected results, but I still learn something from it. The knowledge and skills acquired can be valuable and applied to future tasks or design work. I will reflect on this task and improve in future tasks.

---

FURTHER READING

Just My Type: A Book About Fonts

Just My Type: A Book About Fonts is a book about fonts written by Simon Garfield. This book is not only a must read for font enthusiasts, but also an excellent choice for ordinary readers interested in font design and its history.

Content Summary

This book delves into the world of font design, from classic fonts such as Helvetica and Garamond, to modern innovative fonts. The author narrates the story, history, and cultural background behind font design with a light hearted and humorous style. The book contains many interesting illustrations and font examples, allowing readers to have a more intuitive understanding of the characteristics and applications of fonts.

Rich historical background: The book introduces the origin and evolution of many classic fonts, allowing readers to understand the stories behind these fonts. For example, Helvetica's minimalist aesthetics and Garamond's elegant design both have their unique historical background.

Vivid writing style: Simon Garfield's writing style is humorous and witty, making the reading process easy and enjoyable. Even professional font design knowledge is conveyed to readers in an easy to understand way.

Practical Font Knowledge: The book provides many practical suggestions on how to choose and use fonts, which are of great help to graphic designers and ordinary readers

Reading Just My Type: A Book About Fonts has given me a brand new understanding of font design. Previously, I simply believed that fonts were just the appearance of text, but this book taught me that each font has its unique story and design philosophy behind it. Especially after learning about the historical background of some common fonts, I have gained more respect and understanding towards these fonts.