Skip to main content

TYPOGRAPHY | TASK 1 — EXERCISES


Week 1 – Week 6 | 29/09/23 – 05/11/23
Emily Soh Ching-Ling | 0359478
Bachelor of Design (Honours) in Creative Media
Typography | Section 04 | GCD60104
Task 1 — Exercises

TABLE OF CONTENTS


1.0 LECTURES

1.1 INTRODUCTION

Calligraphy > Lettering > Typography

Definition of Calligraphy: Writing style

Definition of Lettering: Drawing out the circumference of letters

Definition of Typography: 
  • The creation of typefaces or type families.
  • Understanding wayfinding and where to place typefaces.
  • Oxford Dictionaries: The style and appearance of printed matter.
  • Wikipedia: The art and technique of arranging type to make written language legible, readable and appealing when displayed.
Typography can come in animated forms (e.g. movie titles, gifs).

Typography is important in websites, apps, signage, and logotypes.

Typography affects comprehension and effective communication.

Definition of Font: 
  • The individual font or weight within the typeface.
  • E.g. Georgia Regular, Georgia Italic, Georgia Bold
Definition of Typeface: 
  • The entire family of fonts / weights that share similar characteristics.
  • E.g. Georgia, Arial, Times New Roman, Didot

1.2 DEVELOPMENT

EARLY LETTERFORM DEVELOPMENT — PHOENICION TO ROMAN:
  • Initial writing = Scratching into wet clay with a sharpened stick / craving into stone with a chisel.
  • Uppercase letterforms are a combination of straight lines and circles.
Figure 1.2-1: Evolution of the Phonetic Alphabet
  • The Greeks developed a style of writing called "boustrophedon".
  • This meant that lines of text read alternatively from left to right and right to left.
  • The orientation of the letterforms also changed according to the direction of reading.
Figure 1.2-2: Boustrophedon
  • Etruscan and Roman carvers painted letterforms before inscribing them.
  • Certain qualities of their strokes (i.e. a change in weight, a broadening of the stroke at the start and finish) carried over to the carved letterforms.
Figure 1.2-3: Late 1st Century B.C.E. Augustan Inscription

Figure 1.2-4: Timeline from Phoenician to Roman

HAND SCRIPT — 3RD TO 10TH CENTURY C.E.:
  • Square Capitals:
    • Square capitals can be found engraved into Roman monuments.
    • These letterforms have serifs added to the finish of the main strokes.
    • The variety of stroke width was achieved by the reed pen held at an angle of ~60° off the perpendicular.
Figure 1.2-5: 4th / 5th Century Square Capitals
  • Rustic Capitals:
    • Rustic capitals are a compressed version of the square capitals.
    • Rustic capitals allowed twice as many words on a sheet of parchment and took far less time to write.
    • The pen or brush was held at ~30° off the perpendicular.
    • Although rustic capitals are more convenient, they were slightly harder to read due to their compressed nature.
Figure 1.2-6 Late 3rd – mid 4th Century Rustic Capitals
  • Both square and rustic capitals were typically reserved for documents.
  • Everyday transactions were typically written in cursive hand.
  • As such, some forms were simplified for speed.
Figure 1.2-7: 4th Century Roman Cursive — The Beginning of The Lowercase Letterform
  • Uncials:
    • Uncials incorporated some aspects of the Roman cursive hand, especially in the shape of the letters A, D, E, H, M, U and Q.
    • "Uncia" is Latin for a twelfth of anything.
      • Some scholars believe that uncials refer to the letters that are one inch (1/12 of a foot) high.
      • It might be more accurate to think of uncials simply as small letters.
        • The broad forms of uncials are more readable at small sizes than rustic capitals.
Figure 1.2-8: 4th – 5th Century Uncials
  • Half-Uncials:
    • With the formalisation of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms.
    • Half-uncials are replete with ascenders and descenders.
    • This occurs 2,000 years after the Phoenician alphabet.
Figure 1.2-9: Half-Uncials
  • Carolingian:
    • Charlemagne (the 1st unifier of Europe since the Romans) issued an edict in 798 to standardise all ecclesiastical texts.
    • This task was entrusted to Alcuin of York, Abbot of St. Martin of Tours.
    • The monks rewrote texts using both majuscules (uppercase), minuscule (lowercase), capitalisation and punctuation.
    • This set the standard for calligraphy for a century.
