Typography - Task 1: Exercises 1 & 2

4.4.2023-2.5.2023/ Week 1- Week 4    
Kelly Lau Jie Ning/ 0354839
Typography/ B' of Design (Honours) in Creative Media
Task 1: Exercises 1 & 2

---

LECTURES

Week 1: Typography: Development/ Timeline
1. Early letterform development: Phoenician to Roman

Fig. 1.1 Evolution from Phoenician letter 

What we can see from the highlighted in black in the diagram is how the evolution of that letter to Arabic and to modern Latin forms has taken place

The Greeks changed the direction of writing-Right to left and become left to right (boustrophedon)

Fig. 1.2 Direction of writing for the Greeks

Fig. 1.3 Greek fragment, stone engraving. (Date unknown)

2. Hand script from 3rd - 10 the century C.E.

Fig. 1.4 4th or 5th century: Square Capitals

Square capitals can be found in Roman monuments. 

Fig. 1.5 Late 3rd- mid 4th century: Rustic capitals

Rustic capitals allowed for twice as many words on a sheet of parchment and took far less time to write.

Fig. 1.6 4th century: Roman cursive

Roman cursive is the beginning of lowercase letterforms.

Fig. 1.7 4th-5th century: Unicials

Uncials incorporated some aspects of the Roman Cursive hand, especially in the shape of the A, D, E, H, M, U and Q.

Fig. 1. 8 C. 500: Half-uncials

Half-uncials are a further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, replete with ascenders are descenders, 2000 years after the origin of the Phoenician alphabet.

Fig.1.9 C.925: Caloline miniscule

Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. He entrusted this task to Alcuin of York, Abbot of St Martin of Tours.

Blackletter to Gutenberg's type

Fig. 1.10. 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 known as Blackletter or textura gained popularity. In the south, a rounder more open hand gained popularity, called the 'rotunda'. The humanistic script in Italy is based on Alcuin's miniscule.

3. Text type classification

Fig.1.11 Text type classifications

Week 2: Typography: Basic/ Describing letterforms

1. Describing letterforms
Baseline: The imaginary line is 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 letterform
Apex/ Vertex: The point created by joining two 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: The portion of the stem of a lowercase letterform that projects above the median.
Bard: The half-serif finish on some curved stroke.
Beak: The half-serif finish on some horizontal arms.
Bowl: The rounded form that describes a counter. The bowl may be Either open o closed.
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.
Descender: The portion of the stem of a lowercase letterform that projects below the baseline.
Ear: The stroke extending out from the main site or body of the letterform.
Em/en: Originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes.
Finial: The rounded non-serif terminal to a stroke.
Ligature: The character formed by the combination of two or more letterforms.
Link: The stroke that connects the bowl and the loop of a lowercase G.
Serif: The right-angled or oblique foot at the end of the stroke.
Spine: The curved stem of the S.
Stress: The orientation of the letterform, indicated by the thin stroke in round forms.
Swash: The flourish that extends the stroke of the letterform.
Terminal: The self-contained finish of a stroke without a serf. This is something of a catch-all term,. Terminals may be flat ('T' above), flared, acute. ('t' above), grave, concave, convex, or rounded as a ball or a teardrop (see finial).

2. The font

Fig. 2. 1 fonts

3. Describing typefaces

Fig. 2. 2 Describing typefaces

4. Comparing typefaces

Fig. 2. 3 Comparing typefaces

Week 3: Typography: Text Part 1
1. Kerning and Letterspacing
Kerning- Automatic adjustment of space between letters
Letterspacing- add space between the letters
Tracking- addition and removal of space in a word or sentence

Fig. 3. 1 Kerning and Letterspacing

Fig. 3. 2 Normal tracking. loose tracking and tight tracking.

2. Formatting Text

Flush left- This format most closely mirrors 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 an even gray value.

Fig. 3. 3 Flush left

Centered- This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature. Because centered type creates such a strong shape on the page, its important to amend line breaks so that the text does not appear too jagged.

Fig. 3. 4 Centered

 

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

Fig. 3. 5 Flush right

Justified- Like centering, this format imposes a symmetrical shape on the text.

Fig.3. 6 Justified

3. Texture

Fig. 3.7 Anatomy of a typeface

