Typography Task 1 / Exercises

writing - scratching into wet clay with sharpened sticks or carving stone with chisels
2000 years - uppercase forms begin evolving
uppercase forms - simple combination of straight line and pieces of circles

greeks : “boustrophedon” (how the ox ploughs) changed direction of writing alternately from right to left and left to right

Figure 1.1 Formation of letter "A"

Process of how letter "A" was developed from phoenician to greek into its version in the present

Hand-scripts (3rd-10th century C.E)

i. square capital

can be found on rome monuments
serifs added to finish of the main stroke
read pen held at an angle of approx 60 degrees off the perpendicular

ii. rustic capitals

less time tow rite; compressed square capitals
held approx 30 degrees slanted off the perpendicular
hard to read due to its compressed nature
developed due to the pragmatic reasons
- width of text space may be too minimal → required to compressed letters in order to fit

iii. unicials

incorporate roman cursive, especially A, D, E, H, M, U, Q
unica - latin for a twelfith of anything
- letters that are 1 inch (1 twelfith of foot) high
simply small letters
broad forms - more readable at small sizes > rustic capitals
no lower/uppercase form

iv. half-unicials

start of lowercase forms
improvement and development of capital letters, serifs till the the introduction of a formal lowercase letterform

v. charlemagne

first unifier of Europe issued an edict in 789
task entrusted to Alcuin of York, Abbot of St Martin of Tours
texts rewrote (introduced) using both majuscles (uppercase), miniscule, capitalization & punctuation
- as a standard for calligraphy for a century
too many writing system → information could be lost to translation
overseeing the writing of standardization

Black letter to Guternberg's type

Black letter

also known as "textura", a condense strongly vertical letterform
popular in northern europe

Rotunda

rounder more open hand
popular in the south

Guternberg

invented modern day printed press
skilled in engineering, metalsmitting, chemistry
marshaled his skills to build pages which mimicks the work of the scribe’s hand accurately (norhten europe - blackletter)
different brass matrix/negative impression required on his type mold for each letterform
chose to do the bible at start
printing - produced many books at once

why cherlamagne chose abbot?

writing - domain of religious orders

monks in monastery doing only one thing - writing religious scripts etc
- to be passed on
scribes in royal courts
- writing history of ciziliation, empire
writing requires a lot of time
- books, parchment - high cost

Humanist script to roman type

Figure 1.2 Humanist Script to Roman Type

1761 - baskerville contributed to development of typeface (basing handwritting to non-handwriting)
1818 - similarly to baskerville, developed modern typeface
19th century - sans serif - came in 20th century, after industrial revolution

Classification of text type

dates of origin approx to nearest quarter century
typeforms developed in response to prevailing technologies, commercial needs, aesthetic trends

Figure 1.3 Classification of Letters

1450 Blackletter

earliest printing type, its forms were based upon the hand-copying styles
used for books in northern Europe.

Examples: Cloister Black • Goudy Text

1475 Oldstyle

lowercase forms (used by Italian humanist scholars) → copy books
uppercase letterforms → inscribed on Roman ruins

migrating across europe (italy → france) = evolved from calligraphy into its current form

Examples: Bembo • Caslon • Dante • Garamond • Janson • Jenson • Palatino

1500 Italics

serifs letters - condensed and close-set, more words per page , letters with serifs - oblique

considered a separate typeface

1550 Script

short application - wide acceptance
rangse from the formal and traditional to the casual and contemporary.

Examples: Kuenstler Srcipt • Mistral • Snell Roundhand

1750 Transitional

refined oldstyl
achieved due to advance in casting and printing
thick to thin relationships - exaggerated, brackets - lightened

Examples: Baskerville • Bulmer • Century • Time Roman

1775 Modern

oldstyle letterforms further rationalized
serifs - unbracketed
- extreme contrast between thick and thin strokes
English versions (ex. Bell)
- also known as Scotch Romans
- resemble transitional forms closely

Examples: Bell • Bodoni • Caledonia • Didot • Walbaum

1825 Square Serifs/Slab Serif

typefaces that depart from mimicking writting but still within their categories
evolved - brackets dropped

Examples: Clarendon • Memphis • Rockwell • Serifa

1900 Sans Serif

serifs eliminated completely
also referred to as grotesque (from the German word grotesk) and Gothic

grotesque - ascustomed to seeing beuatified/classical letterface such as serif

Examples: Akzidenz Grotesk • Grotesk • Gill Sans • Franklin Gothic • Frutiger • Futura • Helvetica • Meta • News Gothic • Optima • Syntax • Trade Gothic • Univers

1990 Serif/Sans Serif

develop a typefaces that they called semi-serifs and semi sans which have skirt the boundaries of these classification