Figure 1.2-10: C. 925 Carolingian Minuscule

BLACKLETTER TO GUTENBERG'S TYPE:
  • Blackletter / Textura & Rotunda:
    • With the dissolution of Charlemagne's empire came regional variations of Alcuin's script.
    • In northern Europe, a condensed, strongly vertical letterform known as Blackletter or Textura gained popularity.
    • In the south, a rounder, more open hand known as Rotunda gained popularity.
Figure 1.2-11: C. 1300 Blackletter / Textura
  • Gutenberg's Type:
    • Gutenberg's skills included engineering, metalsmithing, and chemistry.
    • He used these skills to build pages that accurately mimicked a scribe's work — Blackletter.
    • Gutenberg's type mould required a different type matrix (negative impression) for each letterform.
Figure 1.2-12: C. 1455 42-line Bible by Johann Gutenberg, Mainz

Figure 1.2-13: Timeline of Typography

TEXT TYPE CLASSIFICATION:

Figure 1.2-14: Text Type Classification

1.3 BASICS

DESCRIBING LETTERFORMS:
  • Baseline - The imaginary line defining the visual base of letterforms.
  • Median - The imaginary line defining the x-height of letterforms.
  • X-height - The height of the lowercase "x" in any typeface.
  • Stroke - Any line that defines the basic letterform.
  • Apex / Vertex - The point created by joining two diagonal stems.
  • Arm - Short strokes off the stem of the letterform.
    • Horizontal (e.g. E, F, L)
    • Vertical (e.g. K, Y)
  • Ascender - The portion of the stem of a lowercase form that projects above the median.
  • Barb - The half-serif finish on some curved strokes.
  • Beak - The half-serif finish on some horizontal arms.
  • Bowl - The rounded form that describes a counter.
    • Opened
    • Closed
  • Bracket - The transition between the serif and the stem.
  • Cross Bar - The horizontal stroke that joins two stems together (uppercase).
  • Cross Stroke - The horizontal stroke that joins two stems together (lowercase).
  • Crotch - The interior space where two strokes meet.
  • Descender - The portion of the stem that is below the baseline (lowercase).
  • Ear - The stroke extending out from the main stem.
  • Em - The width of a typeface.
  • En - ½ width of an em.
  • Finíal - The rounded non-serif terminal to a stroke.
  • Leg - Short stroke off the stem.
    • Bottom of the stroke (e.g. L)
    • Inclined downwards (e.g. K, R)
  • Ligature - The character formed by the combination of ≥ two letterforms.
  • Link - The stroke that connects the bowl and loop of a lowercase G.
  • Serif - The right-angled / oblique foot at the end of a stroke.
  • Shoulder - The curved stroke that is not part of a bowl.
  • Spur - The extension that articulates the junction of the curved and rectilinear stroke.
  • Spine - The curved stem of an S.
  • Stem - The significant vertical / oblique stroke.
  • Stress - The orientation of the letterform, indicated by the thin stroke in round forms.
  • Swash - The flourish that extends the stroke of the letterform.
  • Tail - The curved diagonal stroke at the finish of certain letterforms.
  • Terminal - The self-contained finish of a stroke without a serif.
Figure 1.3-1: Describing Letterforms

THE FONT:
  • Uppercase Letters:
Figure 1.3-2: Uppercase Letters
  • Lowercase Letters:
Figure 1.3-3: Lowercase Letters
  • Small Capitals:
    • Uppercase letterforms draw to the x-height of the typeface.
    • Small capitals are primarily found in serif fonts.
Figure 1.3-4: Small Capitals VS Uppercase

Figure 1.3-5: Lowercase VS Small Capitals
  • Uppercase Numerals:
    • AKA lining figures.
    • Same height as uppercase letters.
    • Set to the same kerning width.
Figure 1.3-6: Uppercase Numerals
  • Lowercase Numerals:
    • AKA old-style figures / text figures.
    • Set to x-height with ascenders and descenders.
    • Best used when using both upper and lowercase letterforms.
    • Uncommon in sans serif typefaces.
