Labels

Typography | Task 1: Exercises

29.09.2023 - 27.10.2023 / Week 1 - Week 5
Khu Ying Ying / 0357306
Typography / GCD60104 / Bachelor of Design (Honours) in Creative Media 
Task 1: Exercises
TABLE OF CONTENTS 

LECTURES
    Week 1 (29/09/2023)  Introduction
    Week 1 (29/09/2023)  Development
    Week 2 (06/10/2023)  Text (Part 1)
    Week 3 (13/10/2023)  Text (Part 2)
    Week 4 (20/10/2023)  Basic
    Week 5 (27/10/2023)  Letters

INSTRUCTIONS

EXERCISE 1 - TYPE EXPRESSION
    Week 2 (06/10/2023)  Research & Sketches
    Week 3 (13/10/2023)  Digitisation & Animation

EXERCISE 2 - TEXT FORMATTING
    Week 4 (20/10/2023)  Kerning & Tracking
    Week 5 (27/10/2023)  Layout Design

FEEDBACKS 

REFLECTIONS 

FURTHER READING

QUICK LINKS
LECTURES

Week 1 (29/09/2023) 

Introduction

Typography has evolved over 500 years [calligraphy > lettering > typography]
  • Calligraphy: writing style
  • Lettering: draw the circumference of the letters out
  • Typography: typefaces/ type families/ animation (movie titles/ gif animations)

Font refers to the individual font/ weight within the typeface

Typeface refers to the entire family of fonts/ weights that share similar characteristics/ styles

Week 1 (29/09/2023)

Development

Early letterform development: Phoenician to Roman
  • Initial writing: scratching into wet clay with a sharpened stick/ carving into stone with a chisel
  • Uppercase forms are a combination of straight lines & pieces of circles
Figure L1.1: Evolution of the Phonation Letter

  • The Greeks developed 'boustrophedon' writing, where text lines read alternately from right to left and left to right, they also changed the orientation of the letterforms with the direction of reading
Figure L1.2: Boustrophedon

  • Etruscan and Roman carvers used a paintbrush to draw out letterforms before inscribing them
Figure L1.3: Late 1st Century B.C.E, Augustan Inscription in the Roman Forum, Rome

Figure L1.4: Development from Phoenician to Roman

Hand script from 3rd - 10th century C.E.
  • Square capitals 
    1. can be found in Roman monuments 
    2. serifs added to the finish of the main strokes, while stroke width variation comes from a 60° angled reed pen
Figure L1.5: 4th or 5th Century - Square Capitals

  • Rustic capitals
    1. a compressed version of square capitals
    2. allowed more text on parchment and faster writing with a 30° pen angle, yet their compressed style made them a bit harder to read
Figure L1.6: Late 3rd to Mid 4th Century - Rustic Capitals

Square and rustic capitals were for formal documents, while everyday transactions used cursive for speed, simplifying the writing

Figure L1.7: 4th Century - Beginning of  Roman Cursive Lowercase Letterforms

  • Uncials
    1. merged Roman cursive characteristics, like A, D, E, H, M, U, and Q 
    2. some relate "uncial" to one-twelfth or small letters, as their broad forms are more readable at small sizes compared to rustic capitals
Figure L1.8: 4th to 5th Century - Uncials

  • Half uncials
    1. formalisation of the cursive hand
    2. introducing lowercase letters with ascenders and descenders, 2000 years after the Phoenician alphabet's origin
Figure L1.9: C.500 - Half-uncials

  • Charlemagne
    1. Europe's unifier ordered the standardisation of ecclesiastical texts in 789 
    2. Alcuin of York oversaw monks who used majuscules (uppercase), minuscules, capitalisation, and punctuation, setting the calligraphy standard for a century
Figure L1.10: C.925 - Caloline Miniscule

Blackletter to Gutenberg's type
  • Blackletter/ textura
    1. after the dissolution of Charlemagne's empire, regional variations of Alcuin's script emerged
    2. a condensed strongly vertical letterform, Blackletter/ textura gained popularity in Northern Europe
    3. a rounder more open-hand, rotunda gained popularity in the south 
