Advanced Typography - Task 3 : Design, Exploration and Application

30.05.2022 - 07.06.2022 ( Week 10 - Week 14 )

Michelle Angeline Gunawan / 0349760 / Bachelor of Design in Creative Media
Advanced Typography
Task 3 : Design, Exploration and Application

---

LECTURES

Lecture 5 - Advanced Typography: Perception & Organisation

Perception in typography deals with the visual navigation and interpretation of the reader via contrast, form and organisation of the content. Content can be textual, visual, graphical or in the form of color. 

Figure 1.1 Contrast

There are several methods in typography to create contrast the one on the left is devised by Rudi Ruegg. They are self-explanatory.

Contrast / Size

A contrast of size provides a point to which the reader’s attention is drawn. For example if you have a big letter and a small letter you will obviously see the big letter first before the small. The most common use of size is in making a title or heading noticeably bigger than the body text.

Figure 1.2 Contrast/ Size

Contrast / Weight

Weight describes how bold type can stand out in the middle of lighter type of the same style. Other than then using bold, using rules, spot, squares is also provide a “heavy area” for a powerful point of visual attraction or emphasis, therefore not only types of varying weight.

Figure 1.3 Contrast/ Weight

Contrast / Form`

Contrast of form is the distinction between a capital letter and its lowercase equivalent, or a roman letter and its italic variant, condensed and expanded versions of typeface are also included under the contrast of form.

Figure 1.4 Contrast/ Form

Contrast / Structure

Structure means the different letterforms of different kinds of typefaces. For example, a monoline sans serif  and a traditional serif, or an italic and a blackletter.

Figure 1.5 Contrast/ Structure

Contrast / Texture

By putting together the contrasts of size, weight, form, and structure, and applying them to a block of text on a page, you come to the contrast of texture. Texture refers to the way the lines of type look as a whole up close and from a distance. This depends partly on the letterforms themselves and partly on how they’re arranged. 

Figure 1.6 Contrast/ Texture

Contrast / Direction

Contrast of direction is the opposition between vertical and horizontal, and the angles in between. Turning one word on its side can have a dramatic effect on a layout. Text blocks also have their vertical or horizontal aspects of direction. Mixing wide blocks of long lines with tall columns of short line can also create a contrast.

Figure 1.7 Contrast/ Direction

Contrast / Colour

The use of color is suggested that a second color is often less emphatic in values than plain black on white. Therefore it is important to give thought to which element needs to be emphasized and to pay attention to the tonal values of the colors that are used.

Figure 1.8 Contrast/ Colour

Form

For 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. A good form in typography tends to be visually intriguing to the eye; it leads the eye from point to point, it entertains the mind and is most often memorable. 

Figure 1.9 Form

Organisation / Gestalt.

Gestalt is a german word meaning the way a thing has been “placed” or “put together”. Gestalt Psychology is an attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions.

Gestalt theory emphasizes that the whole of anything is greater than its parts—this is based on the idea that we experience things as unified whole: Instead of breaking down thoughts and behavior to their smallest elements, the gestalt psychologists believed that you must look at the whole of experience.

Organisation / Gestalt: Perceptual Organisation / Groupings:

1. Law of Similarity
   The gestalt grouping law that states that elements that are similar to each other tend to be perceived as a unified group. Similarity can refer to any number of features, including color, orientation, size, or indeed motion.
2. Law of Proximity
   The gestalt grouping law that states elements that are close together tend to be perceived as a unified group. This straightforward law states that items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together.
3. Law of Closure
   Refers to the mind’s tendency to see complete figures or forms even if a picture is incomplete, partially hidden by other objects, or if part of the information needed to make a complete picture in our minds is missing
4. Law of Continuation
   Holds that humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect. The alignment of the objects or forms plays a major role for this principle to take effect. 
5. Law of Symetry
   
6. Law of Simplicity (Praganz)

Figure 1.10 Gestalt Principles

The organization of information and how it is perceived should be considered by designers as a social responsibility — crucial for effective communication, transfer of knowledge and for under-standing to occur. 

— Vinod J. Nair

---

INSTRUCTIONS

Task 3 :

Figure 2.1 Task 3 Idea Proposal

I did my sketch in Adobe Photoshop. The idea is to make the shape similar to cactus because I'm aiming on redesigning the Cactus mineral water logo. I made the font design with rounded edges.

Figure 2.2 Task 3 Sketch

Then I decided to digitize it using Adobe Illustrator.

Figure 2.3 Task 3 Digitalized Font Design

For the application, I decided to make a mineral bottle mock-up and then Mr. Vinod suggested that I should make a poster with the bottle in it. I looked up on the internet for inspiration, and I think these posters looks better than the other ones.

Figure 2.4 Task 3 Poster Inspiration 1

Figure 2.5 Task 3 Poster Inspiration 2

Figure 2.6 Task 3 Poster Inspiration 3

I made the label design on Adobe Illustrator.

Figure 2.7 Label Design

And I made the mock up using Adobe Photoshop and this is how it turns out.

Figure 2.8 Mineral Water Bottle Mock Up

 Cactus has a marketing website with its logo, so I decided to redesign the logo using the typeface that I designed.

Figure 2.9 Cactus Marketing Website

Figure 2.10 Cactus Marketing Logo

Figure 2.11 Task 3 Sign Board Office Mock Up

Figure 2.12 Task 3 Advertising Board Mock Up

---

FEEDBACKS

Week 10 :

General Feedback : Be sure that the project is solving a problem

Week 11 :

Public Holiday

Week 12 :

Specific Feedback : The typeface is already fine, maybe it would look better if bumps are added to the typeface. For the applications, Mr. Vinod suggested that I should create an ad or poster with the mineral water showing.

Week 13 :

General Feedback : Task 3 and final compilation should be submitted next week (week 14)

---

REFLECTIONS

Experience :

This task is the one that takes the longest time. There are some things I have to repeat and I have to re-understand. I feel happier with the typeface I made this time because it looks neater than last semester.

Observations :

I observed that there are several symbols that have different boundary lines.

Findings :

I find that creating a typeface requires a lot of precision in measurement. The process of moving from Adobe Illustrator and to a font creation application is also very important. Understanding the correct transfer process will make it easier for us to do it.

---

FURTHER READING

Typographic Design: Form & Communication (2015)

For further reading, I decided to read this book, Typographic Design: Form & Communication chapter 8 which is the Typography on Screen and I decided to explore the topic of Selecting Typefaces.

On-screen type sizing
Choosing the right type size on screen can be measured in several ways. Pixels, ems, rems, xx-small, and relative percentages of parent elements are all acceptable for specifying the size of the on-screen type.

Sans serif and serif typefaces

Usually, a well-proportioned sans serif typeface has a moderate stroke weight and a balanced ratio between form and form. Slightly thick faces generate more characters per line and thus use less space on page.

Combining typefaces

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

- Functional/decorative