Foo Hui Xin || 0351665
Typography || Bachelor of Design in Creative Media
Task 1: Exercise 1 & 2
1 || Lectures
Lecture 0 - Introduction
Typography is a fundamental aspect in any design studies, it develops attributes that are fundamental to any discipline.
Typography- the act of creating letters, typefaces or type families
Font- refers to the individual font of weight within the typeface
|
| Fig 1.1, Individual fonts within a typeface |
Typeface- refers to the entire family of fonts/weights that share
similar characteristics/styles
|
| Fig 1.2, Typefaces |
Lecture 1 - Development
1. Early letterform development: Phoenician to Roman
Phoenician initially meant using sharpened sticks to scratch on wet clay or using chisels to carve onto stone. The forms of uppercase letterforms evolved out of these tools and materials. Uppercase forms are simple combinations of straight lines and circles. The tools we use has a very important influence on the type of writing created. Letter forms that have been developed are developed on the pretext of the kind of tools.
|
| Fig 2.1, Development of Phoenician letters |
Phoenicians, like other Semitic (Middle East) people, wrote from right-to -eft.
The Greeks changed the direction of writing; left-to-right. They developed a style of of writing called ‘boustrophedon’ (turn like how the ox ploughs).
‘Boustrophedon’: Lines of text are read alternatively from right-to-left and left-to-right, and the orientation of the letterforms changes as they change the direction of reading
|
| Fig 2.2, Boustrophedon writing |
The Greeks (like the Phoenicians), did not use letter space or punctuations.
They later move to a strictly left-to-right writing.
Etruscan (and then Roman) carvers painted on marbles before inscribing them (cuz its expensive). They develop certain qualities of their strokes (a change in weight from vertical to horizontal, a broadening of the stoke at start and finish) based on the tool they are using.
|
|
|
Hand Script from 3rd-10th century C.E.
- written version found in Roman monuments
- these letterforms have serifs added to the finish of the main strokes
- variety of stroke width achieved by the reed pen held at an angle of approx. 60deg off the perpendicular
|
| Fig 3.1, Square Capitals (4th/5th century) |
Rustic Capitals
- compressed version of square capitals
- allowed for twice as many words on a sheet of parchment
- took far less time to write
- pen or brush held at an angle of approx. 30deg off the perpendicular
- slightly harder to read due to their compressed nature
- developed for pragmatic reasons but not necessarily a good development in terms of readability
|
| Fig 3.2, Rustic Capitals (late 3rd-mid 4th century) |
Roman Cursive
- square & rustic capitals were typically reserved fro documents of some intended performance
- everyday transactions were typically written in cursive hand
- forms were simplified for speed
- the beginning of lowercase letterforms
- development of lowercase letters was a result of writing uppercase letters fast
|
|
Fig 3.3, Roman Cursive (4th-5th century) |
Uncials
- incorporated some aspects of the Roman cursive hand (esp A, D, E, H, M, U & Q)
- 'Uncia' is Latin for a twelfth of anything
- some scholars think that it refers to letters that are 1 inch (1/12 of a foot) high
- more accurate to think of uncials as small letters
- board forms of uncials are more readable at small sizes than rustic capitals
- did not have lowercase & uppercase letterforms
|
| Fig 3.4, Uncials (4th-5th century) |
Half Uncials
- further formalisation of the cursive hand
- marks the formal beginning of lowercase letterforms 2000 years after the origin of the origin of the Phoenician alphabet
|
| Fig 3.5, Half Uncials (C.500) |
Charlemagne
- former Holy Roman emperor
- first unifier of Europe since the Romans
- issued an edict in yr 789 to standardise all ecclesiastical texts
- basically there is this Empire ruling a large part of Europe that realised that there are too many writing systems and much of the info could be lost in translation
- he entrusted this task to Alcuin of York, Abbot of St Martin of Tours to oversee the standardisation of writing systems
- the monks rewrote the tests using both majuscules (uppercase), miniscule (lowercase), capitalisation and punctuation
- this set the standard for calligraphy for a century
|
| Fig 3.6, Caloline Miniscule (C.925) |
2. Blackletter to Gutenberg's Type
In northern Eu, 'Blackletter' gained popularity.
Blackletter (aka textura): a condensed strongly vertical letterform
In southern Eu, 'rotunda' gained popularity.
Rotunda: a rounder, more open hand
The humanistic script in Italy is based on Alcuin's miniscule.
Inevitably, this would happen, esp after the dissolution of Charlemagne's empire. Naturally, people on large landscapes will develop their own styles cuz geography, the kind of tools obtained from the surrounding nature, the different characteristics of people has an impact.
This doesn't belittle what Charlemagne and the Alcuin of York did.
There must be some form of standardisation to be localised for
some form of expression.
|
|
Fig 4.1, Blackletter/Textura (C.1300) |
Gutenberg invented the modern day printing press (according to the westerners).
Gutenberg's skills included engineering, metalsmithing, and chemistry. He built pages that accurately mimicked the work of the scribe's hand -- Blackletter of northern Eu. His type mold required a different brass matrix, or negative impression, for each letterform.
|
| Fig 4.2, 42 line bible, Johann Gutenberg, Mainz (C.1455) |
One of the reasons why Charlemagne chose Abbot was because writing
is the domain of religious order. There will be monks in the
monastery writing codexes or religious scripts down so it can be
passed on. There are also scribes in Royal Courts, who happens to
also be monks, writing down the histories of the civilisation,
empires, etc.
Books were costly because the process of writing takes long and
parchment was costly. Gutenberg has developed a mechanism where
printing can be done more quickly. He developed little matrices
put together to form a word, and words to form sentences,
sentences to form paragraphs, paragraphs to pages. Being a
businessman, he decided to do the bible so it sells well.
3. Text Type Classification
1450 Blackletter
- earliest printing type
- based on hand-copying styles
- eg. Cloister Black, Goudy Text
|
|
Fig 5.1, 1450 Blackletter |
1475 Oldstyle
- based on lowercase forms used by Italian humanist scholars for book
copying
- uppercase forms found inscribed on Roman ruins
eg. Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino
|
| Fig 5.2, 1475 Oldstyle |
1500 Italic
- echoing contemporary Italian handwriting
- originally considered their own class of type
- since 16th century, all text typefaces designed accompanying italic
forms
- italics; serif letters italicised
- oblique; roman letters italicised
|
| Fig 5.3, 1500 Italic |
1550 Script
- originally an attempt to replicate calligraphic forms
- not for lengthly text settings, but still widely enjoyed
- forms range from formal to traditional to casual to contemporary
eg. Kuenstler Script, Mistral, Snell Roundhand
|
| Fig 5.4, 1550 Script |
-from here on, departure from mimicking handwriting-
1750 Transitional
- refinement of oldstyle forms
- developed cuz of advances in casting and printing
- thick to thin relationships were exaggerated, brackets were
lightened
eg. Baskerville, Bulmer, Century, Time Roman
|
| Fig 5.5, 1750 Transitional |
1775 Modern
- a further rationalisation of oldstyle forms
- serifs were unbracketed, contrast between thick n thin strokes are
extreme
eg. Bell (aka Scotch Romans, more closely resemble transitional forms),
Bodoni, Caledonia, Didot, Walbaum
|
| Fig 5.6, 1775 Modern |
1825 Square Serif / Slab Serif
- originally heavily bracketed serif, w little variations between thick
& thin stroes
- in response to newly developed needs for ads in commercial printing
- as they evolved, brackets were dropped
eg. Clarendon, Memphis, Rockwell, Serifa
|
| Fig 5.7, 1825 Square Serif / Slab Serif |
1900 Sans Serif
- 'Sans' meaning 'w/o', 'Sans Serif' meaning 'w/o Serifs'
- also referred to as grotesque (German word 'grotesk') and Gothic
- these typefaces eliminated serifs all tgt
- introduced by William Caslon IV in 1816, but not wide-spread until ~1900
- variation either tended towards humanist forms (Gill Sans) or rigidly
geometric (Futura)
- sometime, flared strokes suggest calligraphic origins (Optima)
eg. Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger,
Futura, Helvetica, Meta, News
Gothic, Optima, Syntax, Trade Gothic, Univers
|
|
|
1990 Serif / Sans Serif
- recent development
- enlarges the notion of a family of typefaces to include both serif and
sans serif
eg. Rotis, Scala, Stone
|
| Fig 5.9, 1990 Serif / Sans Serif |
Lecture 2 - Basic
1. Describing Letterforms
2. The Font
Generally type-families should contain the following:
Uppercase- capital letters
Lowercase- lowercase letters
Small Capitals- usually found in serif fonts, the size of
the x-height of the typeface, real small caps ≠ artificially
generated
Uppercase Numerals (aka lining figures)- same height as
uppercase letters, all set to the same kerning width
Lowercase Numerals (aka old style figures/text figures)- set
to x-height + ascenders + descenders, less common in sans serif
typefaces than in serif
.png){kind=small}
|
| Fig 6.1, Uppercase Numerals |
.png){kind=small}
|
| Fig 6.2, Lowercase Numerals |
Italics- most fonts have italics, no italics in small caps,
oblique are typically based on the roman form of the typeface
Punctuation- all fonts contains standard punctuation marks
Miscellaneous characters- can change from typeface to
typeface
|
| Fig 6.3, Punctuations and Miscellaneous characters |
Ornaments- not in all typeface families, only a few
traditional or classical ones contain ornaments
|
| Fig 6.4, Ornaments |
3. Describing Typefaces
|
| Fig 7.1, Describing Typefaces |
Roman- uppercase forms are derived from inscriptions of Roman
monuments. A slightly lighter stroke in roman is known as
‘Book’.
Italic- Named for 15th century Italian handwriting on which the
forms are based. Oblique conversely is
based on the roman form of typeface.
|
| Fig 7.2, Italics vs Oblique |
Boldface- Characterised by a thicker stroke than a roman form. Aka
‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or
super.
Light- A lighter stroke than the roman form. Even lighter
strokes are called ‘thin’.
Condense- A version of the roman form, and extremely condense
styles are often called ‘compressed’.
Extended- An extended variation of a roman font.
4. Comparing Typefaces
The following 10 typefaces represents 500 years of type
design. They are still considered successful expressions
of how we think, how we read and write, how we
print.
|
| Fig 8.1, Typefaces |
Variety in x-height, in line weight, in relative stroke
widths and in feeling. Feelings of these typefaces connote specific use and
expression.
Examining typefaces tells us how we feel about specific
typefaces. It tells us what we bring to the discussion of
appropriateness in type choices.
Range of attitudes; some whimsical, some stately, some
mechanical, some calligraphic, some harmonious and some
awkward.
|
| Fig 8.2, Comparing Typefaces |
Lecture 3 - Text (Part 1/2)
1. Tracking: Kerning and Letterspacing
Kerning: the automatic adjustment of space between
letters (often mistaken as 'letterspacing') // to lessen space
between letters
|
| Fig 9.1, Kerning |
Tracking: addition and removal of space in a word or
sentence
|
| Fig 9.2, Normal tracking, Tight tracking, Loose tracking |
Adjust sizing (command + shift + >/< key OR command +
shift + option)
When to kern (lesser space) (option + left arrow key) or
letterspace (option + right arrow key)
eg. for headlines, for titles, when the entire word is in
uppercase
Uppercase letterforms are drawn to be able to stand alone,
lowercase letterforms require the counterform created
between letters to maintain the line of reading (so kerning
and letterspacing lowercase letters within text is a NO).
If we add letterspacing, it breaks the counterform, which
lessens the readability.
|
| Fig 9.3, Counterform: black spaces in between the white letterforms |
2. Formatting Text (Alignments)
Designers tend to set type on several factors, personal
preference, prevailing culture and the need to express play
important roles. However, their first job is to provide clear,
appropriate presentation of the author's message.
Flush left: writing from left to right, closely
mirroring the asymmetrical exp of handwriting. Each word
starts at the same point but ends wherever the last word on
the line ends (ragged right). Spaces between words are
consistent, allowing the type to create an even grey value.
.png)
|
| Fig 10.1, Flush left |
Centered: symmetry upon the text, equal value and
weight to both ends of any line (ragged right and left).
Transformed fields of text into shapes, adding pictorial
quality to a material that is non-pictorial in nature. Creates
a strong shape on a page, important to amend line breaks so
the text does not appear too jagged.
.png)
|
| Fig 10.2, Centered |
Flush right: places emphasis on the end of a line as
opposed to its start (ragged left). Difficult to read in large
pieces of text. Useful in situations (like captions) where the
relationship between text and image might be ambiguous w/o a
strong orientation to the right.
.png)
|
| Fig 10.3, Flush right |
Justified: imposes a symmetrical shape on the text.
Achieved by expanding or reducing spaces between words, and
sometimes, between letters. Resulting openness of lines can
produce 'rivers' of white spaces running vertically thru the
text. Careful attention to line breaks and hyphenation is
needed to amend this problem whenever possible.
Reflection of certain types of mentality cuz it gives a sense
of order.
.png)
|
| Fig 10.4, Justified |
3. Texture
|
| Fig 11.1, Anatomy of a Typeface |
x-height: height between the baseline and the median line
ascender: space above the x-height
descender: space below the x-height
when the ascender & descender is smaller in comparison to
the x-height (it normally is), there's more readability.
(none of the typefaces below are designed for on screen
reading purposes)
|
| Fig 11.2 10 point size / 13.5 leading / typeface (Adobe Casion/Baskerville) |
Baskerville has a slightly larger x-height & tends to be
generally readable
|
| Fig 11.3, 10 point size / 13.5 leading / typeface (Bembo/Adobe Garamond Pro) |
Garamond has a larger ascender and descender and has a thicker
stroke, making it more readable.
Bembo has a little bit more contrast, reducing its application
as a typeface at this point size and for on screen reading
purposes.
|
| Fig 11.4, 10 point size / 13.5 leading / typeface (Bauer Bodoni/Adobe Jenson Pro) |
Bodoni has a high contrast level, reducing the readability/legibility of some of its strokes.
Jenson Pro has a thicker stroke, the colour is a lot more
stronger which makes it more readable at this point size and
on screen purposes
(half close your eyes to see the grey value)
|
| Fig 11.5, Same point size (10), leading size (13.5) , different typefaces and different grey values |
(half close your eyes to see the grey value)
(own judgement)
It seems that Jenson Pro has the darkest colour, therefore
readable.
Bodoni has the lightest colour because of contrast issues
(thick and thin stokes, the thicker the strokes are, the thin
strokes seems to disappear)
|
| Fig 11.6, Comparison of san serif typefaces |
For screen reading purposes, these are more legible.
On the left, virtually no leading, colour is too dark.
4. Leading and Line Length
The goal in setting text type is to allow for easy,
prolonged reading.
At the same time, as field of type should occupy the page
as much as a photograph does.
The following 3 things (decided one to another) determines
readability and legibility.
Type size: Text should be large enough to read
easily at arms length.
First thing to decide on when designing a text.
Leading: Text set too tightly encourages vertical
eye movement which lets the reader loose their place. Test
set too loosely creates striped patterns that distracts
the reader from the material at hand.
Decided on the vertical eye movement of the reader, or the
grey value, or the colour, after deciding on the type size
(large body of text generally requires 2~3.5 points more
than type size).
Line Length: Shorter lines requires less reading;
longer lines more. A good rule of thumb is to keep line
length between 55-65 characters. Too long or too short
impairs reading.
|
| Fig 12.1, Bad leading |
On the left, virtually no leading, colour is too dark.
On the right, too much leading, colour is too light.
|
| Fig 12.2, Comparison of different leading size |
~10/12 is probably the best. (but this is subjective)
5. Type Specimen Book
If the ultimate output of a particular text is to be
printed, we have to print it out to judge.
If it is is going to be on screen, we make a judgement on
screen (to see whether it looks good, is readable and
legible).
A type specimen book is a sheet or a book showing samples
of typefaces in various different sizes. Without printed
pages showing this, no one can make a reasonable choice of
type cuz choices can only be determined on screen.
A type specimen book (or ebook) is to provide an accurate
reference for type, type size, type leading, type line
length, etc.
|
| Fig 13, Sample type specimen sheet |
Lecture 4 - Text (Part 2/2)
6. Indicating Paragraphs
Pilcrow
(¶): previously, it was used to indicate paragraph
spacing // holdover in medieval manuscripts seldom
used today
|
| Fig 14.1, Pilcrow indicating paragraph |
Line Space (leading*): space between paragraphs. If the line space (leading) is 12pt, then the paragraph space is 12pt. Ensures cross-alignment across columns of text (2 columns of text in line w one another).
(*leading is 2~3.5 points larger than the type size)
(we always press enter twice for paragraph space, which is wrong)
There is a value for the paragraph space, ideally paragraph space point size = leading point size (= line space)
|
| Fig 14.2, Line space vs Leading |
line of type - bread
line space - jelly + bread (descender of one
sentence to the descender of the next
sentence)
|
| Fig 14.3, Line spacing indicating paragraph |
Standard indentation: indent size = line spacing size OR point size of
your text
(too big point size indentation causes ragging on
the left esp when there are many short
paragraphs)
(best used when text is justified, if not there
will be ragging on both sides)
|
| Fig 14.4, indentation indicating paragraph |
Extended paragraphs: creates unusually wide columns of text. Generally not used but there may be strong compositional or functional reasons for choosing it
|
| Fig 14.5, Extended paragraphs |
7. Widows and Orphans
Must never occur in our design // must take care to
avoid these occurrences (esp w large amounts of
text)
Widow: a short line of type left alone at the end of a
column of a text
Orphan: a short line of type left alone at the start of a
new column
|
| Fig 15, Widows and Orphans |
Flush right and ragged left are somewhat more
forgiving
Widow solution- forced line break (shift + enter)
thru out ur para
OR changing kerning or letterspacing (highlight +
option + left arrow key) (but only by not more or
less than 3 times!)
Orphan solution- reducing length of the
column
8. Highlighting Text
(within a column of text)
Different ways of highlighting text:
- italics
- bold or medium
- change the typeface (might need to reduce point
size (by usually 0.5), etc cuz generally, san serif
typefaces seem to be larger)
|
| Fig 16, Changing serif to san serif |
- change colour (body text can only be changed
between black, cyan, magenta and yellow)
- placing a box around the text/field of colour
behind the text, maintaining the reading axis (or not,
depends on the individual)- bullet list (sometimes it is necessary to place certain typographic elements outside the left margin of a column text to maintain strong reading axis)
- quotation marks (like bullets, can create a clear indent, breaking the left reading axis)
|
| Fig 17, Indented quote (top) vs extended quote (bottom) |
Prime ≠ Quotations!!
Prime indicates feet (single) and inches
(double)
|
| Fig 18, Primes (top) vs Quotations (bottom) |
9. Headline within Text
Subdivisions within text of a chapters.
A head indicates a clear break between the topics
within a section.
|
| Fig 19.1, A heads |
Fig 19.2, B heads
C heads, tho not common, highlights specific facets
of material within B head text. They do not
materially interrupt the flow of reading.
Fig 19.3, C heads
Putting together a sequence of subheads =
hierarchy
Fig 19.4, A-B-C combination
10. Cross Alignment
Cross aligning headlines and captions with text
type reinforces the architectural sense of the
page—the structure—while articulating the
complimentary vertical rhythms.
Fig 20, Cross alignment between different
point sizes
|
| Fig 19.2, B heads |
|
| Fig 19.3, C heads |
|
| Fig 19.4, A-B-C combination |
|
| Fig 20, Cross alignment between different point sizes |
Lecture 5 - Letters
1. Understanding Letterforms
The below uppercase letter form suggests symmetry, but is not. It has 2 different stroke weights of the Baskerville stroke form & each bracket connecting the serif to the stem has a unique arc (circles show the arcs).
 |