Figure L1.11: C.1300 - Blackletter (Textura)

  • Gutenberg's type
    1. included engineering, metalsmithing, and chemistry
    2. his type mould required a different brass matrix, or negative impression, for each letterform
Figure L1.12: C.1455 - 42 Line Bible, Johann Gutenberg, Mainz

Figure L1.13: Development of Typography


Figure L1.14: Text Type Classification

Week 2 (06/10/2023)

Text (Part 1)

Kerning & Letterspacing
  • Kerning: automatic adjustment of space between letters
  • Letterspacing: add space between the letters
  • Tracking: addition and removal of space in a word/ sentence
Figure L2.1: Kerning & Letterspacing

Figure L2.2: Normal Tracking, Loose Tracking & Tight Tracking

  • Uppercase letterforms able to stand on their own; Lowercase letterforms require the counter form created between letters to maintain the line of reading

Formatting Text
  • Flush left
    1. closely mirrors the asymmetrical experience of handwriting
    2. each line starts at the same point but ends wherever the last word on the line ends
    3. space between words are consistent throughout the text, allowing the type to create an even gray value
Figure L2.3: Flush Left, Ragged Right

  • Centered
    1. symmetry upon the text, assigning equal value and weight to both ends of any line
    2. transforms fields of text into shapes, thereby adding a pictorial quality to the material that is non-pictorial by nature
    3. important to amend line breaks so the text doesn't appear too jagged
Figure L2.4: Centered, Ragged Right & Left

  • Flush right
    1. emphasis on the end of a line as opposed to its start
    2. e.g. captions - where the relationship between the text and image is ambiguous 
Figure L2.5: Flush Right, Ragged Left

  • Justified
    1. symmetrical shape by expanding/ reducing spaces between the words and letters
    2. the open layout may create vertical 'rivers' of white space in the text.
    3. line breaks and hyphenation is required to amend this problem
Figure L2.6: Justified

Texture
Figure L2.7: Anatomy of a Typeface

Figure L2.8: Different Typefaces, Different Grey Values

Leading & Line Length
  • Type size: large enough to be read easily at arm's length (holding a book in lap)
  • Leading: 
    1. text that is set too tightly encourages vertical-type movement - easily lose the reader's track
    2. text that is set too loosely - create striped patterns that distract reader
  • Line length: 
    1. shorter lines - less reading
    2. longer lines - more reading
    3. it's better if keep line length between 55-65 characters
Figure L2.9: Leading & Line Length - Too Tight & Too Loose 

Type Specimen Book
  • show samples of typefaces in various different sizes, to provide an accurate reference of  type, type size, type leading, type line length etc.
Figure L2.10: Sample Type Specimen Sheet  

Week 3 (13/10/2023)

Text (Part 2)

Indicating Paragraphs
  • Pilcrow (¶): a holdover from medieval manuscripts seldom use today
Figure L3.1: Pilcrow

  • Line space (leading*): 
    1. between the paragraphs
    2. e.g. if the line space is 12pt, then the paragraph space is 12pt
    3. to ensure cross-alignment across columns of text
Figure L3.2: Line Space

Figure L3.3: Line Space vs Leading

  • Standard indentation: typically the indent is the same size of the line spacing/ the same as the point size of your text
Figure L3.4: Standard Indentation

  • Extended paragraphs: create unusually wide columns of text
Figure L3.5: Extended Paragraphs

Widows & Orphans
  • Widow: 
    1. a short line of type left alone at the end of a column of text
    2. flush right and ragged left text only forgiving a bit on widows
    3. rebreak the line endings through out the paragraph so the last line of any paragraph isn't noticeably short

  • Orphan
    1. a short line of type left alone at the start of new column
    2. make sure that no column of text starts with the last line of the preceding paragraph
Figure L3.6: Widows & Orphans

Avoid making widows & orphans

