Typography Task 1 / Exercises 1 & 2

25.9.2023-5.11.2024 / Week 1- Week 6
Aliah Farhana Binti Mohd Fauzi / 0357957
Typography / Bachelor of Design (Honours) in Creative Media
Task 1 : Exercise 1 & 2

LECTURES

Week 1 / Introduction & Briefing

Figure 1.0 Typo_0_Introduction

In this lecture video I have listened to Sir Vinod saying that by taking this course well eventually ended up seeing typography in a new light due to the challenges that they're going to give us. Hearing such a thing really did open my eyes to see the usage of typography is not easy and it's really important.

Figure 1.1 Letter Construction Grid

Typography is an act of creating letters as you can see in the picture above (Figure 1.1) the geometrical shapes have been use to create the letter shapes.

Figure 1.1.1 Typography as GIF

Typography also can come in animation and can be in animated forms like in the beginning of movie titles or gif animation as shown in (Figure 1.1.1).

Figure 1.1.2 Typography in website design

Typography is also visible and prevalent in website design.

There's also some wise words from Sir Vinod in this video that has convinced me like:

"You cannot run before you learn to walk".

"You need to understand the rules before you learn to break them".

"Don't get overly frustrated be determined be persistent and learn cause learning is not easy", said Sir Vinod when you get feedbacks from the lecturers.

Figure 1.1.3 Difference between font and typeface

Font : Refers to individual font or weight within a typeface.

Typeface : Refers to the entire family or fonts or weights that share similar characteristics or styles.

Figure 1.1.4 Font

Figure 1.1.5 Typeface

Figure 1.1.6 Typo_0_Eportfolio Briefing

As instructed by Sir Vinod I've watched the lecture video before the class started. Thus, this has gave me a clear idea what is going on before the class even started. In the video, we were instructed to do a blog for our e-portfolio for our final submission on week 14. We were told to do the e-portfolio using a Blogger only. Therefore, this e-portfolio is going to be the only platform that we're going to use throughout our degree for this program.

Week 2

Figure 1.2 Typo_1_Development

Typography: Development / Timeline

Figure 1.2.1 Evolution from Phoenician letter

Writing sequence:

Phoenicians: Wrote from right to left

The Greek: Writing style called 'boustrophedon' (how the ox ploughs), which meant the lines of text read alternately from right to left and left to right. The same goes to the orientation of the letterforms.

Like the Phoenicians, the Greeks did not use letter space or punctuations.

Figure 1.2.2 The Greek style of writing 'boustrophedon'

Figure 1.2.3 Greek fragment, stone engraving. (Date unknown)

Figure 1.2.4 Early letterform, development: Phoenician to Roman

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

Figure 1.2.5 4th or 5th century: Square Capitals

A writing that can be found in Roman monuments. These letterforms have serifs added to the finish of the main strokes.

Figure 1.2.6 Late 3rd - mid 4th century: Rustic capitals

Is a compressed version of square capitals, this allowed for twice as many words on a sheet of parchment and took far less time to write. Although, this writing were faster and easier, they were slightly harder to read due to their compressed nature.

Figure 1.2.7 4th century: Roman cursive

Written for everyday transaction. The development of lowercase letterform which resulting in writing fast and so that was how Roman cursive happened.

Figure 1.2.8 4th - 5th century: Uncials

To be more accurate to think of uncials simply as small letters. The broad forms of uncials are more readable at small sizes than rustic capitals.

Figure 1.2.9 C. 500: Half-uncials

Mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

Figure 1.2.10 Example of ascenders and descenders

Figure 1.2.11 C.925: Caroline minuscule

Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardise all ecclesiastical texts. He entrusted this task to Alcuin of York, Abbot of St Martin of Tours. The monks rewrote the text using both majuscules (uppercase), minuscule, capitalisation and punctuation which set the standard for calligraphy for a century.

Blackletter to Gutenberg's type

Figure 1.2.12 c. 1300:Blackletter (Textura)

With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script. In northern Europe, a condense strongly vertical letterform know as Blackletter or textura gained popularity. In the south, a rounder more open hand gained popularity, called 'rotunda'. The humanistic script in Italy is based on Alcuin's minuscule.

Text type classification (Dates of origin approximated to the nearest quarter century).

1450 Blackletter -> 1475 Oldstyle -> 1500 Script -> 1750 Transitional -> 1775 Modern ->

