Typography/ Task 1: Exercises

30.03.2022 - 27.04.2022 [Week 1-5]

Janaan Ahmed (0353333)

Typography / Bachelor of Design (Hons) in Creative Media

Task 1: Exercises

Lectures

WEEK 1

INTRO

Mr. Vinod gave us a rundown of the module, assessment criteria, and e-portfolio format, while also walking us through the FB group. We also got to hear a little about his backstory and journey as a designer.

TYPO 0: INTRO

The first pre-recorded lecture.

Mr.Vinod talks about how the attributes and skill sets learned from typography is applicable in many various areas. Typography is quite fundamental to design due to its compositional elements and attention to detail.

WHAT IS IT?

Typography - art and technique of arranging type to make written language legible, readable and appealing when displayed

Involves the creation of typefaces/type families, animations, website design, seamless app design, books, posters, logo types, etc.

Good typography involves lots of trial and error, iteration, lots of refining and work.

A BIT OF HISTORY

Typography involves 500 years worth of knowledge, therefore Mr. Vinod emphasised the importance of further reading for the best learning.

Evolved over 500 years from calligraphy -> lettering -> typography

Calligraphy: Writing
Lettering: Drawing out letters i.e drawing out the circumference of letter

Typography used to be a very specialised discipline practiced by typesetters or typographers. However with the democratisation and accessibility of technology, pretty much anyone is able to practice it leading to an inevitable decrease in the quality of it compared to before.

In essence, a decrease in the typographic quality impacts effective communication and engagement.

e.g. bad typography affects comprehension and hence can create a negative learning experience especially for visual learners.

Historically, alphabets were developed to replace pictograms for more precise communication.

IMPORTANT TERMINOLOGY

Font: individual font or weight within the typeface.

E.g: Georgia Regular, Georgia Italic, Georgia Bold

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

E.g: Georgia, Arial, Times New Roman, Didot, Baskerville

TYPO 1: DEVELOPMENT/TIMELINE

(from the perspective of the western world)

EARLY LETTERFORM DEVELOPMENT: PHOENICIAN TO ROMAN

Writing in the early days involved scratching into wet clay with a sharp stick or carving into a stone with a chisel.

The evolution of the letterforms and scripts that developed over time were influenced by the tools and materials used for writing.

Fig. 1.1: Evolution from Phoenician letter

As illustrated above, we see that much of written Arabic and modern Latin were derived from the Phoenician alphabet.

The Phoenicians wrote from right to left. However, the Greeks changed the direction of writing by developing a style of writing called 'boustrophedon'. The lines of text alternated between reading from right to left, and left to right (z-shaped).

Fig. 1.2: Greek style of writing. Letter space and punctuation were not used like Phoenicians.

Fig. 1.3: Greek Fragment, stone engraving (date unknown)

As a consequence of changing the direction of reading, the orientation of the letterforms also changed.

Etruscan (and then Roman) marble carvers first painted the letterform before inscribing them to reduce cost of resources.

Fig. 1.4: Development of the letterform 'A' from Phoenician to Roman

As result, certain qualities of the strokes (based on the tool used) carried over into the carved letterform for e.g. the serifs we see today.

HAND SCRIPT FROM 3rd - 10th CENTURY CE

Fig. 1.5: Square Capitals - developed around the 4th or 5th century

Square capitals - written version found in Roman monuments.
These have serifs added to the finish of the main strokes.
Stroke variety achieved by thickness of the reed pen as well as the angle at which it was held (appx. 60 degrees off the perpendicular).

Fig. 1.6: Rustic Capitals: late 3rd - mid 4th century

Rustic Capitals : the compressed version of Square Capitals to make maximum use of parchment.
Twice as many words can be written (pen held at appx. 30 degrees off the perpendicular)
Is faster and easier to write but has low readability due to compressed nature.

Fig. 1.7: Roman Cursive - 4th century

Square capitals and Rustic capitals were reserved for documents with intended performance.
Everyday transactions were written in cursive hand.
Once again forms were simplified for speed.
Lowercase letterforms developed as a result of writing uppercase letterforms quickly.

Fig. 1.8: Uncials, 4th-5th century

Uncials incorporated some aspects of Roman cursive hand (especially A, D, E, H, M, U, and Q).
Uncials can simply be considered as small letters
Broad forms of uncials are more readable at small sizes than rustic capitals.

Fig. 1.9: Half-uncials, C 500

Half-uncials: a further formalisation of the cursive hand
Formal beginning of lowercase letterforms.
Now replete with ascenders and descenders (2000 years after origin of Phoenician alphabet)

Fig. 1.10: Caroline miniscule, C 925