| Fig 21.1, Baskerville 'A' |
The below uppercase letter form may appear symmetrical, but the width. of the left slope is thinner than the right stroke.
 |
| Fig 21.2, Univers 'A' |
Both Baskerville and Univers demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.
The complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of 2 seemingly similar sans-serif typefaces- Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the 2.
 |
| Fig 22.1, Helvetica 'a' vs Universe 'a' |
 |
| Fig 22.2, Comparison |
2. Maintaining the x-height
x-height: size of the lowercase letterforms
The curved strokes, such as in 's', must rise above the median (or sink below the baseline) in order to appear to the same size as the vertical and horizontal strokes they adjoin.
 |
| Fig 23, Curved strokes exceeding median & baseline |
'o' usually looks smaller because it has lesser 'real estate' (lesser area touching the median and baseline). To compensate for that, an optical adjustment is necessary (by exceeding the median and baseline).
3. Form / Counterform
Counterform (or counter)- the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them.
How well counters are handled determines the readability of what's been set.
 |
| Fig 24, Form and Counterform |
 |
| Fig 25, Letters in close detail to understand form and counter |
4. Contrast
 |
| Fig 26, Contrast in letters |
Lecture 6 - Different Medium
In the past, typography was viewed as living only when it reached paper.
Today, typography not only exist on paper, but on a multitude of screens. Our exp of typography changes based on how the page is rendered, because typesetting happens in the browser.
1. Print Type vs Screen Type
Type for Print
Type was designed intended for reading from print long before we read from screen. It's the designer's job to ensure that the text is smooth, flowing, and pleasant to read.
Caslon, Garamond, Baskerville are the most common typefaces used for print because of their characteristic which are elegant and intellectual but also highly readable when set at small font sizes.
They are versatile, easy-to-digest classic typefaces, which has a neutrality and versatility that makes typesetting with it easy.
 |