1825 Square Serif / Slab Serif -> 1900 Sans serif -> 1990 Serif / Sans Serif

Week 3

Figure 1.3 Typo_3_Text_P1

Typography: Text / Tracking: Kerning and Leading

Figure 1.3.1 Kerning Effects

Kerning: Refers to the automatic adjustment of space between letters.

Letterspacing: Adding space between the letters.

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

Figure 1.3.2 Normal tracking, loose tracking and tight tracking.

Text / Formating Text

Figure 1.3.3 Flush left, Ragged right

Flush left : This format most closely mirror the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create at even grey value.

Figure 1.3.4 Centered, Ragged right and left

Centered: This format imposes symmetry upon text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality. Centered type creates such a strong on the page, it's important to amend line breaks so that the text does not appear too jagged.

Figure 1.3.5 Flush right, Ragged left

Flush right: This format places emphasis on the end of a line as soon 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.

Figure 1.3.6 Justified

Justified: Like centering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters. This 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.

Text / Texture

Figure 1.3.7 Anatomy of a typeface

Figure 1.3.8 Different typefaces, different grey values

Figure 1.3.9 Point Size and leading

The 10 in (Figure 1.3.9) is the size of the point size while the 13.5 is the leading.

Leading: The space between adjacent lines of type.

Text / Leading and Line Length

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

Line Length: Good rule of thumb is to keep line length between 55-65 characters. Extremely long or short lines length impairs reading.

Figure 1.3.10 Example of Bad Leading

Figure 1.3.11 Same typeface, different leading

Text / Type Specimen Book

A type Specimen book (or ebook for screen) is to provide an accurate reference for type, type size, type leading, type line length etc.

Figure 1.3.12 Sample Type Specimen Sheet

Week 4

Figure 1.4 Typo_4_Part 2

Text / Indicating Paragraph

Figure 1.4.1 Pilcrow in Paragraph

Pilcrow indicate paragraph spacing.

Figure 1.4.2 Line space in text or paragraph

Leading space : The space between each line, leading must be larger between 2 - 3.5 that the size of typeface (Point). Hence, if the line space is 12pt, then the paragraph space is 12pt this is to ensure cross alignment and this will be a good typography.

Figure 1.4.3 Line space vs Leading

Figure 1.4.4 Standard Indentation

Typically here the indent is the same size of the line spacing or the same as the point size of your text. Indentation also was used to save space in newspaper this is because the expenses of printing newspaper is expensive.

Important Notes!

When using indentation don't you ever use left alignment and never have ragging on the right. This is because indentation is best use when the text is justified.

Figure 1.4.5 Method of extended paragraph

This method creates unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.

Text / Widow and Orphan

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

Orphan: A short line of text left alone at the start of new column.

Figure 1.4.6 Sample of widow and orphan

Text / Highlighting Text

Figure 1.4.7 The usage of italic and bold for highlighting text

Figure 1.4.8 Using different typeface and bold it or highlight it with colour

The choices of colour for the highlight is either black, cyan, and magenta.

Figure 1.4.9 Alert to match the x-height

Usually reduce it by 0.5 is plenty, this is to ensure visual cohesion of the text.

Figure 1.4.10 Highlighting by placing a box

As the pic shown in (Figure 1.4.10) the left has the indentation, whereby the reading axis is not been broken so the gray box is still within the reading axis. Whereas on the right the reading axis is a bit broken because there's no indentation in the paragraph.

Figure 1.4.11 Placing typographic elements

Figure 1.4.12 Quotation marks as highlight

Headline within Text

Figure 1.4.13 A headline

A head indicates a clear break between the topics within a section. In the following examples 'A' heads are set larger than the text, in small caps and in bold. The fourth example shows an A head 'extended' to the left on the text.

Figure 1.4.14 B headline

The B head here is subordinate to A heads (Figure 1.4.13). 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. Here the B heads are shown in small caps, italic, bold serif, and bold san serif.

Figure 1.4.15 C headline

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

Figure 1.4.16 Example when putting together a sequence of subheads = hierarchy

Text / Cross alignment

Figure 1.4.17 Bad Cross aligning headlines

In this example (Figure 1.4.17), four lines of caption type (leaded 9 pts.) cross-align with three lines of text type (leaded to 13.5 pts.).

Figure 1.4.18 Good Cross Aligning headlines

