Typography / Task 1: Exercises
25.9.2023 - 27.10.2023 / Week 1- Week 5
Bong Sue Zhiun / 0366866
Typography / Bachelor of Design ( Hons ) in Creative Media
Task 1 : Exercises
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task
4. Feedback
5. Reflection
1. LECTURES
1. Typo_0_Introduction ( Week 1 )
Typography
- The art and technique of arranging type to make written language legible, readable, and appealing when displayed.
- Applied in animation, web design, app design, signage design, logo, etc.
- It has evolved over 500 years from Calligraphy (writing style) -> Lettering ( draw the letter out ) -> Typography.
Font
- The individual font or weight within the typeface, I.e.: Georgia Regular, Georgia Italic and Georgia Bold.
Fig.1.1.1 Example of font , Week 1 , 30.9.2023
Typeface
- The various families that do not share characteristics, I.e.: Georgia, Arial, Times New Roman.
Fig.1.1.2 Example of typeface , Week 1 , 30.9.2023
2. Typo_1_Development ( Week 1 )
Early letterform development
Fig.1.2.1 & 1.2.2 Evolution from Phoenician to Roman , Week 1 , 30.9.2023
Writing direction
- Phoenicians wrote from right to left.
- The greek developed a style of writing called ' boustrophrdon' ( how the ox ploughs ), which meant that the line of text read alternately from right to left and left to right.
Fig.1.2.3Writing direction of Greek, Week 1 , 30.9.2023
Hand script from 3rd - 10th century C.E.
Fig.1.2.4 Rustic capitals to Caloline miniscule , Week 1 , 30.9.2023
Blackletter to Gutenberg's type
- In northern Europe, Blackletter / textura ( condense strongly vertical letterform )gained popularity.
- In the south, Rotunda ( rounder more hand ) gained popularity.
- Gutenberg 's type mold required a different brass matrix or negative impression for each letterform.
 |
| Fig.1.2.5 (Left) Blackletter, (Right) Gutenberg's type, Week 1 , 30.9.2023 |
Text type classification
3. Typo_3_Text_P1 ( Week 2 )
A. Tracking
1. Kerning: The automatic adjustment of space between letters.
 |
| Fig.1.3.1 Example of kerning , Week 2 , 6.10.2023 |
2. Letter spacing: Add space between the letters.
3. Tracking: The addition and removal of space in a word or sentence.
 |
| Fig.1.3.2 Example of Tracking , Week 2 , 6.10.2023 |
Uppercase letterforms are drawn to be stand on their own.
Lowercase letterforms require the counter form created between letters to maintain the line of reading.
2. Centered
3. Flush Right
4. Justified
For the special case like this example below, the sans serif font (Univers) has been reduced by .5 to match the x-height of the serif typeface. 8 ≠ 7.5. It has to be reduced because the sans serif typefaces tend to look larger.
8. Barb : The half-serif finish on some curved stroke.
17. Em/en : Originally refering 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.
19. Leg : Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K, R).
When adding letter spacing will break the counter form and also reduce the readability of the particular word or sentence.
 |
| Fig.1.3.3 Example of increasing letter space , Week 2 , 6.10.2023 |
B. Formatting
1. Flush Left
- Each line starts at the same point but ends wherever the last word on the line ends.
- Spaces between words are consistent through out the text, allowing the type to create an even gray value.
 |
| Fig.1.3.4 Example of Flush left , Week 2 , 6.10.2023 |
2. 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.
- It is important to amend line breaks so that the text does not appear too jagged.
- It should be used sparingly for small amounts of copy and text.
 |
| Fig.1.3.5 Example of Centered , Week 2 , 6.10.2023 |
3. 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.
- It is not recommended to be used when there is a large amounts of text.
 |
| Fig.1.3.6 Example of Flush Right , Week 2 , 6.10.2023 |
4. Justified
- This format imposes a symmetrical shape on the text.
- It is 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.
- The gaps between the body of texts are termed as 'rivers'.
 |
Fig.1.3.7 Example of Justified , Week 2 , 6.10.2023 |
C. Texture
Different typefaces suit different messages. 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.
 |
Fig.1.3.8 Texture of text , Week 2 , 6.10.2023 |
D. Leading and Line Length
1. Type size: Text type should be large enough to be read easily at arms length.
2. Leading: Text that is set too tightly encourages vertical eye movement. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.
3. Line Length: Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters.
 |
