Typography | Task 1: Exercises

22/04/2024 - 24/5/2024 / Week 1 - Week 5
Rio Sato / 0360530
Task 1: Exercises
Typography / Bachelor of Design (Honours) in Creative Media / Taylors University

1. LECTURES

Week 1

YouTube link: Typo_0_Eportfolio Briefing / Typo_0_Eportfolio-Jumplink — How to create them by Abigail Kartika

Mr Vinod shared the instructions for this module, how to make a blog, and how to achieve the task.

Outcomes from the lecture: I understood

The way of creating a Blogger account
The way of creating e-portfolios of Typography

Lectures - What you have done and learned in the lecture
Instructions - Task Information
Process Work - Your process of the task
Feedback - Explain your general and specific feedback
Reflection - Explain your Experience, Observation, and Finding
Further reading - Explain briefly about the book that is associated with the lecture

Upon altering HTML, Compose View displays a line
Use bold or highlining for titles, to make reader simpler to understand

Week 2

YouTube link: Typo_1_Development

1.0 Typography: Development / Timeline

Early letterform development: Phoenician to Roman

Writing meant scratching into wet clay with a stick / carving into stone a chiel
The forms were simple combinations of straight lines and pieces of circles

Fig. 1.1.1 Evolution from Phoenician letter

The Geek developed a style of writing called "boustrophedon"
Boustrophedon: lines of text read alternately from right to left and left to right

Fig. 1.1.2 Direction of writing for the Greeks, ‘boustrophedon’

Certain qualities of Etruscan strokes have a change in weight from vertical to horizontal, a broadening of the stroke at start and finish

Fig. 1.1.3 Phoenician to Roman

Hand script from 3rd-10th century C.E.

Square capitals: have serifs added to the finish of the main strokes
The variety of stroke width was achieved by the reed pen held at an angle of approximately 60° off the perpendicular

Fig. 1.1.4 4th/5th century: Square capitals

Rustic capitals: made it possible to write twice as many words on a piece of parchment in a lot less time. The angle at which the pen or brush was held was around thirty degrees off. the perpendicular is a composed version of square capitals

Fig. 1.1.5 Late 3rd – mid 4th century: Rustic capitals

Cursive hand: people in the 3rd-10th century wrote in cursive hand in which forms were simplified for speed for everyday transactions

Fig. 1.1.6 4th century: Roman cursive

Uncia: means one-twelfth of anything in Latin. However, it could be more realistic to consider uncials to be just tiny letters.
Compared to rustic capitals, the broad forms of uncials are easier to read at smaller sizes

Fig. 1.1.7 4th – 5th century: Uncials

Half-uncials: a further formalization of the cursive hand
mark the formal beginning of lowercase letterforms

Fig. 1.1.8 C. 500: Half-uncials

Charlemagne assigned Alcuin of York to standardize religious writings, which he revised using capitalization, punctuation, tiny, and majuscule, setting the calligraphy norm for a century

Fig. 1.1.9 C. 925: Caloline minuscule

Blackletter to Gutenberg's type

Regional adaptations of Alcuin's play emerged along with the fall of Charlemagne's dominion
Blackletter / Textura: a condensed, extremely vertical letterform that became popular in northern Europe
Rotunda, a rounder, more open hand, became popular in the south

Fig. 1.1.10 C. 1300: Blackletter (Textura)

Gutenberg marshaled engineering, metalsmithing, and chemistry to build pages that accurately mimicked the work of the scribe's hand - Blackletter of northern Europe. His type mold required a different brass matrix, or negative impression, for each letterform.

Fig. 1.1.11 C. 1300: Gutenberg mold

Text Type Development

Fig. 1.1.12 Text type classifications

Week 3

YouTube link: Typo_3_Text_P1

2.0 Typography: Text / Tracking

Kerning and Letterspacing

Kerning: Automatic adjustment of space between letters
Tracking: The addition and removal of space in a word / sentence

Fig. 1.2.1 Without Kerning and With Kerning

Letterspacing: To add space between letters.