4. Leading and line length
Type size: Text type should be large enough to be read easily at arms length- imagine yourself holding a book in your lap
Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place.
Line Length: Appropriate leading for text is as much a function of the line length ad it is a question of type size and leading. A good rule of thumb is to keep the line length between 55-65 characters.

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

Fig. 3. 8 Sample Type Specimen Sheet

Week 4: Typography: Text Part 2
1. Indicating Paragraphs
Pilcrow- a holdover from medieval manuscripts seldom use today.
Line space (leading)- ensures cross-alignment across columns of text.

Fig. 4. 1 Line space vs leading

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

Fig. 4. 2 Widows and Orphans

3. Highlighting Text
Quotation marks- can create a clear indent, breaking the left reading axis.

Fig. 4. 3 Quotation marks

4. Headline within Text

A head indicates a clear break between the topics within a section.

Fig. 4. 4 A heads

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

Fig. 4. 5 B heads

The C heads, although not common, highlight specific facets of material within B head text. They not materially interrupt the flow of reading. 

Fig. 4. 6 C heads

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.

Fig. 4. 7 Cross Alignment

Week 5: Typography: Letters
1. Understanding letterforms
The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form (below); more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Fig. 5. 1 Baskerville '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 ( Fig. 5. 1) and the Univers (below) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Fig. 5. 2 Univers 'A'

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.

Fig. 5. 3 Helvetica and Univers

2. Maintaining x-height
x-height- the size of the lowercase letterforms

3. Form/ Counterform
Just as important as recognizing specific letterforms is developing a sensitivity to the counter form (or counter) - the space describes, and is often contained, by the strokes of the form. When letters are joined to form words, the counter form includes the spaces between them.

Fig. 5. 4 Form/ Counterform

4. Contrast
-the most powerful dynamic in design- as applied to type, based on a format devised by Rudi Ruegg
-The simple contrasts produces numerous variations:
Small+organic/ large+machined; small+dark/ large light...

Fig. 5. 5 Contrast

Week 6: Typography/ Different Medium
1. Print Type Vs Screen Type
Type for print
The type was designed intended for reading from print long before we read from the screen. It's the designer's job to ensure that the text is smooth, flowing, and pleasant to read. A good typeface for print-Caslon, Garamond, and Baskerville are the most common typefaces that are used for print. Because of their characters which are elegant and intellectual but also highly readable when set at small font size.

Type for Screen
Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height (or reduced ascenders and descenders), 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. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.

Hyperactive Link/ hyperlink- a word, phrase, or image that you can click on to jump to a new document or a new section within the current document.

Font size for screen- 16-pixel text on a screen is about the same size as text printed in a book or magazine; this accounting for reading distance. Because we read books pretty close- often only a few inches away- they are typically set at about 10 points. If you were to read them at arm's length, you'd want at least 12 points, which is about the same size as 16 pixels on most screens.

Fig. 6. 1 Screen vs Print

System Fonts for Screen/ Web Safe Fonts- Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Pixel Differential Between Devices- The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different-sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60" HDTV.

Fig. 6. 2 Pixel Differential Between Devices

2. Static Vs Motion
Static typography has minimal characteristics in expressing words. Traditional characteristics such as bold and Italic offer only a fraction of the expressive potential of dynamic properties.

Motion typography- Temporal media offer typographers opportunities to "dramatize" type, for letterforms to become "fluid" and "kinetic" (Woolman and Bellantoni. 1999). Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type. Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack.

---

INSTRUCTIONS

Task 1: Exercise- Type Expression
For task 1, we have to be given 4 words to sketch and one idea will be selected from each sketch. After that, we need to work in the digitisation phase using the 10 typefaces given by Mr Vinod. Then, we need to choose one of the words and make it animated. 

Week 1
Sketches
We needed to pick 4-word from speed, shatter, melt, blur, dance, throw and kill. The words I picked are speed, melt, blur and kill. I did 4 sketches for each word.

Fig ?.1 Type Expression sketches, week 1 (11/4/2023)

For the blur works, I most favourite one is the second one. What we can see in the word is the "B" as the first letter is the most clear one and the "L" "U" and "R" become more blur than the letter in front of each letter.

For the melt works, I prefer the first one to make it digitisation. In the work, I make it look like it is melting through the water drops from the letters and water under the letters.