Fig.1.3.9 Example of Bad Leading , Week 2 , 6.10.2023 |
E. Type Specimen Book
Type specimen book ( or ebook for screen ) is to provide an accurate reference for type, type size, type leading, type line length etc. It shows samples of typefaces in various different sizes.
 |
Fig.1.3.10 Sample Type of Specimen Sheet , Week 2 , 6.10.2023 |
4. Typo_4_Text_P2 ( Week 3 )
A. Indicating Paragraphs
1. Pilcrow (¶)
Pilcrow (¶) is used in text to indicate paragraph spacing, it is a holdover from medieval manuscripts seldom use today.
 |
| Fig.1.4.1 Example of using Pilcrow, Week 3 , 13.10.2023 |
2. Line space ( Leading )
If the line space / Leading is 12pt, then the paragraph space should be also 12 pt. This ensures cross-alignment across columns of text. 
Fig.1.4.2 & 3 ( Left ) Example of line space, ( Right ) Cross alignment , Week 3 , 13.10.2023
Leading vs Line Spacing
Leading is the space between two sentence while line spacing is the space between the descender of one sentence to the descender to the another sentence.
 |
| Fig.1.4.4 Leading vs Line spacing , Week 3 , 13.10.2023 |
3. Indentation
Indentation is an empty space at the beginning of a line to signal the start of new paragraph. It is often used in newspaper. When we are using indentation, we should never have a ragging on the right. If it really needs an alignment in the text, we should use justified.
In the example below, the indent is the same size of the line spacing or the same as the point size of the text.
 |
| Fig.1.4.5 Example of using Indentation , Week 3 , 13.10.2023 |
4. Extended paragraph
The methods of extended paragraphs below creates unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.
 |
| Fig.1.4.6 Example of extended paragraph , Week 3 , 13.10.2023 |
B. Widows and Orphans
1. Widow : A short line of type left alone at the end of a column of text.
2. Orphan : A short line of type left alone at the start of new column.
 |
| Fig.1.4.7 Example of Widow & Orphan, Week 3 , 13.10.2023 |
We should avoid the occurrence of widows and orphans. In justified text both widows and orphans are considered serious gaffes. Flush right and ragged left text is some what more forgiving towards widows, but only a bit. Orphans remain unpardonable. The only solution to widows is to rebreak the line endings through out the paragraph so that the last line of any paragraph is not noticeably short.
 |
| Fig.1.4.8 False line break symbol , Week 3 , 13.10.2023 |
C. Highlighting Text
There are some simple examples of how to highlight text within a column of text. Different kinds of emphasis require different kinds of contrast.
 |
| Fig.1.4.9 (Left) Highlighted using italic, ( Right) Highlighted using bold , Week 3 , 13.10.2023 |
 | |
|
 |
| Fig.1.4.11 Highlighted using Sans Serif font , Week 3 , 13.10.2023 |
When highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best.
 |
| Fig.1.4.12 (Left) Highlighted using indentation and a background colour, ( Right) Highlighted using extend the background colour out of the reading axis , Week 3, 13.10.2023 |
Sometimes it is necessary to place certain typographic elements outside the left margin of a column of type (extending as opposed to indenting) to maintain a strong reading axis.
 |
| Fig.1.4.13 (Left) Highlighted using indented bullets, ( Right) Highlighted using extended bullets , Week 3, 13.10.2023 |
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.1.4.14 Highlighted using quotation marks , Week 3 , 13.10.2023 |
D. Headline within Text
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 of the text.
 |
| Fig.1.4.15 Example for headline ( A head ) , Week 3 , 13.10.2023 |
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.1.4.16 Example for headline ( B head ) , Week 3 , 13.10.2023 |
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.
 |
| Fig.1.4.17 Example for headline ( C head ) , Week 3 , 13.10.2023 |
Putting together a sequence of subheads = hierarchy.
Obviously there is no single way to express hierarchy within text; in fact the possibilities are virtually limitless.
 |
| Fig.1.4.18 Example of hierarchy , Week 3 , 13.10.2023 |
E. 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.
In this example, four lines of caption type (leaded 9 pts.) cross-align with three lines of text type (leaded to 13.5pts).
 |