One line of headline type cross-aligns with two lines of text type, and (right; bottom left) four lines of headline type cross-align with five lines of text type.

Figure 1.4.19 Tips from the lecture video by Sir Vinod

To have the cross alignment from the different point sizes, Sir Vinod decided to double the leading space of the right column, thus the alignment between the two column became align.

Week 5

Figure 1.5 Typo_2_Basic

Basic / Describing letterforms

Figure 1.5.1 Baseline, Median and X-height

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

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

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

Figure 1.5.2 Stroke

Stroke: Any line that defines the basic letterform.

Figure 1.5.3 Apex/Vertex

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

Figure 1.5.4 Arm

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

Figure 1.5.5 Ascender

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

Figure 1.5.6 Barb

Barb: The half-serif finish on some curved stroke.

Figure 1.5.7 Beak

Beak: The half-serif finish on some horizontal arms.

Figure 1.5.8 Bowl

Bowl: The rounded form that describes a counter. The bowl may be either open or closed.

Figure 1.5.9 Bracket

Bracket: The transition between the serif and the stem.

Figure 1.5.10 Cross Bar

Cross Bar: The horizontal stroke in a letterform that joins two stems together.

Figure 1.5.11 Cross Stroke

Cross Stroke: The horizontal stroke in a letterform that joins two stems together.

Figure 1.5.12 Crotch

Crotch: The interior space where two strokes meet.

Figure 1.5.13 Descender

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

Figure 1.5.14 Ear

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

Figure 1.5.15 Em/en

Em: The distance equal to the size of the typeface (an em in 48 points).

An en: Is half the size of an em.

Figure 1.5.16 Finial

Finial: The rounded non-serif terminal to a stroke.

Figure 1.5.17 Leg

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

Figure 1.5.18 Ligature

Ligature: The character formed by the combination of two or more letterforms.

Figure 1.5.19 Link

Link: The stroke that connects the bowl and the loop of a lowercase G.

Figure 1.5.20 Loop

Loop: In some typefaces, the bowl created in the descender of the lowercase.

Figure 1.5.21 Serif

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

Figure 1.5.22 Shoulder

Shoulder: The curved stroke that is not part of a bowl.

Figure 1.5.23 Spine

Spine: The curved stem of the S.

Figure 1.5.24 Spur

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

Figure 1.5.25 Stem

Stem: The significant vertical or oblique stroke.

Figure 1.5.26 Stress

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

Figure 1.5.27 Swash

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

Figure 1.5.28 Tail

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

Figure 1.5.29 Terminal

Terminal: The self-contained finish of a stroke without a serif. Terminals may be flat ( 'T' above ), flared, acute, ( 't' above ), grave, concave, convex, or rounded as a ball or a teardrop (see finial in Figure 1.5.16).

Basic / The font

Uppercase and Lowercase
Small Capitals
Uppercase Numerals and Lowercase Numerals
Italic
Italic vs Roman
Punctuation, miscellaneous characters
Ornaments

Basic / Describing typefaces

Figure 1.5.30 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 fifteenth century Italian handwriting on which the forms are based. Oblique conversely are based on roman form of typeface.

Boldface characterised 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.

Basic / Comparing typefaces

Figure 1.5.31 Comparing typefaces

Differences in x-height, line weight, forms, stroke widths and feelings. Feelings connote specific use and expression. Examining typefaces will help us to learn how to feel about type and specific typefaces it also will bring us to the discussion of appropriateness in type choices.

Week 6

Figure 1. 6 Type_5_Understanding

Letters / Understanding letterforms

Figure 1.6.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.

Figure 1.6.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 (Figure 1.6.1) and University (Figure 1.6.2) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Figure 1.6.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.

Figure 1.6.4 When Helvetica and Univers on top of each other

Letters / Maintaining x-height

Figure 1.6.5 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.

Letters / Form / Counterform

Figure 1.6.6 Form / Counterform

Counterform (or counter) —the spaces describes, and often contained, by the stokes 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.

Letters / Contrast

Figure 1.6.7 Contrast

INSTRUCTIONS

Task 1 : Exercise 1 - Type Expression

For Exercise 1, we are given a set of words to create type expressions of. Those words are smoke, soup, spooky, power, impact, crunch, drunk and fold. No graphical elements are allowed and we are limited to only use 10 typefaces that are given, which are:

