4 April 2023 - 2 May 2023 (Week 1 - Week 5)

Woo Yau Ka / 0355281

GCD60104 / Typography Bachelor of Design (Honours) in Creative Media

Task1/ Exercise

Lecture Summary

Week 1

In Week 1, Mr.Vinod introduced us to the typography module and let us sketch for the 4 selected words.

In the week 1, We voted for seven words and typed them according to their meaning.

The Seven Words :

1.RAIN

2.FIRE

3.CRUSH

4.WATER

5.DISSIPATE

6.FREEDOM

7.SICK

Font: The individual font or weight within the typeface.

Typeface: The entire family of fonts/weights that share similar characteristics/styles.

Task 1 : Exercise - Type Expression

Explain what you have to do and how you went about it

Development / Timeline

Early letterform development: Phoenician to Roman

The first method of people writing is by using a sharpened stick to scratch into wet clay or a chisel to carve into stone.
Fig 1.1 Evolution from Phoenician letter

'Boustrophedon,' a writing style created by the Greeks that read alternately from right to left and left to right, and vice versa, the direction of the letterforms. Greek, like the Phoenicians, did not use letter space or punctuation.

Fig 1.2 Direction of writing for the Greeks

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

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

Square Capitals (4th or 5th Century)

It can be found in in Roman monuments. The main strokes of these letters are finished with serifs. The reed pen was held 60° off perpendicular to vary stroke width.

Fig 1.4 Roman Square Capitals

Rustic Capitals (Late 3rd - mid 4th)
A compressed version of Square Capitals. It fit twice as many words on a piece of parchment and were faster to write. However, it is slightly difficult to read.

Fig 1.5 Rustic Capitals

Roman Cursive (4th Century)
It was written in cursive hand for everyday transactions, in which the forms were more simplified for quickness.

Fig 1.6 Roman Cursive

Uncials (4th-5th Century)

It integrated Roman cursive hand and can be considered as small letter. The broad forms of uncials are more readable at small sizes than rustic capitals.

Fig 1.7 Uncials

Half-Uncials (C.500)
A further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

Fig 1.8 Half-Uncials

Charlemagne (C.925)
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. The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century.

Fig 1.9 Charlemagne

Blackletter to Gutenberg’s type

With the dissolution of Charlemagne’s empire came regional variations upon Alcuin’s script. In northern Europe, a condensed 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.

Fig. 1.10 C. 1300: Blackletter (Textura)

Text type classification

1450 - Blackletter (Eg: Cloister Black, Goudy Text)
1475 - Oldstyle (Eg: Bembo, Caslon, Janson)
1500 - Italic
1550 - Script (Eg: Mistral, Kuenstler Script)
1750 - Transitional (Eg: Baskerville, Century, Time Roman)
1775 - Modern (Eg: Bodoni, Bell, Didot)
1825 - Square Serif/Slab Serif (Eg: Serifa, Clarendon, Rockwell)
1900 - San Serif (Eg: Gill Sans, Futura, Helvetica, Trade Gothic)
1990 - Serif/San Serif (Eg: Rotis,Scala, Stone)

Fig. 1.11 Text type classifications

Week 2

Text / Tracking: Kerning and Letter-spacing

1. Kerning and Letterspacing

Fig. 2.1 Kerning and letterspacing

Kerning: Automatic adjustment of space between letters.

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

Letterspacing: To add space between letters.

Fig. 2.2 Normal tracking, loose tracking and tight tracking

2. Formatting Text

Fig. 2.3 Flush left

Flush left: 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. 2.4 Centered

Centered: Imposes symmetry, 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 shape on the page, it's important to amend line breaks so that the text does not appear too jagged.

Fig. 2.5 Flush right

Flush right: 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. 2.6 Justified

Justified: Imposes symmetrical shape on the text, achieved by expanding or reducing spaces between words and, sometimes, between letters. The 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.

3. Texture

Fig. 2.7 Anatomy of a typeface

Fig. 2.8 Different typefaces, different gray values

Compositional requirement: Ideal text to have a middle gray value. Fig. 6.2 shows how different typefaces have different gray values, some lighter, some darker. The best choice would be to choose the middle gray value.

4. Leading and Line Length

Type size: Text type should be large enough to be read easily at arm's length.

Fig. 2.9 Leading and line length

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily lose track. Type that is set too loosely creates striped patterns that cause distraction.