Fig. 1.2.2 Normal tracking, loose tracking, and tight tracking

Formatting Text

Fig. 1.2.3 Flush left

Flush left: The text resembles handwriting, with consistent word spacing and line endings, allowing for an even gray value

Fig.1. 2.4 Centered

Centered: Centered type creates strong shapes in text, requiring line breaks to maintain symmetry and avoid a jagged appearance

Fig. 1.2.5 Flush right

Flush right: Places emphasis on the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.

Fig. 1.2.6 Justified

Justified: The text's symmetrical shape is achieved by expanding or reducing spaces between words and letters, sometimes causing vertical white space 'rivers'. Careful attention to line breaks and hyphenation is necessary.

Texture

Fig. 1.2.7 Anatomy of a typeface

Fig. 1.2.8 Different typefaces, different gray values

Compositional requirement: Ideal text to have a middle gray value. Fig. 1.6.2 shows how different typefaces have different gray values, some lighter, and some darker. The best choice would be to choose the middle gray value.

Leading and Line Length

Type size: Text type should be large enough to be read easily at arm's length.

Fig. 1.2.9 Leading and line length

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily lose track. A type that is set too loosely creates striped patterns that cause distraction.

Line Length: Shorter lines require less leading; longer lines more. Keep the line length between 55-65 characters. Extremely long or short line lengths impair reading.

Type Specimen Book

A type specimen book shows samples of typefaces in various different sizes. It's to provide an accurate reference for type, type size, type leading, type line length, etc.

Fig. 1.2.10 Sample Type Specimen Sheet

Week 4

YouTube Link: Typo_4_Text_P2

3.0 Typography: Text / Indicating Paragraphs

'Pilcrow' (¶) was used in text to indicate paragraph spacing, it is a holdover from medieval manuscripts seldom used today. (Basically hidden character)
'Line space'(leading)is between each line of text. If the line space is 12pt, then the paragraph space is 12pt
There is a difference between leading and line spacing. A leading space is the space between two sentences. A line spacing takes into consideration the the descender from one sentence to the descender of another sentence

Fig. 1.3.1 Line space vs leading

Indentation is the same size as the line spacing or the same as the point size of your text.
Extended paragraphs create unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.

Widows and Orphans

A widow is a short line of type left alone at the end of a column of text.
An orphan is a short line of type left alone at the start of a new column.
In justified text both widows and orphans are considered serious gaffes.
The only solution to widows is to rebreak your line endings throughout your paragraph so that the last line of any paragraph is not noticeable.
Orphans, make sure that no column of text starts with the last line of the preceding paragraph.

Fig. 1.3.2 Widows and orphans

Highlighting Text

When highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis of the text ensures readability is at its best.
Sometimes it is necessary to place certain typographic elements outside the left margin of a column of type (extending as opposed to indenting) to maintain a strong reading axis
Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom.

Fig. 1.3.3 Prime and quote

Headline within Text

'A' head indicates a clear break between the topics within a section. 'A' heads are set larger than the text, in small caps and in bold. 'A' head 'extended' to the left of the text

Fig. 1.3.4 A heads

'B' head here is subordinate to 'A' heads. 'B' heads indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as 'A' heads do. 'B' heads are shown in small caps, italic, bold serif, and bold san serif

Fig. 1.3.5 B heads

'C' heads, although not common, highlights specific facets of material within 'B' head text. They not materially interrupt the flow of reading. As with 'B' heads, these C heads are shown in small caps. italics, serif bold and san serif bold. C heads in this configuration are followed by at least an em space for visual separation

Fig. 1.3.6 C heads

Cross Alignment

Cross aligning headlines and captions with text type reinforces the architectural sense of the page-the structure-while articulating the complimentary vertical rhythms

Fig. 1.3.7 Cross Alignment

Fig. 1.3.8 Cross Alignment

Week 5

YouTube Link: Typo_2_Basic

4.0 Typography: Basic / Describing letterforms

Fig. 1.4.1 Describing letterforms - PDF

The font

Uppercase and lowercase
Small capitals
Uppercase and lowercase numerals
Italic
Punctuation and miscellaneous characters
Ornaments

