Typography: Exercises 1 & 2

April 03, 2023

Typography: Exercises 1 & 2

4/4/23- 2/5/23 / Week 1-Week 5
Mercy Chong HuiZiun / 0360929

Typography / BDCM
Task 1: Exercise 1 & 2

LECTURES

Lecture 1: Development
Lecture 2: Text P1
Lecture 3: Text P2
Lecture 4: Basics
Lecture 5: Understanding

INSTRUCTIONS

TASK 1: Type Expressions

TASK 2: Formatting Text

Feedback

Reflections

Further Reading

LECTURES

Lecture 1: Introduction to Typography

Lectures, Briefing, and exercises

In today's session, we had a briefing on the course as it's our first class throughout this sem. We also were setting up our eportfolio/blogspot website along with the guidance of Sir Vinod's lecture's playlist on youtube. I've learned some html tips like changing <hr> to <br> to make a line across the page for dividing the sections as well as embedding items/links like our module information booklet.

Typography History & Development
Early letterform development

> In earlier times, writing meant scratching into wet clay with a sharpened stick or carving into a stone.

> The types of tools/instruments we are holding play a major role in creating writing.

Fig 1.0.1 Early letterform development: Phoenician to Roman

> The greek changed the direction of writing. They have developed a style of writing called 'boustrophedon'(how the ox ploughs)

> Phoenicians wrote from right to left.

> It was meant that the lines of the text have been read alternatively from right to left and left to right.

Fig 1.0.2 The Greek's direction of writing

Etruscan (then Roman) carvers

> worked in marble-painted letterforms before inscribing the writings.

> They eventually developed certain strokes based on the tools they were using at that time and as a result on what letterforms we refer to today -> Serifs.

Fig 1.0.3 Etruscan carvers letterform

Fig 1.0.4 The letterform developments timeline from Phoenician to Roman

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

Square Capitals

> These letterforms have serifs added to the finish of the main strokes

> In this development, they used a reed pen with a broader edge -> produce a slant to the tool that's being used, resulting in thick and thin strokes.

Fig 1.0.5 Square Capitals

Rustic capitals
> A compressed version of the square capitals.

> Although it was fast and easy to write, they were more difficult to read due to its compressed nature.

Fig 1.0.6 Rustic Capitals

Lowercase letterform

> Was developed from writing the letterforms quickly.

Uncials

> Incorporated of both uppercase and lowercase letters.

> Refers to letters that are one inch high

> More readable than rustic capitals.

Half-Uncials

> Formal introduction to lowercase letterforms that replete with ascenders and descenders.

Charlemagne

> The first unifier of Europe since the Romans.

> Issued the standardization of texts -- majuscules(uppercase), miniscule, capitalization, and punctuation which sets the standard for calligraphy for a century.

Text Type Classifications

1450 Blackletter
> Earliest printing based upon the hand-copying styles that were used for books in northern Europe.
Eg: Cloister black, Goudy text

1475 Oldstyle
> Based on the lowercase forms used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on Roman ruins.
Eg: Bembo, Caslon, Dante, Geremond, Janson, Jenson, Palatino.

1500 Italic
> The first italics that were condensed and close-set, allowing more words per page.

1550 Script
> Originally and attempt to replicate engraved calligraphic forms
> Forms now range from the formal and traditional to the casual and contemporary.
Eg: Kuenstler Script, Mistral, Snell Roundhand

1750 Traditional
> A refinement of oldstyle forms.
> Thick to thin relationships were exaggerated, brackets were lightened.
Eg: Baskerville, Bulmer, Century, Time Roman.

1775 Modern
> Serifs were unbracketed, and the contrast between thick and thin strokes are extreme.
Eg: Bell, Bodoni, Caledonia, Didot, Walbaum.

1825 Square Serif/Slab Serif
> Unbracketed serif after been developed with the variation between thick and thin strokes.
Eg: Clarendon, Memphis, Rockwell, Serifa.

1990 Sans Serif
> These typefaces eliminated serifs altogether.
> Its use did not become wide spread until the beginning of the 20th century.
Eg: Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers.

1990 Serif/ Sans Serif
> This style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets.
Eg: Rotis, Scala, Stone.

Fig 1.0.7 Text Type Classifications (Source: Google)

Fig 1.0.8 Text Type Classifications 2 (Source: Google)