Examples: Rotis • Scala • Stone

Week 2 / Typo 03 Text P1

Text/Tracking : Kerning and Letterspacing

textual formatting

Figure 1.4 Difference of Kerning and Letterspacing

Kerning

automatic adjustment of space between letters
often mistaken as letterspace
invades the space of another letter

Letterspace

adding space between letters
all in their own space

Tracking

both in one word/sentence
addition and removal of space in a word/sentence

When to kern?

kerning in a whole long text = x
when working with headlines - newspaper, books; consist of extra space → it is when you will focus on kerning or add letterspace between them to let them “breathe”
- may look condense in nature/crowded therefore why letterspace is added
- much more presentable and readable

Normal vs. Loose vs. Tight

Normal tracking

when you give letterspacing and kerning
adding/reducing letterspace into text reduces the readability of a text; take in consideration of a long paragraph of text
not only looking at letterform but also counter form
- negative spaces between strokes
- white areas that make up that particular word is important to consider

Loose tracking, Tight tracking

not encouraged to do letterspace on lowercase because kerning and lowercase have already been designed to the text
uppercase - able to stand on their own, lowercase require counter form created between letters to maintain the line of reading
adding letterspace = breaking counter form, reducing the readability of the text, patterns that contitute the word becomes difficult to decipher

*control when kerning/tracking in InDesign, change settings to 5 per tracking

Text formatting

1. Flush left

mirrors asymmetrical experience of handwriting; starts from same point but ends wherever the last word is
when we write left → right except arabic/jawi
gray value - text on a white page
- consistent space between letters = even grey value
flush left alignment - ragged right (jaggered line)
- ragging on the right - smooth

2. Centered

symmetry impose upon text; equal value and weight assigned to both ends of any line
creates strong shape on page
- important to amend line breaks so they it does not appear too ragged on the sides
- must avoid
may also be difficult to read - starting point irregular
used sparingly for small amount of text/copy ; used in minimum quantity

3. Flush right

emphasis on the end of a line as opposed to its start; ragging on the left
not doing it for large amount of text
when to use?
- impose an alignment with image, text is flushed to an axis in a layout
- ex. captions (relationship between image and text)

4. Justified

symmetrical shape imposed; expands/reduce space between words/letters
- spaces in between the form going on with the text
reflection of certain type of mentality
- ex. giving an orderly and neat looks to some people
rivers - must be avoided as a beginner
- openness of lines

As a typographer

clear appropriate presentation of message
striking a balance between readability and expressing
capitals letters should not be used in typefaces like cursive writings such as words on R.S.V.P
important to know what typefaces suit different messages; different typefaces suit different message

Figure 1.5 Anatomy of a Typeface

Leading and Line length

readability
consider readers as it will affect comprehension and readability
type size
leading is decided on vertical movement of the reader/grey value
- tight = encourage vertical eye movement; easily loose place
- loose = striped patterns; distracts from materials at hand
line length - shorter lines, <leading / longer lines, >leading
- not more than 55-65 characters per sentences (refers to number of letter in one sentence) = decreases readability

Text/type specimen book

a sheet/book is shown for you to test out various combinations in different pt sizes, leading, and many different combinations
- color/etc appropriate?
accurate reference for type, type sie, type leading, type line length, etc
important to zoom in to see its details
type enlarged to 400% to understand relationship between descenders on one line & ascenders on the line below

Week 2 / Type Expression

Shortcut Tools

ctrl 2 - lock items in ai
ctrl - alt - 2/shift and select - selecting multiple objects
ctrl g - grouping
ctrl - shift g - ungroup
shift 0 - new art board (find new art board on top left corner)
ctrl -/+ or “z” or scroll with mouse - zoom in/out
space bar (hand symbol to move around) - move art board
type - selection - corner angle point - shift - click and drag (text size) scaling an object; avoid distorting text too much
"t" - type tool
"v" - selection tool
ctrl “t” - character window - typeface and family selected (typeface - different weight and sizes)
changing baseline - different height texts
alt- left arrow - reduce space between 2 letters; move faster - alt - ctrl
exceed art board boundary
alt - duplicate
"r" - rotate
ctrl - shift ) - bring forward( - brings backward
center-aligned -> create object over desired text shape

create additional box - align
no coloured box - ctrl y

19. select all → ctrl 7 - mask elements

release - right click release

Distortion tools

shift - alt → reduce space between letters
ctrl 0 → create outline of text
distort - select free transform - perspective distort
effects - warp (50% and below)

do not use too much to avoid loosing its integrity

Week 3 / Typo 04 Text Part 2

start of lecture - brief summary of topics learned in Week 2 Typo 02 Text P1

in typography - aim to achieve even gray color

1. Pilcrow

available in most typeface
used in text/paragraphs to indicate paragraph spacing

2. Line space vs. Leading

ex. typeface 10 pt, ideally leading is 12pt
- 2.5-3 larger than typeface point size
leading 12pt = paragraph value 12 (same value)
- purpose - maintain cross alignment (2 columns, text line is align to next column; maintains good reading rhythm)

leading - a space that you see between 2 sentences

line spacing - base line of one sentence to descender of the other sentence

i) indentation