Line Length: Shorter lines require less leading; longer lines more. Keep the line length between 55-65 characters. Extremely long or short line lengths impair reading.

5. Type Specimen Book

A type specimen book shows samples of typefaces in various different sizes. Its to provide an accurate reference for type, type size, type leading, type line length, etc.

Fig. 2.10 Sample Type Specimen Sheet

Week 3

In week 3, Mr.Vinod gave us feedback and let us do a quick animation with the words chosen out of the four. He then asked us to animate the word selection for next week.

Pilcrow (¶): A holdover from medieval manuscripts seldom use today.

Line space (leading*): Between the paragraphs. If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.

Fig. 3.1 Line space vs leading

Fig. 3.2 Standard indentation

Standard indentation: Indent is the same size of the line spacing or the same as the point size of the text.

Fig. 3.3 Extended paragraphs

Extended paragraphs create unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.

Widows and Orphans

Fig. 3.4 Widows and orphans

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

Orphan: Short line of type left alone at the start of a new column.

Highlighting Text

Fig. 3.5 Highlighting text with quotation marks

Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom.

Fig. 3.6 Prime and quote

A prime is not a quote. The prime is an abbreviation for inches and feet. Due to the limited number of keys on a typewriter, they were substituted. They were later known as ‘dumb quotes’.

Headline within Text

Fig. 3.7 A heads

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

Fig. 3.8 B heads

The B head here is subordinate to A heads. 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.

Fig. 3.9 C heads

C heads highlight specific facets of material within B head text. They don't interrupt the flow of reading. C heads in this configuration are followed by at least an em space for visual separation.

Fig. 3.10 Hierarchy in a sequence of subheads

Cross Alignment

Fig. 3.11 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.

Week 4

Text / Indicating Paragraphs

The font

- Uppercase and lowercase

- Small capitals

- Uppercase and lowercase numerals

- Italic

- Punctuation and miscellaneous characters

- Ornaments

Fig. 4.1 Small capitals

Caps are drawn to the font's x-height. Small caps appear primarily in serif fonts as part of what is commonly referred to as a specialist set.

Fig. 4.2 Uppercase numerals/lining figures

Same height as uppercase letters and set to the same kerning width. They are most used with tabular material and uppercase letters.

Fig. 4.3 Lowercase numerals/old style figures or text figures

Set to x-height with ascenders and descenders. Best used when using upper and lowercase letterforms.

Fig. 4.4 Italic

Italics refer back to 15th century Italian cursive handwriting. Oblique is typically based on the roman form of the typeface.

Fig. 4.5 Italic vs roman

Fig. 4.6 Punctuation, miscellaneous characters

Miscellaneous characters can change from typeface to typeface. It’s important to ensure that all the characters are available in a typeface before choosing the appropriate type.

Fig. 4.7 Ornaments

Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro).

Describing typefaces

Fig. 4.8 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 15th century Italian handwriting on which the forms are based. Oblique conversely is based on the roman form of typeface.

Boldface: Characterized 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.

Fig. 4.9 Comparing typefaces

Differences in x-height, line weight, forms, stroke widths and in feeling. Feelings connote specific use and expression. Examining typefaces allows us to know how we feel about certain types, and also see the appropriateness in type choices.

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

Barb 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 or closed.

Bracket - a transition between serif and stem.

Cross Bar - horizontal stroke that connects two stems together. (A,H)

Cross Stroke - horizontal stroke that cuts across lowercase letters. (f,t)

Crotch - the inner area where two strokes meet (K,V)

Descender - the stem that goes below the baseline.

Ear - the stroke thats grows out form the main stem depending on which typeface is used.

Em/En - Em is the distance equal to the size of the typeface. An en is half the size of an em.

Finial - non- serif curve to a stroke

Leg - short-stroke off the arm of the letter. (L,K,R)

Ligature - conjoined part of two letters when they overlap each other.

Link - a stroke that joins the bowl and the loop of the small letter 'g'.

Loop - bowl formed when the descender touches a stroke of the same letter.

Serif - foot at the end of a stroke (A,T,M)

Shoulder - the curved stroke which is separated from the owl (h,n)

Spine - arched stem (S)

Spur - forms the junction of a curvilinear & rectilinear stroke. (b, q, G)

Stem - foundation stroke of a letterform.

Stress - angle of a letterform. Some are slanted as they follow the nature of handwriting.

