Typography Task 2 Exercise Text Formatting

24/10/2023 - 10/11/2023 (Week 5- Week 7) 

Jie Xuan/ 0356515

Typography/ Bachelor of Creative Media/Taylor's University

Task 2

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Feedbacks

4. Reflections

---

LECTURES

Week 5 Understanding 

1. Letters

Uppercase letter forms usually seem symmetrical, but it is not always true. From the letterform below, it looks symmetrically, but in fact it is not. It is easy to see the two different stroke weights of the Baskerville stroke form (below), more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Fig 1.5.1 Baskerville uppercase letterform

The letterform (Univers) below looks extremely symmetrical, but in fact there is a difference which is the width of the left stroke is thinner than the right stroke.

Fig 1.5.2 Univers uppercase letterform

The complexity of each individual letterform is neatly 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.

Fig 1.5.3 Helvetica vs. Univers

Fig 1.5.4 Helvetica vs. Univers

Letters / Maintaining x-height

X-height describes the height of lowercase letterforms. 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.

Fig 1.5.5 Curved strokes rise above the median & sink below the baseline

Fig 1.5.6 Curved strokes rise above the median & sink below the baseline

Letters / Form / Counterform

Counterform (or counter) is 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.

The latter is particularly and important concept when working with letterforms like lowercase ‘r’ that have no counters per se. How well you handle the counters when you set type determines how well words hang together—in other words, how easily we can read what’s been set.

Fig 1.5.7 Counterform

One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. The examinations also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterform’s unique characteristics. 

Fig 1.5.8 Helvetica Black (left) vs. Baskerville (right)

From the picture above, it is worth noting here that the sense of the ‘S’ holds at each stage of enlargement, while the ‘g’ tends to loose its identity, as individual elements are examined without the context of the entire letterform.

Letters / Contrast

The basic principles of Graphic Design apply directly to typography. The following are some examples of contrast—the most powerful dynamic in design—as applied to type, based on a format devised by Rudi Ruegg.

The simple contrasts produce numerous variations. For instance, small+organic/large+machined; small+dark/ large light and more.

Fig 1.5.9 Helvetica Bold (left) vs. Baskerville (right)

Fig 1.5.10 Contrasts

Week 6 Screen & Print

Typography in Different Medium

1. Print Type VS Screen Type

Fig 1.6 Print Type

Caslon, Garamond, and Baskerville are popular typefaces for print due to their elegant and intellectual qualities, as well as their excellent readability even at small font sizes. These classic typefaces are versatile and easy to work with, making them a great choice for typesetting. Their neutrality and versatility make them ideal for a wide range of print projects.

Fig 1.7 Screen Type

Typefaces designed for online use undergo optimization and adjustments to improve legibility and performance across various digital platforms. These modifications may involve increasing the height of lowercase letters (x-height), narrowing the gaps between ascenders and descenders, widening letter shapes, making counters more open, strengthening thin strokes and serifs, reducing variations in stroke thickness, and altering curves and angles in some designs.

Hyperactive link/ Hyperlink

A hyperlink is a clickable element, which can be a word, phrase, or image, that allows you to navigate to a different document or another section within the same document. Hyperlinks are present on most web pages, enabling users to navigate from one page to another. Typically, text hyperlinks appear as blue and underlined by default. When you hover the cursor over a hyperlink, whether it's text or an image, the cursor should transform into a small hand, indicating it's a link.

Font Size for Screen

Text displayed at 16 pixels on a screen is approximately equivalent in size to text found in printed books and magazines, taking into consideration the typical reading distance. Since we read books at a relatively close range, usually just a few inches away, the text is usually set around 10 points. If you were to read the same text at arm's length, it would be preferable to have a font size of at least 12 points, which is roughly equivalent to 16 pixels on the majority of screens.

System Fonts for Screen/ Web Safe Fonts

Every device is equipped with a default set of fonts, primarily determined by its operating system. The issue lies in the slight variations between them. Windows-based devices have their specific font group, while MacOS devices have a different selection. Google's Android system utilizes its own set of fonts. On the other hand, "web safe" fonts are consistent across all operating systems. These fonts constitute a limited collection that is common to Windows, Mac, and Google systems. 

For example of the fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Pixel Differences between Devices

The screens employed in our personal computers, tablets, smartphones, and televisions not only vary in physical dimensions but also exhibit text proportions that differ due to variations in pixel sizes. For instance, 100 pixels on a laptop screen are not comparable to 100 pixels on a large 60-inch HDTV. Moreover, even within a specific category of devices, there can be considerable diversity.

Fig 1.8 Pixel Differences between Devices

2. Static Vs Motion

Fig 1.9 Static Vs Motion

Static typography has limited capabilities when it comes to conveying words effectively. Conventional attributes like bold and italic styles provide only a portion of the expressive possibilities offered by dynamic properties.    

Motion Typography

In the domain of temporal media, typographers have the opportunity to infuse typography with a dramatic quality, enabling letterforms to adopt a fluid and dynamic character, as elucidated by Woolman and Bellantoni in 1999. Within the realm of film title credits, typographic details are often displayed gradually, with animation frequently used to breathe life into them. Motion graphics, especially in the context of branding for film and television production companies, are increasingly integrating animated text.

