Typography / TASK 1: Exercises

September 23, 2024

Typography / TASK 1: Exercises

23/9/2024 - 21/10/2024 (Week 1 - Week 5)
Daphne Lai Yu Cheng / 0366380
GCD 60104 / Typography / Bachelor of Design (Honours) in Creative Media / Taylors' University
Task 1 / Exercises

LIST/JUMP LINK

LECTURES

Week 1 (25/9/2024): Typo_1_Development

Typography: The act of creating letters / Creation of typefaces.

Figure 1.1 Applications of Typography

Calligraphy: Writing styles.

Lettering: Drawing the letters out.

Font: Individual font/weight within the typeface. (Eg. Georgia Bold, Helvetica Italic, etc.)

Typeface: Entire family of fonts/weights that share similar characteristics/styles. (Eg. Georgia, Helvetica, etc.)

Typography: Development / Timeline

1. Early Letterform Development: Phoenician to Roman

Scratching into wet clay with sharpened stick or carving into stone with a chisel.

Uppercase forms are simple combination of straight lines and pieces of circles.

Figure 1.2 Evolution from Phoenician Letter

Writing directions:

Phoenician: Right to Left.

The Greeks: 'boustrophedon' (how the ox ploughs), the lines of text read alternatively from right to left and left to right.

Figure 1.3 'Boustrophedon'

2. Hand Script from 3rd - 10th Century C.E.

Square capitals: Written version that can be found in Roman monuments. Contained serifs added to the finish of the main strokes. Variety of stroke width was achieved by the reed pen held at a 60 degree angle off perpendicular.

Rustic capitals: A compressed version of square capitals, they took less time and easier to write but harder to read. Written using a pen or brush held at a 30 degree angle off perpendicular.

Roman cursive: Used in everyday transactions and were simplified for speed resulting in some lowercase letterforms.

Uncials: Incorporated some aspects of the Roman cursive hand. 'Uncia' is Latin and means the 12th of anything. They are more readable than rustic capitals.

Half-uncials: The beginning of lowercase letterforms due to the formalization of the cursive hand.

Figure 1.4 Hand Script from 3rd - 10th Century C.E.

Blackletter to Gutenberg's type

Charlemagne issued an edict in 789 C.E. to standardize all ecclesiastical texts. He entrusted this task to Abbot of St Martin of Tours. The monks rewrote the texts using majuscules (uppercase), miniscule, capitalisation and punctuation which set the standard for calligraphy for a century. Example: Caloline miniscule.

The dissolution of Charlemagne's empire led to a strongly condensed vertical letterform known as Blackletter or textura gained popularity in northern Europe. In the south, a rounder more open hand letterform, 'rotunda', gained popularity.

3. Text Type Development and Classification

1450 Blackletter -- 1475 Oldstyle -- 1500 Italic -- 1550 Script -- 1750 Transitional -- 1775 Modern -- 1825 Square Serif / Slab Serif -- 1900 Sans Serif -- 1990 Serif / Sans Serif

Figure 1.5 Text Type Development and Classification

Week 2 (2/10/2024): Typo_3_Text_P1

1. Typography: Tracking

Kerning: Automatic adjustment of space between letters.

Letterspacing: Addition and removal of space between letters. Used in uppercase letters for better readability, lowercase letter require counter form to maintain readability.

Tracking : Addition and removal of space in a word / sentence.

Types of tracking: Normal tracking, loose tracking and tight tracking. Looser tracking impairs readability.

Figure 1.6 Kerning & Letterspace, Tracking and Counter Form

2. Text Formatting

Grey value: Value of the text on an entire white page.

Flush left: Mirroring the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Creates even grey value. Flush left, ragged right.

Centered: Imposing symmetry upon the text, assigning equal value and weight to both ends of any line. Adds a pictorial quality to material, creates a strong shape on the page, it's important to amend line breaks so that the text does not appear too jagged. Centered, ragged right and left.

Flush right: Placing emphasis on the end of a line as opposed to its start. Useful for captions where the relationship between text and image might be ambiguous without a strong orientation to the right. Flush right, ragged left.

Justified: Imposing a symmetrical shape on the text by expanding or reducing spaces between words and letters. Results in openness of lines that produce 'rivers' (gaps) of white space running vertically through the text. Add hyphens to maintain reading rhythm.

Figure 1.7 Text Formatting

3. Text Texture

Type with generous x-height or heavy stroke width produces a darker mass on the page whereas smaller x-height have lighter stroke.

Increases readability if the ascender and descender are smaller than x-height.

Figure 1.8 Anatomy of A Typeface