| Fig.1.4.19 Example of cross alignment , Week 3 , 13.10.2023 |
Below, 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.
 |
| Fig.1.4.20 Example of cross alignment , Week 3 , 13.10.2023 |
5. Typo_2_Basic ( Week 4 )
A. Describing letterforms
As with any craft that has evolved over 500 years, typography employs a number of technical terms. These mostly describe specific parts of the letterforms.
1. Baseline : The imaginary line the visual base of the letterforms.
2. Median : The imaginary line defining the x-height of the letterforms.
3. X-height : The height in any typeface of the lowercase 'x'.
 |
| Fig.1.5.1 Anatomy of a typeface , Week 4 , 20.10.2023 |
4. Stroke : Any line that defines the basic letterform.
 |
| Fig.1.5.2 Stroke , Week 4 , 20.10.2023 |
5. Apex / Vertex : The point created by joining two diagonal stems ( apex above & vertex below )
 |
| Fig.1.5.3 Apex / Vertex , Week 4 , 20.10.2023 |
6. Arm : Short strokes off the stem of the letterform, either horizontal ( E, F, L ) or inclined upward
( K, Y ).
 |
| Fig.1.5.4 Arm , Week 4 , 20.10.2023 |
7. Ascender : The portion of the stem of a lowercase letterform that projects above the median.
 |
| Fig.1.5.5 Ascender, Week 4 , 20.10.2023 |
 |
| Fig.1.5.6 Barb , Week 4 , 20.10.2023 |
9. Beak : The half-serif finish on some horizontal arms.
 |
| Fig.1.5.7 Beak, Week 4 , 20.10.2023 |
10. Bowl : The rounded form that describes a counter. The bowl may be either open or closed.
 |
| Fig.1.5.8 Bowl, Week 4 , 20.10.2023 |
11. Bracket: The transition between the serif and the stem.
 |
| Fig.1.5.9 Bracket , Week 4 , 20.10.2023 |
12. Cross Bar : the horizontal stroke in a letterform that joins two stems together.
 |
| Fig.1.5.10 Cross Bar , Week 4 , 20.10.2023 |
13. Cross Stroke : The horizontal stroke in a letterform that joins two stems together.
 |
| Fig.1.5.11 Cross Stroke , Week 4 , 20.10.2023 |
14. Crotch : The interior space where two strokes meet.
 |
| Fig.1.5.12 Crotch , Week 4 , 20.10.2023 |
15. Descender : The portion of the stem of a lowercase letterform that projects below the baseline.
 |
| Fig.1.5.13 Descender , Week 4 , 20.10.2023 |
16. Ear : The stroke extending out from the main stem or body of the letterform.
 |
| Fig.1.5.14 Ear, Week 4 , 20.10.2023 |
 |
| Fig.1.5.15 Em / En , Week 4 , 20.10.2023 |
18. Finial : The rounded non-serif terminal to a stroke.
 |
| Fig.1.5.16 Finial , Week 4 , 20.10.2023 |
 |
| Fig.1.5.17 Leg, Week 4 , 20.10.2023 |
20. Ligature : The character formed by the combination of two or more letterforms.
 |
| Fig.1.5.18 Ligature , Week 4 , 20.10.2023 |
21. Link : The stroke that connects the bowl and the loop of a lowercase G.
 |
| Fig.1.5.19 Link , Week 4 , 20.10.2023 |
22. Loop : In some typefaces, the bowl created in the descender of the lowercase G.
 |
| Fig.1.5.20 Loop , Week 4 , 20.10.2023 |
 |
| Fig.1.5.21 Serif , Week 4 , 20.10.2023 |
24. Shoulder : The curved stroke that is not part of a bowl.
 |
| Fig.1.5.22 Shoulder , Week 4 , 20.10.2023 |
25. Spine : The curved stem of the S.
 |
| Fig.1.5.23 Spine , Week 4 , 20.10.2023 |
26. Spur : The extension the articulates the junction of the curved and rectilinear stroke.
 |
| Fig.1.5.24 Spur , Week 4 , 20.10.2023 |
27. Stem : The significant vertical or oblique stroke.
 |
| Fig.1.5.25 Stem , Week 4 , 20.10.2023 |
28. Stress : The orientation of the letterform, indicated by the thin stroke in round forms.
 |
