Typography - Task 2: Typographic Exploration & Communication

The uppercase letterform below shows symmetry, but it is actually not symmetrical. It is easy to see the two different stroke weights. It is also noteworthy that each bracket connecting the serif to the stem has a unique arc.

Figure 1.1 Baskerville uppercase letterform

The uppercase letter forms may look symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both Baskerville (Figure 1.1) and Univers (Figure 1.2) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Figure 1.2 Univers uppercase letterform

The complexity of each individual letterform is demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Figure 1.3 Comparison of lowercase 'a' of helvetica and univers

Letters / Maintaining x-height

The x-height describes the size of the lowercase letterforms. However, curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Figure 1.4 lowercase letterform

Letters / Form / Counterform

Counterform (or counter)—the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. How well we handle the counters when we set type determines how easily we can read what’s been set.

Figure 1.5 Counterform

Letters / Contrast

The following are examples of contrast—the most powerful dynamic in design—as applied to type, based on a format devised by Rudi Ruegg.

Figure 1.6 Contrast in typography

Typo_6: Understanding

Typography / Different Medium

In the past, typography was viewed as living only when it reached paper. Once a publication was done, nothing changed can be changed after that.
Today, typography exists not only on paper but on a multitude of screens. It is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and screen itself, the viewport and more.

Print Type vs. Screen Type

Type for Print

A good typeface for print: Caslon, Garamond, Baskerville
They are elegant and intellectual but also highly readable when set at small font size.
They are versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.

Figure 2.1 Example of type for print

Figure 2.2 Example of type for print

Type for Screen

Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments.
Modifications include taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.
Another important adjustment – especially for typefaces intended for smaller sizes – is more open spacing.

Hyperactive Link / Hyperlink

A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document.
Hyperlinks are found in nearly all Web pages, allowing users to click their way from page to another.

Font Size for Screen

16-pixel text on a screen is about the same size as text printed in a book or magazine
Books are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens.

Figure 2.3 Screen type vs. print type

System Fonts for Screen / Web Safe Fonts

Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Pixel Differences between Devices

The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels

Static vs. Motion

Static Typography

Has minimal characteristic in expressing words.
Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Motion Typography

Temporal media offer typographers opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic”.
Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack.
On-screen typography has developed to become expressive.
Helps establish the tone of associated content or express a set of brand values.

INSTRUCTIONS

Task 2: Typographic Communication and Exploration (Text Formatting and Expression)

For Task 2, we had to choose one text option out of the three provided, and typographically express it's content on a 2-page editorial spread in Adobe InDesign, and the headline text can be done in Adobe Illustrator if needed. This task requires us to utilize and combine the knowledge and skills we acquired from the previous task, which is text expression and formatting exercises.

Research

Unite

come or bring together for a common purpose or action.

Figure 3.1 Research - 1 Malaysia, Week 6 (31/10/2023)

Figure 3.2 Research - unite, Week 6 (31/10/2023)

Type Expressions Exploration

Out of the three text options, I chose "Unite to Visualise a Better World" as I felt like the word 'unite' would be a great choice to make a type expression for. I came out with 5 type expressions in Adobe Illustrator and then copy-pasted them to Adobe InDesign to make a rough layout.

Figure 3.3 Type expression exploration #1, Week 6 (31/10/2023)

For #1, the idea is to change the letter 'i' into '1' to express to idea of uniting as one. The title is put in the middle and the body text is separated into 2 sides to represent 2 sides uniting together.

Figure 3.4 Type expression exploration #2, Week 6 (31/10/2023)

For #2, the idea is to use serif and sans serif typefaces together in the word to represent diversity uniting together, with serif on one side and sans serif on the other.

Figure 3.5 Type expression exploration #3, Week 6 (31/10/2023)

For #3, well, I admit this one doesn't really make sense.

Figure 3.6 Type expression exploration #4, Week 6 (31/10/2023)

For #4, it is inspired by the picture of multiple people putting / holding their hands together which represents unity. The 'U' makes a similar shape to the picture.

Figure 3.7 Type expression exploration #5, Week 5 (31/10/2023)

For #5, it is the same idea as #4, just with different typeface, font and layout.

Layout and Text Formatting Exploration

After getting feedback from Miss Hsin Yin, I finalized the 3 text expression explorations that she approved by doing text formatting. I also did some minor adjustments to the text expression so that it looks more neat. The type expression from #3 was initially not approved but when I asked Miss Hsin Yin again, she said it was okay. All three ideas were approved so I just had to choose one to finalize.

Figure 3.8 Text formatting exploration #1, Week 6 (7/11/2023)

Figure 3.9 Text formatting exploration #2, Week 6 (7/11/2023)

Figure 3.10 Text formatting exploration #3, Week 6 (7/11/2023)

Final Text Formatting

Changes were made to the text formatting after getting feedback, such as the indentations, as well as the cross-alignment of baseline for text, lead-in text and headline. I only had to choose one to finalize but I just did all three to see which was the best option.