4. Leading and Line Strength

Goal setting text type: To allow for easy and prolonged reading.

Type size: Text type should be enough to be read easily at arms length.

Leading: The space between 2 lines. Text that is set too tightly encourages vertical eye movement; distracts the reader from the material at hand. Shorter lines require less leading while longer lines more leading. A good rule of thumb is keeping it between 55-65 characters.

Figure 1.9 Leading and Line Strength

5. Type Specimen

Type specimen book: Shows samples of typefaces in various sizes. Used to provide accurate references for type, type size, type leading, type line length etc.

Compositional requirements: Ideal text has a middle grey value.

Useful to enlarge type to 400 on the screen to get a clear sense of the relationship between the descenders and ascenders.

Figure 1.10 Type Specimen Sheet (Times Gothic)

Week 3 (9/10/2024): Typo_4_Text_P2

1. Indicating Paragraph

'pilcrow' (¶): a holdover from medieval manuscripts is used for indicating paragraphs but seldom used today.

Line space (Leading): Space between the paragraphs. If the line space is 12pt, then the paragraph space is 12pt to ensure cross-alignment across columns of text.

Standard indentation: The indent is the same size of the line spacing or the same as the point size of your text.

Extended indentation: Creates unusually wide columns of text. Despite these problems, there are strong compositional or functional reasons for choosing it.

Figure 1.11 Line Space vs Leading

Figure 1.12 Standard Indentation and Extended Indentation

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

Both widows and orphans are considered serious gaffes on justified text. Flush right and ragged left text is more forgiving towards widows but orphans remain unpardonable.

Solution to widows: Rebreak your line endings through out your paragraph so that the last line of any paragraph is not noticeably short.

Solution to orphans: Make sure that no column of text starts with the last line of the preceding paragraph.

Figure 1.13 Widows and Orphans

3. Highlighting text

Ways to highlight texts: Italics, Bold, change typeface and bold, change colour (black, cyan, magenta and yellow) or creating a box around the text.

When changing the typeface, reduce the point size of the highlighted text.

Sometimes it is necessary to place certain typographic elements outside the left margin if a column of type to maintain a strong reading axis.

Prime: Indicates feet and inches and is not a quote.

Figure 1.14 Highlighting Examples (Italics, Bold, Creating a Box)

Figure 1.15 Prime and Quote

4. Headline within Text

A, B and C are labeled according to the level of importance.

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

'B' head is a subordinate to 'A' heads. They indicate a new supporting argument or example for the topic at hand.

'C' head is not common but highlights specific facets of material within 'B' head text (might want to use it when larger amounts of complicated texts). They not materially interrupt the flow of reading.

Putting a sequence of subheads = hierarchy

Figure 1.16 'A', 'B' and 'C' Heads

Figure 1.17 All 3 together

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

Double the leading to maintain cross alignment. (Example: small text is 13pt, the headline leading would be 13 x 2 = 26pt.)

Figure 1.18 Cross Alignment

Week 4 (16/10/2024): Typo_2_Basic

1. Typography: Basic / Describing Letterforms

Baseline: The imaginary line the visual base of the letterforms.

Median: The imaginary line defining the x-height of letterforms.

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

Stroke: Any line that defines the basic letterforms.

Apex / Vertex: The point created by joining 2 diagonal stems (apex above and vertex below)

Arm: Short strokes off the stem of the letterform, either horizontal (E, F ,L) or inclined upward (K, Y)

Ascender: Strokes that exceed the median line.

Barb: Half serif finish on some curved stroke.

Beak: Half-serif finish on some horizontal arms.

Bowl: Rounded form that describes a counter. (may be open or closed)

Bracket: The transition between the serif and the stem.

Cross bar / Cross stroke: The horizontal stroke in a letterform that joins 2 stems together.

Crotch: The interior space where 2 strokes meet.

Descender: The portion of the stem of a lowercase letterform that projects below the baseline.

Ear: The stroke extending out of the main stem or body of the letterform.

EM/EN: EM refers to the width of an uppercase M. An EN is half the size of an EM.

Finial: Non-serif terminal of a stroke.

Leg: Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K, R).

Ligature: Formed by the combination of 2 or more letterforms.

Link: Connects the bowl and the loop of a lowercase G.

Loop: The bowl created in the descender of a lowercase G.

Serif: The right-angled or oblique foot at the end of the stroke.

Shoulder: Curved stroke that is not part of a bowl.

Spine: Curved stem of S.

Spur: The extension that articulates the junction of the curved and rectilinear stroke.

Stem: The significant vertical or oblique stroke.