Swash - the flick or curved stroke which extends from a letter.

Tail - same as swash but shorter.

Terminal - finish with the absence of a serif.

Week 5

Understanding letterforms

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

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

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

Maintaining x-height

Fig. 5.4 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.

Form / Counterform

Fig. 5.5 Form / Counterform

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

Contrast

Fig. 5.6 Contrast

INSTRUCTIONS

Exercise:

Sketches:

Fig 6.1 Sketches

The words I chose were water, rain, fire and sick.
Water:

#1 Use water droplets to create a wet feeling.

#2 Use reflections and wave effects to create the feeling of water.

Rain:

#1 Use raindrops to increase the feeling of rain.

#2 Change i to clouds and raindrops to create the feeling of rain.

Fire:

#1 Accentuate fire by adding flame effect.

Sick:

#1 Change the i to a syringe to accentuate the feeling of being sick.

#2 Added face masks to accentuate the feeling of being sick.

After conducting a feedback session, my final picks are Water #2, Rain #2, Fire #1 and Sick #1.

Digitalized version:

Fig6.2 First attempt at digitalising (18/4/2023)

In the first attempt, I used shapes and specular ripples to make each text more strongly express itself. Using mirror ripples, I try to make the word water express the feeling of floating on the water. Using graphics, I let the other three words express more strongly.

Fig6.3 Second attempt at digitalising (25/4/2023)

Through the feedback meeting, we got opinions that the size of water is too small and should be enlarged, and the graphics of Sick are too much and italics are not necessary. So I enlarged the water text and reduced the graphics used on the sick text to make them clearer.

Fig6.4 Second attempt at digitalising (25/4/2023)

Through the feedback meeting, I got comments that the fire should rise from the bottom and the rain graphics are too much. So I changed the flame to rise from the bottom and reduced the shape representing the cloud.

Final Type Expressions:

Fig6.5 Final Type Expressions (25/4/2023)

Type Expression Animation:

Fig7.1 Type animation demo

For the first attempt, I used procreate to make a water gif because my photoshop had an error and couldn't generate the gif.

Fig7.2 illustrator

Fig7.3 illustrator

Fig7.4 photoshop

After getting feedback, I changed to use puppet warp tool to add nodes to make it show ripple effect, add text to different artboards and generate gif in photoshop.

Final Animated Type Expression:

Fig7.5 Final animation

Text Formatting :

Fig8.1

Fig8.2 Layout

During the feedback session, I got comments that the text was not neat and the sentence ending fell to the next sentence. So I rearranged the paragraphs, made the sentence endings neater and the space between each paragraph neater.

And I changed the picture to the one with the theme of Helvetica because Mr. Vinod said that you should not use pictures that resemble text.

Fig8.3 InDesign screen

Fig8.4 InDesign screen

Final Task 1: Exercise 2 - Text Formatting

Fig8.4 Final Text Formatting

Fig8.5 Final Text Formatting (grid)

FEEDBACK

Week 2-

General Feedback: Submit sketches before digitalizing.

Specific Feedback: Mr. Vinod told me that it was a mistake to submit the digital version when submitting the sketch,
and I needed to write down the idea in the sketch first.

Week 3-

General Feedback:Update the eportfolio and improve the digital version. Specific Feedback: Increase the size of water, Rain needs some remediation, Sick should show a sick ending and should not use italics, fire should decrease and rise from the bottom.

Week 4-

General Feedback: Modify the gif file as suggested. Specific Feedback: Don't need to move much, just small parts from the whole reflection.

Week 5-

General Feedback: Get suggestions from text forming, make improvements and prepare to complete e-portfolio. Specific Feedback: Fix some awkward sentence endings and paragraph gaps and avoid using images that look like text and consider changing the font of headings.

Experience:

I thought the task of doing my own e-portfolio was a bit tough, but I did two exercises in these weeks and watched the lecture video posted by Mr. Vinod. Under the guidance of Mr. Vinod, we gradually learned how to improve from feedback.

Observations:

With some tutorials in the videos, I am getting familiar with Adobe Illustration and Adobe photoshop. I have received comments and feedback on our practice. I gained a lot of new knowledge from the consulting process to help me improve.

Discover:

But after watching many other people's works, I found that they had many different ideas, which made me feel novel and have a greater interest in exploring words.

搜尋此網誌

Woo Yau Ka (0355281)

Typography - Task 1 : Exercise