A standardized system of writing was developed to prevent loss of info, and convey messages more accurately and precisely.
Charlamagne (first unifier of Europe since the Romans) entrusted Alcuin of York, Abbot of St. Martins of Tours to oversee the standardization of writing systems.
Introduction of uppercase, lowercase letters, punctuation, capitalisation in sentences

Note: Charlamagne chose Abbot because writing was primarily the domain of religious order.

BLACKLETTER TO GUTENBERG'S TYPE

Fig. 1.11: Blackletter (Textura) - c. 1300

The dissolution of Charlemagne's empire birthed regional variations in Alcuin's script.
Northern Europe: Blackletter or textura (a condensed, strongly vertical letterform).
Southern Europe: Rotunda: rounder, open-handed

Fig. 1.12: 42-line Bible, Johannes Gutenberg, Maine c.1455

Gutenberg used his skills in engineering, metalsmithing and chemistry to build pages that accurately mimicked the work of the scribe's hand - Blackletter of Northern Europe
His work basically kickstarted the Printing Revolution.
Documentation of information became more efficient + quicker
Mass production/ publishing of text - a tipping point in western civilisation.

TEXT TYPE CLASSIFICATIONS:

1450 Blackletter

Earliest printing type.
Forms based upon hand-copying styles used for books in northern Europe.
e.g: Cloister Black

1475 Oldstyle

Based upon lowercase forms used by Italian humanist scholars of book copying.
e.g: Bembo, Janson, Palatino

1500 Italic

Originally considered a separate typeface. Now all typefaces designed with accompanying italic forms.
Serif letters that are italic sized: italics.
Letters without serifs: oblique.

1550 Script

Not appropriate in lengthy text settings.
Wide acceptance in shorter application though.
Not designed to be read in all caps.
e.g: Mistral

1750 Transitional

Refinement of oldstyle forms.
Achieved because of advances in printing
Lightened brackets
Exaggerated thick-to-thin relationships
e.g: Baskerville, Century, Times Roman

1775 Modern

Further rationalisation of oldstyle letterforms
Unbracketed serifs
Extreme contrast between thick and thin
e.g: Bodoni, Didot, Walbaum

1825 Square Serif/ Slab Serif

Typefaces that depart from mimicking writing
Originally heavily bracketed serif, little variation between thick-thin strokes.
Brackets eventually dropped
e.g: Clarendon, Serifa

1900 Sans Serif

No serifs.
Variations -> Humanist (Gill Sans) and Geometric (Futura) forms
e.g: Grotesk, Gill Sans, Futura, Optima

1900 Serif/Sans Serif

Family of typefaces including both serif and sans serif (and in-betweens)
Semi sans/ Semi serifs
e.g: Rotis, Scala, Stone

---

WEEK 2

TYPO 2: BASICS

DESCRIBING LETTERFORMS

Knowing the component parts of a letterform make it much easier to identify specific typefaces.

Fig. 2.0: baseline, median, and x-height

Baseline: The imaginary line at the visual base of letterforms
Median: The imaginary line defining the x-height of letterforms
X-height: The height in any typeface of the lowercase 'x'.

Cap height: shorter than ascender height because capital letters are wider and take up more surface area at the top.

To give the impression of equal height, the ascending stroke is slightly above the cap letter (an optical adjustment as opposed to mathematical)

Fig. 2.1: The anatomy of a typeface

Stroke: Any line that defines the basic letterform.
Apex/Vertex: The point created by joining two diagonal stems (apex: above, vertex: below).
Arm: Short strokes off the stem, either horizontal (E, F, L) or inclined upward (K,Y).
Ascender: The portion of the stem of a lowercase letterform that projects above the median.
Barb: The half-serif finish on some curved stroke.
Beak: The half-serif finish on some horizontal arms.
Bowl: The rounded form that describes a counter (either open/closed)
Bracket: The transition between the serif and the stem (seen at base of letterforms).
Counter: The open space in a fully/party closed area within a letter.
Cross Bar: The horizontal stroke in a letterform that joins two stems together (A, H)
Cross Stroke: The horizontal stroke in a letterform that crosses over the stem (f, t).
Crotch: The interior space where two strokes meet.
Descender: The portion of the stem of a lowercase letterform that projects below the baseline.
Ear: The stroke extending out from the main stem/body of letterform
Em/en: Originally referred to the width of an uppercase M. It is the distance equal to the size of the typeface. en=1/2 em. Used for em/en space (i.e space between two words) and (em dash—)/(en dash -)
Finial: The rounded non-serif terminal to a stroke
Leg: Short stroke off the stem of letterform either at bottom of stroke (L) or inclined downward (K, R).
Ligature: The character formed by the combination of two or more letterforms.
Link: The stroke that connects the bowl and the loop of a lowercase g.
Loop: The bowl created in the descender of the lowercase g (in some typefaces).
Serif: The right-angled or oblique foot at the end of the stroke.
Shoulder: The curved stroke that is not part of a bowl.
Spine: The curved stem of the S.
Spur: A small projection that extend from a curve in a letter (smaller than serifs and beaks)
Stem: The significant vertical or oblique stroke.
Stress: The orientation of the letterform indicated by the thin stoke in round forms.
Swash: The flourish that extends the stroke of a letterform replacing a terminal or serif.
Tail: The curved diagonal stroke at the finish of certain letterforms.
Terminal: The end of a stroke not terminated with a serif. A catch-all term.