Stress: The orientation of the letterform, indicated by the stroke in round forms.

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

Tail: Curved diagonal stroke at the finish of certain letterforms.

Terminal: Self-contained finish of a stroke without a serif.

Figure 1.19 Anatomy of Letterforms

2. Typography: Basic / The Font

Uppercase & Lowercase

Small capitals: Uppercase letterform draw to the x-height of the typeface, used in acronyms.

Uppercase numerals: Lining figures, they are the same height as uppercase letters and are all set to the same kerning width.

Lowercase numerals: Old style figures or text figures, they are set to x-height with ascenders and descenders.

Figure 1.20 Small Capitals and Uppercase & Lowercase Numerals

3. Typography: Describing typefaces

Italics: Forms of Italics refer back to 15th century Italian cursive handwriting. Oblique are based on the roman form of typeface.

Punctuation: They are standard but miscellaneous character can change from typeface to typeface.

Ornaments: Used as flourishes in invitations and certificates.

Roman: Called Roman because the uppercase forms are derived from inscriptions of Roman monuments. Slightly lighter stroke of Roman is 'Book'.

Boldface: Characterized by a thicker stroke than a roman form.

Light: Lighter stroke than roman form. Lighter strokes are called 'thin'.

Condensed & Extended

Figure 1.21 Fonts

4. Typography: Comparing typefaces

Figure 1.22 Typefaces used

INSTRUCTIONS

TASK 1: Exercise 1 - Type Expression (23/9/2024)

Express the meaning of the words visually for the 4 chosen words - pull, chop, explode and tangle. The chosen designs will then be digitalised in Adobe Illustrator and Adobe Photoshop using only the 10 typefaces given. No major distortions are allowed on any of the letters.

1. Sketches & Exploration

Figure 2.1 Type Expression Sketches (25/9/2024)

These are my sketches for the 4 words: I chose pull, chop, explode and tangle. My personal favourites are #1 pull, #1 chop, #1 explode and #1 tangle. After the feedback session, I decided to go with #1 pull, #2 chop, #1 explode and #1 tangle.

2. Digitalisation

Figure 2.2 Digitalisation Process and Alternative Designs (4/10/2024)

Finding the suitable font was quite tricky so I did some explorations and find the most suitable fonts for the 4 words while testing out the 10 typefaces given.

Pull: I decided to make the 'p' and 'LL' longer to emphasize the meaning of the word. After the feedback session, I finalised it with only pulling the 'LL'.

Chop: For chop, I decided to only make the 'H' chopped in half, and only using the chopped 'H' to represent the meaning 'chop'.

Explode: For 'PLO', I decided to use a thicker font and make them larger than other letters, and used the knife tool to cut out pieces from 'O' to show that it is exploding.

Tangle: I used around 3 fonts to design tangle and attempted to combine all the letters together to make them look tangled.

Final Type Expression

Figure 2.3 Final Type Expression (9/10/2024)

Figure 2.4 Final Type Expression (PDF) (9/10/2024)

3. Type Animation

After receiving feedbacks from Mr Vinod, we started animating one of our chosen words. Initially, I wanted to animate 'explode' but it seemed like a common idea so I decided to animate 'pull'. I already had the idea on how to animate 'pull' and I think the animation can visually present the meaning of pull in a simple way.

Figure 2.5 Animation Storyboard (11/10/2024)

Figure 2.6 Animation Frames in Photoshop (11/10/2024)

My idea to animate 'pull' was to make the 'LL' pulled down and out of the artboard then bounce back into frame like an elastic band but the 'LL' will remain longer than other letters. I used guidelines to adjust and drag the 'LL' in Illustrator to create a suitable and right bouncing distance for each frame in Photoshop later.

Figure 2.7 Attempts on 'pull' (11/10/2024)

I tried out 2 compositions which were one in the center of the artboard and the other one on top at the artboard. I also tested on the bouncing motion and distance which it looked a little weird in the first attempt.

Final Type Animation

Figure 2.8 Final Type Animation (14/10/2024)

This is the final animation for 'pull'. Mr Vinod suggested to add motion blur effects to the 'LL' vertically to create a more natural bouncing effect. I added motion blur effect on few frames and did some changes to the bouncing distance and motion to express pull in the simplest way.

TASK 1: Exercise 2 - Text Formatting (14/10/2024)

To edit a text called 'I am Helvetica' in Adobe InDesign to increase familiarity and capability about information hierarchy and good layout. Before starting on this task, I did a practice on kerning and tracking using my name by following the video teaching us about Adobe InDesign uploaded by Mr Vinod.

