Typography / Task 1 : Exercises

 Typography / Task 1 : Exercises

- September 01, 2022

04.09.2023 – ?.?.2023/ Week 1 – Week 6
TAO YUZE / 0366967
Typography / Bachelor fo Design (Honours) in Creative Media
Task 1: Exercises 1 & 2

WEEK 1(a) / Introduction Typography: The art and technique of arranging type to make written language legible, readable, and appealing when displayed. Font: The individual font or weight within the typeface. Typeface: The entire family of fonts/weights that share similar characteristics/styles. WEEK 1(b) / Development Early Development / Timeline Essentially, due to the materials utilised, uppercase forms are a simple combination of straight lines and pieces of circles. Phoenicians wrote from right to left. The Greek wrote alternatively, from right to left, and then left to right – boustrophedon. Etruscan carvers eventually developed certain strokes as they painted, resulting in what we refer to as serifs. Over the course of about 900 years, Roman letters were developed from Phoenician and Greek letters. Square capitals were developed by the use of slanted tools, resulting in thick and thin strokes. Rustic capitals – a compressed version of square capitals. While they took less time to write and occupied a smaller space, they were more difficult to read. Lowercase letterforms were eventually formed while writing quickly. Uncials – 'small letters' (incorporated elements of both uppercase and lowercase letters). Half-uncials – the first formal introduction of lowercase letters. To standardise text, uppercase and lowercase letters, capitalisation, and punctuation were introduced under the command of Charlemagne. This allowed for clearer communication. Later on, different variations of the script were formed in different parts of Europe as a result of the different environments/tools/skill/culture/etc. Text Type Classifications 1450 Blackletter: The earliest printing type – based on the hand-copying styles used in books in northern Europe at the time. 1475 Oldstyle: Based on the lowercase forms used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on roman ruins. 1500 Italic: Condensed and close-set (now not considered as a separate typeface). 1550 Script: An attempt to replicate engraved calligraphic forms. 1750 Transitional: A refinement of oldstyle forms – thick and thin relationships were exaggerated, and brackets were lightened. 1775 Modern: Serifs are unbracketed, and the contrast between thick and thin are extreme. 1825 Square Serif / Slab Serif: Unbracketed with little variation between thick and thin strokes. 1900 Sans Serif: Eliminated serifs. 1990 Serif / Sans Serif: Includes both serif and sans serif alphabets. WEEK 2 / Basic Describing Letterforms To identify specific typefaces, it’s essential to understand a letterform’s components. Keep the title part the same and rewrite the content part

Fig. 2.1, Describing Letterforms

• Baseline: The imaginary base on which letterforms rest.
• Median: An imaginary line that defines the x-height of letterforms.
• X-height: The height of the lowercase 'x' in a typeface.
• Stroke: Any line that contributes to the basic structure of a letterform.
• Apex/Vertex: The point where two diagonal stems meet.
• Arm: Short strokes extending from the main stem of a letterform.
• Ascender: The part of the stem of a lowercase letterform that extends above the median line.
• Barb: A half-serif finish found on certain curved strokes.
• Beak: A half-serif finish located on some horizontal arms.
• Bowl: A rounded form that describes the counter of a letterform.
• Bracket: The transitional element that connects the serif to the stem.
• Cross Bar: A horizontal stroke within a letterform that links two stems.
• Cross Stroke: A horizontal stroke within a letterform connecting two stems.
• Crotch: The interior space where two strokes meet.
• Descender: The portion of the stem of a lowercase letterform that extends below the baseline.
• Ear: A stroke that extends from the main stem or the body of the letterform.
• Em: A unit of distance equal to the size of the typeface.
• En: Half of the em's width.
• Finial: A rounded, non-serif terminal at the end of a stroke.
• Ligature: A character formed by combining two or more letterforms.
• Link: A stroke connecting the bowl and the loop of a lowercase 'G.'
• Loop: The bowl created in the descender of the lowercase 'G' in some typefaces.
• Serif: A right-angled or oblique foot at the end of a stroke.
• Shoulder: A curved stroke that is not part of a bowl.
• Spine: The curved stem of the letter 'S.'
• Spur: An extension that articulates the junction of a curved and rectilinear stroke.
• Stem: The primary vertical or oblique stroke of a letterform.
• Stress: The orientation of the letterform, indicated by the thin stroke in round forms.
• Swash: A flourish that extends the stroke of the letterform.
• Tail: The curved diagonal stroke at the end of certain letterforms.
• Terminal: A self-contained finish of a stroke without a serif.

