Typography Task 1

TYPOGRAPHY | TASK 1: EXERCISES

 23/09/24 - 28/10/24/ | Week 1 - Week 5

 Task 1: Exercises

Table of Contents

I.   LECTURE
II.  INSTRUCTIONS
III. FEEDBACK
IV. REFLECTIONS
V.  FURTHER READINGS

I. LECTURE

Typo Introduction 

Typography, the art of arranging type, has a rich history. It began as calligraphy, evolved into lettering, and eventually became the term we know today. This journey has shaped the many rules and conventions that guide typographic design.

While there are no strict rules, understanding the process of creating good typography is key. By learning about the principles and techniques,  it can help the experimentation and development of our own unique style.

Font Terminologies : 

• 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.

Typo Development

Early Development / Timeline

1. Phoenician:

• Earliest known alphabetic writing system.
• Simple, linear forms.
• Written from right to left.

2. Greek:

• Adopted the Phoenician alphabet.
• Introduced lowercase letters.
• Changed writing direction to left to right.

3. Roman:

• Adapted the Greek alphabet. 
• Developed a more formal and structured style.
• Introduced serifs and other decorative elements.
• Tool Influence on Letterform

Early writing tools, like chisels, shaped the development of simple, uppercase letterforms. Over time, the need for faster writing led to the creation of lowercase letters. The standardization of writing under Charlemagne, including uppercase, lowercase, capitalization, and punctuation, laid the foundation for modern typography. Regional variations in tools, materials, and cultural influences further diversified the evolution of scripts.

Early Script Development

3rd to 4th century | Roman monuments employed square capitals, characterized by serifs and varying stroke widths achieved with a reed pen. While these were formal, everyday writing leaned towards cursive uncials, incorporating elements of Roman cursive for improved readability.

5th century | half-uncials emerged as a more formal lowercase letterform. Charlemagne's edict in 789 standardized writing, introducing majuscules (uppercase), minuscules (lowercase), capitalization, and punctuation.

13th century| regional variations took hold. Northern Europe favored the strong vertical Blackletter or textura, while the south leaned towards the rounder, more open rotunda script.

Gutenberg's printing press revolutionized text production, with the 1455 Gutenberg Bible marking a significant milestone.

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; shorter applications are accepted by the audience

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 is extreme.

1825 Square Serif / Slab Serif  Unbracketed with little variation between thick and thin strokes. 

1900 Sans Serif    Variations lean towards humanist or geometric shapes that have been nicknamed 'grotesque'

1990 Serif / Sans Serif  Font styles include both serif and sans serif alphabets

Typo Basics

• Baseline: The invisible line on which the letters sit.
• Median Line: The invisible line that defines the height of lowercase letters like 'x'.
• X-Height: The height of lowercase letters like 'x'.
• Stroke: Any line that forms part of a letter.
• Apex/Vertex: The point where two strokes meet.
• Arm: A short stroke extending from a main stroke.
• Ascender: The part of a letter that extends above the median line (e.g., in 'b' and 'h').
• Barb: A small serif at the end of a curved stroke.
• Beak: A small serif at the end of a horizontal stroke.
• Bowl: The curved part of a letter (e.g., in 'o' and 'd').
• Bracket: The connection between a serif and a stem.
• Crossbar/Cross Stroke: A horizontal stroke connecting two vertical strokes.
• Crotch: The inner angle where two strokes meet.
• Descender: The part of a letter that extends below the baseline (e.g., in 'p' and 'y').
• Ear: A small stroke extending from a main stroke.
• Em: A unit of measurement equal to the width of a capital 'M'.
• En: Half the width of an em.
• Finial: A rounded end to a stroke without a serif.
• Ligature: Two or more letters joined together as a single character.
• Link: The stroke connecting the bowl and loop in a lowercase 'g'.
• Loop: The curved part of the descender in a lowercase 'g'.
• Serif: A small line at the end of a stroke.
• Shoulder: A curved part of a letter, not part of a bowl.
• Spine: The curved stem of the letter 'S'.
• Spur: A small extension where a curved and straight stroke meet.
• Stem: The main vertical or diagonal stroke of a letter.
• Stress: The direction of a letter's slant.
• Swash: A decorative flourish on a letter.
• Tail: A curved stroke at the end of a letter.
• Terminal: The end of a stroke without a serif.