Fig. 1.4.2 Uppercase and lowercase

Fig. 1.4.3 Small capitals

Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set

Fig. 1.4.4 Uppercase numerals/lining figures

Same height as uppercase letters and set to the same kerning width. They are most used with tabular material and uppercase letters

Fig. 1.4.5 Lowercase numerals/old style figures or text figures

Set to x-height with ascenders and descenders. Best used when using upper and lowercase letterforms

Fig. 1.4.6 Italic

Italics refer back to 15th century Italian cursive handwriting. Oblique is typically based on the roman form of the typeface

Fig. 1.4.7 Italic vs roman

Fig. 1.4.8 Punctuation, miscellaneous characters

Miscellaneous characters can change from typeface to typeface. It’s important to ensure that all the characters are available in a typeface before choosing the appropriate type

Fig. 1.4.9 Ornaments

Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro)

Describing typefaces

Fig. 1.4.10 Describing typefaces

Roman: Uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as ‘Book’

Italic: Named for 15th century Italian handwriting on which the forms are based. Oblique conversely is based on the roman form of typeface

Boldface: Characterized by a thicker stroke than a roman form. It can also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super

Light: A lighter stroke than the roman form. Even lighter strokes are called ‘thin’

Condense: A version of the roman form, and extremely condense styles are often called ‘compressed’

Extended: An extended variation of a roman font

Comparing Typefaces

Fig. 1.4.11 Comparing typefaces

Differences in x-height, line weight, forms, stroke widths and in feeling. Feelings connote specific use and expression. Examining typefaces allows us to know how we feel about certain types, and also see the appropriateness in type choices

Week 6

YouTube Link: Typo_2_Understanding

5.0 Typography: Letters / Understanding letterforms

Understanding letterforms

Fig. 1.5.1 Baskerville 'A'

The uppercase letterforms suggest symmetry, but it is not symmetrical. Two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc

Fig. 1.5.2 Univers 'A'

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

Fig. 1.5.3 Helvetica vs Univers

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

Maintaining x-height

Fig. 1.5.4 Median and baseline

X-height: The size of the 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

Form / Counterform

Fig. 1.5.5 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 are the counters handled determines how well the words hang together—how easily we can read what’s been set

Contrast

Fig. 1.5.6 Contrast

2. INSTRUCTIONS

2.1 Document: Module Information Booklet(MIB)

Task 1: Exercises

a) Type Expression(20%)

4 words are all yours to create and convey. Start by putting ideas on paper. After the ideas are chosen, you will have a selection of ten typefaces to choose from during the digitization process. Use the right typeface and arrange the letters iteratively so that the word's meaning—both stationary and moving—becomes apparent.

Software: Adobe Illustrator and Adobe Photoshop

b) Formatting Text(20%)

Watch lectures before starting: Texts P1 and P2. It will be given incremental amounts of text that address different areas will increase your familiarity and capability with the appropriate software and develop your knowledge of information hierarchy and spatial arrangement. One A4-sized layout must be submitted to complete the task.

Software: Adobe InDesign

Note* No color may be used in the exercises. Use only the 10 typefaces provided.

Requirements: Laptop, Adobe Creative Suite, FontLab, Eportfolio (Blogger), Gmail Ac., Facebook Ac. and Zoom/Teams.

Submission - Eportfolio

1: For the period of the assignment, all material gathered—including mistakes, triumphs, insights, sketches, visual research, printouts, webpages, photos, charts, and so forth—must be logically and chronologically recorded in the e-portfolio in a single post.

2: Every image, sketch, diagram, and scan needs to be properly taken.

Every picture, sketch, diagram, or scan needs to be identified. The final product must be uploaded as a PDF, JPEG, or GIF file (not PNG).

Timeframe: Week 1 - Week 5

Deadline: Week 6

Learning Goals:

To be able to compose and express using textual information

To be able to format text for effective communication

3. PROCESS WORK

Task 1: Exercise 1 - Type expression

3.1 Research