The Font When considering typefaces, it's important to recognize different font styles and character sets within them:

1. Uppercase & Lowercase: The combination of uppercase and lowercase letters in a typeface.
2. Small Capitals: A variation of uppercase letters in smaller sizes.
3. Uppercase & Lowercase Numerals: Numerals designed to match the style of uppercase and lowercase letters.
4. Italic & Roman: Two variations of a typeface, with italic emphasizing slanted and cursive features and Roman retaining a more upright, traditional appearance.
5. Punctuation & Miscellaneous Characters: Characters such as punctuation marks, symbols, and other non-alphabetic characters.
6. Ornaments: Decorative elements or embellishments used in a typeface.

Describing Typefaces Typefaces come in a variety of styles, and it's essential to describe them accurately:

1. Roman & Italic: Roman typefaces have an upright, non-slanted appearance, while italic typefaces feature slanted, cursive characteristics.
2. Boldface & Light: Typefaces can be designed in bold or light variations, affecting their weight and thickness.
3. Condensed and Extended: Some typefaces come in condensed or extended versions, altering the width of the characters.

WEEK 3 / Text

Tracking: Kerning and Letterspacing

• Kerning: The automatic adjustment of space between letters

Fig. 3.1, Kerning

• Tracking, on the other hand, pertains to the art of manipulating space within a word or sentence. It's a versatile technique that can involve both the addition and removal of space to enhance the overall visual appeal and legibility of the text.

  Within the domain of tracking, we encounter three distinct approaches:

  1. Normal Tracking: This method maintains the default spacing between letters, keeping the text in its natural, reader-friendly state. It is the foundation upon which other tracking techniques are built.

  2. Loose Tracking: When we opt for loose tracking, we deliberately introduce additional space between characters within a word or sentence. This results in a more open and airy appearance, which can be employed for creative or stylistic purposes.

  3. Tight Tracking: In contrast, tight tracking involves the reduction of space between letters, leading to a more compact and condensed text. This approach is often used when space is limited or when a sleek, cohesive aesthetic is desired.

Fig. 3.2, Tracking

While it is generally acceptable to adjust the spacing between uppercase letters, the same does not hold true for lowercase letters. This distinction arises from the fact that uppercase letterforms are designed to be self-sufficient, while lowercase letterforms rely on the interplay of negative space between letters to ensure smooth and legible reading flow.

Formatting Text When formatting text, the primary objective is legibility. The following text formatting options are common in typography:

1. Flush left: Text aligned on the left margin, creating a straight left edge.
2. Centered: Text aligned at the center of the page or text box.
3. Flush right: Text aligned on the right margin, creating a straight right edge.
4. Justified: Text aligned both on the left and right margins, creating even, straight edges on both sides.

Texture: Different typefaces convey different visual textures. The choice of typeface should align with the message, considering factors like x-height and stroke width, which affect the overall color or darkness of the text on the page. A good typographer selects a typeface that complements the message and ensures legibility.

Leading and Line Length When determining leading (line spacing) and line length, the goal is to facilitate easy, extended reading. Key considerations include:

• Type Size: Text type should be large enough to be read comfortably at arm's length.
• Leading: Inadequate leading can cause readers to lose their place, while excessive leading can distract from the content.
• Line Length: It's advisable to keep line lengths between 55-65 characters, as this range enhances readability and reader engagement.

WEEK 4 / Text

Indicating Paragraphs

Pilcrow's Medieval Resonance

The pilcrow symbol, a vestige from medieval manuscripts, carries historical significance. It's a unique character that often denotes the beginning of a new paragraph.
Maintaining Consistency in Paragraph Spacing
To achieve a harmonious text layout, cross-alignment is essential. This means that the leading (line spacing) and paragraph spacing should be uniform in size, creating an even and balanced appearance.
The Role of Indentation
Indentation is another crucial element. It is typically set at the same size as the line spacing or the point size of the text. This practice enhances the readability and visual flow of the content.
Addressing Widows and Orphans
Widows, those short lines of text left isolated at the end of a column, may sometimes be permissible. However, orphans, which are short lines of text abandoned at the start of a new column, are generally considered unacceptable due to their disruptive nature.
Emphasizing Text
Highlighting specific text segments can be achieved in various ways. You can use italics, bold, or a combination of both. Additionally, altering the typeface (note that sans-serifs often appear larger than serifs) and changing the text's color can also serve as effective highlighting methods. Another approach is placing a colored background behind the text to make it stand out.
Headings Within Text