Lecture 2: Type Expression
Kerning & Letterspacing

Kerning: The adjustment of space between letters.

Letterspacing: To add space between the letters.

Fig 1.1.1 Difference between with kerning and without among the letters.

Tracking: The addition and removal of space in a word or sentence

Normal tracking
Loose Tracking
Tight Tracking

Fig 1.1.2 Types of kerning

> Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require counterform created between letters to maintain the line of reading.

Fig 1.1.3 DIfference between normal kerning and loose kerning

Formatting Text

Flush Left
-> Jagged right. Mirrors the asymmetrical experience of handwriting that each line starts at the same point but stops where the last word ends.
Centered
-> Symmetrical text that has an equal value and weight assigned to both ends at any line.
(it's important to amend line breaks so the text won't appear too jagged.)
Flush Right
-> Ragged left. Asymmetrical text. Places emphasis on the end of a line as opposed to its start.
Justified
-> A symmetrical text which is achieved by expanding or reducing spaces between words and letters.

Texture

> Different typefaces suit different messages. Type with a relatively generous x-height/relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height/lighter stroke.

> The line above the baseline -> the median line.

> X-height -> the area between the baseline and median line.

Fig 1.1.4 Anatomy of typeface

Leading & Line Length

Type size

-> Text type that should be large enough to be readable at arms length.

Leading

Tight Leading -> Encourages vertical eye movement
Loose Leading -> Creates striped patterns that distracts the reader from the material at hand.

Line Length
-> A good rule of thumb is to keep line length between 55-65 characters.

-> Extremely long or short line lengths affects the readability on the sentence.

Type Specimen book (or ebook for screen)

> to provide an accurate reference for type, type size, type leading, type line length and etc.

> Shows samples of typefaces in various different sizes.

Fig 1.1.5 Sample type specimen sheet

Lecture 3: Text Formatting 2

Indicating Paragraphs

Fig 1.2.1 Different ways to indicate paragraphs

Widows and Orphans

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

> Solution: Rebreak line endings throughout the paragraph so that the last line of any paragraph is not noticeably short.

Orphans:A short line of type left alone at the start of new column.

> Solution: Careful typographers make sure that no column of text starts with the last line of the preceding paragraph.

Fig 1.2.2 Widow and Orphan text

Highlighting Text

Ways to highlight a text

Italic
Bold
Bold + changing the typeface
Putting quotation marks,paragraph margins
Changing the colour of the text
Background color behind the text

Headline within Text

"A" head
> Indicates a clear break between the topics within a section.

Fig 1.2.3 "A" heads as headings

"B" head > Indicates a new supporting argument/example of the topic at hand.
> They should not interrupt the text as strongly as "A" heads do.

        
        Fig 1.2.4 "B" heads as sub-headings,
        shown in small caps, italic, bold serif, and bold san serif.

"C" head > Highlights specific facets of material within "B" head text.
> Not materially interrupt the flow of reading.

Fig 1.2.5 "C" heads as sub-heading

Cross Alignment
> Reinforces the architectural sense of the page.

Fig 1.2.6 Cross Alignment

Lecture 4: Basic
Describing letterforms

Baseline
> The visual base of letterforms.
Median
> The x-height of letterforms.
X-height
> The height in any typeface of the lowercase 'x'.

Fig 1.3.1 Anatomy of a letterform

Stroke
> Any line that defines the basic letterform.

Fig 1.3.2 Stroke line in a letterform

Apex/Vertex
> The point created by joining two diagonal stems
(Apex above vertex below)
Arm
> Short horizontal or vertical strokes off the stem of the letterform.
Ascender
> The portion of the stem of a lowercase letterform that projects above the median.
Barb
> The half-serif finish on some curved stroke.
Beak
> The half-serif finish on some horizontal arms.

Fig 1.3.3 Letterforms described from Apex/vertex-Beak

(top to bottom arrangement)

Bowl
> The rounded form that describes a counter.
Bracket
> The transition between the serif and the stem.
Cross Bar
> The horizontal stroke in a letterform that joins two stems together.
Cross Stroke
> The horizontal stroke in a letterform that joins two stems together.
Crotch
> The interior space where two strokes meet.

Fig 1.3.4 Bowl-Crotch letterforms