same size of line spacing/same as point size used for text
indicate from descender of one sentence to another descender of next sentence
indent too much - too much ragging on the left
created & used to save space
best used when text is justified (alignment)

ii) extended paragraphs

creates an unusual wide columns of text

Widow & Orphan

widow - short line of type left alone at the end of a column of a text
orphan - short line of type left alone at the start of a column of a text

avoided
reducing column height; introducing second line
widow - rebreak line; force line break (shift enter)/opt ←(left arrow key)

Highlighting text

important info within text

1. italics

2. increase boldness

3. change typeface + bold

4. highlight/change color of the text (only use cyan, magenta, black)

- changing type family

consider reduce pt size of highlighted text, ex. serik → sans serif tend to look larger

- column of text

numbers → follows uppercase/capital letters height; align by changing the pt size of the numbers only

5. box around text

indentation - only box aligned to text but not the text within the box
without indentation - box not aligned, text aligned
maintaining strong reading axis; may or may not be necessary

Primes vs. Quotations

Figure 1.6 Primes vs. Quotations

‘ - feet

“ - prime; inch (often changed to quotation to reduce the number of keys)

Headline within text

creating typography hierachy to indicate clearly to prevent any confusion

1. A heads

clear break between topics within a section; larger than text
ex. small caps in bold, extended to left of the text

2. B heads

subordinate of A head; indicating a new supporting argument/example
should not interrupt text as strongly as A heads
ex. small caps, italic, bold serif, bold san serif

3. C heads

uncommon; highlight specific facets of material within B head text
important to have 2 space between c heading and text for column; visual seperation
ex. small caps, italics, serif bold, san serif bold

Cross-alignment

reinforces architectural sense of the page/structure while articulating complimentary vertical rhythms

Week 4 / Typo 04 Basic

Describing letterforms

lexicon = terminology

Figure 1.7 Terminologies of a Letteform

baseline - imaginary line/visual base of letterform

median - imaginary line defining x-height of letterform

x-height - heigh in any typeface of lowercase height

uppercase - smaller than ascending stroke but wider and bigger surface area on the top

lowercase - ascenders has letter real estate touching the top section

giving equal height impression = lowercase slightly above capital letters → optical adjustment

1. stroke - any line that defines basic letterforms

many parts & names of a letterform

2. apex/vertex - diagonal stems joining at the top/bottom point

apex - top
vertex - bottom

3. arm - short strokes of stem → horizontal (E,F,L) / inclined upward (K, Y)

4. ascenders - strokes that exceed the median line; lowercase letters

5. barb - half-serif finish on curved strokes

6. beak - half-serif finish on horizontal arms

7. bowl - rounded forms that describes a counter; opened/closed bowl

8. bracket - seen at the base; transition between serif and stem

9. cross bar - horizontal stokes connecting 2 stems

10. cross stroke - horizontal stokes connecting 2 stem

11. crotch - interior space where 2 strokes meet

12. descender - anything projected below baseline; lowercase letters
13. ear - extended from main stem/body

14. em/en

em - a gap between 2 words; space bar = em space + indicator that shows an em space; also indicates an M dash/long dash = width of M
en - space that is half the letter of M, ex. 1989 **-**1999

15. finial - rounded non serif terminal of a stroke (ex. f, a)
16. leg - short strokes off the stem → bottom (L) / inclined downward (K, R)
17. ligature - formed by combination of >2 letterforms ex. fl, fi → joined together

18. link - connecting bowl and loop of lowercase “g”
19. serif - right-angled/oblique foot at the end of the stroke
20. shoulder - curved stroke, not part of a bowl (h, n - curves connecting to vertical line)
21. spine - curved stem of “s”
22. spur - extension that articulates the junction of curved and rectilinear stroke

23. stem - vertical/oblique stroke
24. stress - orientation of letterform indicated by thin stroke in round form (slants, ex. O)

vertical stress - transition typeface (transition from copying handwritten writing; developed by mimicking writing), departure due to baskerville’s invention - creating letters that does not need to be copied anymore

