Typography / Task 1: Exercises

September 26, 2023

Typography / Task 1: Exercises

2023.09.26-2023.10.30 Week 1- Week 6

Teh Ming En/0364908

Typography-Bachelor of Design (Honours) in Creative Media--Taylors University

Task 1: Exercise 1&2

LECTURES

Week 2:

Introduction

Typography: has evolved over 500 years from calligraphy and lettering. It comes from everywhere. Typography is the art and technique of arranging type to make written language legible, readable, and appealing.

Fonts: individual font or weight within the typeface

Typeface: the entire family of fonts/weights that share similar characteristics/styles.

Typography: Development/ Timeline

~Early letterform development for Phoenician to Roman writing meant scratching into wet clay with sharpened sticks or stone with a chisel. Phoenician wrote from right to left.

~The Greeks changed the direction of writing(left➡right)

~Etruscan carvers changed their stroke in weight from vertical to horizontal.

~Roman letters developed from Phoenician has a history of about 900 years.

~Square capitals found in Roman monuments. They are typically reserved for documents of intended performance.

~Lowercase letters from developed writing fast uppercase

~Uncials is simply as small letters. It didn't have lower or uppercase

~Half-uncials is the beginning of lowercase letterforms.

~Charlemagne set the standard for calligraphy for a century. He introduced uppercase and lowercase letters, capitalization, and sentence and punctuation.

~Blackletter of Northern Europe was mimicked the work of the scribe's hand by Gutenberg.

Text Type Classifications

1450 Blackletter- The earliest printing type, based upon the hand-copying styles that used in books in Northern Europe.

1475 Oldstyle- Based upon the lowercase forms used by Italian humanist scholars for book copying and uppercase forms found inscribed on Roman ruins. The forms from their calligraphic origins over 200 years.

1500 Italic-First Italics were condensed and close-set. All text typefaces have been designed with accompanying Italic forms since the sixteenth century.

1550 Script- Enjoyed wide acceptance in shorter applications.

1750 Transitional- A refinement of oldstyle forms. Thick to thin relationships were exaggerated and brackets were lightened.

1775 Modern- Represents a further rationalization of oldstyle letterforms. Serifs were unbracketed, thick and thin strokes extreme.

1825 Square Serif/ Slab Serif- Originally heavily bracketed serif but as they evolved, the brackets have been removed.

1900 Sans Serif- These typefaces eliminated serifs all together. It became wide-spread until the twentieth century.

1990 Serif/Sans Serif- A recent development, enlarged typefaces include both serif and sans serif alphabets.

Basic

Describing Letterforms

To identify the specific typefaces, it is much easier to know a letterform's component part first.

~Baseline: The visual base of letterforms(Imaginary line)

~Median: Defining the x-height of letterforms(Imaginary line)

~X-height: The height in any typeface of the lowercase 'x'

~Stroke: Any line defines the basic letterform

~Apex/Vertex: The point created by joining two diagonal stems

~Arm: Sort strokes off the stem of letterform

~Ascender: The portion of the stem of a lowercase letterform that projects above the median

~Barb: The half-serif finish on curved stroke

~Beak: The half-serif finish on horizontal arms

~Bowl: The rounded form describes a counter (bowl may be open or close)

~Bracket: Transition between serif and stem

~Cross Stoke: Horizontal stroke in a letterform that joins the two stems together

~Cross Bar: Horizontal stroke in a letterform that joins the two stems together

~Cortch: The interior space where two strokes meet

~Decender: The portion of the sterm of a lowercase letterform that below the baseline

~Ear: The stroke extending out from the main sterm or b ody of letterform

~Em/en: The distance equal to the size of typeface.En is half the size of em

~Finial: The rounded non-serif terminal to a stoke

~Ligature: Character formed by the combination of two or more letterforms.

~Link: Stroke connects the bowl and loop of a lowercase G

~Loop: The bowl created in descender of lowercase G in some typefaces

~Serif: Right-angled or oblique foot at the end of stroke

~Shoulder: Curved stroke is not part of a bowl

~Spine: Curved stem of S

~Spur: Extension the articulates the junctions of the curved and rectilinear stoke

~Stem: The significant vertical or oblique stroke

~Stress: Orientation of the letterform indicated by the thin stroke in round forms