| Fig.1.5.26 Stress , Week 4 , 20.10.2023 |
29. Swash : The flourish that extends the stroke of the letterform.
 |
| Fig.1.5.29 Swash , Week 4 , 20.10.2023 |
30. Tail : The curved diagonal stroke at the finish of certain letterforms.
 |
| Fig.1.5.30 Tail , Week 4 , 20.10.2023 |
31. Terminal : The self-contained finish of a stroke without a serif. 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).
 |
| Fig.1.5.31 Terminal, Week 4 , 20.10.2023 |
B. The Font
The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.
1. Uppercase: Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.
 |
| Fig.1.5.32 Uppercase , Week 4 , 20.10.2023 |
2. Lowercase : Lowercase letters include the same characters as uppercase.
 |
| Fig.1.5.33 Lowercase , Week 4 , 20.10.2023 |
3. Small Capitals : Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set.
 |
| Fig.1.5.34 Small Capitals , Week 4 , 20.10.2023 |
4. Uppercase Numerals : Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width. They are most successfully used with tabular material or in any situation that calls for uppercase letters.
 |
| Fig.1.5.35 Uppercase Numerals , Week 4 , 20.10.2023 |
5. Lowercase Numerals : Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders. They are best used when ever you would use upper and lowercase letterforms. Lowercase numerals are far less common in sans serif type-faces than in serif.
 |
| Fig.1.5.36 Lowercase Numerals , Week 4 , 20.10.2023 |
6. Italic : Most fonts today are produced with a matching italic. Small caps, however, are almost always only roman. The forms in a italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.
 |
| Fig.1.5.37 Italic , Week 4 , 20.10.2023 |
 |
| Fig.1.5.38 ( Left ) Italic vs ( Right ) Roman , Week 4 , 20.10.2023 |
7. Punctuation, miscellaneous characters : Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface. It’s important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job.
 |
| Fig.1.5.39 Punctuation & miscellaneous characters, Week 4 , 20.10.2023 |
8. 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).
 |
| Fig.1.5.40 Ornaments , Week 4 , 20.10.2023 |
C. Describing typefaces
Once you can recognise the parts of a letterform, you can apply what you know to identify different type-faces. Some, all, or combinations of these styles may be found within one type family.
1. Roman : The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as ‘Book’.
 |
| Fig.1.5.41 Roman , Week 4 , 20.10.2023 |
 |
| Fig.1.5.42 Italic , Week 4 , 20.10.2023 |
3. Boldface : Characterised by a thicker stroke than a roman form. Depending upon the relative stroke widths within the typeface, it can also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super. In some typefaces (notably Bodoni), the boldest rendition of the typeface is referred to as ‘Poster’.
 |
| Fig.1.5.43 Boldface , Week 4 , 20.10.2023 |
4. Light : A lighter stroke than the roman form. Even lighter strokes are called ‘thin’.
 |
| Fig.1.5.44 Light , Week 4 , 20.10.2023 |
5. Condense : A version of the roman form, and extremely condense styles are often called ‘compressed’.
 |
| Fig.1.5.45 Condense , Week 4 , 20.10.2023 |
6. Extended : An extended variation of a roman font.
 |
| Fig.1.5.46 Extended , Week 4 , 20.10.2023 |
D. Comparing Typefaces
The 9 typefaces mentioned below represent 500 years of type design. The men and women who rendered them all sought to achieve two goals: easy readability and an appropriate expression of contemporary aesthetics.
 |
| Fig.1.5.47 9 typefaces , Week 4 , 20.10.2023 |
Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling. For any typographer these feelings connote specific use and expression.
For example, The Rs display a range of attitudes, some whimsical, some stately, some mechanical, others calligraphic some harmonious and some awkward.
 |
| Fig.1.5.48 The As & Rs , Week 4 , 20.10.2023 |
6. Typo_5_Understanding ( Week 5 )
A. Understanding Letterforms
The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical.
 |
| Fig.1.6.1 Baskerville , Week 5 , 27.10.2023 |
The uppercase letter forms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke.
Both Baskerville and Univers demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.
 |
| Fig.1.6.2 Univers , Week 5 , 27.10.2023 |
The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica ( Left ) and Univers ( Right ). 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.1.6.3 ( Left ) Helvetica & ( Right ) Univers , Week 5 , 27.10.2023 |
 |