25. swash - flourish that extends from strokes; never used in capitals together to form name/etc ; found in cursives lettering
26. tail - curved diagonal stroke at the finish (Q)
27. terminal self-contained finish of stroke without a serif → flat (”T” above) / flared (”t” above) / grave / concave / rounded (ball) / teardrop (finial)

The Font

full font - type family that has many typefaces
type family - refers to family that has many different typefaces, ex. bold, regular, etc
typeface - individual weight of that stroke

choosing a type family that has many typefaces/good range of typefaces to have more option of weights

1. uppercase - capital, accented vowels, c cedilla, n tilde, a/o & 0/e ligatures

2. lowercase

its name comes from lead being used to compose paragraphs; consist of letters that comes from the upper case or lower case
historically - majuscule, miniscule

3. small capitals

found in serifs; expert set
certain letters sticks out from the paragraph causing a disruption in the grayscale you want to achieve
chosen only when you have acronyms & dealing with large amount of text
thickness of strokes changes - thinner; thinner weight / do not force command onto letters that do not originally have small capitals

4. uppercase numerals

also known as lining numerals, same height as uppercase + same kerning weight
stronger impact from numbers > delicate & sensitive numbers

5. lowercase numerals

also known as old-style figures/text figures
originally the form that numbers used to take
seen in serif typefaces more than sans serif, x-height set with ascenders and descenders
avoid numbers sticking out in paragraphs, hence the use of lowercase numerals; different in height
InDesign - type - gliphs - character map - lowercase numerals

6. italic

small capitals are not in italic → only roman
refers back to 15th century italian cursive handwriting

7. punctuation, miscellaneous characters

miscellaneous characters changes from typeface to typeface (punctuations, fractions, etc)

8. ornaments - flourishes in invitations and certificates; decorative

Describing Typefaces
1. roman - derived from roman monuments inscriptions ; book - slightly lighter stroke
2. italics ; oblique

italics - based on handwritings → 15th century italian cursive handwriting
oblique - do not base from handwriting → roman

3. boldface - thicker stroke than roman; ex. semibold, medium, black, extra bold, super / bodoni - poster; boldest rendition of the typeface
4. light - lighter than roman ; thin - even lighter
5. condense - roman ; compressed - extremely condense
6. extended - extended roman

Figure 1.8 Typefaces

Comparing Typefaces

goal - easy readability & appropriate expression of contemporary aesthetics
conveying message requires a type family that respects the message you are conveying/presenting
understanding the 10 typefaces to develop your skills as a typographer
each letters may display a range of attitude (whimsical, stately, mechanical, calligraphic, harmonious, awkward)
differs in variety, line weight, relative stroke widths, feeling

Week 5 / Typo 05 Understanding

Letters

1. Uppercase

not symmetrical, stroke weights can be easily seen in Baskerville form
each brackets that are attached to the diagonal stems has its own unique arcs
reasons underpinning their differences; optical reasons
common mistake - giving a lot of character and changing a lot of details of the letter ; simplify your characteristics & replicable to other letters

2. Maintaining x-height

size of lowercase letterforms
curve strokes (s) must rise above median line / or below baseline to appear same as horizontal and vertical strokes
curve letters exceeds median line, same size will look optically smaller (o always look smaller because it has less real estate/are and baseline; optical adjustment to compensate it)

3. Letters / Forms / Counter forms

examine in close details
important to examine existing typefaces before designing your own letterforms to understand the convention of the letterforms/different approaches to create that typeface

4. Letters / Contrast

simple contrasts produces variation - small + organic/large + machined ; small + dark / large light
dealing with different set of information, differentiating the content

Week 6 / Typo 06 Screen & Print

Different medium

present - largely based on screen platforms due to technologies
use of paper to communicate reduced
edited, typeset, printed ; good typography and readability = skilled typesetters and designers
long reading form may be preferred in e-books in comparison to physical books (still in debate)
causes developmental effect of not being able to use touch and feel to learn among children

Typography has an effect on screens, ex. start and end of movie title etc and exist in multitude of screens, not only on paper ; operating system, system fonts, device 7 screens, viewport etc.

Typography experienced various changes on how pages are rendered as typesetting are made from a browser. The experimentation on typography is restricted in app/web design, requires a lot coding to push boundaries of typography.

1. Print type vs Screen type

common typefaces used;
ensure smooth, flowing, pleasant to read
versatile, easy to digest; neutrality and versatility for a breeze quotation

Screen

common typeface that enhances readability and performance on screens; caslon, garamond, baskerville
- elegant, intellectual + readability at small font size
- used to lack of clarity that are delicate (bodoni), now - good resolution on screens, important what you see on screen
- ex. taller x-height/reduced ascenders/descenders, wider letterforms, open counters, heavier thin strokes, serifs, reduce stroke contrast, modified curves & angles
- small size typefaces - more open spacing; leading and spacing on screen varies on space given and no lumping together, improves character recognition & overall readability