The art and skill of arranging words to create something readable, and aesthetically pleasing is known as typography. Students had to make a few choices for this assignment, including picking the right typeface, determining the point size, modifying the kerning and line spacing, and creating a layout that made sense.

My everyday observations serve as a source of inspiration for the words I will eventually write. when people's lives and language are so closely related.

I began by searching for examples of the given words using Pinterest.

Fig.3.1.1: References for the word "DIVE", Week 2 (29/4/2024).

Fig.3.1.2: References for the word "BREAK", Week 2 (29/4/2024).

Fig.3.1.3: References for the word "JUMP", Week 2 (29/4/2024).

Fig.3.1.4: References for the word "SLEEP", Week 2 (29/4/2024).

In summary, my research has led me to the realization that words can be expressed differently by knowing the definitions of the words.

3.2 Sketches

Fig. 3.2.1 Type expression sketches, Week 2 (1/5/2021)

After the feedback session, my final choices are dive #2(merged with #4), break #3(merged with #4), jump #2, sleep #3.

3.3 Digitisation

Fig. 3.3.1 Type expression pre-submission, Week 3 (10/5/2024)

Fig. 3.3.1 shows my first try at digitalising. For "dive" I had to go through many tries to get the stretched look. The first try for "break"(Fig. 3.3.1) was done by stretching the A and K, which isn't allowed. The influence of the fonts given is greater than I thought, so I needed to consider what types of font I use carefully.

Fig. 3.3.2 "DIVE" digitialisation probress, Week 3 (11/5/2024)

For attempt #1, I did "V" have an outline to stretch the part of the letter to make it look like doing diving. For attempts #2 and #3, by using object warp the words express water shape after people dive. Creating water shapes in the words is more difficult than I thought because it doesn't look like splashing in an attempt #2.

Fig. 3.3.3 "BREAK" digitialisation probress, Week 3 (11/5/2024)

For "BREAK", initially I was going to digitise attempt #1, however, overly distortions weren't allowed so I tried making a simple version of the sketch. In my second attempt, I used a pen tool to make it look like broken glasses. It looks good for the animation part at the same time.

Fig. 3.3.4 "SLEEP" digitalisation progress, Week 3 (11/5/2024)

For "SLEEP", I first digitised attempt #1 following the sketch, but it is difficult to make it look like the "S" is lying. After I had got some feedback from the tutor, I switched the design to attempt #2.

3.4 Final Type Expression Outcome

Fig. 3.4.1 Final Type Expression - JPEG, Week 4 (13/5/2024)

Fig. 3.4.2 Final Type Expression - PDF, Week 4 (13/5/2024)

3.5 Type Expression Animation

I created a type expression animation which is "BREAK". I made seven artboards in Adobe Illustration, but I cut two of them off for animation to make them simple and viewable. In Adobe Photoshop, I put 0.5 seconds for each beginning and ending to make easily to see "BREAK is breaking".

Fig. 3.5.1 Artboard (7 frames), Week 4 (15/5/2024)

Fig. 3.5.2 Animation timeline (5 frames), Week 4 (15/5/2024)

Fig. 3.5.3 First attempt at animating "BREAK", Week 4 (15/5/2024)

The tutor gave me feedback that let "BREAK" have a factor as to why it broke.

Fig. 3.5.4 Artboard (13 frames), Week 4 (18/5/2024)

Fig. 3.5.5 Animation timeline (13 frames), Week 4 (18/5/2024)

I ended up using 13 frames because I wanted the animation to be as it represents breaking.

3.6 Final Animated Type Expression

Fig. 3.5.6 Final Animated Type Expression "BREAK" - GIF, Week 4(18/5/2024)

Task 1: Exercise 2 - Text Formatting

In Exercise 2, we are required to produce a single final layout that addresses many aspects of text formatting, including alignment, paragraph spacing, kerning, and leading. We will be able to practice and improve our knowledge of information hierarchy and spatial layout with this exercise. This activity will be conducted using Adobe InDesign.

3.7 Text Formatting: Kerning and Tracking

Fig. 3.6.1 The First Layout, Week 5 (24/5/2024)