Highlighting text
Figure L3.7: Highlighting Text with Italic & Bold

  • colour: when changing the colour of body text, only black, cyan, and magenta can be used
Figure L3.8: Highlighting Text with Changing Typeface & Colour
 
  • typeface: when changing the highlighted text from serif to sans-serif, need to reduce the font size of the sans-serif 
Figure L3.9: Adjusted Font Size vs Non Adjusted Font Size

  • placing a field of colour at the back of the text: readability is best on the left reading axis, but it depends on reader preferences
Figure L3.10: Highlighting Text by Placing a Field Colour at the Back of the Text

  • sometimes it's necessary to place certain typographic elements outside the left margin of a column because it helps maintaining a strong reading axis
Figure L3.11: Highlighting Text with Bullet Points - Original & Extended

Figure L3.12: Highlighting Text with Quotation Marks

Headline within Text
  • A Head:
    1. indicate a clear break between the topics within a section
    2. bold + different typeface + along with reading axis;
    3. bold + different typeface + outside/ extended outside but in a line with the body of text that is referring to
    4. same typeface + larger size
    5. small caps
Figure L3.13: A Head

  • B Head:
    1. indicate a new supporting argument/ example for the topic at hand
    2. small caps, italic, bold serif, and bold san serif
Figure L3.14: B Head

  • C Head:
    1. not common, highlight specific points within B Head text
    2. small caps, italics, serif bold, and san serif bold
Figure L3.15: C Head

Figure L3.16: Hierarchy in a Sequence of Subheads

Cross Alignment
  • reinforce the architectural sense of the page - the structure
Figure L3.17: Cross Alignment

Figure L3.18: Cross Alignment

Week 4 (20/10/2023)

Basic

Describing Letterforms

Figure L4.1: Describing Letterforms

The Font
  • Uppercase letters
Figure L4.2: Uppercase Letters

  • Lowercase letters 
Figure L4.3: Lowercase Letters

  • Small capitals
    1. uppercase letterforms draw to the x-height of the typeface
    2. small caps are primarily found in serif fonts 
Figure L4.4: Small Capitals vs Uppercase Letters

Figure L4.5: Lowercase Letter vs Small Capital

  • Uppercase numerals
    1. lining figures
    2. same height as uppercase letters
    3. set to the same kerning width
Figure L4.6: Uppercase Numerals

  • Lowercase numerals
    1. old style figures/ text figures
    2. set to x-height with ascenders and descenders
    3. best used when using upper and lowercase letterforms
Figure L4.7: Lowercase Numerals

  • Italic
    1. refer back to 15th century Italian cursive handwriting
    2. oblique is typically based on the Roman form of the typeface
Figure L4.8: Italic

Figure L4.9: Italic vs Roman

  • Punctuation, miscellaneous characters
Figure L4.10: Punctuation, Miscellaneous Characters

  • Ornaments
    1. used as flourishes in invitations/ certificates
    2. usually provided as a font in a larger typeface family
    3. e.g. Adobe Caslon Pro
Figure L4.11: Ornaments

Describing Typefaces
  • Roman
    1. uppercase forms are derived from inscriptions of Roman monuments
    2. a slightly lighter stroke in Roman is known as 'Book'
Figure L4.12: Roman

  • Italic, Oblique
    1. Italic: named for 15th-century Italian handwriting on which the forms are based
    2. Oblique: based on the Roman form of the typeface
Figure L4.13: Italic, Oblique

  • Boldface
    1. characterised by a thicker stroke than a Roman form
    2. can be called 'semibold', 'medium', 'black', 'extra bold', or super
    3. in some typefaces (like Bodoni), the boldest rendition of the typeface is referred to as 'Poster'
Figure L4.14: Boldface

  •  Light
    1. a lighter stroke than the Roman form
    2. even lighter strokes are called 'thin'
Figure L4.15: Light

  • Condensed
    1. a version of the roman form
    2. extremely condensed styles are called 'compressed'