| Fig.1.6.4 The overlayed Helvetica & Univers , Week 5 , 27.10.2023 |
B. Maintaining x-height
The x-height generally describe the size of the lowercase letterforms. However, curved strokes, such as '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.
 |
| Fig.1.6.5 Maintaining x-height , Week 5 , 27.10.2023 |
C. Counter form
Counter form is the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counter form includes the spaces between them.
If there are too much space in between letters, it will reduce the readability. When working with letterforms like lowercase ‘r’ that have no counters per se.
 |
| Fig.1.6.6 Example of counter form , Week 5 , 27.10.2023 |
One way to understand the form and counter of a letter is to examine them in close detail. The examinations also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterform’s unique characteristics.
Its worth noting here that the sense of the ‘S’ holds at each stage of enlargement, while the ‘g’ tends to loose its identity, as individual elements are examined without the context of the entire letterform.
 |
| Fig.1.6.7 Examine the letter in close detail , Week 5 , 27.10.2023 |
D. Contrast
The basic principles of Graphic Design apply directly to typography. The following are some examples of contrast—the most poweful 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.1.6.8 Contrast of 'A' between Helvetica Bold & Baskerville , Week 5 , 27.10.2023 |
 |
| Fig.1.6.9 Example of contrast to create differentiation , Week 5 , 27.10.2023 |
Softwares that are used for Typography
1. InDesign : When dealing with large amounts of text or limited amount of text will use it.
2. Illustrator: Using it more on creating graphics.
Shortcut keys for the both software
- Enlarge object / Diminish object : ⌘SHIFT> / ⌘SHIFT<
- Turn off the guides : ⌘:
- Kern the text / Give more space between the text : ⌥OPTION< / ⌥OPTION>
- Unlock / Lock the object : ⌘⌥ 2 / ⌘2
- Select multiple object : SHIFT
- Group / Ungroup object : ⌘G / ⌘SHIFT G
- Create new artboard : SHIFT O , press new artboard
- Back to the artboard that you are working on : ⌘0
- Move the artboard around : Spacebar
- Zoom in / Zoom out : ⌘+ / ⌘ -
2. INSTRUCTIONS
3. TASK
Task 1: Exercises 1 - Type Expression
For Exercise 1, we are given eight words to create the type expression. Those eight words are smoke, soup, spooky, power, impact, crunch, drunk and fold. We are required to choose four words from those words and sketch out the meaning of the words.
10 Fonts that have to be used in this task:
 |
| Fig.3.1.1 10 Fonts Given , Week 1 , 30.9.2023 |
1. Sketches ( Week 1)
I have chosen Smoke, Soup, Drunk and Fold for the sketching.
Fig.3.1.2 Type expression sketches , Week 1 , 30.9.2023
2. Digitisation ( Week 2 )
We are told to digitise the words which are sketched from week 1 using Adobe Illustrator.
A) Smoke
These are my first attempt to digitalise the word ' Smoke'.
 |
Fig.3.2.1 Digitised smoke #1 & 2 , Week 2 , 6.10.2023 |
I rework on it after the feedback session. I try to make it like the smoke is floating up.
 |
Fig.3.2.2 Digitised smoke #3 , Week 3 , 13.10.2023 |
 |
Fig.3.2.3 Process work of digitised smoke #3 , Week 3 , 13.10.2023 |
To make the origin of the smoke look like the real one, I use pen tool and pathfinder to cut the extra part to let it become tip.
After that, I change it to grey and use the effect of feather from illustrator to make it blurry.
 |
Fig.3.2.4 Effect using on digitised smoke #3 , Week 3 , 13.10.2023 |
Result:
 |
Fig.3.2.5 Result of digitised smoke #3 , Week 3 , 13.10.2023 |
B) Soup
I try different fonts for the word ' Soup ' to find out which is the most suitable and aesthetic for it. At last, I choose the second one using Univers LT Std Light Condensed.
 |
Fig.3.2.6 Digitised Soup #1 , Week 2 , 6.10.2023 |
For the second ' Soup ', I also try out different fonts on it and I choose Futura Std Medium Condensed which is the third one as the result.
 | |
|
C) Drunk
I kern the middle part of the word ' Drunk' ( RUN ) to make them stick to each other.
 | |
|
Thus, I come out two different fonts on it. I choose the left one using ITC Garamond Std Light Condensed at the end.
 | |