Fig. 3.6.2 Text Formatting with Kerning, Week 5 (24/5/2024)

3.8 Text Formatting: Task 2

Fig. 3.6.3 Layout progress, Week 5(24/5/2024)

I got feedback from Mr.Max, and I chose the 5th layout. It needs to keep it as 2 columns instead of 3.

Kerning the main text to make the text easier to read, and if the character spacing or line spacing is unnatural, change it to the content.

I changed the layout to 2 columns from the first layout.

Fonts: ITC New Baskerville Std (Roman and Bold), Janson Text LT Std (75 Bold),

Point size: 9 pt (body text), 50 pt, and 20pt (heading)

Leading: 14.4 pt (body text), 28.8 pt (heading)

Paragraph spacing: 14.4 pt

Alignment: Left align

Kerning the main text to make the text easier to read, and if the character spacing or line spacing is unnatural, change it to the content.

3.8 Final Task 1: Exercise 2 - Text Formatting

Fig. 3.6.4 Final Task 1: Exercise 2 - Text Formatting, Week 5 (24/5/2024)

Fig. 3.6.5 Text Formatting, Week 5 (24/5/2024)

4. FEEDBACK

Week 2

General Feedback: Mr. Max chose the design that was best for the next step from my sketches

Specific Feedback: Feedback for each word: DIVE#2, #4, JUMP#1, #2, BREAK#2, #3, SLEEP#3

Week 3

General Feedback: Use the pen tool to create the shape(do not use a brush), Select the object, and press Alt to copy (do not use Ctrl+C)

Specific Feedback: DIVE: Use warp to create the water shape, JUMP: ok, BREAK: Create letters that break and fall backward, SLEEP: Lay down the whole letter

Week 4

General Feedback: The pictures shared in the e-portfolio should be PDF, JPEG, or GIF(not PNG)

Specific Feedback: Let "BREAK" have a factor as to why it broke

Week 5

General Feedback: To ensure neat work, text formatting should adhere to kerning/tracking requirements. To achieve a clear text formation, we must appropriately reposition and align our paragraphs, titles, sentences, and other textual elements.

Specific Feedback: The 5th layout for text formatting part 2 can be used, make sure the size, font, and paragraph style are correct. Upload the task in JPEG and PDF to my e-portfolio.

5. REFLECTION

5.1 Experience

The 'Type Expression' and 'Formatting Text' exercises offered a rich learning experience. The task of creating and conveying meaning through four words was challenging. It required a deep understanding of the relationship between typography and meaning. The process of brainstorming, selection of typefaces, and the iterative arrangement of letters until the meaning became clear was an interesting task.

5.2 Observations

The 'Formatting Text' exercise further deepened my understanding of how to handle large amounts of text. The lectures provided valuable insights into information hierarchy and spatial arrangement, which I applied while working on the A4-sized layout. This task improved my proficiency with Adobe InDesign and reinforced the significance of layout in effective communication.

5.3 Findings

The requirement to record every step of the process, including mistakes and triumphs, in the e-portfolio was an invaluable practice in reflection and self-assessment. It not only recorded my process but also allowed me to see my progress and identify areas for improvement. This assignment, overall, has significantly enhanced my skills in typography and text formatting. I am now more confident in my ability to express ideas and communicate effectively through text.

6. FURTHER READING

Fig. 6.1 Typographic design: Form and communication (2015)

"Typographic Design: Form and Communication" by Rob Carter, Ben Day, and Philip B. Meggs is a comprehensive guide to typography, covering both its historical evolution and contemporary practices. The book explores the fundamental principles of typography, including type anatomy, classification, and layout techniques.

Fig. 6.2 Typography in a new century and millennium begin: 2000 CE

In this book, it delves into the expressive potential of typefaces and their use in various design contexts, from print to digital media.

Fig. 6.3 STRUCTURE AND SPACE, Page 67

Through insightful analysis and practical examples, the book offers valuable guidance for designers looking to master the art of typographic communication.

Search This Blog

Rio Sato (0360530)