THE FONT

*Font here is referring to type family.

The full font of a typeface contains much more than just 26 letters, numerals and punctuation marks. Select a type family that has a good range of typefaces.

SOME RANGES:

Uppercase: Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.

Fig. 2.2: Uppercase letters

Lowercase: Include the same characters as uppercase

Fig. 2.3: Lowercase letters

Small Capitals:

Fig. 2.4: Comparison between small capitals & uppercase

Fig. 2.5: Uppercase letterforms draw to the x-height of typeface

Primarily found in serif fonts as part of expert set.
In circumstances where acronyms are repeated within a paragraph/sentence, uppercase letters can disrupt flow of reading. Small capitals more appropriate.
Avoid using artificially generated small caps.

Uppercase Numerals: Lining figures. Same height as uppercase letters set to same kerning width.

Fig. 2.6: uppercase numerals

Lowercase Numerals: Old style figures. More common in serif typefaces. Once again exists to be used for seamless reading when numbers re-occur frequently in a body of text.

Fig. 2.7: lowercase numerals

Italics: Small caps don't exist for them. Oblique are typically based on the roman form of typeface.

Fig. 2.8: italics uppercase & lowercase

Fig. 2.9: italics vs roman letterform

Punctuation, msc. characters: Msc. characters can change from typeface to typeface. Acquaint yourself with all characters in a typeface before choosing the appropriate type for a particular job.

Fig. 2.10: punctuation & msc characters

Ornaments: Used as flourishes in invitations/certificates. Usually available in larger traditional/classic typeface families (Adobe Caslon Pro).

Fig. 2.11: ornaments

DESCRIBING TYPEFACES

Fig. 2.12: different typefaces

Roman: derived from inscriptions of Roman monuments. The regular form.
Book: A slightly lighter stroke in roman.
Italic: Based on 15th century Italian handwriting
Oblique: Based on roman form of typeface.
Boldface: Thicker stroke than roman. Depending on relative stroke widths, can also be called 'semibold', 'medium', 'black', 'extrabold', or 'super'. Boldest rendition in some typefaces (Bodoni) referred to as 'poster'.
Light: A light stroke than the roman form. Even lighter strokes called 'thin'.
Condense: A version of the roman form. Extremely condensed styles called 'compressed'.
Extended: Extended variation of a roman font

COMPARING TYPEFACES

The 10 typefaces we are provided with for our exercises represent 500 years of type design. They have remained in use for so long because of how strongly they have been designed. They have subtle characteristics that make them very versatile which has prolonged their 'survival' or utility.

Fig. 2.13: Provided set of 10 typefaces

Note the differences between the typefaces (the accumulation of choice that renders each unique).

Beyond the differences in x-height, the forms display a wealth in variety (line weight, relative stroke widths, feeling) which connote specific use and expression.

Fig. 2.13: Each R displays a unique attitude (whimsical, mechanical, harmonious, etc)

A good typeface is able to present the message well. It shouldn't overpower it.

i.e. The message should be read first, the typeface later.

---

WEEK 3

TYPO 3: TEXT (P.1)

TRACKING: KERNING & LETTER-SPACING

Kerning: adjusting the spacing between a pair of letterforms.
Letter-spacing/tracking: uniform adjustment of the overall spacing between letters in a word/sentence.

Fig. 3.1: letterforms with and without kerning

Fig. 3.2: normal, tight, and loose tracking

When reading, we look at both the letterform AND the counterform (negative space between strokes).

We read shape instead of individual letters and recognise patterns that represent certain words.

Fig. 3.3: counterform - black spaces between letterforms (white)

To summarise:

Too much kerning and/or tight tracking-> breaks/reduces counterform.
Shapes become difficult to discern.
Patterns that constitute a particular word become difficult to visually decipher.
Reduced readability.

FORMATTING TEXT

Fig. 3.4: Types of text alignments