Adobe Caslon Pro
Bembo Std
Bodoni Std
Futura Std
Gill Sans Std
ITC Garamond Std
ITC New Baskerville Std
Janson Text LT Std
Serifa Std
Univers LT Std

1. Moodboard

Figure 2.0 Inspiration board for 'Smoke'

Figure 2.1 Inspiration board for 'Soup'

Figure 2.2 Inspiration board for 'Spooky'

Figure 2.3 Inspiration board for 'Drunk

2. Sketches

Figure 2.4 sketches (13/10/23)

3. Digitisation

Figure 2.5 First attempt on digitisation (14/10/23)

Figure 2.6 'Soup' Before and after feedbacks from Sir Vinod (15/10/23)

Figure 2.7 'Smoke' Before and after feedbacks from Sir Vinod (15/10/23)

Final Type Expressions

Figure 2.8 Final Type Expressions - JPEG,Week 3 (15/10/23)

Figure 2.9 Final Type Expressions - PDF, Week 3 (15/10/23)

4. Type Expression Animation

Figure 2.9 Type animation practice, Week 3 (13/10/23)

Figure 2.10 Final Type Animation, Week 3 (15/10/23)

Figure 2.11 Finale Type Animation after the feedback, Week 4 (20/10/23)

Task 1 : Exercise 2 - Text Formatting

For this Exercise 2, We are tasked with doing one final A4 layout addressing different areas of text formatting such as type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans and cross-alignment. This exercises, will help us to increase our familiarity and capability with the appropriate software and develop our knowledge of information hierarchy and spatial arrangment.

Lecture 1/4 of Text Formatting : Kerning and Tracking

Figure 2.12 Text Formatting without Kerning, Week 5 (23/10/23)

Figure 2.13 Text Formatting with Kerning, Week 5 (23/10/23)

Figure 2.14 Layout Progress, Week 5 (23/10/23)

Final Task 1: Exercise 2 - Text Formatting

Figure 2.15 Final Text Formatting (w/o guides and grids)- JPEG,Week 5 (27/10/23)

Figure 2.16 Final Text Formatting (with guides and grids) - JPEG,Week 5 (27/10/23)

Figure 2.17 Final Text Formatting (w/o guides and grids) - PDF, Week 5 (27/10/23)

Figure 2.18 Final Text Formatting (with guides and grids) - PDF, Week 5 (27/10/23)

HEAD

Font/s: Bodoni Std Roman

Type Size/s: 36 pt

Leading: 24 pt

Paragraph spacing: 24 pt

BODY

Font/s: Univers LT Std 45 Light

Type Size/s: 10 pt

Leading: 12 pt

Paragraph spacing: 12 pt

Characters per-line: 53-61

Alignment: Align Left

Margins: 12.7 mm top, 12 .7 mm left + 12.7 mm right + 12.7 mm bottom

Columns: 4

Gutter: 5 mm

FEEDBACKS

Week 1

Task 1, Exercise 1: General Feedback- Watch the lecture in YouTube before even starting the work.

E-Portfolio: Update blog by putting Name, Program Name, Date and Module Brief.

Week 2

Task 1, Exercise 1: Careful with the distortions, use less graphical elements and download the 10 fonts.

E-Portfolio: Start to update lectures and further reading.

Week 3

Task 1, Exercise 1: Improve all the 'Smoke' type expression.

E-Portfolio: Update feedbacks, reflection and add date for each of the works.

Week 4

Task 1, Exercise 1: Make the duration of blinking slower.

Week 5

Task 1, Exercise 2: Wrong choices of typeface for the paragraph because too dark and it does not create an even grey value.

REFLECTIONS

Experience

Up to this point, I find that this subject is giving me a hard time to keep up with all the works but in the end of the day I've tried my best to finish all the works that we were tasked on. Therefore, I've gained a lot of understanding on how typography works and is not just something we, designers should take it lightly.

Observations

Through out the assignments I have done so far for the past weeks, I have been more keen and careful into planning my layout and the usage of the right fonts and typefaces upon one's works. Which, I would like to agree that I have been ignorant about this before and couldn't be any bother to learn about typography.

Findings

I've found out even typography do have its own history behind it like how it was designed and who created it and so on. Thus, this module really do helps me gaining more knowledge and be more understanding on how to use the correct fonts or typefaces after this. Even though, I'm still lacking in many aspects but I'm learning from mistakes and will improve.