Within the body of text, various types of subdivisions, or headings, serve to structure the content. While keeping the title consistent, it's essential to rework the content section, ensuring clarity and coherence in the narrative.

Fig. 4.1, Headline within Text

---

INSTRUCTIONS

TASK 1 / Exercise 1 – Type Expression

Compose and express the chosen 4 words using any of the 10 typefaces provided.

Digitisation

Because of a misunderstanding of the instructor's requirements, I directly used AI and PS for creation, so there was no sketch for this exercise

Digitisation type final 2023/10/10

I chose the words Dive, Spring, Chaos, and Bounce 

CHAOS                      

Three different ideas were presented, representing different perspectives on the meaning of the word CHAOS.When the  mentor made a request for the work, I realized that I had to decipher the  meaning of the words themselves from multiple angles

first version(digital type)：Chaos that is simpler and more intuitive 2023/10/10

First of all, the words themselves are orderly, although the original meaning of the word is chaos, but  when I show the feeling of chaos, I cannot affect the basic visual experience of the viewer, that is, it is    not allowed to make the words themselves completely unrecognizable and excessively distorted or  deformed the text itself.

 So I created the idea of the first version, I used words in different fonts to superimpose chaotic words   to achieve a chaotic visual experience, but this is done vertically and does not affect the horizontal  reading experience

I'll admit that it will be easier at first, because we are almost just beginning to learn to create with software, but I can believe that one of the purposes of the mentor's assignment is to familiarize  ourselves with the software, and in the later ideas, I will improve the operation of the software. 

second edition(digital type)：Local chaos constitutes order as a whole 20223/10/10

The word chaos reminds me of quantum theory, where quanta is completely chaotic under the microscopic level, but these chaotic quanta make up macroscopic ordered matter, which gives me new ideas.So I made a second version, where I split many chaos into separate letters and combined them into one big chaos.This combination is disordered from a microscopic point of view, but it forms clear words as a whole, and countless small chaos seems to be constantly whispering in the words.This work gave me a better understanding of how to use Photoshop

Third version(digital type)：The feeling of closeness to chaos brought about by unstable structural systems 2023/10/10

Some physics knowledge provides new ideas about the effect of discordant forces when a combination of objects is prone to collapse. I set my eyes on the shape of the letters themselves, and I was so impressed by the elegant and creative monogram combinations that my mentor displayed, so I decided to make one of my own.In this work, I connect the letters to each other, let the letters interact with each other. Show a state of instability, the feeling of being ready to fall, and let the words be displayed in a non-linear way of reading.

SPRING

Spring is a more intuitive word than chaos, and when we hear spring, we naturally think of growth, plants, green.When I approached this challenge, the first thing that came to my mind was a Blender animation also called Spring

font design in Blender Animation Spring

This design inspired me, but what I needed to do was different from this，First of all, I can't use colors other than black, white and gray, diverse colors are indeed more expressive, but my distinction between fonts and paintings.So what I'm going to do is use a more flat and simplified solution，So I gave the first plan.

First version of sprinfg(digital type): final 2023/10/10

In constant revisions, I completed Spring's first idea，To achieve this, I looked up a number of materials to help me use the different features of phtotoshop.Which helped me a lot to Familiarity with Photoshop.

Use the Path and Pen tools to edit existing fonts during production

In the original idea, I intended to completely redraw the font. But I soon found this unrealistic because of my limited ability and unskilled use of the software at this stage，So I took an existing font and converted it to a path and modified it with the Pen tool.

After modifying with the Pen tool

After the revised font shape is close to the plant, I tried to increase the feeling of natural growth, and finally finished the final version with small leaves.

The second version(digital type) ：focuses on the concept of growth itself 2023/10/10

In the second version, I changed my thinking again, and the font design requirements were simplified, so I could simplify the understanding of the meaning of words.What is there in spring? Growth, the growth of plants and the growth of animals, so I extracted the word growth.In this idea I wanted to express a process of growth, black patches of color represent under the soil, or cold winter, let the position of the letters gradually climb as if delayed photography shows the process of growth.In this practice, I learned to use the overlapping of the two letters of white and black to produce an overexposure effect, and obtained an effect close to light illumination under the limitation of black and white, which made me think of the feeling that the human eye cannot temporarily adapt to the change of light when moving from a dark place to a bright place.

The third idea(digital type): focus on the shape of the letters, replacing the letters with graphics 2023/10/10