1. Flush Left (ragged right)

generally most natural way to format text
mirrors asymmetrical experience of reading
consistent spacing between words throughout text (creates even gray value).

TIP: Try to make ragging smooth - not straight but slightly curved.

2. Centered (ragged right + left)

imposes symmetry onto text- equal value + weight to both ends of any line.
irregular starting points - difficult reading experience
transforms fields of text into shapes (pictorial)
therefore important to amend line breaks so text doesn't appear too jagged

TIP: Ideally used sparingly for small amounts of text.

3. Flush Right (ragged left)

Starting point is ragged- difficult to read
can be useful in situations (captions) where relationship between text + image might be ambiguous, without strong orientation to the right,
can be used for axial layout
Try to smoothen ragging by kerning + letter-spacing.

TIP: Use minimally for small amounts of text.

4. Justified

Imposes symmetrical shape on text achieved by expanding/reducing spaces between words (sometimes letters)
resulting openness of lines- produces rivers of white space running vertically through text.

TIP: Careful attention to line breaks and hyphens needed to maintain reading rhythm. Avoid rivers.

----------

NOTE:

Creativity in typography shouldn't come at the cost of reading/the presented message.

Type that calls attention to itself before the reader can get to the actual words is simply interference and should be avoided.

If you see the type before the words, change the type!

TEXTURE

How do different typefaces feel as text? Different typefaces suit different messages.

Texture difference example:

relatively generous x-height or heavy stroke width= darker mass on page
relatively smaller x-height or light stroke= lighter mass on page

Sensitivity to differences in colour (i.e gray value of text) is fundamental to creating successful layouts.

A larger x-height in contrast to the ascender/descender generally makes a typeface more legible.

Fig. 3.5: x-height comparison between two type families

Fig. 3.6: Comparison of gray value between serif typefaces of same pt. & leading

----------

NOTE:

*The typefaces shown above were not made for screen reading.

Sans serif typefaces at smaller point sizes (especially for screen reading) are more legible.

LEADING & LINE LENGTH

The goal in setting a text type is to allow for easy, prolonged reading. Try to avoid islands of text, and have text formatted within an area (text field).

Factors when deciding readability + legibility issues:

(all correlated to each other)

1. Type size:

should be large enough to be read at arm's length.
print dummy text to determine readability at a particular point size.

2. Leading:

space between adjacent lines of text (grey value/colour of text)
generally requires +2-2.5 of point size (e.g: 9pt/11-12 leading)
tight leading: encourages vertical eye movement; reader can easily lose their place

loose leading: creates striped patterns- distracting from material at hand.

Fig. 3.7: examples of bad leading

3: Line Length:

extremely long/short line lengths impairs reading.
good rule of thumb: keep line length between 55-65 characters.

TYPE SPECIMEN BOOK

Fig. 3.8: type specimen book for Times Gothic

Shows samples of typefaces in various sizes, leading, combinations.
Used to provide an accurate reference for type, type size, leading, type line length, etc.
If output is printed, print out to gauge readability.
If output is on screen, make judgement on screen.

TIP: Half-close your eyes to see if gray value is appropriate or not

Compositional requirement: text should create a field that can occupy a page or a screen.

Ideally, a body of text should have a middle gray value (i.e. well balanced +ve and -ve space).

Fig. 3.9: type enlarged to 400% to see subtle differences in leading clearer

---

WEEK 4

TYPO 4: TEXT (P.2)

INDICATING PARAGRAPHS

1. Pilcrow ( ¶ ):

glyph from medieval times used in-text to indicate paragraphs.

2. Line space (leading) between paragraphs:

E.g. If text size= 10pts, leading is ideally 12pts ( i.e. 2-3 pt larger than typeface size).

Avoid pressing [enter] twice to create paragraphs!

InDesign allows us to give a value for paragraph spacing. This should ideally be the same as the leading to ensure cross alignment (this maintains good reading rhythm).

if text size= 10pt, then both leading + paragraph space = 12pt

Fig. 4.1: Difference between line space and leading

Line spacing: from descender of one line to descender of next line
Leading: from descender of one line to ascender of next.

3. Indentation:

typically the same size as the line spacing or point size of text.
Too much indenting = too much ragging
When using indentation, there should be no ragging on the right.
best used for justified alignment.

4. Extended paragraphs:

creates unusually wide columns of text.
generally not used (but often seen in academic writing).

WIDOWS & ORPHANS

Widow: short line of type left alone at the end of a column of text
Orphan: short line of type left alone at the start of a new column.

Try to be avoid them as much as possible!

Fig. 4.2: widows and orphans in a body of text

