Typography / Task 1: Exercises

02.09.2022 – 07.10.2022 / Week 1 – Week 6
Hewr Khaled Mohamed Walid Bayazid / 0337650
Typography / B' of Mass Comm (Hons) (Broadcasting)
Task 1: Exercises 1 & 2

LECTURES

WEEK 1(a) / Introduction

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.

WEEK 1(b) / Development

Early Development / Timeline

Essentially, due to the materials utilised, uppercase forms are a simple combination of straight lines and pieces of circles.
Phoenicians wrote from right to left.
The Greek wrote alternatively, from right to left, and then left to right – boustrophedon.
Etruscan carvers eventually developed certain strokes as they painted, resulting in what we refer to as serifs.
Over the course of about 900 years, Roman letters were developed from Phoenician and Greek letters.
Square capitals were developed by the use of slanted tools, resulting in thick and thin strokes.
Rustic capitals – a compressed version of square capitals. While they took less time to write and occupied a smaller space, they were more difficult to read.
Lowercase letterforms were eventually formed while writing quickly.
Uncials – 'small letters' (incorporated elements of both uppercase and lowercase letters).
Half-uncials – the first formal introduction of lowercase letters.
To standardise text, uppercase and lowercase letters, capitalisation, and punctuation were introduced under the command of Charlemagne. This allowed for clearer communication.
Later on, different variations of the script were formed in different parts of Europe as a result of the different environments/tools/skill/culture/etc.

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.
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 are extreme.
1825 Square Serif / Slab Serif: Unbracketed with little variation between thick and thin strokes.
1900 Sans Serif: Eliminated serifs.
1990 Serif / Sans Serif: Includes both serif and sans serif alphabets.

WEEK 2 / Basic

Describing Letterforms

To identify specific typefaces, it’s essential to understand a letterform’s components.

Fig. 2.1, Describing Letterforms

Baseline: Visual base (imaginary) of the letterforms.
Median: (Imaginary) line defining the x-height of letterforms.
X-height: The height of the lowercase ‘x’.
Stroke: Any line that defines the basic letterform.
Apex/Vertex: Point created by joining two diagonal stems.
Arm: Short strokes off the stem of the letterform.
Ascender: Portion of the stem of a lowercase letterform that projects above 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.
Bracket: Transition between the serif and stem.
Cross Bar: Horizontal stroke in a letterform that joins two stems together.
Cross Stroke: Horizontal stroke in a letterform that joins two stems together.
Crotch: Interior space where two strokes meet.
Descender: Portion of the stem of a lowercase form that projects below the baseline.
Ear: Stroke extending out from the main stem or the body of the letter form.
Em: Distance equal to the size of the typeface.
En: Half of the em.
Finial: Rounded non-serif terminal to a stroke.
Ligature: Character formed by the combination of two or more letterforms.
Link: Stroke connecting the bowl and the loop of a lowercase G.
Loop: Bowl created in the descender of the lowercase G (in some typefaces).
Serif: 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 the S.
Spur: Extension the articulates the junction of the curved and rectilinear stroke.
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: 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 and Extended

WEEK 3 / Text

Tracking: Kerning and Letterspacing

Kerning: The automatic adjustment of space between letters (=/= letterspacing).

Fig. 3.1, Kerning

Letterspacing: Adding space between the letters.
Tracking: The addition and removal of space in a word or sentence.

normal tracking, loose tracking & tight tracking

Fig. 3.2, Tracking

While it is largely acceptable to letterspace uppercase letters, that is not the case when it comes to lowercase letters. This is because, "uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading."

Formatting Text
Important – legibility is always the number one priority.

Flush left
Centered
Flush right
Justified

Texture

Different typefaces suit different messages. A good typographer has to know which typeface best suits the message at hand. 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

Goal – allow for easy, prolonged reading.

Type Size – Text type should be large enough to be read easily at arms length.
Leading – Text too tightly > reader can easily loose his or her place. Type set too loosely > distract the reader from the material at hand.
Line Length – Keep line length between 55-65 characters.

WEEK 4 / Text

Indicating Paragraphs

Extended Paragraphs
Pilcrow: A holdover from the medieval manuscripts.
Paragraph Spacing
Cross-alignment is achieved when the leading and paragraph spacing is the same size.
Indentation
Typically the same size of the line spacing or the point size of the text.

Widows & Orphans
Widows may be acceptable at times, but orphans are unacceptable.

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.

Highlighting Text
Different ways to emphasise a certain body of text is by making it: italics, bold, bold + changing the typeface (note: san-serifs often look larger than serifs), or changing the colour. Other ways of highlighting the text is by placing a field of colour at the back of the text.