The Font

• Uppercase & Lowercase
• Small Capitals
• Uppercase & Lowercase Numerals
• Italic & Roman
• Punctuation & Miscellaneous Characters 
• Ornaments

Describing Typefaces

• Roman & Italic
• Boldface & Light
• Condense and Extended

Typo Text

Kerning: The automatic adjustment of space between letters (=/= letterspacing). (Option + left/right arrow key)

Letterspacing: Adding space between the letters.

Tracking: The addition and removal of space in a word or sentence; for example: normal tracking, loose tracking & tight tracking

Type Text Formatting ( Legibility )

• Flush left : All starts at the same point and ends differently based on characters per line
• Centered : transform texts to be shaped in a pictorial way
• Flush right : put emphasis on the end of the line as opposed to the start
• Justified : produces 'river' image of white space due to the text format

Texture

• Different typefaces suit different messages. 
• Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke.
• Sensitivity to these differences in colour is fundamental for creating successful layouts.

Leading and Line Length

Used for easy, prolonged reading.

• Type Size – Text type should be large enough to be read easily at arms length.
• Leading –  Focuses on the readability to not let the readers can easily lose his or her place or distract the reader from the material at hand.
• Line Length – Keep line length between 55-65 characters.

• Widow: A single line of a paragraph that appears at the top of a page or column, separated from the rest of the paragraph.
• Orphan: A single line of a paragraph that appears at the bottom of a page or column, separated from the rest of the paragraph.

Both widows and orphans disrupt the visual flow of text, making it harder to read. To avoid them, designers often adjust line spacing, font size, or column width.

Highlighting Text

In order to emphasise a certain body of text :

• italics
• bold
• bold + changing the typeface (note: san-serifs often look larger than serifs)
•  changing the colour. 
• placing a field of colour at the back of the text.

Headline within Text

Indicating the hierarchy in the text

This includes also cross alignment within headlines through doubling the leading space of body text.

Typo Understanding Lettercase

II. INSTRUCTIONS

Task 1 : Exercises - Type Expression

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

SKETCH

The chosen words for this exercise were "Melt, Burn, Grow, and Fade". 

I didn't have a very striking idea within 'Melt' because the number of my sketches and design variations between them do not have a constant theme whereas the other words have grounded the words' meaning into the type expression. I was happy to know that my favorite 'Grow' and 'Burn' sketch was selected. Mr. Max picked the other words based on their potential for digitization.

DIGITIZATION

In my digitization process, I already had some thoughts on fonts and typefaces used to represent each word. The route I'm taking to express these words will consider the implementation of Futura Std for 'Melt', ITC Garamond Light/Light Condensed for 'Burn', Adobe Caslon Pro for 'Grow', and ITC New Baskerville Std for 'Fade'.

I exported my initial sketches as the base to have an easier tracing especially when it comes to the more detailed aspects of the type expression.

FINAL TYPE EXPRESSION

Here's the final outlook on the digitization process. There are several instances where it differs a bit from the sketches provided. In this case, 'Melt' had the obvious revamp look as Mr. Max requested that the word express how it really melts instead of the final sketch. 

'Fade' has an extended stem to provide a unique touch as well as better readability due to the expression of fading which happens to the letter 'e'. 

'Grow' and 'Burn' followed the sketch without much of a disaster. 

TYPE ANIMATION

In this type animation, I want to ensure a smooth graphic gif for the word 'Grow' which was also selected by Mr. Max. I had several tries in recreating the   where I figured out the factor for a smoother play through the number of as well as the degree of W's fourth diagonal.

Therefore, the number of artboards for this type animation would be 18 artboards and there's a diagonal line used to maintain the diagonal's degree and middlepoint.

This is what my type expression looks like without the diagonal line.

Thus, this is what my trial 'Grow' animation would be like; the problems of not being straight diagonally have been fixed.

FINAL TYPE ANIMATION

Task 1 Exercise 2 - Text Formatting

In this first part of the second exercise, we're practicing our kerning and tracking with our names. Here's an unedited version of my work that uses the 10 Fonts listed beside my name. 

It is clearly shown this document requires editing for leading, tracking as well as kerning. After adjusting it all manually, here's the final result.