Figure L4.16: Condense

  • Extended
    1. an extended variation of a Roman font
Figure L4.17: Extended

Comparing Typefaces
  • differences in x-height, line weight, relative stroke widths, and feeling, these feelings connote specific use and expression
Figure L4.18: Comparing Typefaces

Week 5 (27/10/2023)

Letters

Understanding Letterforms
  • The uppercase letterforms suggest symmetry, but it isn't symmetrical
  • Two different stroke weights of the Baskerville stroke form; each bracket connecting the serif to the stem has a unique arc
Figure L5.1: Baskerville "A"

  • The uppercase letterforms may appear symmetrical, but the width of the left slope is thinner than the right slope
Figure L5.2: Univers "A"

  • The complexity of each individual letterform: Helvetica and Univers - the way of the stems finish and the bowls meet the stems reveals the palpable difference in character between them
Figure L5.3: Helvetica "a" VS  Univers "a"

Maintaining X-Height
  • X-height: the size of the lowercase letterforms
  • Curved strokes such as "s" must rise above the median/ sink below the baseline to appear to be the same size as the vertical and horizontal strokes
Figure L5.4: Median & Baseline

Form/ Counterform
  • Counterform/ counter: the space contained by the strokes of the form
  • How well you handle the counters when you set type determines how well we can read
Figure L5.5: Form/ Counterform

Figure L5.6: Counterform - Helvetica Black vs Baskerville

Contrast
Figure L5.7: Contrast

INSTRUCTIONS

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

EXERCISE 1 - TYPE EXPRESSION
Week 2 (06/10/2023) 

Research & Sketches

You will be given 4 words to compose and express. Begin by sketching out ideas. Once the ideas are selected, you will be given a set of 10 typefaces to work within the digitisation phase. Through iteration, use the appropriate typeface and compose the letters in a manner that allows the meaning of the word to become visible — still and in motion. (2 weeks). Software: Adobe Illustrator and Adobe Photoshop.


I chose the words 'smoke', 'soup', 'power', and 'drunk'.

Research 
In my point of view, 'smoke' means gas, a cloudy gray or black mixture of air, and burning. From the images I searched, I thought of using 'float' and lightweight for the concept of 'smoke'. This is because the smoke goes into the air, it's 'floating' around and it reminds me of bubbles in the air. 
Figure E2.1: Ideas for Smoke, Week 2 (06/10/2023) 

Then, the meaning of 'soup' is a liquid dish, it always contains meat/ fish/vegetables, and often contains pieces of solid food. For the concept, I'm using a spoon and pieces of solid food to sketch out the ideas. 
Figure E2.2: Ideas for Soup, Week 2 (06/10/2023)

In my opinion, 'power' means possession of control, authority, and influence over others. For the concept, I was thinking of a main character that specifically stands up in the audience. 
Figure E2.3: Ideas for Power , Week 2 (06/10/2023)

Last but not least, I think 'drunk' means losing control (in action), and blurring while looking with eyes. For the concept, I was thinking of illusions from drunk persons. The words will be reflected. 
Figure E2.4: Ideas of Drunk, Week 2 (06/10/2023)

Sketches
These were the first rough ideas for my type expressions and the first options for their typefaces.
Figure E2.5: Rough Ideas of Type Expressions, Week 2  (06/10/2023)



Figure E2.6: Type Expression Sketches, Week 2 (06/10/2023)

Week 3 (13/10/2023)

Digitalisation & Animation

Digitalisation
Before deciding on my final design for the submission, I chose the suitable one from the previous type expression sketches and other ideas in my mind. 
Figure E3.1: Digitised Sketches, Week 3 (13/10/2023)


Figure E3.2: Digitised Sketches, Week 3 (13/10/2023)

Then, I decided on these as my final design. 
Figure E3.3: Final Type Expressions (Before), Week 3 (13/10/2023)