Headline within Text

There are many kinds of subdivision within text of a chapters.

Fig. 4.1, Headline within Text

WEEK 5 / Letters

Contrast
Important! – Contrast is the most powerful dynamic in design.

Fig. 5.1, Examples of Contrast

WEEK 6 / Typography in Different Medium

In comparison to the past, typography today exists not only on paper but on a multitude of screens. This affects our experience of typography as how the page is rendered changes its appearance.

Print Type

The most common typefaces used for print are print-Caslon, Garamond, Baskerville as they are highly readable when set at small font size.

Fig. 6.1, Print Type Example

Screen Type

Typefaces intended for use on the web are often modified to enhance readability, this can include a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs. Another important adjustment – especially for typefaces intended for smaller sizes – is more open spacing.

Font Size for Screen – 16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance.
Web Safe Fonts – Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Static vs Motion

Static typography has minimal characteristic in expressing words. Temporal media offer typographers opportunities to “dramatise” type, for letterforms to become “fluid” and “kinetic”. (However, good design is dynamic, irrespective of the platform.)

INSTRUCTIONS

TASK 1 / Exercise 1 – Type Expression

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

Sketches
The words I selected are shatter, tall, freak and whisper. As instructed, I first began by digitally sketching out my ideas.

Fig 7.1, Type Expression Sketches, (04/09/2022)

I would say my favourites are shatter #1, tall #3 (bottom left), whisper #2 (top right), and freak #2 (top right). After receiving feedback from Mr. Vinod, I moved on to the digitisation process.

Digitisation

I decided to first digitise all 4 different versions of each word and later on choose what I liked best. To begin, I compared the words in different typefaces and chose what worked best.

Fig 7.2, Digitisation Process, (10/09/2022)

After trial and error, I came up with the following designs:

Fig 7.3, 'Freak' Type Expressions, (10/09/2022)

First, for the word 'freak', as Mr. Vinod asked me to rethink my sketches, I experimented on Illustrator, trying out different designs. For design #1 and #3, I edited the letters' strokes to make them pointy, in an attempt to express the definition of 'freak'. In designs #2 and #3, I distorted the typeface to make it look unusual. I also tried to use different fonts (/weights) of the same typeface for design #2, giving it an unusual feel. After reviewing my designs again, I decided to combine designs #1 and #3 for a better expression of 'freak'.

As for 'shatter', I digitised my 4 initial sketches.

Fig 7.4, 'Shatter' Type Expressions, (10/09/2022)

While I liked both designs #1 and #2, I thought the first design was executed better.

Moving on, for 'tall', I decided to only digitise the sketch Mr. Vinod suggested I go with, but created different versions of it.

Fig 7.5, 'Tall' Type Expressions, (12/09/2022)

While design #3 is more playful and interesting, I thought the first design depicted the meaning of tall more accurately.

As for 'whisper', I initially created 3 designs using variations of my second and fourth sketches.

Fig 7.6, 'Whisper' Type Expressions, (12/09/2022)

However, after listening to Mr. Vinod's feedback on similar designs, stating we should not have too much going on, I created 2 other designs.

Fig 7.7, 'Whisper' Type Expressions (2), (16/09/2022)

I decided to go with the second design as I thought the first one was similar to other designs.

FINAL Type Expressions

Fig 8.1, Final Type Expressions, (18/09/2022)

Fig 8.2, Final Type Expressions, (18/09/2022)

Type Expression Animation

I first tried to animate 'tall'.

Fig 9.1, 'Tall' Animation, (19/09/2022)

However, it seemed too simple, so I was unsatisfied with it.

I then decided to animate shatter. I first had 5 frames, which seemed too little.

Fig 9.2, 'Shatter' Animation, (20/09/2022)

Fig 9.3, 'Shatter' Animation Frames, (20/09/2022)

Therefore, I added 6 more frames, making them 11 in total. I was first torn between having each letter completely shattering, or just one letter. In order to not cause the entire word to be indecipherable, I decided to only go with the letter 'e' completely shattering.

Fig 9.4, 'Shatter' Animation Frames (2), (20/09/2022)

FINAL Animated Type Expression

Fig 10.1, Final Animated Type Expression, (20/09/2022)

TASK 1 / Exercise 2 – Text Formatting

"You will be given incremental amounts of text that address different areas within text formatting i.e. type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans and cross-alignment. These minor exercises (Formatting Text 1:4 to 4:4A) will increase your familiarity and capability with the appropriate software and develop your knowledge of information hierarchy and spatial arrangement. The task ends with the submission of one layout in A4 size demonstrating."

–––