|
D) Fold
I used Gill Sans Std Bold Condensed as my font for FOLD.
 | |
|
Therefore, I used knife tool to cut and separate the word.
 | |
|
 | |
|
Result:
 | |
|
First Attempt
 |
Fig.3.2.13 First attempt of type expression digitised , Week 2 , 6.10.2023 |
After the feedback session, I made some adjustments that suggested by Mr Vinod.
Second Attempt
 |
| Fig.3.2.14 Second attempt of type expression digitised , Week 3 , 13.10.2023 |
Final
 |
| Fig.3.2.14 Final type expression digitised , Week 3 , 13.10.2023 Fig.3.2.15 Final type expression digitised (PDF) , Week 3 , 13.10.2023 |
3. Animation ( Week 3 )
We have to choose one word from the final digitisation and make it into a gif animation. Mr Vinod asked us to do a rough gif animation in class. Therefore, I slowly watched the tutorial uploaded by Mr Vinod.
First attempt :
It was so sudden that I was asked to do it, so I thought about treating the 'S', 'O' and 'U' as steam. I adjusted the word into different frames using Adobe Illustrator.
 |
| Fig.3.3.1 Process work of Soup #1 in Illustrator , Week 3 , 13.10.2023 |
Then, I opened up Adobe Photoshop to start animating my word.
 |
| Fig.3.3.2 Process work of Soup #1 in Photoshop , Week 3 , 13.10.2023 |
And therefore, a rough gif animation was done.
First gif animation :
Fig.3.3.3 First gif animation of Soup , Week 3 , 13.10.2023
Second attempt :
I want to make it look like stir-fry. Thus, I start doing my work using Illustrator and Photoshop.
 |
| Fig.3.3.4 Process work of Soup , Week 3 , 13.10.2023 |
 |
| Fig.3.3.5 Process work of Soup , Week 3 , 13.10.2023 |
Second gif animation :
Fig.3.3.6 Second gif animation of Soup , Week 3 , 13.10.2023
Third attempt :
After the feedback session, I should more focus on expressing the meaning of ' soup '. So, I do another simpler one again. I reuse the idea of my first attempt and make a little change on it. Basically, I just let the s, o & u appear in turn to express as steam.
 |
Fig.3.3.7 Process work of Soup #3 in Illustrator , Week 4 , 20.10.2023 |
 |
Fig.3.3.8 Process work of Soup #3 in Photoshop , Week 4 , 20.10.2023 |
Final gif animation :
Fig.3.3.9 Final gif animation of soup , Week 4 , 20.10.2023
Task 1: Exercises 2 - Text Formatting ( Week 4 )
For Exercise 2, we are going to format a text with kerning, leading, paragraph spacing, alignment, etc. Before that, we have to practice kerning and tracking using our name as a warm up exercise in Adobe Indesign.
A. Kerning & Tracking
Fig.3.4.1 Text Formatting with kerning , Week 4 , 20.10.2023
 |
| Fig.3.4.1 Text Formatting with kerning , Week 4 , 20.10.2023 |
 |
| Fig.3.4.1 Text Formatting without kerning , Week 4 , 20.10.2023 |
Notes from Tutorial 2 - 4 ( Text Formatting )
2/4 : Font size, Line length, Leading & Paragraph spacing
1. Margin & Columns (Layout > Margins and Columns )
- When there is a standard margin that is equal on all sides, it does not make the document appealing. E.g. 50mm at the bottom can make the document look more attractive.
- 4 columns for an A4 document is a lot. ( It makes the space between each column very small and also makes the line length very short.)
2. Point size within A4 & A3 : 8-12 pt
3. Line length : Characters should be between 55 to 65 in one line.
* Point size will affect to the line length. *
4. Leading : Add 2.5 pt of point size / Add 2.5 -3 pt depending on the typeface
5. Paragraph spacing : Same as Leading. ( the unit has to be pt )
3/4 : Connect Text fields, Alignment, Ragging
1.To import images : File > Place
2. Tracking : Don't add exceed 3 times to reduce ragging.
3. To remove hyphen : Paragraph formatting controls > Turn off hyphenate
4. Prefer to use left alignment / left justify
5. When using full justify, the column interval have to be increased from 5mm to 7mm / 10mm
6. When using justify, make sure that there is not too many rivers ( gaps between the word ), use tracking to adjust.
7. Shortcut key for Text Frame Option : ⌘B
4/4 : Layout
1. Headline : Increase the point size & increase the leading by doubling it ( only for headline )
2. Baseline grid : View > Grids & Guides > Show Baseline Grid
3. To achieve cross alignment : Select both text boxes > ⌘B ( Text Frame Option ) > Baseline Options > Offset : Leading > General > Align : Top > OK
4. Shortcut key for preview mode : W
B. Layout for Text Formatting
Layout #1
 |