After that, I received feedback from Mr Vinod that 'smoke' and 'drunk' were acceptable, yet soup and power were needed to make changes. For 'soup', I needed to change the 'up' to the same sizes because there was no meaning for the different sizes of the font. In addition, the big 'P' must be changed because it was expanded (distortion). Besides that, the 'power' needed to do whole changes.


Final Submission of Type Expressions.
Figure E3.4: Final Type Expressions JPEG (After), Week 3 (13/10/2023)

Figure E3.5: Final Type Expression PDF (After), Week 3 (13/10/2023)


Animation
The next was turning the type expression into a GIF animation, I chose 'smoke' from the final submission of type expressions. The idea to animate 'smoke' was to make the 'o' fly away, just like the steam vaporing into the air. The inspiration was from the smoking pipe.
Figure E3.6: Cartoon of an Old Man Smoking a Pipe, Week 3 (13/10/2023)

The first step was using Illustrator to duplicate the artboard (Shift + 'O') because it automatically copies the entire I brought with the contents so I could make changes to the duplicated artboards. As you can see, I duplicated 27 artboards, which was 28 artboards in total.

Figure E3.7: 28 Artboards in Illustrator of Making the GIF - 'Smoke', Week 3 (13/10/2023)

Then, I changed the "create video timeline" to "create frame animation" to make the GIF animation of 'smoke'.
Figure E3.8: Animation Timeline (28 frames per second), Week 3 (13/10/2023)

This was the GIF Animation before feedback.
Figure E3.9: Final Animated Type Expression 'Smoke' - GIF (Before), Week 3 (13/10/2023)

After that, I changed the 'o' to light gray so it would be more visible on the vaporing.


Final Submission of GIF Animation.
Figure E3.10: Final Animated Type Expression 'Smoke' - GIF (After), Week 3 (13/10/2023)

EXERCISE 2 - TEXT FORMATTING
Week 4 (20/10/2023)

Kerning & Tracking

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

Text Formatting 1:4

You are only allowed to use the 10 typefaces, type out your name, and then do kerning & tracking on the text.

Notes
  • to increase letter-spacing (tracking)
    • select all the words/ just the word > "alt" + "right arrow key" 
  • to reduce letter-spacing (tracking)
    • select all the words/ just the word > "alt" + "left arrow key"
  • to adjust space between the letters (kerning)
    • "alt" + "left arrow key" (decrease spacing)
    • "alt" + "right arrow key" (increase spacing)

Figure E4.1: Text Formatting - Without Kerning & Tracking, Week 4 (20/10/2023)

Figure E4.2: Text Formatting - With Kerning & Tracking, Week 4 (20/10/2023)

Week 5 (27/10/2023)

Layout Design

Text Formatting 2:4 to 4:4A

You need to create a layout the by using the font size, line length, leading and paragraph spacing tool.

Notes
  • layout > margins & column > number of columns (change to 2 or 3)
  • 8 - 12 pt (font size)
  • 55 - 65 characters in 1 line
  • make sure the paragraph spacing follows font size (paragraph spacing/ space after, the name)
    • e.g. font size is 9pt, then leading is 12 pt (basically +3)
  • import photo = file - place - choose photo - openif you want to affect the image inside = direct selection tool ; if cropping image = select tool
  • frame fitting - preferences
  • the rule of thumb - don't exceed 3 times while kerning
  • align textbox = select textbox - ctrl + B - select top/centre/bottom
  • increasing headline = for the leading must multiply 2 (x2)
    • e.g. if leading is 12 pt, then x2, = 24pt
  • to see baseline grid = view > grids & guide > show baseline grid
  • how to adjust baseline grid to match the leading that we have for the body text = edit - preferences - grids - increment every (change to 11 pt) - view threshold (change to 50%) - ok, then select textbox - ctrl + B (text frame option) - align (use normal, which is top, don't use bottom because it won't align properly) - baseline option - offset (change to leading)
  • how to achieve cross-alignment = select textbox (highlight all the words), then click align to baseline grid

Figure E5.1: Text Formatting - Kerning & Tracking (Before), Week 5 (27/10/2023)