The third idea is more simple and intuitive, and its idea comes from the typography tutorial video in you tube, which mentions the use of shapes similar to letters to replace letters or parts of them, so I chose this small grass vector as a substitute for R and I, and the other letters are selected from the font in PS.

DIVE

The word diving is a word with dynamic characteristics that conjures up images of drops, spins and water.It also provided me with an entry point to think about.

First version(digital type): I tried to make stereoscopic effects with flat graphics 2023/10/10

Obviously, I noticed the letter i at first glance, and it was inevitable to process it, in this idea I created a small scene of diving, using the black and white font overlay effect I learned earlier, I took D as a small dot of i, stretched i to show the drop, and the remaining letters were distributed in a drop curve to show the process of diving.

Second version(digital type): more flat and symbolic 2023/10/10

The second version can be seen as an improved version of the first version, The design idea is consistent with the first version，which is more concise and flat, and the first version is close to overdesigning or has been overdesigned.

The third version(digital type): inspired by time-lapse photography2023/10/10

The third idea came from time-lapse photography of falling objects on YouTube, where the video used a black background to highlight the trajectory of the object.I learned to use grayscale gradients to try to represent the direction of the arrow of time.

BOUNCE

Also words with dynamic properties, bounce is an iterative process compared to dive，This forced me to learn more Photoshoop features to improve my design expression skills.

The first idea(digital type): bouncing particles in the camera obscura 2023/10/10

The idea was inspired by a scientific device called a camera obscura, in which accelerated particles collide to produce white traces so that scientists can track their trajectories.In this practice, I used motion blur for the first time and achieved good results.

Second idea(digital type): It's like bouncing over and over again 2023/10/10

In the second idea, I tried to express a feeling of bouncing repeatedly, using five layers for each letter to overlay and using the grayscale gradient effect I learned earlier, with a solid black letter behind each gray letter, creating thickness，The direction of the gradient effect is staggered, like a ball bouncing along a path.

The third idea(digital type): inspired by the infinite mirror 2023/10/10

Infinity Mirror: The illusion of light bouncing

I was inspired by a video about the Infinity Mirror, a multi-layered structure in which light bounces to create the illusion of infinity, which is the perfect demonstration of bounce.In this practice, I learned to use the perspective deformation tool.

FINAL Type Expressions

Digitisation type final 2023/10/10

Based on feedback from the second week, I made changes and selections to my previous work, eliminated some problematic designs, and redesigned the new Chaos

Type Expression Animation

Animation practice I chose bounce as my word，Because the dynamic meaning of this word is so obvious, it is perfect as my first animation exercise. My idea was to make a simple and refined animation that would give me a better understanding of animation making.

frames of bounce 2023/10/11

I think to make O bounce like a ball, the gif in the early state is very simple and stiff, just O moves up and down, and it is difficult to even feel it bouncing. So I looked up some information to find a way to improve O's bouncing feeling. I noticed that motion blur could be used as a kind of original complement, so I added motion blur to enhance the dynamics.To increase the elasticity, I made O deform at its lowest point so that it seemed to be flattened.

fina_bounce_ani.gif  2023/10/11

At the same time I added more frames from the rising and highest points of O, so that the speed of the rise and fall was inconsistent, making the bounce more realisticI also added an effect that made other letters tremble to show the vibration caused by bouncing.

TASK 1 / Exercise 2 – Text Formatting

"You will be given incremental amounts of text that address different areas within text formatting i.e. type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans and cross-alignment. These minor exercises (Formatting Text 1:4 to 4:4A) will increase your familiarity and capability with the appropriate software and develop your knowledge of information hierarchy and spatial arrangement. The task ends with the submission of one layout in A4 size demonstrating."

–––

Kerning and Tracking
I first practiced kerning and tracking with my name using the 10 typefaces provided.

name with 10 fonts 2023/10/18

Layouts
Then, following the tutorials and text provided, I started working on InDesign.

Three alternative layouts 2023/10/18

I explored three different layouts and finally decided to leave the second one，I think the second one is a good combination of pictures and titles, the overall look and feel is more vibrant, and at the same time uses the method of enlarging the first letter to enhance the presence of the text.

layout_final 2023/10/18

layout_Final with guide line 2023/10/18

HEAD
Font/s: Gill Sans MT
Type Size/s: 72 pt
Leading: 36 pt
Paragraph spacing: 0

BODY
Font/s: Adobe Caslon Pro
Type Size/s: 12 pt
Leading: 13 pt
Paragraph spacing: 11 pt
Characters per-line: 57
Alignment: left justified