| Fig 27, Typography (that has been used a lot) in novels |
 |
| Fig 28, Typography in print |
Type for Screen
Typefaces intended for use on the web are optimised and often modified to enhance readability and performance onscreen in a variety of digital environments.
Eg: taller x-height, reduced ascenders/descenders, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contract, modified curves and angles)
Another important adjustment (esp for typefaces intended for smaller sizes): open spacing.
These factors serve to improve character recognition and overall readability on screen including the web, e-books, e-readers, and mobile devices.
 |
| Fig 29, Typography on a website |
Hyperactive Link / Hyperlink: a word, phrase, or image you. can click to jump to a new document or section within the current document. Text hyperlinks are normally blue and underlines by default. An old and current way to navigate an online document.
Font size for screen: 16-pixels on screen is about the same size as a text printed on a book or magazine; this is accounting for reading distance. We read books pretty close (few inches away) so they are typically set at ~10 points. If read at arm's length, ~12 points which is about ~16 pixels on most screens.
System Fonts for Screen / Web Safe Fonts:Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
These fonts ones appear across all operating systems. They're a small collection of fonts that overlap from Windows to Mac to Google.
Pixel Differential between Devices: Screens used by PCs, tablets, phones and TVs are different sizes & the text on screen differs in proportion too cuz they have different sized pixels. 100 pixels on laptop =/= 100 pixels on a big sized 60" HDTV.
 |