2. Hyperactive link/Hyperlink

an old method to navigate document online
word, phrase, image that jumps to a new document/section within existing document when clicked
default - blue, underlined; arrow changes to small hand pointing when cursor is over a hyperlink

3. Font size for Screen

text printed in books/magazine - 16pt
read closely - 10pt
arm length - >12pt

4. System fonts for screen/Web safe fonts

ex. open sans, lato, arial, helvetica, times new roman, times, courier new, courier, verdana, georgia, palatino, garamond

System fonts for screens

differs in every operating system/device

Web safe fonts

appears across all operating system

5. Pixel differential between devices

pc, tablets, phones, tv - differ in size, pixels size
ex. 100 pixels laptop vs. 100pixels big 60”HDTV

6. Print type vs Screen type

7. Static vs. Motion

more dynamic - motion /less dynamic - static
dynamic subjects to designers

Static

minimal & traditional characteristics
informational, promotional, formal, aspirational - level of impression & impact left closely associated to emotional connection of viewers
platforms - billboards to posters, magazines to fliers
ex. bold, italics - only a fraction of expressive potential of dynamic properties

Motion

dramatic; letterforms is fluid and kinetic
found overlaid in music videos, advertisement - set in the motion following its rhythm of the soundtrack
on screen typographers - expressive, establishing tone of associated content/expressing brand values
title sequences - preparing audiences by evoking the mood for the film
ex. film title credits, motion graphics, brand identities of film/television - consist animated types

INSTRUCTIONS

EXERCISES

Task 1 : Exercises 1 / Type Expression

With 7 different words given, we are required to choose any 4 words to design a type expression with a limitation of minimal graphical elements using any preferred font from the 10 fonts provided. The 7 words given are freeze, dizzy, slide, fire, electric, gun, cry. The words I have chosen to design 4 different type expressions are freeze, dizzy, slide, and fire.

Week 1 - 25/09/2023

1. Sketches

Figure 2.1 Type Expression Sketches (Week 1, 01/10/2023)

These are my type expression sketches done on paper.

Freeze : words frozen in a block

Electric #1, #2 : revolves around the shape of a lightbulb

Electric #3, #4 : revolves around the shape of a lightning

Dizzy #1 and #3 : Spinning effect

Dizzy #2 : unable to stand upright from the dizziness resulting in letters falling over.

Slide #1 is sliding on a platform and slanted to express it travels at a high speed

Slide #2, #4 : sliding down a slanted platform expressed diagonally and vertically

Slide #3 : dragged longer

Slide #5 : similar to #3, but sliding against a wall

2. Digitization (Attempts)

Freeze

Figure 2.2 Type Expression "Freeze" (Week 1, 01/10/2023)

Font :