Figure 1.3-7: Lowercase Numerals
  • Italic:
    • The forms in italics refer back to the 15th century Italian cursive handwriting.
    • Oblique is typically based on the Roman form of the typeface.
Figure 1.3-8: Italic

Figure 1.3-9: Italic VS Roman
  • Punctuation & Miscellaneous Characters:
Figure 1.3-10: Punctuation & Miscellaneous Characters
  • Ornaments:
    • Used as flourishes in invitations and certificates.
    • Usually provided as a font in larger typeface families.
    • E.g. Adobe Caslon Pro
Figure 1.3-11: Ornaments

DESCRIBING TYPEFACES:
  • Roman:
    • The uppercase forms are derived from inscriptions on Roman monuments.
    • Book = A slightly lighter stroke in Roman
Figure 1.3-12: Roman
  • Italic & Oblique:
    • Italic = When based on handwriting.
    • Oblique = When based on Roman typefaces.
Figure 1.3-13: Italic
  • Boldface:
    • Characterised by a thicker stroke.
    • Depending on the stroke width within the typeface, it can also be called: Semibold, Medium, Black, Extra Bold, Super.
    • In some typefaces, the boldest rendition of the typeface is referred to as "Poster".
      • E.g. Bodoni
Figure 1.3-14: Boldface
  • Light:
    • Characterised by a lighter stroke.
    • Even lighter strokes are called "Thin".
Figure 1.3-15: Light
  • Condense:
    • A condensed version of Roman.
    • Extremely condensed styles are called "Compressed".
Figure 1.3-16: Condense
  • Extended:
    • A stretched version of Roman.
Figure 1.3-17: Extended

COMPARING TYPEFACES:

Figure 1.3-18: Typefaces Used During This Course

1.4 TEXT (PART 1)

KERNING, LETTERSPACING & TRACKING:
  • Definition of Kerning: The automatic adjustment of space between letters.
  • Definition of Letterspacing: To add space between letters.
    • The wider the letterspacing, the lower the readability.
  • Definition of Tracking: The addition + removal of space in a word / sentence.
  • Letterspacing Uppercase Letters: ☑
    • Why: Uppercase letterforms can stand on their own.
  • Letterspacing Lowercase Letters: ☒
    • Why: Lowercase letterforms require the counterform between letters to maintain readability.
Figure 1.4-1: Kerning, Letterspacing & Tracking

Figure 1.4-2: Normal Tracking, Loose Tracking & Tight Tracking

TEXT FORMATTING:
  • Flush Left:
    • Closely mirrors handwriting.
    • Each line starts at the same point + ends wherever the last word on the line ends.
    • Tracking is consistent — even grey value.
Figure 1.4-3: Flush Left, Ragged Right
  • Centered:
    • Symmetrical — equal value + weight on both ends of a line.
      • Adds pictorial quality to the text.
    • Tracking is consistent — even grey value.
    • Problematic line breaks should be amended so that the text doesn't appear too jagged.
    • Should be used sparingly.
Figure 1.4-4: Centered, Ragged Left + Right
  • Flush Right:
    • Places emphasis on the end of the line.
    • E.g. Captions — where the relationship between text and image is ambiguous.
    • Tracking is consistent — even grey value.
Figure 1.4-5: Flush Right, Ragged Left
  • Justified:
    • Symmetrical — equal value + weight on both ends of a line.
    • Tracking is inconsistent — uneven grey value.
    • Problematic line breaks should be amended with hyphenation.
Figure 1.4-6: Justified

TEXT TEXTURE:
  • Ideally: Middle grey value.
  • Figure LT1.7 shows how some typefaces have darker or lighter grey values.
Figure 1.4-7: Anatomy of a typeface

Figure 1.4-8: Different Typefaces, Different Grey Values

LEADING & LINE STRENGTH:
  • Type Size: Should be large enough to be easily read at arm's length.
  • Leading: 
    • Type that is set too tightly — encourages vertical eye movement; the reader can easily lose track.
    • Type that is set too loosely — creates patterns; distracts the reader.
  • Line Strength:
    • Shorter lines — less reading.
    • Longer lines — more reading.
    • Extremely long / short lines impair reading.
    • Ideally: 55 – 65 characters per line.