| Fig 30, Pixel differential between devices |
2. Static vs Motion
 |
| Fig 31, Static vs Motion Typography |
Static typography has minimal characteristics in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.
Forms of static typography: eg, billboards, posters, magazines, fliers
Whether they are informational, promotional, formal or aspirational pieces, the level of impression and impact they heave on the audience is closely knitted to their emotional connection with the viewers.
 |
| Fig 32, Static typography on billboard |
Motion Typography
Temporal media offer typographers opportunities to 'dramatise' type, for letterforms to become 'fluid' and 'kinetic' (Woolman and Bellantoni, 1999).
Film title credits present typographic information over time, often bringing it to life through animation/motion graphics.
Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of the soundtrack. On-screen typography has developed to become expressive, establishing the tone of associated content or expresses a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.
 |
| Fig 33.1, Motion typography in movie |
 |
| Fig 33.2, Motion typography in movie |
 |
| Fig 33.3, Motion typography in movie |
2 || Instructions
Task 1: Exercise 1 - Type Expression
Sketches
We were given a choice to choose between several words with
'Cough' being mandatory. 'Wink', 'Squeeze', 'Pop', 'Explode',
and 'Grow' was chosen. Between the 5, I chose to do 'Wink',
'Squeeze', and 'Pop'.
|
| Fig 34, Type expression sketches, Week 2 (6/4/2022) |
Digitalisation
(1 of 4)
I picked the sketch I saw most potential in to digitalise
first, which was 'Squeeze' (Fig XX). 'S' and 'Z' is supposed
to be capitalised and there is an 'e' wrapping around the
first 6 letters of the word 'SqueeZ'.
|
|
Fig 35.1, 'Squeeze' type expression sketch, Week 2
(6/4/2022) |
The first attempt (Fig XX) was not what I had in mind. I
used Futura Std Condensed Medium for 'SqueeZ' and Futura
Std Book for the letter 'e' which wraps around the other
letters for this type expression.
|
|
Fig 35.2, First attempt at digitalising
'Squeeze', Week 3 (10/4/2022) |
For the final digitalisation (Fig XX), I figured out
that I could select 'SqueeZ' and click on [Effect]
> [Warp] > [Squeeze...] to get the effect I
wanted. I also changed the 'e' that wraps around the
letters to Futura Std Light Oblique.
|
| Fig 35.3, Final attempt at digitalising 'Squeeze', Week 3 (11/4/2022) |
The second type expression I picked for 'Wink' (Fig XX) has a
slanted 'i' so that the dot on top of the 'i' looks like an
eye and the line of the 'i' looks like a smile.
|
|
Fig 36.1, 'Wink' type expression sketch, Week 2
(6/4/2022) |
For the first attempt (Fig XX), I rotated the 'i' 90 degrees
and added a dot a little above the line so the 'i' looks a bit
unnatural and distorted. I used Gill Sans Regular for the
whole type expression.
|
|
Fig 36.2, First attempt at digitalising 'Wink', Week 3
(10/4/2022) |
For the final attempt (Fig XX), I curved the line of the 'i'
so it looks more like a smile and also so the dot lands on the
first end of the line.
|
| Fig 36.3, Final attempt at digitalising 'Wink', Week 3 (11/4/2022) |
(3 of 4)
My first pick for the expression for 'Cough' (Fig XX) was an
attempt to express the 'ough' as the contagious virus that
comes out of a cough, coming out of the 'C' representing a
coughing mouth.
|
|
|
|
|
Fig 37.2, Attempt at digitalising 'Cough' (1), Week
3 (10/4/2022) |
|
|
|
|
|
Fig 37.4, Final attempt at digitalising 'Cough' (2),
Week 3 (11/4/2022) |
(4 of 4)
For the final digitalisation, I choose the expression for
'Pop' (Fig XX) where the 'O' in the middle expresses
something like a bubble popping.
|
| Fig 38.1, 'Pop' type expression, Week 2 (6/4/2022) |
When I digitalised it, I used Univers LT Std 75 Black for the 2 'p's and Univers LT Std 45 Light for the enlarged 'O'. Using a white circle, I placed it in the middle of the 'O' to make it appear thinner and more dynamic, like a bubble popping in slow motion. I also drew some lines for the popping effect.
|
|
Fig 38.2, Final attempt at digitalising 'Pop',
Week 3 (10/4/2022) |
Final compiled digitalised Type Expressions
|
| Fig 39, Compiled Digitalised Type Expressions |
Final Type Expression (PDF)
Animation
For Week 3, we attempted to animate a type expression
during class. I attempted to animate 'wink' and made it
curve up on both sides like a smile or a closing eye. I
also made the dot on the 'i' go from a full circle to
something like a semi-circle that reflects an eye-smile.
The 'n' representing the wink is also squeezed a little.
|
| Fig 40.1, Process of animating 'wink' in Ai, Week 3 (11/4/2022) |
|
|
|
|
| Fig 40.3, First attempt at animation, Week 3 (11/4/2022) |
I then animated 'squeeze'. I made the 'e' around 'SqueeZ' to appear loosened and then it wraps around it tighter, squeezing them. The animation goes in a loop so it continues loosening and tightening.
|
|
|
|
| Fig 41.2, Process of animating 'squeeze' in Photoshop, Week 3 (16/4/2022) |
|
| Fig 41.3, Final Attempt at animation, Week 3 (17/4/2022) |
|
|
Fig 42, Final Animated Type Expression, Week 3 (17/4/2022) |
Task 1: Exercise 2 -Text Formatting
Kerning: adjusts space between individual letterforms
Tracking (letter-spacing): adjusts spacing uniforming over
a range of characters
|
| Fig 43.1, Without kerning (top) vs with kerning (bottom), Week 4 (23/4/2022) |
|
| Fig 43.2, Text formatting with kerning, Week 4 (23/4/2022) |
|
| Fig 43.3, Text formatting without kerning, Week 4 (23/4/2022) |
|
| Fig 43.4, With and without kerning comparison, Week 4 (23/4/2022) |
Things to look out for:
- Font size (8–12)
- Line Length (55–65/50–60 characters)
- Text Leading (2, 2.5, 3 points larger than font size)
- Ragging (left alignment) / Rivers (Left Justification)
- Cross Alignment
- No Widows / Orphans
- Kerning and tracking should not exceed -3/+3
- Turn on hidden characters (command + option + I)
|
| Fig 44, Process of cross alignment + kerning, Week 5 (24/4/2022) |
|
| Fig 45.1, Paragraph without kerning, Week 5 (24/4/2022) |
|
| Fig 45.2, Paragraph with kerning, Week 5 (24/4/2022) |
Layout #1:
Font: Gill Sans
Typeface: Regular (body, credits, heading), Bold
Italic (heading)
Font size: 30 pt (heading), 12 pt (body), 10 pt (credits
Leading: 28 pt (heading, credits), 14 pt (body)
Paragraph Spacing: 14 pt
Average characters per line: 50 ~ 57
Alignment: Left align (body), Right align (heading, credits)
Margins: 20mm (top, bottom), 12.7mm (left, right)
Columns: 4
Gutter (for columns): 4.233mm
|
|
Fig 46.1, Layout #1, Week 5 (24/4/2022) |
|
| Fig 46.2, Layout #1 + Grid + Margins + Columns, Week 5 (24/4/2022) |
Layout #2:
Font: Futura Std
Typeface: Futura Std Book (heading, credit, body), Bold (heading)
Font size: 30 pt (heading), 12 pt (credit), 9 pt (body)
Leading: 23 pt (credit, heading), 11.5 (body)
Paragraph Spacing: 11.5 pt
Average characters per line: 35~45
Alignment: Left align (heading, credit), Left Justified (body)
Margins: 30 mm (top, bottom), 12.7 (left, right
Columns: 3
Gutter (for columns): 6 mm
 |
| Fig 47.1, Layout #2, Week 5 (25/4/2022) |
 |
| Fig 47.2, Layout #2 + Grid + Margins + Columns, Week 5 (25/4/2022) |
Font: Univers LT Std
Typeface: Univers LT Std 57 Condensed (body, credit), 53 Extended (heading), 63 Bold Extended Oblique (heading)
Font size: 40 pt (heading), 30 pt (heading), 12 pt (credit), 10 pt (body)
Leading: 24 pt (heading, credit), 12 pt (body)
Paragraph Spacing: 12 pt
Average characters per line: 55~65
Alignment: Left align (heading, body), Right align (credit)
Margins: 40mm (top), 20mm (bottom), 12.7mm (left right)
Columns: 2
Gutter (for columns): 4.233mm
 |
| Fig 48.1, Layout #3, Week 5 (26/4/2022) |
 |
| Fig 48.2, Layout #3 + Grid + Margins + Columns, Week 5 (26/4/2022) |
Final Text Formatting
3 || Feedback
Week 2
General Feedback: Try to avoid using too much illustrations, but minimal illustrations are fine
Specific Feedback: In my judgement, the designs might have been too simple or too graphic but I feel like there is potential for some of the sketches to make it work in Ai.
Week 3
General Feedback: We could also use some other tools in Ai, like the brush tool and the slice tool
Specific Feedback: 'Squeeze' is too complicated, 'Cough' is too simple and does not express much, 'Pop' and 'Wink' are good
Week 4
General Feedback: Things to look out for when completing Exercise 2 of Task 1: Font size (8–12), Line Length (55–65/50–60 characters), Text Leading (2, 2.5, 3 points larger than font size), Ragging (left alignment) / Rivers (Left Justification), Cross Alignment, No Widows / Orphans
Specific Feedback: I should update my blog as I go so I do not fall behind or snowball all the things to do. Jump break line ≠ page break!!
Week 5
General Feedback: For the exercise 2 layouts, we have to add the detailed information of font, typeface, font size, leading, paragraph spacing, ave characters per line, alignment, margins, no. of columns & gutter. Final product should have a final JPEG and PDF.
Specific Feedback: My blog's fonts were very messed up and inconsistent because of error(s) in the coding, so I need to start another blog and make sure to look at the preview every so often to make sure the coding is still in line as I progress. Need to do more further reading.
4 || Reflection
Experience
There are a lot of history and a lot of technique to
typography, and I felt like we had very limited materials to
work with, which made this module feel very rigid and
unfriendly to me. With the limited materials, I was afraid to
have a lack of originality because my designs may be similar
to an already existing design somewhere that I do not know of,
or even similar to my classmates.
However, I did have fun when I started working on the type
expression sketches. After learning on how to do type
expressions in Ai, I started to find typography pretty
exciting as well. It was still very challenging though,
because of how unfamiliar I am with the application.
As I explored about typography online, even for different
languages, I came to appreciate typography a lot more than I
expected.
On the other hand, Blogger was also not being nice to me
because there was a lot of errors in the coding and it turned
out that I was the only one facing these problems. This
frustrated me a lot...
Observation
Mr Vinod encourages sharing a lot so he gives feedback on
the spot during class in front of everyone. Even though this
is kind of nerve-wrecking, I actually found this very
helpful because we were given a chance to look at other
people's artwork and inspire one another and also learn from
each other's mistakes. From Mr Vinod's comments and feedback
on other people's work, I am able to make better judgements
on my own.
Findings
I was unaware of how important typography is. But as I
progress throughout this module, it was really eye-opening
to see how typography is used literally everywhere for all
kinds of design pieces. I have a newfound appreciation for
typography.
For the problem with Blogger, With Mr Vinod's help, I found a
way to avoid the coding errors with Mr Vinod's help, but it
still takes up a lot of time to do it.
5 || Further Reading
Typography Essentials: 100 Design Principles for Working
with Type
by Ina Saltz
|
| Fig 49, Book cover for 'Typography Essentials: 100 Design Principles for Working with Type' |
It was interesting to see so many ways typography is used in variations of projects. This book explains the principles typography uses in a brief and easy to understand way. There were as many project examples demonstrating different ways type are used as there were words so it was easy to go through the book. It was very eye-opening to see so many 'real' approved projects that was used in some way for the public, like for magazines, products, websites, books, posters, logos, etc.
Thinking with Type
by Ellen Lupton
|
| Fig 50, Book cover for 'Thinking with Type' |
I think this book gives a basic understanding of
typography, much like the lectures we have watched for this
module. The book is very informative but I only briefly went
through it to grasp a better understanding of the basics of
typography because of how many words there were. Page 34 and
35 however, had a good summary about letter anatomy for me
to digest.
|
| Fig 50.1, Page 34 from 'Thinking with type' |
|
|
Fig 50.2, Page 35 from 'Thinking with type' |
Letterforms: Typeface Designs from Past to Future
by Timothy Samara
|
| Fig 51, Book cover for 'Letterforms: Typeface Designs from Past to Future' |
Page 48-57 went very in-depth with the basics anatomy of
letters which were not taught in the lecture. It was a
little overwhelming to see how in depth the basics and the
anatomy of letters can go, but at the same time it made me
appreciate typefaces a lot more. There are a lot of work put
into them...
Page 197-233 showcased contemporary directions in typeface
design for all kinds of application. It was interesting to
look through and realise the unlimited possibilities that
comes from typographic exploration.
Making and Breaking the Grid
by Timothy Samara
|
| Fig 52, Book cover for 'Making and Breaking the Grid' |
From page 22-29 of this book, I learned the about the
importance of grid from this book as it builds structure on a
page. Aside from that, this book is overflowing with inspiration from
the layout showcases on both grid based and non-grid based
projects.
Comments
Post a Comment