Serious gaffes in justified text.
Flush right and ragged left somewhat forgiving towards widows (a little).
Orphans remain unpardonable.

SOLUTIONS:

Widows

re-break your line endings throughout paragraph (use a force line break): press [shift][enter]
letter-spacing or kerning: [option] [L arrow] or [R arrow]. Max. +3 or -3

Orphans

reduce column height, and then introduce a second line on top.

HIGHLIGHTING TEXT

Different kinds of emphasis require different kinds of contrast:

1. using a different typeface (same family):

Fig. 4.3: (left) Italics, (right) bold

2. bold typeface (different family), coloured text:

Fig. 4.4: Bold typeface of different type family (left), using colour from CMK (right)

If body text is serif, and highlighted text is a sans serif type family, reduce point size of highlighted text so that x-heights match (reduce by .5)

Fig. 4.4: sans serif typefaces tend to look larger than serif ones

Reduce aligned figures (numbers) or All Capital acronyms embedded in text by .5 as well to ensure visual cohesion of text.

Fig. 4.5: reduction of aligned figures and all caps by .5

However for large bodies of text, use lowercase numerals.

3. placing text in a box/field of colour

Fig. 4.6: (left) has indentation, (right) no indentation.
subject to personal preference

4. using bullet points:

Fig. 4.7: (left) follows reading axis, (right) extends beyond left margin
subject to personal preference

Sometimes it is necessary to place certain typographic elements outside the left margin of a column of type (extending as opposed to intending) to main a strong reading axis.

e.g for quotations

5. Quotation marks:

Fig. 4.7: (left) quotation within reading axis, (right) outside reading axis

Outside reading axis: may not work for large bodies of text. Could be good for headlines/small body of text.

HEADLINE WITHIN TEXT

There are many kinds of subdivision within a text of a chapter. Subheads are important to establish hierarchy of information.

In the following visuals, these have been labelled (A, B and C) according to level of importance:

A head: indicates a clear break between the topics within a section. Uses paragraph spacing.

Fig. 4.8: (left to right) bold, extended to left, large text size, small caps

B head: subordinate to A heads. They indicate a new supporting argument or example for topic at hand. Hence, they should not interrupt text as strongly as A heads do. No paragraph spacing! Uses forced line break (leading space).

Fig. 4.9: (left to right) small caps, italic, bold serif, bold san serif

C head: (not common) highlights specific facets of material within B head text. They don't interrupt flow of reading and are followed by at least an em space for visual separation (2 spacebar between text and heading).

Fig. 4.10: (left to right) small caps, italic, bold serif, bold san serif

There is no single way to express hierarchy. Endless variations can exist.

CROSS ALIGNMENT

Cross aligning headlines and captions with text type reinforces architectural sense of the page–the structure– while articulating the complementary vertical rhythms.

Fig. 4.11: subhead (top left) aligns with every body text on right
sub-subhead (bottom left) does not.

Having different bodies of text with differing point sizes, cross aligning becomes difficult to maintain.

However if point size differences are small, cross alignment can be maintained by doubling the leading space.

eg. if body text 10/12, and large text (large point size) 20/24.

cross alignment possible because it is doubled.

HOWEVER, both baselines have to be aligned for this to work.

---

WEEK 5

TYPO 5: LETTERS

UNDERSTANDING LETTERFORMS

There are nuances to type design. Letterforms that appear symmetrical may not actually be symmetrical on closer inspection.

Fig 5.1: The brackets of Baskerville 'A' have unique arcs

Fig 5.2: Univers, left slope thinner than right

The goal is to achieve an internally harmonious and individually expressive letterform.

Fig 5.3: Comparison in complexities of Helvetica and Univers 'a'

Subtle differences make a huge impact in the output of the letterform and hence readability. It is important to replicate any unique characteristic added in all letterforms when designing a font to maintain consistency.

Fig 5.4: Overlay of Helvetica and Univers letterforms

Curved strokes such as 's' must rise above median, or sink below baseline to give the illusion of being the same size as adjoining horizontal/vertical strokes.

Fig 5.5: curved strokes adjacent to horizontal/vertical strokes

FORM & COUNTERFORM

Just as important as forms. Counterforms (or counter) entail the negative space between letterforms, and aid readability.

Fig 5.6: Form and counterform

Examine letterforms in close detail to see the relationship and balance between its form and counterform.

Fig 5.7: comparison between lowercase s and g

The basic principles of design apply directly to typography. Contrast for example can be used to indicate different levels of information.

Fig 5.8: Ways to indicate contrast in type

Instructions

Ex 1: Type Expression

For this exercise, we are required to make type expressions of 4 words, and animate 1 of our choice. We are free to choose 3 words of our preference from the given selection:

1) COUGH (mandatory)

2) SQUEEZE

3) POP

4) EXPLODE

5) GROW

6) WINK

I chose to go with the words: COUGH, POP, EXPLODE, and GROW.

1. SKETCHES

I came across some difficulties coming up with good ideas. I did browse Pinterest and Google for some inspiration though.

Fig.7.1: Sketch explorations of COUGH (04/04/22)

Fig.7.2: Sketch explorations of 'EXPLODE' and 'POP' (04/04/22)

Fig.7.3: Sketch explorations of GROW (04/04/22)

After having received feedback, I went on to digitise my sketches.

2. DIGITIZATION

A. COUGH

Fig. 7.4: Digitized Sketches of COUGH (10/04/22)

In one of his tutorials, Mr.Vinod set the distortion threshold to 50% max. I tried to keep my distortions below 30% as a precaution.

The 1st design is meant to be a visualisation of a wet cough. It was a bit of a challenge simulating the waves on one side, but with the help of the pathfinder tool, I managed to divide the letters and apply the effect on one side.

The 2nd design is fairly simple. The main thing I did was gradually increase the kerning between the letters to simulate a forceful expulsion of air. This was meant to be a simulation of a single cough.

Fig. 7.5: Variations of the 2nd design of COUGH (10/04/22)

However, feeling like it was too simple, I made some variations for experimentation, as shown in the figure above.

The 3rd design is meant to be a simulation of what I believe is a dry cough. I tried to bring to life the irregularity of the coughs by varying the opacity. I also used a slight 'squeeze' distortion to subtly capture the fluidity of air.

B. EXPLODE

Fig. 7.6: Digitized Sketches of EXPLODE (11/04/22)

In the first 2 designs, I mainly just played around with the arrangement of letters and their sizes. I went into it thinking it'd be a breeze, but surprisingly it was hard building a composition that didn't look overly random. To illustrate a change in velocity, I lightened the value of some letters.

The 3rd design involves a bit of 'bulge' warping. I was worried this one might seem a bit too graphical despite only using the pen tool to draw the fuse wire.

C. POP

Fig. 7.7: Digitized Sketches of POP (11/04/22)

I tried executing the approved sketch from the feedback session, however to my dismay, digitalising it was a complete mess as I struggled to adjust the perspective. Therefore, I took inspiration from the 'bubble' element in the first sketch to make 3 newer ones. I utilised 'bulge' warping in the 'O's for the first 2 designs.

Fig. 7.8: Variations of the 2nd design of POP (11/04/22)

I also made a slight variation for the 2nd design of 'POP' where I drew the reflection of the bubble. However I feel hesitant to use it because it leans too much into graphic-element territory.

D. GROW

Fig. 7.9: Digitized Sketches of GROW (11/04/22)

Though quite straightforward, I had the most fun with these designs. It was only a matter of adjusting the letter sizes and and kerning to best convey visual hierarchy.

Now, it was a matter of choosing the best version of each word.

1st OUTCOME:

Fig. 7.10: 1st Outcome of type expressions (13.04.22)

After receiving feedback, I went on to make the necessary changes to EXPLODE and POP.

ADJUSTMENTS:

1) Pop

To deal with the excessive white space, I simply increased the size of the text.

Fig. 7.11: 1st adjustment for POP (16/04/22)

To further emphasise the decisive moment right before the bubble pops, I decreased the spacing between the letters.

Fig. 7.12: 2nd adjustment for POP (16/04/22)

It looked a bit awkward so I changed the order of the layers so the P's are below the bubble.

Fig. 7.13: 3rd adjustment for POP (16/04/22)

I felt more satisfied with how the message was being conveyed in the 3rd adjustment.

Fig. 7.14: 4th adjustment for POP (16/04/22)

To further emphasise the bubble-like transparency of O I experimented with the shape builder tool. However, to me it didn't look like the bubble would 'pop' anytime soon. So I settled on the 3rd adjustment.

2) Explode

I made 2 variations (A & B) based on the feedback I received.

Fig. 7.15: Variation 'A' of EXPLODE (16/04/22)

Exaggerated the 'bulge' effect a bit more, and changed value of letters to simulate terror (going white from fear).

Fig. 7.16: Variation 'B' of EXPLODE (17/04/22)

The letters are meant to represent debris being blown away from an explosion.
Added slight 'bulge' warping, and changed values of letters to emphasise movement and add field of depth.
Slightly out of frame to further illustrate movement.

FINAL OUTCOME:

Fig 7.17: Final Outcome in JPEG (19/04/22)

Fig. 7.18: Final Outcome in PDF (19/04/22)