| Fig.3.4.2 Layout #1 , Week 4 , 20.10.2023 |
 |
| Fig.3.4.3 Layout #1 with grid , Week 4 , 20.10.2023 |
HEAD
Font/s: ITC New Baskerville Std ( Bold ), Bodoni Std ( Italic )
Type Size/s: 40 pt ( Heading ), 12 pt ( by line )
Leading: 24 pt
Paragraph spacing: -
Leading: 24 pt
Paragraph spacing: -
BODY
Font/s: Janson Text LT Std ( 55 Roman, 76 Bold Italic )
Type Size/s: 10 pt ( Body Text ), 7 pt ( Captions )
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 63 characters
Alignment: Left align
Font/s: Janson Text LT Std ( 55 Roman, 76 Bold Italic )
Type Size/s: 10 pt ( Body Text ), 7 pt ( Captions )
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 63 characters
Alignment: Left align
Margins: 30mm top, 12.7mm left + 12.7mm right + 12.7mm bottom
Columns: 2
Gutter: 5 mm
Columns: 2
Gutter: 5 mm
Layout #2
 |
| Fig.3.4.4 Layout #2 , Week 4 , 20.10.2023 |
 |
| Fig.3.4.5 Layout #2 with grid , Week 4 , 20.10.2023 |
HEAD
Font/s: ITC Garamond Std ( Bold ), Bembo Std ( Italic )
Type Size/s: 24 pt ( First line Heading ), 36 pt ( Second line Heading ), 12 pt ( by line )
Leading: 36 pt
Paragraph spacing: -
Leading: 36 pt
Paragraph spacing: -
BODY
Font/s: Bembo Std ( Regular, Italic )
Type Size/s: 10 pt ( Body Text ), 8 pt ( Captions )
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 64 characters
Alignment: Left align
Font/s: Bembo Std ( Regular, Italic )
Type Size/s: 10 pt ( Body Text ), 8 pt ( Captions )
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 64 characters
Alignment: Left align
Margins: 12.7mm top, 12.7mm left + 12.7mm right + 12.7mm bottom
Columns: 2
Gutter: 5 mm
Columns: 2
Gutter: 5 mm
Final
 |
| Fig.3.4.6 Final Text Formatting , Week 5 , 27.10.2023 |
 |