EXERCISE 2 PART 1

With the practice beforehand, we were given the next set of tasks to explore layouts in which we learn about grids, and margins as well using the previous text formatting. We were required to keep the font size the same while exploring other possibilites that can be altered. 

After adjusting the technicalities, I explored different layouts:

I explored several ways of organizing the text as well how to settle and place image to add a sense of personality into the text. After many thoughts, I decided to choose the third from the left for my final text formatting layout.

FINAL Text Formatting Layout

HEAD

Font/s: Bembo Std

Type Size/s: 72 pt

Leading: 36 pt

Paragraph spacing: 0

BODY

Font/s: Bembo Std

Type Size/s: 9 pt

Paragraph spacing: 11 pt

Characters per-line: 55-65

Alignment: left justified

Margins: 26 mm top, 26 mm left + right + bottom

Columns: 3

Gutter: 10 mm

III. FEEDBACK 

Week 1 : I briefly learnt the materials and assignments that would be given in this module which I would provide the result of my studies through a blog. The blog is set up during class. WeeK 2 : The introduction of Adobe Illustrator and tutorial of how the most used shortcuts, files, tabs and tools on how professional use to illustrate their works. Feedback hour is given to comment on the sketches. Although most has been approved, Mr Max provided some tips on what to improve before going to illustrator. Week 3 : The four words are being illustrated in Adobe Illustrator. We made use of the anchor points and the direct selection tool to help play with the letter style and provide the best imagery possible for the word's meaning. Week 4: After finishing formatting text on Adobe Illustrator, Mr Max looked over at the finished work and picked the best words for animation. I was approved for 'Melt' and 'Grow'. With no hesitation, I went on to Adobe Photoshop to help digitalize and animate the words after making 20 frames on Adobe Illustrator. Week 5: Although we are still finalizing on the animation, we were already ready to start our next task. This time, we were introduced to Adobe Indesign where we learn to play with test layout, composition and formation of title, paragraph description and a picture.

IV. REFLECTIONS

Experience

I loved the first part of the exercise because it utilizes more of a light creativity brain work. It gave me more of a thorough understanding of why and how typography affects the little details and bigger picture of adveristings. Although some of my designs were rejected, I understood as to why and how I could have made it differently even though it was just a few weeks ago. On the second exercise, I liked that weh had a touch of a formal experience in applying text and image based on a layout would generally be given different perspectives. Throughout my very beginner experience, I had a fun time with Illsutrator and diifulcites because of multiple crashes in Indesign. Overall, it was still a great learning experience.

Observations

I'm very thankful to have a supportive class and facilitator as I was able to generate more creative yet simple idea as I was given the opportunity to think on how others work on their designs. They were all very different yet express the meaning in a concretely manner. I loved what people did with their "Melt" design as it was on of my weakest designs among the four. Through some conversations, ideas and guidance from all, I was able to create the final look of "Melt". 

Findings

Throughout Task 1, I've learnt that Typography is something that I will continue to work hard on because I want to appreciate it better. People's designs were effective because I was able to associate the meanings and the designs from one glance. Doing so isn't an easy job as there are many technicalities of typography. This task definitely introduced the balance of the technicalities and emotional side of typography. With many feedbacks to come along the way, I hope I can improve the way I see on design and outside its box too.

V. FURTHER READINGS

Based on  Design School- Type - A Practical Guide for Students and Designers, there's a section for contemporary influence that I read which features on eo the 10 Fonts we're able to use in this exercise. 

Adrian Frutiger was a renowned Swiss typographer who made significant contributions to the world of typography. He is best known for designing the Univers typeface family, a versatile and influential collection of fonts.

Frutiger's early interest in form and sculpture, combined with his apprenticeship as a type compositor, shaped his approach to typography. He later studied at the Kunstgewerbeschule in Zurich and joined Deberny & Peignot in Paris, where he began work on Univers.

The Univers typeface family is characterized by its 21 variations, each with distinct weight and width. Frutiger introduced a numbering system to categorize these variations, making it easier to understand and use the family. He also pioneered a larger x-height and more proportional letterforms, enhancing readability and visual harmony.

Univers' remarkable uniformity and flexibility have made it a widely used typeface in various design applications.