For the speed works, I most favourite one is the first one. This is because we can see the letters came from the button and each letter became smaller than the letter in front of each letter. That makes them look like they are moving from the right to the left.

For the kill works, I like the second one. I make it look like a murder face by adding an eyebrow and I also added two "x" as the eye. The word "KILL" looks like the murderer's mouth in the work.

Week 2
Digital work in Adobe Illustrator
We need to choose one sketch for each word and make it digitised in Adobe Illustrator.

1. Speed

Fig 8. 1 Digitisation progress of speed, week 2(17/4/2023)

Firstly, type the word "Speed" and change their size. Then, arrange the letters as the sketch.

2. Blur

Fig 8. 2 Digitisation progress of blur, week 2(17/4/2023)

Firstly, type the word "BLUR". Next, make the letters "L" "U" and "R" blur using Gaussian blur. The blur radius of the letter "L" is 1.489. The blur radius of the letter "U" is 3.052. Then, the blur radius of the letter "R" is 4.961.

3. Kill

Fig 8. 3 Digitisation progress of kill, week 2(17/4/2023)

Type the word "KILL" first. Then, make it a little bit curve using envelope distort mode and select make with warp. Next, choose Arc Lower for the warp option and change the bend to 10% to make it look like a mouth shape. After that, use the letter "I" and letter "L" to make the eye and the eyebrow then make them grey in colour. Finally, make the word "KILL" more curve.

4. Melt

Fig 8. 4 Digitisation progress of melt, week 2 (17/4/2023)

Firstly, type the word "MELT". Next, add some space between the letters. Then, use pencil tool to make the button of the word look like some water drop.

Final Type Expressions

Fig 8. 5 Final Type Expression- JPEG, Week 2 (17/4/2023)

Fig 8. 6 Final Type Expression- PDF, Week 2 (17/4/2023)

Week 3- Animation

We need to choose one of the words that we do in week 2 and turn it into animation.

Fig 8. 7 Artboard in Adobe Illustration (15 frames), week 3(22/4/2023)

I use swirling circles to make sure the words don't run out of place. I designed it like this because I want to make the word "Spend" look like coming out from the centre with fast speed and used to express the meaning of the word "speed".

Fig 8. 8 Final artboards in Adobe Illustration (14 frames), week 3(22/4/2023)

I deleted the swirling circles. I also deleted the 14th flame because It will make the gif more smooth and move more fast.

Timeline

Fig 8.9 Timeline in Adobe Photoshop, week 3(22/4/2023)

Every flame I use same time excluding the last flame because I want the final flame to stop more a long time then others can see the word more clearly.

Final Animated type expression

Fig 8. 10 Final animated type expression "Speed"- GIF, week 3(22/4/2023)

Week 4

Task 1: Exercise- Formatting text

We need to create a final layout by using Adobe InDesign. We have also been requesting to do kerning and tracking exercises. 

Kerning and tracking exercises

I created two text formatting which are with kerning and without kerning using my name to see the difference between them.

Fig 8.11 Text formatting with and without kerning, week 4 (26/4/2023)

Fig 8. 12 Putting both text which is with and without kerning overlapping to see both different, week 4 (26/4/2023)

Layout exercise

Fig 8. 13 Layout 1, week 4 (27/4/2023)

Head

Font/ s: Bodoni Std Bold Italic (headline), Gill Sans MT Italic (byline)

Type Size/ s: 22pt (headline), 12pt (byline)

Leading: 24pt (headline & byline)

Paragraph spacing:-

Body

Font/s: Futura Std book
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 0p11
Characters per-line: 60 characters
Alignment: Left aligned
Margins: 3p0 (top, inside, outside), 11p3 (bottom)
Columns: 4
Gutter: 1p0

Fig 8. 14 Layout 2, week 4 (27/4/2023)

Head

Font/ s: Bodoni Std Bold (headline), Futura Std Light Condensed Oblique (byline)

Type Size/ s: 28pt (headline), 12pt (byline)

Leading: 30pt (headline & byline)

Paragraph spacing:-

Body

Font/s: Adobe Caslon Pro regular
Type Size/s: 10 pt
Leading: 11 pt
Paragraph spacing: 0p11
Characters per-line: 60 characters
Alignment: Left aligned
Margins: 3p0 (top, inside, outside), 28p7 (bottom)
Columns: 4
Gutter: 1p0