Figure 3.11 Final text formatting #1, Week 6 (7/11/2023)

Figure 3.12 Final text formatting #2, Week 6 (7/11/2023)

Figure 3.13 Final text formatting #3, Week 6 (7/11/2023)

I decided to finalize #2 because I realized it's the most ideal after some observation and consideration. #1's heading is in the middle, which is not encouraged, and #3's layout looks a little messy and disordered.

Final Outcome

HEADLINE

Font/s: Futura Std (Book), Janson Text LT Std (Roman, Bold)

Type Size/s: 118 pt, 122 pt, 34 pt, 35.5 pt

LEAD-IN TEXT

Font/s: Futura Std (Bold)

Type Size/s: 13 pt

Leading: 15 pt

BODY TEXT

Font/s: Janson Text LT Std (Roman)

Type Size/s: 9 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 61

Alignment: Justified with last line aligned left

Margins: 20 mm top + 12.7 mm left + 12.7 mm right + 20 mm bottom

Columns: 4

Gutter: 5 mm

Figure 3.14 Final typographic communication and exploration (JPEG), week 8 (14/11/2023)

Figure 3.15 Final typographic communication and exploration (PDF), Week 8 (14/11/2023)

Figure 3.16 Final typographic communication and exploration (JPEG), Week 8 (14/112023)

Figure 3.17 Final typographic communication and exploration with grids (PDF), Week 8 (14/11/2023)

FEEDBACK

Week 6

General feedback:

Must be careful when playing around with the sequence of the words, it should be in a way that can lead the reader's eyes in the right way.
Design decisions must be rational and have a convincing purpose behind it.
Avoid typesetting italics on the entire body text, it should be used sparringly for certain purposes only.
Usually, we don't set indentations on the first paragraph, it only starts on the second paragraph.

Specific feedback:

#1
The type expression is a nice idea, but the layout has to change because it looks like separate body text.

The type expression is nice too, but maybe keep the typefaces in the headline down to 2 only.

Not accepted.

The type expression is a great idea once explained, but maybe a little to illustrative, can be kept in a pocket for future use.

Same with exploration #4, and the layout makes the it looks like separate body text.

Week 7

General feedback:

Further reading doesn't just have to be from the list, it can be from online. The choices doesn't have to be technical, it can be something trendy and light.

Specific feedback:

Too little indentation, not obvious enough.
Should try to look for possibilities to align the baseline of the text, lead-in text and headline. It will look more right and comfortable to the eyes.
Leading for lead-in text was too much, only the first line's baseline has to be aligned.

Week 8

Independent Learning Week

REFLECTIONS

Experience

I enjoyed making the type expression for this task as well as playing around with the layouts. It is very similar to task 1 so it wasn't too big of a challenge, as we already had experience prior to it. It was definitely a fun process to explore the many different ways you can typographically express text content in an artistic manner. However, there are still limitations and rules to follow so that the viewer readability does not get affected. A sense of accomplishment could be felt when I was able to design a type expression and layout that suits the content.

Observations

I learned that there are various factors that we have to take into consideration when creating layouts to optimize viewer readability, such as font size, line length, leading, alignment and positioning of body text. For instance, avoid from splitting the body texts too far apart or in a disorderly manner, as it may be difficult for the viewer to read and cause distraction. Furthermore, I realize that it is extremely crucial to get feedback from our tutor as they can always identify the problems that we fail to notice and advice us on where we can improve.

Findings

I realized how important text alignment is to create a well-structured layout. Due to the nature of how human eyes see things, when text components such as headline, lead-in text and body text are properly-aligned, it ensures the viewer a comfortable reading experience. Besides that, I learned that the type doesn't have to be too illustrative to be able to communicate it's content, and that the readability and legibility should not be disrupted for aesthetic purposes.

FURTHER READING

Figure 4.1 The Vignelli Canon by Massimo Vignelli (2010)

This book was written by Massimo Vignelli, a well-known Italian designer in the field of graphic design and industrial design. He wrote this book for designers to enhance their understanding of typography in graphic design, by introducing the rules and guidelines, as well as typographic principles. The book is separated into two parts, which are The Intangibles and The Tangibles.

Part One - The Intangibles

Discipline

Paying attention to details requires discipline. Every detail is important because a good design is the sum of the continuous effort of attention to all details in the creative process. Discipline allows us to design in a consistent manner from start to end.

Appropriateness

Once we searched the roots of what we're designing, we have to find the possible and appropriate solutions to it. Appropriateness directs us to the right kind of materials, expression, scale, color and texture. It can elicit the enthusiastic approval from the client.

Ambiguity

The possibility of a design to be read in different ways. Ambiguity can enrich the design and give it more depth. However, it must be used cautiously so that it does not backfire and create contradiction.

Search This Blog

Teo Mei Hui (0358315)

Typography - Task 2: Typographic Exploration & Communication

Comments

Post a Comment

Popular Posts

Games Development - Tasks

Major Project 1