~Swash: The flourish that extends the stroke of the letterform

~Tail: The curved diagonal stroke at the finish of certain letterforms

~Terminal: The self-contained finish 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&Extended

Fig 2.1 Describing Typefaces

Fig 2.2 Comparing Typefaces

Week 3:

Text

Tracking: Kerning and Letterspacing

~Kerning: Refers to automatic adjustment of space between letters

~Letterspacing: Add space between letters

~Tracking: Additional and removal of space in a word or sentence

Formatting Text

~Flush Left: Most closely mirrors the asymmetrical experience of handwriting. Spaces between words are consistent throughout the text. Allowing the type to create an even gray value.

Fig 3.1 Flush Left

~Centered: Imposes symmetry upon the text.Assigning equal value and weight to both ends of any line. It transforms fields of text into shapes. It creates a strong shape on page and important to amend line breaks to make the text not appear too jagged.

Fig 3.2 Centered

~Flush Right: Emphasis on the end of a line as opposed to its start. It is useful where the relationship between text and image might be ambiguous without a strong orientation to the right.(like captions)

Fig 3.3 Flush Right

~Justified: Like centering, imposes a symmetrical shape on the text. It expands or reduces spaces between words and sometimes between letters. The resulting openness of lines can occasionally produce 'rivers' of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.

Fig 3.4 Justified

Texture

Fig 3.5 Anatomy of a Typeface

Different typefaces suit different messages. Consider the different textures of these typefaces. 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

~Type Size: It should be large enough to be read easily at arms length

~Leading: Text that is set too tightly encourages vertical eye movement. A reader can easily loose the place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.

~Line Length: A good rule of thumb is to keep line length between 55-65 characters. Shorter lines require less reading, and longer lines more.

Type Specimen Book

A type specimen book is to provide an accurate reference for type, type size, type leading, type line length etc.

Fig 3.6 Type Specimen Book

Week 4:

Text

Indicating Paragraphs

~Pilcrow (⁋): A holder from medieval manuscripts seldom use today

~Line Space (leading*): Ensures cross-alignment across columns of text

Fig 4.1 Line Space VS Leading

Widows and Orphans

~Widow: A short line of type left alone at the end of a column of text

~Orphan: A short line of type left alone at the start of new column

Fig 4.2 Widos and Orphans

Highlighting Text

Different kinds of emphasis require different kinds of contrast.There are many ways to do highlighting. We can increase the boldness or the weight of the text. Other ways can change the typeface and make it bold, change the color of body text and so on.

Fig 4.3 Example of highlighting text

Headline within Text

~A head: Indicates a clear break between the topics within a section

Fig 4.4 Example of A head

~B head: Is subordinate to A heads. It indicates a new supporting argument or example for the topic at hand.

Fig 4.5 Example of B head

~C head: Highlights specific facets of material within B head text. They don't interrupt the flow of reading. C head is followed by at least an em space for visual separation.

Fig 4.6 Example of C head

Cross Alignment

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

Fig 4.7 Cross Alignment

INSTRUCTIONS

Task 1 : Excersices-Type Expression

We were given six words to choose from and had to sketch four of them on paper.It is Chaos; Spring; Dive; Bounce; Float and Crush.We just can use 10 typefaces.

Sketches

Fig 1.1 Type Expression Sketches(26/09/2023)

The words I chose are Crush; Float; Bounce and Spring.After received feedback from Miss Low, I start my digitisation.

Digitisation

Fig 2.3 Digitisation Process (03/10/2023)

This is my first version of digitisation.The 'Float' that I want to express is floating on the water.The water ripples are composed of many 'float'. The curves of 'Spring' are the vines of spring.

Fig 3.7 Digitisation Process (10/10/2023)

The second version after receiving feedback from Miss Low. I added more water ripples of 'Float' and removed the 'Spring' letter 'g' curve.

Fig 3.8 Final Type Expression (10/10/2023)

Fig 3.9 Final Type Expression PDF (10/10/2023)

Animation

Fig 3.10 'Crush' Animation Frames (10/10/2023)

Fig 3.11 'Crush' Animation Process (10/10/2023)

First version of animation, at the end the words were overlap.

Fig 4.8 Final Animation Type Expression (17/10/2023)