Figure 2.9 Kerning and Tracking Practice (14/10/2024)

After this practice, I looked through the formatting details in Teams and started working on the text formatting task. I came up with a few simple layouts. While attempting on formatting, there were 'rivers' in some paragraphs so I did some letterspacing to fix them.

Figure 2.10 Attempts on Text Formatting (18/10/2024)

After receiving feedbacks by Mr Vinod, I decided to proceed with #4. The overall layout is good and fine. He commented on the image used was not related to the content and the point size and leading for the body text were too large and tight. I replaced the image, decreased the point size, increased the leading and did letterspacing for the last paragraph as there were visible 'rivers' in some sentences.

Formatting Details:

HEAD LINE

Typeface: ITC New Baskerville Std

Font/s: ITC New Baskerville Std Roman & Bold

Type Size/s: 12, 22, 35 pt

Leading: 23 pt

Paragraph spacing: 24 pt

BODY

Typeface: ITC New Baskerville Std

Font/s: ITC New Baskerville Std Roman

Type Size/s: 9 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 56

Alignment: Left Justified

Margins: 26mm (Top, bottom, left & right)

Columns: 4

Gutter: 10 mm

Figure 2.11 Final Text Formatting (21/10/2024)

Figure 2.12 Final Text Formatting (Grids) (21/10/2024)

Figure 2.13 Final Text Formatting PDF (Both Formats) (21/10/2024)

FEEDBACK

Week 1

General feedback: Mr Vinod briefed us on an introduction along with the rules and instructions regarding this module. To start off, we were required to set up an e-portfolio using blogger by following instructions from a pre-recorded tutorial. For task 1, we selected 6 words for type expression then personally picked 4 out of the 6 words to create sketches for our 4 chosen words.

Week 2

Specific feedback: I received feedbacks on my sketches for the 4 words, one of my sketches for 'pull' is interesting and the overall feedback given was fine and workable. Personally, I think my sketches are lacking in exploration so I would want to improve them in the next exercise.

General feedback: Feedbacks about the sketches were given by Mr Vinod, some of the sketches looked similar and are common ideas. I have written feedbacks that are relevant to my sketches. As for the e-portfolio, adding jump links are encouraged for convenience.

Week 3

Specific feedback: All the ideas are fine but there are some changes needed to be made for 'pull'. The composition for 'pull' did not suit the composition as it looked better after I got feedbacks from Mr Vinod and placed it at the bottom.

General feedback: Not advisable to add too many distortions and illustrations to the fonts. We were to watch a tutorial on how to start animating the type expressions and try out on a word.

Week 4

Specific feedback: After receiving feedbacks from Mr Vinod, animation is good but he also suggested maybe I could try applying motion blur effect to the 'LL' to further emphasize on the bounce back. Final type expressions are good.

General feedback: Always add pause for effect in every animation. Do not stretch and only use the 10 typefaces given by Mr Vinod. A brief explanation on text formatting was given by Mr Vinod, we were to watch links uploaded in teams then start on text formatting using InDesign.

Week 5

Specific feedback: Layout is good and fine. Image has to be replaced with something that relates to the content, point size of the body text is too big and leading of the body text are too tight that it affects readability. Noticeable 'rivers' in the last paragraph, letterspacing needed to be done.

General feedback: Layouts are important to ensure readability and reading rhythm. Avoid using images with texts. Leading is a must and headline does not have to be too large. Ensure gutter is not too wide, 5mm gutter is the minimum. Do not bold if there are large amount of texts.

REFLECTION

Experiences

I learnt a lot in typography, such as using Adobe apps for tasks and exercises. The tasks given came with lecture and tutorial videos so I was able to complete every task with ease just by watching and following the steps. Personally, it was hard when I tried coming up with ideas for type expression but it was a great experience because I got to step out of my comfort zone and think out of the box. I am currently still memorising the shortcut keys of the tools in Adobe apps but I think I will be able to memorise them as soon as possible.

Observations

From what I observed these past 5 weeks, there are so many more designs to visually represent the meaning of a word by looking at my peers' sketches during feedback sessions. I also observed that majority of us seem confused about text formatting, including myself. It's a little hard compared to type expression as I had to test out letterspacing and few typefaces to compare them and find a suitable one. But thanks to Mr Vinod, the feedbacks he gave were very helpful.

Findings

I find that typography plays an significant role and needs to be very detailed in everything such as any kind of reading materials or packaging labels. From the typefaces, letterspacing to layout, everything has to be precisely and wisely planned. Typography is quite challenging but I got a big exposure about typography as I got to learn typography in depth.