3. ANIMATION:

We are required to choose a word of our choice from the 4 type expressions and animate it in a way that enhances its meaning/expression. I chose 'GROW'.

Fig. 7.19: Final type expression of GROW (13/04/22)

To further push the idea of a growing tree, I decided to first make the 'trunk' emerge from the ground, and then bear its 'fruit'.

I started by first slicing the terminal of the 'r' using the pathfinder tool to singly manipulate it without affecting the other elements.

Fig. 7.20: Progress of animation frames (13/04/22)

For the 'fruit' elements, I wanted to replicate the animation style used in Animal Crossing for a playful effect.

Fig. 7.21: Animal Crossing: fruit animation reference

Fig. 7.22: Frame-by-frame progress (13/04/22)

After creating all the necessary frames on Illustrator, we were to export everything into an animation timeline on Photoshop.

1ST ATTEMPT:

Fig. 7.23: First outcome GIF (13/04/22)

Looking at the first draft, there are several issues to fix:

Slight alignment issue of the 'r' stem between frames.
Entire animation is a bit too busy and fast-paced.
A visible gap between the sliced terminal of the 'r' and the stem.
More refining required for the fruit.

MORE ATTEMPTS:

Changed the way the fruit emerged:

Fig. 7.24: 2nd attempt GIF (18/04/22)

After exporting, the entire gif had for some reason sped up. It was not what I was going for. I went back and increased the duration of each frame:

Fig. 7.25: 3rd attempt GIF (18/04/22)

Now it was too slow and glitchy-looking. I went back and sped the frame duration for the 'r' as shown in fig. x:

Fig. 7.26: 4th attempt GIF (18/04/22)

Feeling like the 'fruits' emerged too close to each other, I went back to illustrator to make changes.

Here are the final frames that I exported into photoshop:

Fig. 7.27: The exported frames (19/04/22)

Fig. 7.28: Progress on Photoshop (19/04/22)

To get the desired outcome though, I did have to delete some frames on Photoshop.

FINAL OUTCOME:

Fig. 7.29: Final Outcome GIF (20/04/22)

Ex 2: Text Formatting

We are provided incremental amounts of text and required to create a textual layout that practices different areas of formatting (such as type choice, leading, line length, kerning, alignment, forced-line-break, etc).

Before tackling the exercise at hand, we were to:

Watch the 4-part tutorial on text layout and formatting on InDesign.
Practice kerning & tracking on 10 variations of our name (each corresponding to 10 provided type families).

RESULT OF KERNING & TRACKING EXERCISE:

Fig. 8.1: Outcome of kerning & tracking practice in JPEG (24/04/22)

PROCESS:

Fig 8.2: Exercise 2 requirements

Before experimenting with my own layout, I tried to replicate the format Mr. Vinod created in his lecture tutorial. This was to get a better hang of all the steps required to make our design. Afterwards I made a couple of layouts.

We first set the typeface for the text. I made up my mind to choose a sans serif family seeing as how our work would be viewed on-screen. I opted for Univers 9/11 to accomodate an average line length of 54 characters.

Fig 8.3: typeface and leading settings (26/04/22)

Fig 8.4: Longest line length (26/04/22)

I then changed the paragraph spacing to 11pt to match the leading. Afterwards I set my text to left align and began smoothening the ragged ends. There were times that I had to use forced line breaks when certain words were being 'stubborn'.

Fig 8.5: before kerning + letterspacing (26/04/22)

Fig 8.6: after fixing ragged ends (26/04/22)

To ensure cross-alignment between columns of text, we then had enable the baseline grid and adjust its settings so it matches our leading.

Fig 8.7: changing increment to match leading space (26/04/22)

To further ensure that the text sits at the baseline grid, we change the alignment of the text frame options.

Fig 8.8: changing baseline options- set offset to 'leading' (26/04/22)

Fig 8.9: Changing alignment of text frame to 'top' (26/04/22)

Fig 8.10: Cross alignment achieved between two text fields (26/04/22)

I then had to achieve cross alignment between the heading and body text. To do this, I first adjusted the text frame options for this particular text field like I did for the body text. Then I adjusted the leading so that it is a multiple of 11pt (body text leading).

Fig 8.11: before cross aligning (26/04/22)

Fig 8.12: changed leading to a multiple of 11pt (26/04/22)

Fig 8.13: after cross aligning (26/04/22)

ATTEMPTS:

After getting the foundations right, it was time to insert some images and play around the layout. I made MANY variations but here are just some of them:

Fig 8.14: 1st attempt (26/04/22)

Fig 8.15: more attempts (27/04/22)