Margins: 123 mm  top_left_right 12.7mm bottom 28mm
Columns: 4
Gutter: 10 mm

Feedbacks

week2

:General feedback: My work should be simpler and can't affect the reading order. Sometimes I think it's too complicated.

specific feedback: The third chaos affected the reading order, and I remade it to make the order more reasonable. The design of the third spring could not make the reader simply understand the meaning, so I redesigned a new one in the second submission. There is basically no big problem with the design of bounce, but most of their backgrounds are black. I removed the black background and reversed the color to ensure visual consistency.

  

week3

General feedback: The final electronic version of the font was generally fine, and I reworked Chaos in class with a more visually striking design Specific feedback: The structure of the previous electronic portfolio was problematic, and I re-edited the new version following the example

week4

General feedback:

Update my animation type expression and week 4 further reading. Specific feedback: Add dynamic blur to the animation Further reading:“The Elements of Typographic Style"

reflection

experience

On a different note, I didn't face much difficulty working with Illustrator and InDesign since I'm already familiar with both applications. My in-class experience was also pleasant. While I occasionally felt tired, the classes had a lighthearted and non-stressful atmosphere. Additionally, our instructor, was supportive and open to addressing our concerns, which positively impacted my overall experience.

Observations

Through our weekly check-ins with Mr. Vinod, I had the chance to review the projects of my peers. It became evident that, even when given the same product, like a specific body of text, there was a remarkable diversity in the outcomes and results. This experience served as a source of inspiration and also provided valuable insights into how different individuals perceive and interpret words and text in their own distinct ways.

Findings

In the course of Task 1, I've come to realize that Typography is a subject I have grown to deeply love and appreciate. Being someone who values the power of words and their ability to convey messages, I found it quite enjoyable to enhance my skills in visually expressing their meanings. Previously, my approach to typography was more instinctual, based on personal feelings rather than a solid understanding of the technicalities, rules, and structures involved.

However, Task 1, particularly the second exercise, has introduced me to the technical aspects of typography, which I believe will be a valuable asset as I continue to explore this creative field. Furthermore, the weekly feedback sessions I received significantly contributed to my learning experience. Not only did they boost my productivity, but they also fostered a growth mindset within me, encouraging a more enthusiastic and curious approach to learning.

FURTHER READINGS

"The Elements of Typographic Style" by Robert Bringhurst. This book is often considered a classic in the field of typography and design. It covers a wide range of topics related to typography, including principles, techniques, and the aesthetics of typesetting.

This book provides valuable insights into the art and science of typography, making it a useful resource for both beginners and experienced designers. Keep in mind that there are many other excellent books on typography

"The Elements of Typographic Style" by Robert Bringhurst

Chapter 1: The Grand Design

In the opening chapter, Bringhurst sets the stage for the exploration of typography by delving into the fundamental principles that underlie effective design. He emphasizes the importance of recognizing typography as a craft that goes beyond mere mechanics, highlighting its role in conveying meaning and aesthetics. The chapter introduces readers to the historical and cultural aspects of typography, discussing how it has evolved over time and been influenced by different civilizations. Bringhurst establishes a foundation for readers to understand the significance of type and design in the broader context of communication.

Chapter 2: Rhythm and Proportion

The second chapter of the book delves into the principles of rhythm and proportion as they apply to typography. Bringhurst explores the concept of rhythm in typography, discussing how the arrangement of text on a page creates visual patterns that can enhance or disrupt the reading experience. He introduces the idea of proportion, both in individual characters and in the overall layout, emphasizing the importance of balance and harmony in typographic design. Through practical examples and historical references, Bringhurst provides insights into how typographers can achieve a sense of rhythm and proportion in their work.

Chapter 3: Harmony and Counterpoint

Moving beyond the basics, the third chapter explores the nuanced concepts of harmony and counterpoint in typographic design. Bringhurst delves into the relationships between different typefaces, discussing how they can complement or contrast each other to create harmonious or dynamic layouts. The chapter provides guidance on selecting and combining typefaces effectively, considering factors such as style, weight, and spacing. Additionally, Bringhurst introduces the concept of counterpoint, where varying type elements work together to create a visually engaging composition. Through practical examples and detailed analysis, readers gain a deeper understanding of how to achieve balance and variety in typographic harmony.

These initial chapters lay a strong foundation for readers to grasp the philosophical and practical aspects of typography, preparing them for more in-depth discussions on specific elements of type, layout, and design as the book progresses.