Figure 1.4-8: Leading — Too Tight VS Too Loose

TYPE SPECIMEN BOOK:
  • Purpose:
    • To show samples of typefaces in various different sizes.
    • To provide an accurate reference for type, type size, type leading, type line length etc.
Figure 1.4-10: Sample Type Specimen Sheet

ADOBE INDESIGN:
  • Increase Text Size: Ctrl + Shift + >
  • Increase Tracking: Ctrl + →

1.5 TEXT (PART 2)

INDICATING PARAGRAPHS:
  • Pilcrow (¶): Used in medieval manuscripts.
Figure 1.5-1: Pilcrow

  • Line Space (leading): 
    • Between paragraphs.
    • E.g. If the line space is 12pt, then the paragraph space is 12pt.
    • Purpose: Ensures cross-alignment across columns of text.
Figure 1.5-2: Line Space

Figure 1.5-3: Line Space VS Leading
  • Standard Indentation:
    • Typically the indent is the same size as the line spacing / same point size as the text.
Figure 1.5-4: Standard Indentation
  • Extended Paragraphs:
    • Creates unusually wide columns of text.
Figure 1.5-5: Extended Paragraphs

WIDOWS & ORPHANS:
  • Widow:
    • Definition of widow = A short line of type left alone at the end of a column.
    • Flush right / ragged left — Slightly forgiving towards widows.
    • Solution: Rebreak line endings throughout the paragraph — the last line of not noticeably short.
  • Orphan:
    • Definition of orphan = A short line of type left alone at the start of a column.
    • Flush right / ragged left — Not forgiving towards orphans
  • Widows and orphans must be avoided at all costs.
Figure 1.5-6: Widows & Orphans

HIGHLIGHTING TEXT:
  • Types of Highlighting:
Figure 1.5-7: Highlighting Text — Italic & Bold

Figure 1.5-8: Highlighting Text — Changing Typefaces & Changing Typeface Colour

Figure 1.5-9: Highlighting Text — Blocked Out Background
  • When changing the highlighted typeface from serif to san serif, the san serif font should be reduced to match the x-height of the serif font.
Figure 1.5-10: Adjusted Font Size VS Same Font Size
  • Sometimes it is necessary to place typographic elements outside the left margin of a column.
    • Purpose: To maintain a strong reading axis.
Figure 1.5-11: Original VS Extended — Bullet Points

Figure 1.5-12: Original VS Extended — Quotation Marks

HEADLINES IN TEXT:
  • A Head: Indicates a clear break between topics in a section.
Figure 1.5-13: A Head — Bold + Different Typeface, Bold + Different Typeface + Extended, Larger Than Text, & Small Caps
  • B Head: Indicate a new supporting argument or example for the topic at hand.
Figure 1.5-14: B Head — Small Caps, Italic, & Bold + Different Typeface
  • C Head: Uncommon — Highlights specific points within the B head.
Figure 1.5-15: C Head — Small Caps, Italic, & Bold + Different Typeface

Figure 1.5-16: Example of Hierarchy Via Subheads

CROSS-ALLIGNMENT:
  • Purpose: To reinforce the structure of the page.
Figure 1.5-17: Example of Cross-Alignment

Figure 1.5-18: Example of Cross-Alignment

1.6 LETTERS

UNDERSTANDING LETTERFORMS:
  • The uppercase Baskerville letterform may appear symmetrical, but it is asymmetrical.
  • Two different stroke weights.
  • Each bracket connecting the serif to the stem has a unique arc.
Figure 1.6-1: Baskerville "A"

  • The uppercase Univers letterform may appear symmetrical, but it is asymmetrical.
  • The width of the left stroke is thinner than the width of the right stroke.
Figure 1.6-2: Univers "A"
  • Each individual letterform is complex.
  • E.g. Helvetica VS Univers — The way the stems finish and the bowls meet the stem reveals the stark difference between two seemingly similar typefaces.
Figure 1.6-3: Helvetica "A" VS Univers "A"

MAINTAINING X-HEIGHT:
  • X-height — The height of lowercase letterforms.
  • Curved strokes (e.g. "s") rise above the median / sink beneath the baseline — to appear to be the same height as vertical and horizontal strokes