After that, I received feedback from Mr Vinod that my layout was acceptable. However, the image wasn't relevant to the topic, so it must be changed. Next, the title "I Am" needed to change to light/ thinner in weight, reduce depth, and only one lowercase for "am" (change to "Am"). Besides, try to follow the font size to make them look neat.


Head
  1. Font/s: Univers LT Std 47 Light Condensed ("I AM" & "by John Doe"); Universal LT Std 65 Bold (HELVETICA)
  2. Type Size/s: 30 pt ("I AM HELVETICA); 9 pt ("by John Doe")
  3. Leading: 24 pt ("I AM HELVETICA"); 12 pt ("by John Doe") 
  4. Paragraph spacing: -

Body
  1. Font/s: Univers LT Std 55 Roman (body); Univers LT Std 47 Light Condensed (caption)
  2. Type Size/s: 9 pt (body & caption)
  3. Leading: 12 pt (body & caption)
  4. Paragraph spacing: 12 pt (body)
  5. Characters per-line: 51 - 63
  6. Alignment: Top

Margins: 12.7 mm top, 12.7 mm left + 12.7 mm right + 12.7 mm bottom
Columns: 2
Gutter: 5 mm


Final Submission of Text Formatting.
Figure E5.2: Final Submission Text Formatting without Grid - JPEG, Week 5 (27/10/2023)

Figure E5.3: Final Submission Text Formatting with Grid - JPEG, Week 5 (27/10/2023)

Figure E5.4: Final Submission Text Formatting without Grid - PDF, Week 5 (27/10/2023)

Figure E5.5: Final Submission Text Formatting with Grid - PDF, Week 5 (27/10/2023)

FEEDBACK

Week 1 

Specific Feedback: 
1. soup #2, change the 'u' inside the 'O' to 'o'
2. soup #4 might be hard to understand from other's perspective

General Feedback: 
1. choose the right fonts for some of the sketches and minimise distortion 

Week 2 

Specific Feedback:
  1. For soup, need to change the 'up' to the same sizes because there was no meaning for the different sizes of the font. In addition, the big 'P' must be changed because it was expanded (distortion). 
  2. Besides that, the 'Power' needs to make whole changes.

General Feedback: 
  1. Smoke and drunk are acceptable.

Week 3 

Specific Feedback: 
  1. Change the 'o' to a lighter gray so it will be more visible on the vaporing.

General Feedback: 
  1. Animation is ok.

Week 4

Specific Feedback: 
  1. Leading is +3 pt, not +2 pt.
  2. The image needs to change, it must be related to the topic, not a random one.
  3. "I am" change to light (or thinner in weight), reducing depth, and only one lowercase (e.g. I Am).
  4. Change the font size of the caption same as the body.

General Feedback:
  1. Layout is acceptable.

REFLECTIONS

Experience
For the first exercise, it was quite challenging because we were limited to using only 10 typefaces to sketch out ideas, and we couldn't add too much of graphic elements (can't distort the font, and only black, gray & white colours are allowed). For the second exercise, it was quite hard to do because I didn't use Adobe Indesign before. Although it was hard but I still learned a lot from the lecture videos and during classes.

Observation
I realised that not every design must be complicated (e.g. add a lot of graphic elements in the sketch during first exercise), it can be simple design because we need to consider other viewers' perspective, not everyone will understand the complicated design.

Findings
I found out that there's a lot of rules for typography, especially the second exercise (design a layout). This needs to take time to remember by doing notes and reminding while doing the exercise.

FURTHER READING

Week 1 - Week 5
Figure FR.1: Typography Referenced (2012)

Reference:
Haley, A., Poulin, R., Tselentis, J., Seddon, T., Leonidas, G., Saltz, I., Henderson, K., & Alterman, T., (2012). Typography Referenced. Beverly, Massachusetts: Rockport Publishers Inc.

QUICK LINKS

Tasks

Task 2: Typography Exploration & Communication

Labels:

Comments

Post a Comment

Popular Posts