Descender
> The portion of the stem of a lowercase letterform that projects below the baseline.
Ear
> The stroke extending out from the main stem or body of the letterform.
Em/en
> Originally refering to the width of an uppercase M. Now is the distance equal to the size of the typeface.
Finial
> The rounded non-serif terminal to a stroke.
Leg
> Short stroke off the stem of the letterform.
Ligature
> The character formed by the combination of two or more letterforms.

Fig 1.3.5 Examples of ligatures

Link
> The stroke connecting the bowl and the loop of lowercase G.
Loop
> The bowl created in the descender of the lowercase G.
Serif
> The right-angled/oblique foot at the end of the stroke.
Shoulder
> The curved stroke that is not a part of bowl.
Spine
> The curved stem of the letter S.
Spur
> Extension that articulates the junction of the curved.
Stem
> The significant vertical or oblique stroke.
Stress
> The 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.
-> Flat (eg: T)
-> Flared
-> Acute (eg: t)
-> Grave
-> Concave
-> Convex
-> Rounded
-> Teardrop (eg: e,c)

Fig 1.3.6 Stress-Terminal letterforms

The font

Uppercase
> Capital letters + certain accented vowels
Lowercase
> Includes the same characters as uppercase.

Small capitals
> Uppercase letterforms drawn to the x-height of the typeface.

Uppercase Numerals
> Lining figures.
Lowercase Numerals
> Oldstyle figures/text figures.

Fig 1.3.7 top: uppercase numerals, bottom: lowercase numerals

Italic

Fig 1.3.8 Italic vs Roman (Left to right)

Punctuation & Misc characters
Ornaments

Describing Typefaces

Fig 1.3.9 Describing Typefaces

Comparing Typefaces

Fig 1.3.10 Comparing Typefaces

Lecture 5: Understanding

Understanding letterforms

Letters

Fig 1.4 Asymetrical uppercase letterforms

> The complexity of each individual letterform is demonstrated by examining the lowercase in different typefaces- Helvetica on the left and Univers in the right.

Fig 1.4.2 Lowercase forms

Maintaining x-height

> X-height generally describes the size of the letterforms

> Curved strokes such as the letter '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.

Fig 1.4.3 lowercase letterforms align with the baseline and x-height.

Counterform/Counter
> The space between and inside of the letters when they are joined together to form a word.
> Letterforms like lowercase 'r' have no inner counters.

> How well you handle the counters when you set type determines how well words hang together.

Fig 1.4.4 Counterforms

Contrast
> The most powerful dynamic in design -> Contrast.

Fig 1.4.5 The variation of contrast between different typefaces

INSTRUCTIONS

Fig 1.5 Module information booklet for typography (4/4/23)

><iframe src="https://drive.google.com/file/d/1rS-DRURH1DvcAc97Er7itreUSaUlitgz/preview" width="640" height="480" allow="autoplay"></iframe>

Task 1: Type Expression
1(a)- Sketching Process

> For this exercise, we are given some words to choose for sketching out the type expression and I have chosen the words BLUR, MELT, KILL, and THROW.

> Here is the sketching process I've done for each of the words. We are required to be making 3-4 sketches in the 4 words we have chosen.

Fig 1.6 Type Expression sketch (11/4/23)

The digital sketches type expression
1(b)- Digitalizing the sketch
Here are the processes of digitalizing the word sketches into AI.

BLUR

Fig 1.7.1 blur digitalized sketch

> The font I used in this word "blur" is Futura Std Medium. For the first image I used the gaussian blur effect on the bottom part of the letters and the knife tool to separate the letters away. After consultation from Mr. Vinod on Tuesday (18/4/23), I've only blurred out the 'U' letter and added a magnifying mirror using the shaping tool. After that, I play around with the blurring effects and the warping effect.

MELT

Fig 1.7.2 Melt digitalized sketch

> For this word 'melt', honestly speaking I didn't have much ideas on how to convey this word at first but it gets better as I was exploring and playing around with the software.

The font I've used is Bembo Std Extra bold. I use the curvature pen tool for the dripping/water puddle graphical effect and slightly distorted the letter L and T using the warp effect 'flag' to make it looked like the letters are actually melting slowly.

KILL

Fig 1.7.3 Kill digitalized sketch

> The font Futura Std Bold was used in this type expression word 'kill'. I used the knife tool to cut off the middle part of the letter and then for the letter 'L' it was reflected and rotated to the left side so it'll look like a gun shooting the i and k.