Figure 1.6-4: Curved VS Horizontal & Vertical

FORM / COUNTERFORM:
  • Counterform (AKA counter) — The space contained by strokes of a letterform.
  • How well counters are handled determines the readability of the words.
Figure 1.6-5: Counterform

Figure 1.6-6: Counterform — Helvetica Black VS Baskerville

CONTRAST:

Figure 1.6-7: Contrast — Helvetica Bold VS Baskerville

Figure 1.6-8: Contrast — Types of Contrast

1.7 WEEK 1 — INTRODUCTION & TASK 1 BRIEFING

Install the 10 fonts in General > Documents

2 types of submissions: still & motion (animated)

Sketches can be done digitally

NO COLOUR ALLOWED + ONLY USE THE 10 FONTS PROVIDED throughout the whole semester

Do not distort the letter form (only minor distortions allowed)

Choose 4 words for Type Expression sketches: smoke, soup, spooky, power, impact, crunch, drunk, fold

Sketches due: Week 2

1.8 WEEK 2 — DIGITISING SKETCHES

ADOBE ILLUSTRATOR:
  • Shift O = Duplicate artboard
  • List the typefaces (e.g. Futura Bold) + font size used for each artwork.
  • How to export final JPEG artwork: File > Export > Export As > Format: JPEG > Use Artboards > Range: Select Artboard No. > Export > Colour Model: Grayscale > Resolution: 300ppi > OK

1.9 TYPE EXPRESSION (PART 1 & 2)

Download the Type Expression file > Microsoft Teams

Artboard Tool: Shift + O

Zoom in and out: Ctrl + -/+ OR Z + mouse wheel

Type Tool: T

Selection Tool: V

Make object bigger / smaller: Shift + corner of the object

Increase / decrease kerning (space between letters): Alt + ∧ / ∨

Rotate: R

Create a clipping mask: Create a shape the size of the boundary > Ctrl + 7

Effects > Warp / Distort

1.10 WEEK 3 — ANIMATION BASICS

Artboard Tool: Shift + O.

HOW TO ANIMATE TEXT:
  • In Illustrator:
    • Duplicate original artboard.
    • Export > Export As > Save.
  • In Photoshop:
    • File > Scripts > Load files into stack > Browse > Dropbox > [Select the artboards].
    • [Bottom of screen] > Create Frame Animation.
    • Duplicate + turn on / off layers based on which frame you're at.
    • Export the GIF as: 1024 x 1024 pixels, 70 ppi.

1.11 WEEK 4 — TASK 2 BRIEFING

EXPORTING TEXT:
  • Export text as 300 ppi (any lower, and the text will be blurry).
  • File > Adobe Quality Present > Type Quality > Print
  • Export with Guides & Grids: File > Adobe Quality Present > Type Quality Print > Visible Guides & grids > Export

1.12 TEXT FORMATTING (PART 1)

Text Formatting Exercise Document: InDesign > Print > A4 > Facing Pages: ☒ > Column Gutter: 5 > Create

Increase / Decrease Tracking & Kerning: Alt + > / <

1.13 TEXT FORMATTING (PART 2)

Margins & Columns: Layout > Margins and Columns
  • Standardised margins ≠ Appealing layout
  • Consider how the number of columns may affect line length.
    • E.g. Too many columns = Short line length
Font Size: Body text font size should be around 8 – 12 pts regardless of typeface.

Line Length: A good average is 55 – 65 words per line.

Leading: Usually 2.5 – 3 pts larger than the font size.

Paragraph Spacing: Top of Control panel > Paragraph Spacing Below > [Insert font size + pt].

1.14 TEXT FORMATTING (PART 3)

Import Images: Ctrl + D

Maintain the same textbox width for information of the same category.

Kerning can be done from 1–3 times for a line. Anything >3 makes the spacing look weird.

Cons of Justified: 
  • Sometimes the tracking for certain lines can become too loose.
  • Hyphenating may be needed.

1.15 TEXT FORMATTING (PART 4)