Fig 8.16: (left) left justified, (right) left align (27/04/22)

FINAL OUTCOME:

Fig 8.17: Final Outcome in JPEG (28/04/22)

Fig 8.18: Final Outcome in PDF (28/04/22)

Fig 8.19: Final Outcome with grids in PDF (28/04/22)

DETAILS:

Font: Univers LT Std (body), Gill Sans (heading), Serifa Std (heading)
Typeface: Univers LT Std 55 Roman, Gill Sans Light Italic, Serifa Std 65 Bold
Font size: 9 pt (body), 48 pt (heading), 40 pt (heading), 14 pt (subheading)
Leading: 11 pt (body), 44 pt (heading)
Paragraph spacing: 11 pt
Avg Characters per line: 56
Alignment: Left alignment
Margins: Top (86.5mm), Bottom (55.5 mm), Left & right (15 mm)
Columns: 4
Gutter: 5 mm

Feedback

WEEK 1

WEEK 2 (Sketches)

GENERAL FEEDBACK:

Overall nice sketches and good ideas.
We are encourage to avoid/minimise graphical elements
Mr. Vinod encouraged all of us to use our own judgement and knowledge gained from feedback/comments provided to peers' work to find what works and what doesn't in our own designs.

SPECIFIC FEEDBACK:

COUGH- Distorting one side of the letterform is an interesting touch. There might not be a need to differentiate the sizes between the letters
POP- Mr. Vinod quite liked the one with the bubble. He asked to go forward with this design.

WEEK 3 (Digitisation & GIF)

GENERAL FEEDBACK:

Mr. Vinod advised all of us to make optical adjustments when technical centering looks off.

SPECIFIC FEEDBACK:

COUGH- Simple yet effective design
EXPLODE - Not quite there so can use some work. Exaggerate a bit more to make it seem as though letters are being blown away or afraid/retreating from the bomb. Make 'x' smaller. Reduce stroke of fuse to 0.5.
POP - Too much space that makes it a bit uncomfortable/weird. Adjust text placement and utilise space better.
GROW - This one is alright.

WEEK 4 (E-Portfolio)

GENERAL FEEDBACK:

Documenting our process is important as it showcases each individual's unique workflow.
Methodical work progress will benefit us in the long run.
Prioritise visual hierarchy of information in blog.

SPECIFIC FEEDBACK:

Overall good job.
Good use of size and an additional colour to separate textual information.
Don't add separate weeks for reflection- add a new line into main body each week instead.

WEEK 5 (Text Formatting & Blog)

GENERAL FEEDBACK:

Mr. Vinod said that our understanding of typography can be gauged by the formatting in our blog.
Advised not to leave everything until the last minute– practice consistency in work ethic.

SPECIFIC FEEDBACK:

Acknowledgement of attempt in choosing appropriate heading typefaces.
In the future though, try to avoid using the same typeface of 2 different sans serif families for headings since they don't produce enough contrast.
Don't make captions bold.
Name & ID for exercise one should be at 7pt.
Change the final outcome to 300 dpi when exporting.

Reflection

EXPERIENCE

Coming into typography with zero experience, I can say that I had really underestimated its intricate nature. It has been really eye-opening learning about its historical evolution and relevance. However the change of pace from my first semester to this one has been hard to adapt to. And given typography's extensive history, it's been a bit overwhelming to synthesise everything I've read and watched within these 5 weeks, and I sometimes felt a bit drained. Despite its challenges, typography has been interesting so far, and I've definitely fostered a deep respect towards the art-form.

OBSERVATION

Like any newbie, I faced the usual handful of setbacks getting around Adobe Illustrator's interface. Because of this, it was challenging to translate my ideas from sketch into the program to achieve the desired outcome. Some of my peers seemed to have a better understanding and/or familiarity with the software which was evident in how well they crafted their work.

I also observed that my ideas were a bit generic and unoriginal. It was relatively hard to complete my work in time for our feedback as I am on the slower side compared to some of my peers. I think it's mainly because I get stuck being overly meticulous in trying to perfect everything.

FINDINGS

From my understanding so far, good typography requires being detail-oriented, exercising empathy, and having a deep knowledge base. I've also learned that the slightest differences subconsciously impact our comprehension of textual information and incentive to read. Funnily enough I was reminded of the time I got my Kindle and how particular and indecisive I was in choosing the 'perfect' font + size. Gotta get that comfortable reading experience y'know?

Lastly, I've noticed that a lot of us are in the same boat with similar struggles, and so any and all feedback has felt mutual. Mistakes are inevitable and part of the learning process so I hope my peers learn from mine as much as I do from theirs!

Janaan Ahmed (0353333)

Search This Blog