THROW

Fig 1.7.4 Throw digitalized sketch

> Font used: ITC New Baskerville Std Bold Italic. In my first digitization sketch of the word 'throw', I made the letter O to symbolize as a ball being thrown in the air and letter R is kicking it. However, after going through the consultation from Sir Vinod through an online class, he suggested that I should utilize the space given for the sketch better so the letter O can be expanded bigger or it can also be out a little of the frame as shown in my final digitalized sketch. I've also added some small curved lines to kind of show slight motion that the ball 'O' is moving upwards.

Fig 1.7.5 Final outcome of the type expression digitized sketch, JPG (18/4/23)

Fig 1.7.6 Final Type Expressions (PDF)

Type Expression Animation

1(c)- Turning the type expression into animation

Firstly, use the artboard tool in Illustrator to add frames for the animation. After adding the frames we will proceed with the work in Photoshop for the animation.

Fig 1.8.1 Process of type expression 'kill' animation done in ai

(21/4/23)

Fig 1.8.2 process of type expression 'kill' animation done in ai (2)

Fig 1.8.3 process of type expression animation 'kill' done in ps

Fig 1.8.4 first attempt of the animation 'kill' in gif form (24/4/23)

> The artboard isn't stable as the letters 'L' were obviously moving up as the animation goes and therefore the animation doesn't look clean. Less movements needed for the animation so heading back to AI to amend my work.

Fig 1.8.5 Final outcome of the animation 'kill' in gif form.

(27/4/23)

> The animation seems to be more stable on the other letters that are not relevant to the animation. It was also smoother than the first attempt despite having lesser frames than the first. This shows that the number of frames does not fully equivalent to how smooth the animation will turn out to be.

Task 2: Formatting Text

Kerning: Adjusts the space between individual letterforms
Tracking(letter-spacing): Adjusts spacing uniformly over a range of characters.

Exercise 2 (a)
Kerning & Tracking Exercise

It's my first time in using Adobe InDesign and everything feels new to me. Walking through confusion and unfamiliarity, I then watched Sir's video tutorial to get a better understanding of this software.

> Practicing on the kerning and letter-spacing exercise by following the recorded tutorials from lecturer in the Adobe InDesign and using the 10 fonts that has been provided.
> Learned a few tips about text formatting in Adobe InDesign:

press alt + arrow keys (left/right) to adjust the spacing of the letters -> kerning

Fig 2.1 Kerning and Tracking exercise

Select all, alt + arrow keys -> tracking
-> (<): decrease tracking
-> (>): increase tracking
Select the letters, use the eyedropper tool and click onto the fonts (eg: ITC Garamond Std) to change it easily.

Fig 2.1.2 Kerning & Tracking exercise 2

Fig 2.1.3 Outcome of Kerning & Tracking exercise using 10 fonts (1/5/23)

Exercise 2(b)
Layout Design Exercise

> After creating the layout from margins and columns, I then copy-pasted the text into the columns given. From what we've learned before, it is best to have 55-65 characters in the lines of the paragraph text and therefore the font size and leading should be adjusted accordingly.

Fig 2.2.1 Sufficient characters in the line of the column

Fig 2.2 'W' key to see the layout clearer

> Kerning/Tracking should be 5/1000em - can be found under edit > preferences > units & increments

> No different sizes of body text - it will look separated
> Ragged texts at the side - smoothen by letter-spacing & Kerning

(alt+(<)/(>)arrow keys)

> To align both sides of text to the margin (eg: bottom) go to text frame options (at the right side under properties tab)> align > bottom

Fig 2.2.3 Layout exercise practice

Baseline Grid
[View > Grids and Guides > Show Baseline Grid]

How to view the baseline grid while it's in full document mode?
> [edit>preferences>grids], then change increment entry to 11 pt and reduce view threshold from 75% to 50%.

> Next select the text box, right click> text frame options> baseline options> offset: leading> back to general> align: top.

Purpose of the baseline grid
> To ensure each text on the line sits exactly on the baseline grid and this will achieve cross-alignment

Fig 2.2.4 Using the baseline grid for layout exercise

Cross-aligment shortcut

> Select all the paragraph text;

Fig 2.2.5 cross alignment shortcut icon

Fig 2.2.6 First attempt in layout design exercise (2/5/23)