Kerning and Tracking
I first practiced kerning and tracking with my name using the 10 typefaces provided.

Fig 11.1, Without kerning, (25/09/2022)

Fig 11.2, With kerning, (25/09/2022)

Fig 11.3, With kerning (2), (25/09/2022)

Layouts
Then, following the tutorials and text provided, I started working on InDesign.

Fig 12.1, Process, (26/09/2022)

After adjusting the technicalities, I explored different layouts:

Fig 12.2, Layouts, (26/09/2022)

I decided to left justify the body of my text as I like the clean look of it. To reduce hyphenation, I played around with kerning and tracking. I succeeded in getting rid of most of the hyphens. In addition, to avoid widows and orphans as much as possible, I tried using different type sizes until I settled for 9.

Out of the six, I liked #5 and #6 best as they were 'clean' yet not too rigid. I also thought they were different from most of the layouts I've seen. I ended up deciding to go with layout #6.

Fig 12.3, Layout #6, (26/09/2022)

After Mr. Vinod's feedback, I reduced the gutter space and added a caption for the image used.

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
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 57
Alignment: left justified

Margins: 123 mm top, 26 mm left + right + bottom
Columns: 2
Gutter: 10 mm

Fig 13.1, Final Text Formatting Layout, (30/09/2022)

Fig 13.2, Final Text Formatting Layout (PDF), (30/09/2022)

Fig 13.3, Final Text Formatting Layout - Grids, (30/09/2022)

Fig 13.4, Final Text Formatting Layout - Grids (PDF), (30/09/2022)

FEEDBACK

WEEK 2
General feedback: Good sketches.
Specific feedback: Mr. Vinod said he really liked ‘shatter’ design #4. He suggested I use the knife tool when digitalising. He also said ‘tall’ design #3 was interesting and excellent, and suggested I go with that design. He recommended the typeface Univers (light condensed). For ‘whisper,’ he suggested I choose design #2. In regards to ‘freak’ however, it needs work as there is too much distortion.

WEEK 3 (Public Holiday)

WEEK 4
This week Mr. Vinod reviewed our animations.
General feedback: Excellent work (type expression animation).

WEEK 5
General feedback: It's a great layout, excellent work.
Specific feedback: So we have 2 columns of text, a large amount of space at the bottom - that's good. It's got good breathing room. A really interesting placement of the headline - centralised but gives voice to that space. To break that space a little bit, there are two images that are placed right aligned to the right column, so that's good. The sensibility and sensitivity of this particular layout is good. My issue would be with the point size of the text but I am assuming it's anywhere between 9 points to 8. So, it's still readable at serif - slightly at the smaller end but it's still readable. Half close your eyes, you can see it's an even grey. The gutter is a little larger than usual, but for this particular layout, it seems to balance off the margins on the side. So I think it's acceptable. But generally, when you're dealing with justified text, your gutter space is around 7 mm. But, there's nothing wrong with what she has done. It's a little bit wider than it should be but it's still acceptable if she feels that it's appropriate. This is bordering on taste. I think it is allowable simply because it does have a good balance of space in totality.

REFLECTION

Experience
Overall, I would say my experience throughout Task 1 was an enjoyable and enlightening one. While I am taking this module as a free elective, I think typography exists and is very important in many areas of life – which is why I approached this module sincerely. Personally, I liked the first exercise more as, while we had limitations, it felt more personal as we could express the word in countless ways, using our own interpretations. However, it was challenging to come up with unique designs that would stand out from the rest as we were all expressing the same words. On a different note, as I am familiar with both Illustrator and InDesign, I did not really struggle much while working on either applications. My physical experience in class was also a pleasant one. While I was often tired, I thought the classes were lighthearted and not stress-inducing. In addition, Mr. Vinod has been encouraging and has allowed us to express our concerns which positively contributed to my experience.

Observations
As we had weekly check-ins with Mr. Vinod allowing me to see the work of others, I've observed that one product (a certain body of text for example) can bring about a great variation of outcomes/results. Seeing how each individual expresses words/text differently has both inspired me and helped me understand how different people view and interpret things differently.

Findings
Throughout Task 1, I've learnt that Typography is something I thoroughly love and appreciate. As someone who values words and the messages they carry, I found it enjoyable learning to better express their meanings visually. I was also previously unaware of the technicalities of typography, as I usually based my decisions on innate feelings rather than specific rules or structures. However, Task 1, especially the second exercise, has introduced me to the technicalities of typography, which I believe will help me as I delve more into the world of typography. Additionally, I found receiving feedback on a weekly basis very beneficial to my learning experience – not only did it help me become more productive, it also nurtured in me a growth mindset.