| Fig.3.4.7 Final Text Formatting with grid , Week 5 , 27.10.2023 |
HEAD
Font/s: ITC New Baskerville Std ( Bold ), Bodoni Std ( Italic )
Type Size/s: 40 pt ( Heading ), 12 pt ( by line )
Leading: 25 pt
Paragraph spacing: -
Leading: 25 pt
Paragraph spacing: -
BODY
Font/s: Janson Text LT Std ( 55 Roman, 76 Bold Italic )
Type Size/s: 10 pt ( Body Text ), 7 pt ( Captions )
Leading: 12.5 pt
Paragraph spacing: 12.5 pt
Characters per-line: 60 characters
Alignment: Left align
Font/s: Janson Text LT Std ( 55 Roman, 76 Bold Italic )
Type Size/s: 10 pt ( Body Text ), 7 pt ( Captions )
Leading: 12.5 pt
Paragraph spacing: 12.5 pt
Characters per-line: 60 characters
Alignment: Left align
Margins: 30mm top, 12.7mm left + 12.7mm right + 12.7mm bottom
Columns: 2
Gutter: 5 mm
Columns: 2
Gutter: 5 mm
Fig.3.4.8 Final Text Formatting ( PDF ) , Week 5 , 27.10.2023
Fig.3.4.9 Final Text Formatting with grids ( PDF ) , Week 5 , 27.10.2023
4. FEEDBACK
Week 2 ( Sketching )
General feedback : Try not to overly distort or not to distort the letter forms at all. It would be better to refer the typefaces in the 10 fonts that are provided.
Specific feedback : #1 Smoke, #4 Soup , #1 Drunk and #4 Fold are good ideas.
Week 3 ( Digitalisation & eportfolio )
Digitisation
General feedback : Make the work more bigger for well occupying the space.
Specific feedback : The both ‘ Smoke’ doesn’t show their meaning, I should rework on it. For #2 Soup, the typeface of ‘P’ is suggested to change from medium condensed to light, it would be more aesthetic. For #1 Drunk, it would be better if putting the drunk at the bottom. Lastly , ' Fold' is fine.
Eportfolio
General feedback : The process work of all the tasks must be included in the eportfolio. Every single part of the eportfolio must be updated in a weekly basis.
Week 4 ( Animation )
General feedback : We should animate through the meaning of the word, not impose another meaning on the word.
Specific feedback : Not sure whether the ' P ' is a wok or a spoon. The animation is confused with the meaning of ' soup'.
Week 5 ( Text-Formatting )
General feedback : The selected image needs to be relevant to the provided text. Since the headline is already large, it doesn't need to be bold. Nothing needs to be emphasised since it is already emphasised.
Specific feedback : The layout does not use alignment. I have to align if I want to create a nice layout. A long body of text on the left and a short body of text on the right cause an extremity; the image is not helping because it is not aligned. It will be better to rework the layout by moving the text to the right and decreasing its amount on the left, as well as adjusting its alignment. Using the same point size for the whole sentence of the headline is just fine.
5. REFLECTIONS
Experience : In the first class of Typography, I was half nervous and half excited because I was not familiar with this module. Fortunately, Mr Vinod gave us very clear information about what we should do. He always lists out all the ' To Do List ' for us every week and I think that this is good as I'm not gonna miss out anything important. In the first exercise, which was sketching the 4 words, the hardest part was thinking about how to use the most simplified way and without any graphical elements to express the meaning of the word. Luckily, I got inspiration from my friend's comment so that I could complete the sketching. During the digitisation stage, it was more challenging as I didn't get to use Adobe Illustrator. I watched the tutorials that were recorded by Mr Vinod again and again and learned some specific features on Youtube to achieve the effect I wanted. It was getting hard when came to the gif animation part, I had to imagine how the motion of the word to move like and I used too much time for doing this. To finish the final exercise in task 1, we actually need to understand the theory of text formatting. Although the tutorial for this exercise is really boring, but I'm sure that I've learned something. This module was incredibly difficult and frustrating for me over these 5 weeks. I hope that I can survive for the next 9 weeks.
Observations : I observed that I have to improve the skills of using Adobe Illustrator. When there is a task that needs to use Illustrator, I will take a longer time to complete it. I noticed that I'm always doing the last minute work, which is bad. I should get rid of my procrastination.
Findings : After learning Typography, I found that I pay more attention to those fonts and designs in real life and think about how they are created. I also realised that all the seemingly simple fonts were all made with hard work by others. I should watch more tutorial and do more practices on using the software to explore more features that I can use for my work. When I learn something new, I should note it down.
6. FURTHER READING
 |
Fig.6.1.1 A Type Primer 2nd Edition by John Kane , Week 2 , 6.10.2023 |
In the introduction of " A Type Primer ", the author said that 'type is a uniquely rich set of marks because it makes language visible.' I think this is a good quote for typography as language can be visible only through the text. This book helps me to understand the basic concepts of type design and layout by covering important subjects including text composition, type anatomy, and classification.
The following are the things I took away from John Kane's "A Type Primer":
- Type Anatomy: Understanding the anatomy of type, including terms like x-height, baseline, serifs, and more.
- Type Classification: Familiarity with different types of typefaces and their historical development, such as serif, sans-serif, and script fonts.
- Text Composition: Learning how to effectively set and format text, including alignment, line spacing, and leading.
- Page Layout: Understanding how to arrange type on a page, considering factors like margins, columns, and grids.
- Font Selection: Learning how to choose appropriate typefaces for various projects and purposes.
- Kerning and Tracking: Understanding the importance of adjusting letter spacing to improve the overall look of text.
After reading this book, I find myself paying more attention to the typography used in everyday print and digital materials. I am more aware of the small differences in typefaces and layouts found in magazines and books.
Comments
Post a Comment