Fig 2.2.7 More text formatting in different layouts (4/5/23)

Fig 2.2.9 Final text formatting layout with baseline grids

Final Text Formatting Layout
Head

Font: ITC Garamond Std (Ultra Condensed Italic)
Type Size: 44 pt (Helvetica), 33 pt (I am), 18 pt (lead-in text)

Leading: 48 pt on the lead-in text

Paragraph spacing: -

Body

Font: Janson Text LT Std (Roman)

Type Size: 10pt body text

Leading: 11 pt

Paragraph spacing: 12 pt (4.233mm)

Characters per-line: 63

Alignment: Left alignment and justify right

Margins: 12.7mm

Columns: 4

Gutter : 5mm

Fig 2.2.10 Final Text Formatting Layout (JPG, without grids) (4/5/23)

Fig 2.2.11 Final Text Formatting Layout (PDF, without grids)

Fig 2.2.12 Final Text Formatting (JPG, with grids)

Fig 2.2.13 Final text formatting (PDF, with grids)

FEEDBACK

Week 1 (4/4/23)-Briefing
General Feedback

> I've learned on how to create my own blog through Mr. Vinod's guidance using the videos that he has recorded and provided for us. Now, I've gotten a hang of it on how typography works and what can we expect to do in this 14 weeks of class.

Week 2 (11/4/23)- Type expression

Are the explorations sufficient?
Does the Expression match the meaning of the words?
On the scale of 1-5, how strong is the idea?
How can the work be improved?
Compare and improvise your work with friends.

General Feedback

> It was advised for the type expression to be having less to no distortions. Some of the word expressions matches the meaning but it lacked a sense of motion in some designs. After Mr. Vinod's lecture, I noticed that my exploration of type expressions is not sufficient enough. The work can be improved when there are minimal graphical elements if needed in these type of expressions as the main focus are the letters themselves.

Week 3 (18/4/23)-Online class, feedback

> In this week, sir gave us constructive feedbacks on each of our digitalized type expression work that has been done in the AI software. I have shown sir on my digitized sketch of the 4 words by presenting my screen for consultation and sir gave a few feedbacks and tips to amend my work.

Specific Feedback

> For the word 'throw' that I have digitized, Sir said that I should utilize the space given well by for example, enlarging the letter 'O' as it resembles a ball that is being thrown on air.

Week 4 (25/4/23)

> In this week, classes started by submitting our type expression animation in gif form to the Facebook group for feedback. After the consultation and attendance, sir gave us some time to update our blogspot website and write our feedback for the week in the google sheet provided.

General feedback
> For the animation to be smoother, we should add more frames.

Specific feedback

> The word I have animated, ' kill', was not stabilized when the animation came out, especially for the letters that are not relevant for the animation so I needed to amend it.

Week 5 General Feedback (2/5/23)

Is kerning and tracking appropriately done?
Does the font size correspond to the line-length, leading and paragraph spacing?
Is the alignment choice conclusive to reading?
Has the ragging been controlled well?
Has cross-alignment been established using the base-line grids?
Are widows and orphans present?

General Feedback

> It was not advised to make the body text bold.
> Cross-alignment can be applied onto text to increase reading rhythm.

REFLECTIONS

Experience
> Since I've just started to know more in-depth about typography, the first exercise that was given can be quite challenging at first for me to complete in this whole 5 weeks' time. Starting from brainstorming a sketch out of words to experimenting with motion graphics like a short gif animation done in Adobe Illustrator for our digitized sketch, I definitely learned a lot and slowly have a better understanding on the importance of typography in our lives. This first exercise was more on the designing and ideation sketching part so it has more creative freedom for this.

As for the second exercise, I find it quite hard as we are dealing with more on the technical stuff. It was about the text formatting/editorial design. We had to make sure that the texts are all aligned neatly and readable and also fit well in the paragraph body text using the kerning/tracking, leading lines, paragraph spacing and all. It was still kind of tricky for me on this part of exercise but I hope there will be some slight improvements while I'm working for my task 2 assignment.

My whole experience in this typography class throughout this 5 weeks was quite stressful but pleasant in the midst of experimenting with the typefaces. From the trials and errors, I'm glad that I get to document each of my work from failures to satisfaction work in this eportfolio as I am able to see the improvements as I progress the works.

Search

Mercy Chong HuiZiun (0360929)