INSTRUCTIONS

Task 2 Formatting & Expression ( 20% ) - Individual Assignment

Exercise : 

1. Type expression
2. Text Formatting

Marking Criteria : 

• The typographic expression has been explored in great variety and creatively. The expression conceptually and typographically communicates the meaning being conveyed. The textual information is extremely well formatted (font size, line length, leading, alignment, cross alignment, reading rhythm, information hierarchy, widows and orphans). The layout and composition are suitable, impactful, memorable, and engaging.

Learning Goals : 

• To demonstrate the use of Grids, layouts, and page flow
• To apply the necessary skills and sensibilities for effective typographic communication and achieve good reading rhythm with memorability.

Timeframe : 

• Week 6 Week 7 (Deadline on Week 8)

<iframe src="https://drive.google.com/file/d/1-fHxNLFw56suwKm5SqMjNInWwvhOYziD/preview" width="640" height="480" allow="autoplay"></iframe>

Task 2: Text Formatting

RESEARCH

IDEAS

PROCESS

At first I type out the text and arrange it to the place I like. 

After placing the text I try to let the body got some design let the text up down flow. But it seem like not that suitable.

So, I started to play with the text arrangement. But Miss Low said my word not enough align and not enough organize.

At last, I arrange the head text more align and the body text more organize the body text visual looks more organize from long too short. 

Final Typographic Exploration 

Fig 7.1 Typographic Exploration & Communication JPEG without grids (31/10/2023)

Fig 7.2 Typographic Exploration & Communication JPEG with grids (31/10/2023)

Fig 7.3 Typographic Exploration & Communication PDF without grids (31/10/2023)

Fig 7.4 Typographic Exploration & Communication PDF with grids (31/10/2023)

HEAD
Font/s: ITC Garamond Std Bold
Type Size/s: 80(Unite, Better World), 57(To, A), 160(Visualized), 18(Visual communicators renew their call for a change of priorities!)
Leading: 55(Unite, Better World), 40(To, A), 80(Visualized), 20(Visual communicators renew their call for a change of priorities!)
Paragraph spacing: 12pt

BODY
Font/s: ITC New Baskerville Std Roman
Type Size/s: 10
Leading: 12
Paragraph spacing: 12pt
Characters per-line: 58
Alignment: Justify with last line align left

Margins: 10 mm top, 10 mm left + 10 mm right + 10 mm bottom
Columns: 2
Gutter: 5 mm

FEEDBACK

Week 6

Specific Feedback: Miss Low suggest me adjust the text and also make kerning to let my word looked more aligned. 

General Feedback: Miss Low checked my blog and said my blog on track but need to update Task 2 Blog.

Week 7

Specific Feedback: Miss Low choose the text is because she say this design is the most well structure not messy.

General Feedback: Miss Low checked my blog and she said my blog is on track and well organized.

REFLECTION

Experience

I found the experience of creating the editorial spread to be quite enjoyable. In contrast to our previous assignment, which focused on text formatting layout, this time we had three text options to choose from and a more generous space to experiment with. As I conducted my research, I noticed my enthusiasm growing as I came across various intriguing layouts. I was so engrossed in the process that I even contemplated designing some layouts of my own. However, the real challenge lay in crafting something distinct and unique because we were all working with the same three different texts.

Observation

Reviewing my works, I have come to the realization that a single text can be interpreted and presented in distinctive manners. I've also noticed that an individual's personality often shines through in their work. Furthermore, I've observed that we tend to unintentionally emulate designs we've encountered before. For instance, when I was initially brainstorming ideas and saw that the sample editorial spread used the subtitle text, I noticed a significant influence on my early concept ideas. This prompted my decision to choose a different text, aiming to bring a more unique perspective to my design.

Findings

Throughout the design process, I encountered several challenges. My font design did not present the same level of creativity and uniqueness as some of my peers' work, despite the considerable time and effort I invested. It became evident that we must exercise great care and attention when transitioning our designs into digital formats.

FURTHER READING

The Simple Things rebrand is a “Bristol family affair”

"The Simple Things" magazine unfolds as a heartwarming "Bristol family affair," infusing a distinct local flair into the publication's refreshed identity. While specific details about the rebrand are not provided, the characterization as a family affair implies a close-knit collaboration, possibly involving local talent and a shared connection to the vibrant Bristol community.

For an in-depth exploration of this charming rebrand, consider seeking out articles or press releases from design and media outlets. Look for insights into the creative process, the individuals or agencies behind the redesign, and the unique elements that reflect Bristol's influence on the magazine's new look.

Exploring design and branding platforms may yield case studies or analyses, offering a deeper understanding of the strategic decisions made during the rebrand and its potential impact on the magazine's visual appeal and market positioning.

Whether you're interested in the creative aspects, the familial collaboration, or the cultural resonance with Bristol, further reading can unveil the rich narrative behind "The Simple Things" rebrand and its significance within both the publishing and local creative communities.