Final task 1- Exercise 2: Text Formatting

Fig 8. 15 Final text formatting without the grid, week 4 (27/4/2023)

Fig 8.17 Final text formatting (with grid), week 4 (27/4/2023)

Head

Font/ s: Bodoni Std Bold (headline), Futura Std Light Condensed Oblique (byline)

Type Size/ s: 28pt (headline), 12pt (byline)

Leading: 30pt (headline & byline)

Paragraph spacing:-

Body

Font/s: Adobe Caslon Pro regular

Type Size/s: 10 pt

Leading: 11 pt

Paragraph spacing: 0p11

Characters per-line: 60 characters

Alignment: Left aligned

Margins: 3p0 (top, inside, outside), 28p7 (bottom)

Columns: 4

Gutter: 1p0

Fig 8.16 Final text formatting (without grid)- PDF, week 4 (27/4/2023)

Fig 8.17 Final text formatting (with grid)- PDF, week 4 (27/4/2023)

---

FEEDBACK

Week 2

Specific Feedback

For my first design of kill, it’s doesn’t show any meaning

For the Second design of kill, the eyes can go into grey and make it become the letter ‘l’s. then another letter becomes black.

General Feedback
I came out with 4 designs for every 4 words.
What I need to improve are:
-Don’t use too many graphics for design.
-Be better if using the minimalist way of expressing what you want to say.
-Do use design principles to make the design working

Week 3
Specific Feedback
Maybe the melt word and the blur word are too distorted and I need to do it again. D is also too distorted for the word speed.

General Feedback
-Every figure needs to add a date for E-portfolio.
-E-portfolio be better not to use a black background.
-Need to add processes for doing digital works in E-portfolio.
-Need to write typeface for each digital work.

Week 4
Specific Feedback
-Too fast, need to make it slower
-Going the wrong way
-Let d go first then e ,e ,p ,s

General Feedback
Need to be improved and make work.

Week 5
Specific Feedback

General Feedback
Think about these questions to make sure that the work is good or not
1. Is kerning and tracking appropriately done?
2. Does the font size correspond to the line-length, leading & paragraph spacing
3. Is the alignment choice conducive to reading?
4. Has the ragging been controlled well?
5. Has cross-alignment been established using base-line grids?
6. Are widows and orphans present?

---

REFLECTIONS

Experience
Over the past few weeks, I have gained a wealth of knowledge and skills that have greatly enriched my understanding of design. One of the key areas of growth has been in my proficiency with several essential software applications, namely Adobe Illustrator, Adobe InDesign, and Adobe Photoshop. Through dedicated learning and practice, I have become adept at utilizing these powerful tools to bring my design visions to life.

In particular, my grasp of basic typography has significantly deepened through engaging with lecture videos. These invaluable resources have not only provided me with a solid foundation in the principles of typography but have also offered practical insights into its application within the design process. By closely studying these educational materials, I have honed my ability to create visually appealing and effective typographic compositions.

Observations
Upon introspection, I have come to realize that I possess a tendency to overanalyze and overthink various aspects of my work. However, I have noticed that this behaviour proves to be counterproductive, particularly in the context of my typography class. It has become evident that in the realm of typography, this inclination towards excessive rumination hampers my progress and impedes the successful completion of assignments, resulting in frequent returns of my homework.

Findings
Throughout my immersive typography journey, a profound revelation has permeated my creative consciousness: the allure of simplicity can be misleading. It has become evident that the initial impression of a seemingly straightforward design belies the intricate web of craftsmanship and hidden complexities woven beneath its surface. In truth, what may appear as a simple piece of artistry often demands an extensive investment of time, effort, and unwavering attention to detail.

---

FURTHER READING

Fig 9.1 The Vignelli Canon by Massimo Vignelli

"The Vignelli Canon" is a design manifesto written by the influential Italian designer Massimo Vignelli. The book presents Vignelli's design philosophy and approach, focusing on what he considers to be the basic principles and guidelines for creating effective and timeless design.

In the book, Vignelli covers all aspects of design, including graphic design, industrial design and architecture. He emphasises the importance of understanding the basics of design, such as the use of space, scale, colour and typography. According to Vignelli, designers should strive for simplicity, clarity and timelessness in their work, avoiding trends and superficial embellishments.

It is a very useful book which can help us to learn a lot about typography.