In final animation I have made modifications to my animation in order to improve the legibility of the word "Crush." In the previous animation, the letters overlapped, but it was recommended to separate them for better clarity.

Task 1: Excercise-Formatting Text

We need to create a readable layout with suitable leading, line length, paragraph, and use 10 fonts only.

Kerning and Tracking

First, I type my name with 10 typefaces and without kerning and tracking.

Fig 4.9 Without kerning and tracking (17/10/2023)

Fig 4.10 With typefaces, kerning and tracking (17/10/2023)

Fig 4.11 With typefaces, kerning and tracking (2) (17/10/2023)

Layouts

Then, I started working in InDesign.

Fig 4.12 Layout Process (17/10/2023)

This is the first try that I practicing the exercise.

Fig 4.13 Layouts (17/10/2023)

I created four different layouts with different fonts to compare which one is better. After received feedback from Miss Low, I choose Layout #4 as my final layout.

Fig 4.14 Layout #4 (17/10/2023)

Final Text Formatting Layout

HEAD

Font/s: Gill Sans MT

Type Size/s: 100pt

Leading: 120pt

Paragraph spacing: 0

BODY

Font/s: Gill Sans MT

Type Size: 10pt

Leading: 12pt

Paragraph spacing: 0

Characters per-line: 63

Alignment: Align Left

Margins: 12.7mm top, 12.7mm left + 12.7mm right + 50mm bottom

Columns: 4

Gutter: 5mm

Fig 5.1 Final Text Formatting Layout (24/10/2023)

Fig 5.2 Final Text Formatting Layout PDF (24/10/2023)

Fig 5.3 Final Text Formatting Layout- Grids (24/10/2023)

Fig 5.4 Final Text Formatting Layout PDF- Grids (24/10/2023)

FEEDBACK

Week 2

General Feedback: I have to add description below the title and update reflection, further reading and lecture notes in my blog

Specific Feedback:

1. Crush: Sketch 3 needs to move the words closer and should be more slanted.

2. Float: Too much graphic elements in my sketches 1,2&3, I can use sketch 3 only.

3. Bounce: Sketch 4 needs to change to another font.

4. Spring: Sketch 1 should reduce some elements before digitalization.

Week 3

General Feedback: I should add a label below the pictures by name, date, and week. (can refer to senior's blog) Update further reading and feedback in the blog.

Specific Feedback: My digitalization overall is good. The 'float' can add more waves. The vine of "spring" should use spiral tools to present it. When using the spiral tools need to adjust the angle to blend with the word.

Week 4

General Feedback: Update my animation type expression and week 4 further reading.

Specific Feedback: 'Spring' digitisation needs to adjust the 'S' curve and space. At the end of the animation was recommended to separate them.

Week 5

General Feedback: The content should be aligned with the baseline. There is no colour allowed in the layouts.

Specific Feedback: My text formatting layout overall is okay. The text of layout 4 don't need to be too neat. It would be better appear with zigzag shape. Letter 'A' better in lowercase.

REFLECTIONS

Experience

This is my first time learning typography. I felt difficult when I am sketching the words because I lack some inspiration. After know more about typography, I realised that this is quite a challenging module. I felt interested and curious when I used Adobe Illustration to digitise and animate the words. I have learnt about history of typography. I think the most challenging part is digitising the words because of the rules that I needs to redo the part of word. To finish the digitisation part , I learned how to use the spiral tool in Adobe Illustrator, which is both fascinating and difficult. I take a long time to finish the layouts in exercise 2 since I'm not satisfied with the results. I tried to do it simply, but it was hard to do it well. Luckily, our lecturer——Miss Low helped me a lot. She always give me idea feedback and teach me how to work it in the exercise.

Observation

I realized that we couldn't do whatever we wanted since typography has so many rules. Through exercise 2, I found that readability in typography should be prioritized to ensure that the message is easily comprehended. We should give the text a clean and balanced look because it will influence the flow of reading. The font choice such as serifs, sans-serifs, or script also important because they influence the overall readability and aesthetics.

Findings

Through this lecture, I gained a brief understanding of Typography. I found that sketching was a great way to inspire my creativity.I have learned about using different forms and fonts to express the words. The text style can completely change a message's tone and mood. Some typefaces look small even though they are same size as other typefaces so we need to adjust the size when using them.