Baseline Grid: 
  • View > Grids & Guides > Show Baseline Grid
  • Purpose: Ensure columns and lines of text are cross-aligned.
  • How to Adjust: Edit > Preferences > Grids > Increment Every: [Leading pt size] pt > View Threshold > 50% > [Select text] > Text Frame Options > Baseline Option > Offset: Leading > General > Align: Bottom

1.16 TEXT FORMATTING (PART 4A)

Hidden Characters: Ctrl + Alt + I

Cross-alignment Shortcut: [Select text] > Paragraph Formatting Controls (¶ symbol at the left side of the control panel) > Align to Baseline Grid (☰☰ symbol at the right side of the control panel)

2.0 INSTRUCTIONS


3.0 EXERCISE 1 — TYPE EXPRESSION

Instructions: You will be given four 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 with in the digitisation process. 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.

3.1 SKETCHES

The words I selected are Soup, Impact, Crunch, and Drunk. With that, I began sketching.

Figure 3.1-1: Type Expression Sketches, Week 2 (06/10/23)

Soup: Soup was a very fun word to illustrate. I incorporated things I associate with soup into my designs, such as dripping (Soup #1), Campbell Soup cans (Soup #3), and soup bowls (Soup #4,#5, #6). Soup #2 and #7 aren't based on anything in particular.

Impact: I wanted the letters to look like they were rushing towards the viewer in Impact #1. Impact #2, #3 and #7 are based on bows and arrows. 

Crunch: Crunch for some reason was harder for me to come up with ideas for. Crunch #1 was supposed to look like a can being squashed, but I don't think it translated well in visual form. The "C" in Crunch #2 and #3 look like they are eating the other letters.

Drunk: Drunk was also very fun to illustrate. I think I managed to capture double vision (Drunk #1, #4, #5) well. Drunk #2 and #3 are variations of a drunk person tripping.

My personal favourites: Soup #4, Soup #5, Impact #1, Impact #4, Crunch #3, Drunk #1, and Drunk #4.

Based on Mr Vinod's feedback, I moved on to digitising my sketches.

3.2 DIGITISATION & ANIMATION

I couldn't yet decide which designs I wanted in my final submission, so I digitised the ones I thought had potential. I even came up with new designs on the fly.

Figure 3.2-1: Digitised Sketches, Week 3 (12/10/23)

Figure 3.2-2: Type Expressions (Before Feedback), Week 3 (13/10/23)

After receiving feedback from Mr Vinod, it was back to the drawing board for Soup and Drunk (Soup was too illustrative, and the D, R, N, K in Drunk should be straightened out).

Figure 3.2-3: Type Expressions (Final Submission) — JPEG, Week 3 (13/10/23)

Figure 3.2-4: Type Expressions (Final Submission) — PDF, Week 3 (13/10/23)

Once that was done, I turned one of my type expressions into a GIF. The word I chose for this was Crunch.

My idea is for the word Crunch to have bites taken out of it, quickly at the start, then slowing down near the end (as though whoever eating it is getting full).

The animation is 24 frames per second.

Figure 3.2-5: GIF Animation Timeline, Week 3 (14/10/23)

Figure 3.2-6: GIF Animation (Final Submission), Week 3 (14/10/23)

4.0 EXERCISE 2 — TEXT FORMATTING

4.1 TRACKING & KERNING

Instructions: Type out your name in the 10 fonts provided, then track and kern the text.

Figure 4.1-1: Without Tracking, Week 4 (21/10/23)

Figure 4.1-2: With Tracking, Week 4 (21/10/23)

Figure 4.1-3: Overlayed Comparison, Week 4 (21/10/23)

4.2 LAYOUT DESIGN

Instructions: Create a layout that is conducive to reading with proper font size, line length, leading and paragraph spacing.

Figure 4.2-1: Text Formatting #1 (Before Feedback), Week 5 (25/10/23)

Figure 4.2-2: Text Formatting #2 (Before Feedback), Week 5 (26/10/23)

I chose Text Formatting #1 for my final submission, partially based on Mr Vinod's feedback, partially because I found this layout more appealing. While adjusting my text formatting, I noticed some forced line breaks throughout the body text which I quickly remedied.

Head:
  • Font/s: Futura Std Medium Condensed ("I AM"), Futura Std Bold Condensed ("HELVETICA"), Futura Std Book Oblique ("by John Doe")
  • Type Size/s: 38 pt ("I AM"), 112 pt ("HELVETICA"), 14 pt ("by John Doe")
  • Leading: 45.5 pt ("I AM"), 134.5 pt ("HELVETICA"), 16.8 pt ("by John Doe")
  • Paragraph Spacing: –
Body:
  • Font/s: Gill San MT Regular (Body), Gill Sans MT Book Oblique (Caption)
  • Type Size/s: 10 pt (Body), 8 pt (Caption)
  • Leading: 12.5 pt (Body), 9.6 pt (Caption)
  • Paragraph Spacing: 12.5 pt (Body)
  • Characters per Line: 31 characters
  • Alignment: Flush left, ragged right
Margins: 14.82 mm top, 14.82 mm left, 14.82 mm right, 14.82 mm bottom

Columns: 3

Gutter: 7.76 mm

Figure 4.2-3: Final Submission (Without Grids) — JPEG, Week 5 (27/10/23)

Figure 4.2-4: Final Submission (With Grids) — JPEG, Week 5 (27/10/23)

Figure 4.2-5: Final Submission (Without Grids) — PDF, Week 5 (27/10/23)

Figure 4.2-6: Final Submission (With Grids) — PDF, Week 5 (27/10/23)

5.0 FEEDBACK

5.1 WEEK 1

Specific Feedback: 
  • Soup #1, #2, #3 - Too much distortion
  • Soup #4, #5, #6 - OK
  • Impact #2, #3 - Might be hard to read
  • Drunk #1, #2, #3, #4 - OK, distortion is minimal
General Feedback: 
  • Keep specific typefaces in mind while sketching. Understand and familiarise yourself with what the typefaces look like.
  • Distortion should be done minimally.
  • Avoid adding graphical elements.

5.2 WEEK 2

Specific Feedback: 
  • Soup: Too illustrative.
  • Crunch & Impact: OK.
  • Drunk: Keep the "U" as is, and straighten the other letters.
General Feedback: 
  • Make the artwork bigger, so that it dominates the space.
  • Understand the mechanics of the word you want to animate.

5.3 WEEK 3

Specific Feedback: Type expression and GIF are OK.

5.4 WEEK 4

Specific Feedback: 
  • Text Formatting #1:
    • Line length is dangerously short, but still acceptable.
    • Good layout.
  • Text Formatting #2:
    • Rivers in some paragraphs, might need to allow some hyphenation.
    • Decent layout.
    • Heading: 
      • "HELVETICA" can be changed to Univers LT Std Extended.
      • "I AM" and "John Doe" can be changed to Univers LT Std Roman.
General Feedback: 
  • Leading should be 2.5 – 3 pts larger than larger than the font size.
  • You don't need to emphasise something that's already emphasised, e.g. a title that is large doesn't have to be bolded.
  • If you want to put text in front of an image, make sure the image has an even tone.

5.5 WEEK 9

E-portfolio Feedback:
  • Exercise 1: Submission not as instructed.
  • Exercise 2: Complete.

6.0 REFLECTION

6.1 EXPERIENCE

I was excited to start Typography as it was the only physical BDCM course I'd be taking this semester. Even though I wasn't a fan of having to watch a playlist full of lectures, I actually prefer watching recorded lectures because I can rewatch parts that I don't understand and take notes without feeling rushed.

6.2 OBSERVATIONS

I was able to grasp the basics of Illustrator and InDesign relatively quickly, however, I struggled a lot with navigating Photoshop despite having prior experience with the software, likely because the layout is still foreign to me. That will need further improvement.

6.3 FINDINGS

I noticed that I tend to overly rely on my sketches instead of working hands-on with the source material (in this specific task: the 10 fonts provided) while exploring designs. This causes me to lose sight of the source material I'm working with which means sometimes my sketches can't be worked with, or have to be changed significantly. 

7.0 FURTHER READING

7.1 WEEK 2–3 — A TYPE PRIMER: 2ND EDITION

Figure 7.1-1: A Type Primer: 2nd Edition by John Kane

Reference: Kane, J. (2011, February 28). A Type Primer: 2nd Edition. Pearson Prentice Hall.

7.2 WEEK 4–5 — TYPOGRAPHY REFERENCED

Figure 7.2-1: Typography Referenced by Haley et al.

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

QUICK LINKS

TASK 1 — EXERCISES
TASK 2 — TYPOGRAPHIC EXPLORATION & COMMUNICATION
TASK 3 — TYPE DESIGN & COMMUNICATION
FINAL COMPILATION & REFLECTION
Labels:

Comments

Post a Comment

Popular posts from this blog

VIDEO & SOUND PRODUCTION | FINAL COMPILATION

Week 1 –  Week 15 | 26/04/24 – 04/08/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Video & Sound Production | Section 03 | VSP60104 Final Compilation TABLE OF CONTENTS  1.0 PROJECT 1 — AUDIO EDITING EXERCISES     1.1 EXERCISE 1 — AUDIO DUBBING     1.2 EXERCISE 2  — SOUND SHAPING 2.0 PROJECT 2 — SHOOTING & EDITING     2.1 PROJECT 2A — PRODUCTION SHOOT     2.2 PROJECT 2B  — IG / TIKTOK VIDEO 3.0 FINAL PROJECT — STOP-MOTION 1.0 PROJECT 1 — AUDIO EDITING EXERCISES  1.1 EXERCISE 1 — AUDIO DUBBING Google Drive Link to Project 1 blog post Figure 1.1-1:  Exercise 1 — Video (Final Submission), Week 4 (19/05/24) Figure 1.1-2:  Exercise 1 — PPT (Final Submission), Week 4 (19/05/24) 1.2 EXERCISE 2 — SOUND SHAPING Google Drive Figure 1.2-1:  Exercise 2 — Phone Call Sound Effect (Final Submission), Week 10 (27/06/24) Figure 1.2-2:  Exercise 2 — Closet Sound Effect (Fina...
Post a Comment
Read more

INTERCULTURAL DESIGN | PROJECT 3 — FINAL PROJECT

Week 6 –  Week 8 | 11/03/24 – 29/03/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Intercultural Design | Section 01 | GCD61304 Project 3 — Final Project TABLE OF CONTENTS 1.0 INSTRUCTIONS 2.0 PROJECT 3 — FINAL PROJECT     2.1 TASK DELEGATION     2.2 SKETCHES     2.3 CRAFTING     2.4 DECORATING & ASSEMBLY     2.5 PHOTOSHOOT      2.6 FINAL SUBMISSION 3.0 FEEDBACK     3.1 WEEK 7 4.0 REFLECTION 1.0 INSTRUCTIONS  2.0 PROJECT 3 — FINAL PROJECT Instructions:   Produce a visual design outcome that reflects your interpretation and definition of "framing". Consider the cultural and aesthetic aspects of your design. 2.1 TASK DELEGATION 1. KANZASHI OF THE PAST: Sketching:  Ying Ying, Velicia Crafting:  Emily, Velicia Decorating:  Emily, Ying Ying Photoshoot: Ying Ying (photography), Velicia (modelling), Emily (editing) 2. KANZASHI OF THE PRESENT: Sketching:...
Post a Comment
Read more

INTERCULTURAL DESIGN | PROJECT 2 — FIELD STUDY

Week 4 –  Week 5 | 26/02/24 – 10/03/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Intercultural Design | Section 01 | GCD61304 Project 2 — Field Study TABLE OF CONTENTS 1.0 INSTRUCTIONS 2.0 PROJECT 2 — FIELD STUDY     2.1 RUNDOWN     2.2 OSAKA     2.3 KYOTO     2.4 NARA     2.5 INFORMATION COMPILATION      2.6 FINAL SUBMISSION 3.0 FEEDBACK 4.0 REFLECTION 1.0 INSTRUCTIONS  2.0 PROJECT 2 — FIELD STUDY Instructions:   Collect research materials (i.e. visual, oral, textual, tactile artefacts) to support Project 1. All research materials must be recorded, documented, and should include information such as: Type of artefact / material. Purpose. Symbolism. Cultural / historical background. 2.1 RUNDOWN We decided to base our field of research on the three major cities in the Kansai region: Osaka, Kyoto, and Nara . This is for two reasons: 1. The Heart of Japan:  Osaka is known...
Post a Comment
Read more