(Freeze #1) - Janson Text LT Std 75 Bold

(Freeze #2) - Bembo Std Extra Bold

The text "freeze" is expressed by its word being frozen in liquid with the reflection of shiny ice added to the text expression to better express "freeze".

Dizzy

Figure 2.3 Type Expression "Dizzy" (Week 1, 01/10/2023)

Font : Gil Sans Std Bold Condensed

In Dizzy #2 and #3, I have tried using the Envelope Distort make with top object function to create an effect of the text spinning which also expresses "Dizzy".

Electric

Figure 2.4 Type Expression "Electric" (Week 1, 01/10/2023)

Font (Electric #1) : Bembo Std Extra Bold

Electric #1 is expressed in a way where the text is in the shape of a light bulb where Envelope Distort is used to create its shape.

Font (Electric #2 & #3) : Bembo Std Semibold Italic.

In Electric #2 and #3 - expressed in the form of a lighting shape where the only difference in Electric #3 is its letter "c" where it is reflected from its original direction. The lightning shape is achieved by a lightning-shaped guideline using the pen tool to draw its shape.

Slide

Figure 2.5 Progress & Explanation of Slide (Week 1, 01/10/2023)

Figure 2.6 Type Expression "Slide" (Week 1, 01/10/2023)

Font : Futura Std Extra Bold Condensed Oblique

Slide #5 : First attempt of Slide #6

Slide #6 : Final

Week 2 - 02/10/2023

Digitization

1. Digitizing

Figure 2.7 Type Expression Digitization Attempt (Week 2, 08/10/2023)

Based on the feedbacks given by the lecturer on our sketch, I attempt to digitize my sketches into illustrator.

2. Final Type Expression

Figure 2.8 Final Type Expression (Week 2, 08/10/2023)

Week 3 - 09/10/2023
FINAL Type Expression

Figure 2.9 Final Type Expression JPEG (Week 3, 09/10/2023)

Figure 2.10 Final Type Expression PDF(Week 3, 09/10/2023)

According to the feedback given, designs generally acceptable therefore no changes made to the type expressions but type expressions are enlarged to command the space of the artboard.

Week 3 - 09/10/2023

Animation

1. Slide

Figure 2.11 Slide Animation Frames (Week 3, 09/10/2023)

The animation in the word "slide" is the movement of the word sliding down a wall and onto the floors, where the floor segment is seen in a perspective view.

Figure 2.12Attempt on "Slide" Animation (Week 3, 12/10/2023)

The word "slide" slides down completely and repeats.

2. Dizzy

Figure 2.13 Dizzy Animation Frames (Week 3, 09/10/2023)

The animation of "Dizzy" goes by the letter "D" being dizzy and ended up knocking over the rest of the letters.

Figure 2.14 Attempt on "Dizzy" Animation (Week 3, 09/10/2023)

Letter "D" knocking over the rest of the letters because it is dizzy.

3. Freeze

Figure 2.15 Freeze Animation Frames (Week 3, 12/10/2023)

The word "Freeze" is slowly filled with water to be frozen within the frozen ice block and highlights only appears on areas that has touched the water.

Figure 2.16 Attempt on "Freeze" Animation (Week 3, 12/10/2023)

The word "Freeze" is slowly filled with water to be frozen within the frozen ice block.

Week 4 - 16/10/2023

Animation

1. Freeze

Figure 2.17 Final Attempt "Freeze" Animation (Week 4, 18/10/2023)

Based on the feedbacks given during class, the frames in "freeze" animation is aligned so that it does not appear moving in the previous attempt on this type expression animation.

2. Slide

Figure 2.18 Final Attempt "Slide" Animation (Week 4, 18/10/2023)

From the feedback given, the word "slide" appears to slide down even more slowly than the previous attempt and gradually sliding out of frame until the gif is repeated.

3. Dizzy

Figure 2.19 Final Type Expression Animation "Dizzy" (Week 4, 18/10/2023)

No changes made to the animation.

Week 4 - 18/10/2023

FINAL Type Expression Animation

Figure 2.20 Final Type Expression "Dizzy" Animation (Week 4, 18/10/2023)

Task 1 : Exercise 02 / Text Formatting

Week 4 - 16/10/2023

With examples and reference provided, we are required to do Kerning and Tracking on our names using all 10 different fonts in Exercise 2. In this exercise, we are also required to create different text formatting based on the 10 fonts given, content provided, and an additional image alongside a caption is required where we will be able to develop our skills in text formatting and information hierarchy.

Figure 2.21 10 fonts (Week 4, 19/10/2023)

The 10 fonts that I will be working with.

Figure 2.22 "Eng Yan Ling" with Kerning & Tracking (Week 4, 19/10/2023)

Figure 2.23 "Eng Yan Ling" without Kerning & Tracking (Week 4, 19/10/2023)

As seen in the picture above, this is my attempt on Kerning & Tracking on "Eng Yan Ling" with the 10 different fonts.

Figure 2.24 Comparison of "Eng Yan Ling" with and without Kerning & Tracking (Week 4, 19/10/2023)

Text Formatting

1. Research

Figure 2.25 Text Formatting Layouts

Through Pinterest, I have searched up for many existing layout examples I can learn from to create my layout for text formatting.

2. Layouts

Figure 2.26 1st Image for Text Formatting

Image contains too much word and inappropriate to use in the layout because the layout itself contains a lot of text. Therefore, avoid images that contains text.

Figure 2.27 2nd Image

Image is simple and acceptable for the layout.

3. Exploration

Figure 2.28 Text Formatting 1st Exploration (Week 4, 20/10/2023)

Layouts overall are not good, tracking is wrong and paragraph lines are too short.

Figure 2.29 Text Formatting 2nd Exploration (Week 5, 23/10/2023)

After receiving feedback from the previous exploration of my layouts, Figure 2.29 is my second exploration on other better layouts compared to the previous exploration. 1st layout does not apply cross-alignment hence not acceptable. 2nd layout can be done but not recommended as it is a tighter layout which leaves me with the 3rd layout to work on for my final submission.

4. Final

Figure 2.30 Process with caption (Week 5, 23/10/2023)

Figure 2.31 Headline Kerning (Week 5, 23/10/2023)

Gray value and white space of my layout.

Week 5 - 23/10/2023

FINAL Text Formatting Exercise

Figure 2.31 Text Formatting Exercise Final, JPEG without grids and guidelines (Week 5, 23/10/2023)

Figure 2.32 Text Formatting Exercise Final, PDF without grids and guidelines (Week 5, 23/10/2023)

Figure 2.33 Text Formatting Exercise Final, JPEG with grids and guidelines (Week 5, 23/10/2023)

Figure 2.34 Text Formatting Exercise Final, PDF with grids and guidelines (Week 5, 23/10/2023)

From the constructive feedbacks given, I have made changes to the format and being more aware of the kerning and tracking of the text as well as choosing another appropriate image that does not consists of any text.

Details
HEAD

Font/s: ITC Garamond Std (Ultra, Book Condensed)
Type Size/s: 50pt (Heading), 18pt (subheading)
Leading: 48pt

Paragraph spacing: -

BODY

Font/s: ITC Garamond Std (Bold Condensed, Book)
Type Size/s: 10 pt (text) , 12pt & 20pt (caption)
Leading: 13pt (Text)

Paragraph spacing: 4.5 - 4.6mm
Characters per-line: 45 - 65 characters / line
Alignment: Left Align

Margins: mm top - 23mm ; mm left - 16mm ; mm right 16mm ; mm bottom 52mm
Columns: 4
Gutter: 6mm

FEEDBACKS

Week 2 (02/10/2023)

General Feedback :

When sketching, stick to the a specific font that matches your idea to sketch out. Explore and understanding deeper into the meaning and the dynamics of the words to expressing when sketching your ideas, look for inspirations to get more ideas. Text can be distorted but only at a minimum level.

Specific Feedback :

When sketching, stick to the a specific font that matches your idea to sketch out.

Freeze #2 can improve in adding highlights to text to give an appearance of round and smooth corners; corners of the ice block changed to rounded edges & do not add highlights too closely to font lines - ice block generally viewed with sharp edges

Electric #1 Idea is acceptable, but remove bulb shape and bottom element with only the filament remaining. Can use the dot from the letter "i" to add on the brightness of the light, but added with a minimal quantity. With the light bulb present, it is a graphical image instead of a type expression.

Dizzy #2 Idea is good.

Slide #5 Idea is acceptable, can make it better by shortening the stretch on the floor so that it it not stretched out too long.

Week 3 (09/10/2023)

General Feedback :

No diligence and responsibility from everybody, follow general rules/guidelines given in teams. Do not apply too much distortion and look at how you go about conveying the meaning of your words; when you choose a font it must be amenable to the meaning of the word you are working on.

Specific Feedback :

Generally designs are good such as electric where it develops sensitivity to the type expression but ensure to command space of the artboard & do not make type expressions too small.

Week 4 (16/10/2023) General Feedback : E-portfolio holds up a mirror of yourself, more documenting equals gaining more insight by revaluating yourself and understanding your own strengths and weaknesses; learning comes from exploration through trial and error. Specific Feedback : Animations overall good. Freeze - ensure frames are aligned and animation of the type expression is not moving. Slide - Animation of sliding down is too fast. Allow type to slide down to the ground slower where the words on the ground can be seen getting longer, the type expression will gradually slide down until it slides out of frame + last panel can last for about 1.5s before the gif repeats.

Week 5 (23/10/2023) General Feedback : If formatting text cannot reconcile, select sentence & allow hyphenation. Conform to principles such as appropriate point size, alignment in order to create a correct layout. When you want to create a headline never use two fonts of two different serifs together; the point of using 2 fonts is to create contrast; makes no sense and awkward to use 2 different serifs. Since layout already has text, images avoid having text reduces visual functionality because you end up reading the visual as well, image is to break the reading. You must change your guidelines and grids, pre planning beforehand to have an understanding the layout you want, make changes to grid to cater the type of layout you want. Specific Feedback : Poor layout; line length too short & anything less than 45 is acceptable (45-65). headline too big, can have big headline, by line is too close and small in comparison to headline; imbalance, image more like text than an image which does not be live the text; kerning and tracking - undermine, kerning and tracking - even color, needs to be fixed.

REFLECTIONS

Experience

My experience in the first week of typography was interesting and challenging as I am completely new to both typography and working with Adobe Illustrator. On the following week, I was able to learn how to create a timeframe animation which was also a new experience for me. When I first started learning how to use InDesign, I experience a slight challenge as I was totally unfamiliar on how to us InDesign which took me some time to figure out and learn how to use it before being able to start on my exercises. I was also not so familiar and have very little knowledge in text formatting where I also struggled to arrange and create a unique yet correct way to display and format text. During Week 5, I still find myself struggling to understand the concept of text formatting hence I took the initiative to get feedbacks of my works in order to improve from there. In the following week, feedbacks were given to our editorial layout on the text formatting, kerning & tracking, type expression for the headline and the overall layout where I was able to learn and improve on my overall layout and text formatting with the constructive feedbacks given.

Observation

In my first 2 weeks of typography, I was able to see the various typefaces and fonts used in typography where we can use different methods to manipulate types in order to create or express a word in other ways. From my observation, timeframe animations allow me to create various style of animation of the type expressions based on my creativity. I notice in text formatting that I have very little knowledge in this topic which I require more reading and learning for. Even though text formatting is a challenge for me in typography, I look for examples from online websites or physical magazines to find inspiration and grasp the concept of text formatting. It has helped in being able to familiarize myself with text formatting in typography. From the feedbacks provided by my lecturer in Week 6, I was able to see improvement in my overall kerning & tracking in comparison to the first exercise on kerning & tracking given.

Findings

During my first two weeks in this module, I learned the basics of both typography and illustrator which is an important skill and knowledge I will need in the future. Creating timeframe animations was a new part to me and I find it interesting to learn and create animations to better express the type expressions. Having to work with InDesign for the first time, I have managed to grasp the basics in using InDesign which I still have a lot to learn about. In Week 5, I was able to be aware of my mistakes and weakness in text formatting through the constructive feedback given by my lecturer to improve myself and produce a better work. For Task 2 Editorial Layout, I researched and found many examples of layout that was designed by many good typographers, inspiring and motivating me to create a better work.

FURTHER READING

"A Type Primer" 2nd Edition by John Kane

Figure 3.1 A Type Primer 2nd Edition (2003)

Reference :

Kane J. (2003), A type primer 2nd Edition, Pearson Education, Inc.

Based on the list of books given, I have chosen A type primer to begin my further reading.

Week 1 - 30/09/2023

Chapter 1 Basics - Describing Letterforms

This start of this chapter introduces the basic letterform components known in typography. (Pg 2-7)

Week 2 - 03/10/2023

Chapter 1 Basics - Describing Typefaces

This chapter describes the basics of typefaces and the importance of it in order to identify different styles applied to typefaces including Roman, Italic, Bold face, Light, Condensed, and Extended.

The author recommends the 10 typefaces as shown in xx above for beginner typographers to develop one's skills to be able to understand and value other typefaces when they encounter them.

Chapter 2 Development

This chapter begins by introducing the timeline of the development of letterforms throughout history starting from early development until present time. It also introduces the individual history of each typefaces, development and the spreading of the typefaces. Additionally, it explains the beginning of printing press invented by Baskerville and the improvements made to technology to produce better printed copies that contributes to the current printing press we have in this modern age.

Chapter 2 Development - Text typeface classification

In response to prevailing technologies, commercial demands, and trends, type forms have developed. Therefore, typographers have created a system to identify these typefaces based on one devised by Alexander Lawson, covering main forms of text type and omitting of decorative styles and sans serif forms. (pg 59)

Week 3 - 10/10/2023

Chapter 3 Letters, Words, Sentences

This chapter emphasize on the details of a font including its weight, strokes, curves or details we usually would not notice on a letter regardless it is lowercase or uppercase. For example, the letter "A" in Baskerville is not symmetrical including its weight, thickness of stroke is not the same. (pg63) Understanding the form and counter form of a letter is crucial in typography in order to ensure its readability base on the type set. Comparing the positive and negative space used, this chapter also demonstrates several ways to express a type expressions with minimal changes, ranging from its position, length, height, size, weight, thickness and more.

In the following sub topic of this chapter, it introduces how texts are presented in longer paragraphs and methods we can apply to highlight the important information in a long text. It also compares the colors apply to texts or letters and how well it goes with each other, as this impacts the way the texts is portrayed to readers. Additionally, it also explains the do(s) and don't(s) in typography considering your primary purpose is to convey information with as little intrusion as possible.

Week 4 - 16/10/2023

Chapter 4 Text

Explaining and differentiating the meaning of kerning and letterspacing, going in depth on the do's and don'ts with kerning on letterforms. This chapter also explains the important of type formatting and textures applied to text differing from its x-height to its stroke width. The leading and line length of a text is crucial in text as it also affects the overall view of a text and its readability. This chapter also further elaborates on the importance of the proportion of a page where it is important in text formatting.

Week 5 - 23/10/2023

Chapter 4 Text

This chapter goes in-depth into the different sections that can be found in books such as its folio, table contents and so on. It also introduces the methods of indicating new paragraphs, ways to highlight important information from the text among large amount of text and hierarchy of headlines in text differentiated by A heads, B heads, and C Heads.

QUICK LINKS

Tasks/Exercises

Task 2 click here

Task 3 click here

Typography Final Compilation & Reflection click here

Google Drive Links

Typography : click here

Task 1 Submissions : click here

Search This Blog

Eng Yan Ling (0350603)