Typography | Task 1: Exercises
24/9/2024 - 29/10/2024 / Week 1 - Week 6
NICCO CHEW JIN XUN / 0366563
Typography / Bachelor of Design (Hons) In Creative Media / Taylor's University
Task 1: Exercises
Table of contents
1. Lectures
2. Instructions
4. Feedback
5. Reflection
Lectures
[ Week 1 ]
Typo_0_Introduction
what typography is?
- the act of creating letters that express ourselves virtually
- the creation of typefaces or type families
- animation (beginning of movie titles or gif animations)
- visible & prevalent in website designs
- signage designs which navigating you to different spaces
- example: bottle labels, books, posters
- typography is not just the 'text' but what you got to do with the text
figure 1.0 - Font example
Font - refers to the individual font or weight within the typeface
figure 1.1 - Typeface example
Typeface - refers to the entire family of fonts that share
similar styles
Typo_1_Development
Early letterform development: Phoenician to Roman
* Phoenician
- wrote from left to right
figure 2.1 - Evolution from Phoenician letter figure 2.2 - 4th century B.C.E
* The Greek
- phoenicians / semitic peoples wrote from right to left
- developed a style of writing called 'boustrophedon' ( how the ox ploughs )
- did not use letter space or punctuations
figure 2.3 - Greek fragment, stone engraving figure 2.4 - Phoenician letters
*Etruscan (and then Roman)
- carvers working in marble painted letterforms before inscribing them
- certain qualities of strokes have a change in weight from vertical to
horizontal and a broadening of the stroke at start and finish which carried
over into the carved letterforms
figure 2.5 - early letterform development of letter A
Hand script from 3rd - 10th century C.E.
figure 2.6 (left) - 4th or 5th century : Square Capitals &
figure 2.7 (right) - Late 3rd - mid 4th century : Rustic Capitals
*Square Capitals
- written version found in Roman monuments
- serifs added to the finish of the main strokes
*Rustic Capitals
- compressed version of square capitals
- allowed for twice as many words on a sheet of parchment
- took far less time to write
- slightly harder to read due to compressed nature
figure 2.8 (left) - 4th century: Roman Cursive &
figure 2.9 (right) - 4th or 5th century : Uncials
*Roman Cursive
- typically written in cursive hand in which forms were simplified for speed
- writing fast uppercase letter forms quickly ;
*Uncials
- incorporated some aspects of the Roman cursive hand, especially in
the shape of A, D, E, H, M, U & Q
- Latin for a twelfth of anything
- letters that one inch ( one twelfth of foot ) high
- more readable at small sizes than rustic capitals
figure 2.10 (left) - 500: Half - uncials &
figure 2.11 (right) - C.925: Caloline miniscule
*Half-uncials
- further formalisation of the cursive hand
- formal beginning of lowercase letterforms
- replete with ascenders and descenders, 2000 years after the origin of Phoenician alphabet
*Charlemagne
- first unifier of Europe since the Romans, issues an edict in 789
to standardize all ecclesiastical texts
- the monks rewrote the texts using both majuscules (uppercase),
miniscule, capitalization and punctuation which set the standard for
calligraphy for a century
Blackletter to Gutenberg's type
figure 2.12 (left) - c.1300: Blackletter (Textura) &
figure 2.13 (right) - c.1455: 42 line bible, Johann Gutenberg, Mainz
*Blackletter
- a condense strongly vertical letterform in Northern Europe
- a rounder more open hand gained popularity, called 'rotunda' in Southern Europe
*Gutenberg
- skills included engineering, metalsmithing, and chemistry
- accurately mimicked the work of the scribe's hand -
Blackletter of Northern Europe
- required a different brass matrix, or negative impression, for
each letterform
Development of Typefaces in different eras and regions
figure 2.14 & figure 2.15 - development of
typefaces in different eras and regions
since 1460 - 19th century
Text type classification
1450 Blackletter
1475 Oldstyle 1500 Italic 1550 Script 1750 Transitional
1775 Modern
1825 Square Serif 1900 Sans Serif 1990 Serif / Sans Serif
figure 2.16 - text type classification
*1450 Blackletter
- earliest printing. type
- forms were based upon the hand-copying styles that were then
used for books in Northern Europe
- examples: Cloister Black, Goudy Text
*1475 Oldstyle
- based upon lowercase forms used by Italian humanist scholars
for book copying
- uppercase letterforms found inscribed on Roman ruins
- examples: Bembo, Caslon, Garamond, Janson
*1500 Italic
- echoing contemporary Italian handwriting
- condensed & close-set, allowing more words per page
- cast to complement roman forms
*1550 Script
- originally and attempt to replicate engraved calligraphic
forms
- not entirely appropriate in lengthy text settings
- shorter applications, wide acceptance
- forms now range from formal and traditional to casual and
contemporary
*1750 Transitional
- refinement of old style forms
- achieved in part because of advances in casting and printing
- thick to thin relationships were exaggerated, brackets were
lightened
- examples: Baskerville, Bulmer, Time Roman
*1775 Modern
- further rationalisation of old style letterforms
- serifs unbracketed, contrast between thick and thin strokes
extreme
- english versions (like Bell) known as Scotch Romans
- examples: Bell, Bodoni, Caledonia
*1825 Square Serif / Slab Serif
- originally heavily bracketed serif, little variation between
thick and thin strokes
- responded to newly developed needs of advertising for heavy
type in commercial printing
- as hey evolved, brackets were dropped
- examples: Clarendon, Memphis, Serifa
*1900 Sans Serif
- first introduced by William Caslon IV in 1816
- wide-spread in the beginning of twentieth century
- strokes were flared to suggest the calligraphic origins of
the form (Optima)
- also referred to as grotesque and Gothic
- examples: Gill Sans, Futura, Helvetica
*1990 Serif / Sans Serif
- recent development
- enlarges the notion of a family of typefaces to include both
Serif and Sans Serif alphabets
- examples: Rotis, Scala, Stone
[ Week 2 ]
Typo_3_Text_Part 1
Text / Tracking: Kerning and Letterspacing
figure 3.1 - Kerning & Letterspacing figure 3.2 - Normal Tracking, loose
tracking & tight tracking
figure 3.3 - Counter form
*Kerning
- automatic adjustment of space between letters
*Letterspacing
- to add space between the letters
*Tracking
- addition and removal of space in a word or
sentence
*Grey Value
- refers to text contrasted against a white background
*Uppercase letterforms
- able to stand on their own
*Lowercase letterforms
- require the counter form created between letters to
maintain the line of reading
*Counter Form
- created between letters to maintain the line of
reading
- black spaces between the white letter forms
Formatting Text
*Flush Left
- most closely mirrors the asymmetrical
experience of writing
- each line starts at same point but ends
wherever the last word on the line ends
- consistent spaces between words throughout
the text, to create even gray value
figure 3.4 - flush left, ragged right
*Centered
- imposes symmetry upon the text, assigning equal
value and weight to both ends of any line
- it transforms fields of text into shapes, adding
a pictorial quality to material that's
non-pictorial by nature
- important to amend line breaks so that the text
does not appear too jagged
- centered a long body of text is not advisable
because starting point is irregular
figure 3.5 - centered, ragged right and left
*Flush Right
- places emphasis on the end of a line as opposed
to its start
- useful in situations (captions) where the
relationship between text and image might be
ambiguous without a strong orientation to the
right
- examples: use when u want to showcase the
caption is aligned to the picture
figure 3.6 - flush right, ragged left
*Justified
- lots of designer rarely using justified
- gives a sense of order
- like centering, imposes a symmetrical shape on
the text
- achieved by expanding / reducing spaces between
words and letters
- resulting openness of lines can occasionally
produce 'rivers' of white space running through
the text
- careful attention to line breaks and hyphenation
figure 3.7 - justified
Texture
- type with generous x-height / relatively heavy
stroke width produces a darker mass on the page
than with relatively smaller x-height / lighter
stroke
- different typefaces suit different
messages
- sensitivity to differences in colour is
fundamental for creating successful layouts
figure 3.8 - Anatomy of A Typeface
figure 3.9 - different grey values in
different typefaces
Leading & Line Length
- to allow for easy, prolonged reading
- a field of type should occupy the page as
much as photograph does
*Type Size
- text type should be large enough to be read
easily at arms length
- imagine yourself holding a book in your lap
* Leading
- Set tightly text encourages vertical eye
movement which cause a reader loose his or her
place
- Set loosely text creates striped patterns
that distract the reader from material at
hand
*Line Length
- Shorter lines require less leading
- Longer lines require more leading
- keep line length between 55-65 characters [
Good Rule of Thumb ]
- extremely long or short lines lengths
impairs reading
Type Specimen Book
- ebook for screen
- shows samples of typefaces in various
different sizes
- to provide an accurate reference for type,
type size, type leading, type line length etc.
- no one can make a reasonable choice of type
without printed pages showing samples of
typefaces at different sizes
- useful to enlarge type to 400% on the screen
to get a clear sense of the relationship between
on one line and ascenders on the line below
*Compositional Requirement
- text should create a field that can occupy a
page or a screen
- think of your ideal text as having a middle
gray value, not a series of stripes
figure 3.10 - Sample Type Specimen Sheet
[ Week 3 ]
Typo_4_Text_Part 2
Indicating Paragraphs
*Pilcrow
- a holdover from medieval manuscripts seldom use today
- used in text to indicate paragraph spacing
*Leading
- 'line space' (the space between each line)
- if line space is 12pt, then paragraph space is 12 pt (to ensure cross-alignment columns of text)
figure 4.1 - text that including
pilcrow & figure 4.2 - leading
*Line Space VS Leading
- line spacing starts with the
descender from one sentence to the descender
of another sentence while leading is
the text of the top or center does not touch
the descender of the next line (a lead of
1/2 point)
figure 4.3 - line space vs leading
*Standard Indentation
- the indent is the same size of the line
spacing / the same as the point size of your
text
- used to save space in newspapers
- whenever using indentation, we should
never use left alignment (ragging on left
& right)
- indentation best used when the text is
justified
figure 4.4 - standard indentation
*Widows & Orphans
- two unpardonable gaffes
- designers must take great care to avoid the
occurrence of these
- Widow is a short line of type left
alone at the end of a column of text
- Orphan is a short line of type left
alone at the start of new column
HOW TO SOLVE WIDOWS & ORPHANS ?
- rebreak line endings of paragraph so that
the last line of any paragraph is not
noticeably short
- make sure that no column of text starts with
the last line of the preceding paragraph
- if doing kerning & letter spacing, the
max points is 3
figure 4.5 - widows & orphans
*Highlighting Text
- different kinds of emphasis require different
kinds of contrast
- maintain strong reading axis
WAYS TO HIGHLIGHTING TEXT...
- Italics
- + Boldness
- + Boldness with different typeface family (some have to change font size)
- Change colour of text (cyan, black, magenta, yellow)
- Create box around the text
figure 4.6 & 4.7 - examples of how to
highlight text within a column of text
*Headline within Text
- there are kinds of subdivision within text of a
chapters
- being labelled (A,B and C) according to the level of
importance
- typographers task is to make sure these heads clearly
signify to the reader that the relative importance
within the text and th their relationship to each other
- have to decide the hierarchy of information (headline,
sub headline,...)
A Head
- indicates a clear break between the topics within a
section
- set larger than the text, in small caps & in bold
B Head
- subordinate to A heads
- indicate a new supporting argument / example for the topic
at hand
- b heads are shown in small caps, italic, bold serif &
bold san serif below
C Head
- not common, highlights specific facets of material within
B head text
- not materially interrupt the flow of reading
- shown in small caps, italics, serif bold & san serif
bold
- followed by at least an em space for visual separation
*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 below, one line of headline type cross-aligns with two lines
of text type, and (right; bottom left) four lines of headline
type cross-align with five lines of text type
[ Week 4 ]
Typo_2_Basic
Describing Letterforms
figure 5.1 - Type Anatomy
*Baseline
- the imaginary line the visual base of the letterforms
*Median
- the imaginary line defining the x-height of letterforms
*X-height
- the height in any typeface of the lowercase 'x'.
*Stroke
- any line that defines the basic letterform
*Apex / Vertex
- the point created by joining two diagonal stems (apex above and
vertex below)
*Arm
- short strokes off the stem of the letterform, 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
- the bow may be either open or closed
*Bracket
- the transition between the serif and the stem
*Cross Bar
- the horizontal stroke in a letterform that joins two stems together
*Cross Stroke
- The horizontal stroke in a letterform that joins two stems together
*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 form the main stem or body of the
letterform
*Em/en
- referring to the width of an uppercase M
- em is now the distance equal to the size of the typeface (an em in
48 points)
- en is half of the size of an em
- most often used to describe em/en spaces and em/en dashes
*Finial
- the rounded non-serif terminal to a stroke
*Leg
- short stroke off the stem of the letterform, either at the bottom of
the 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
*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
- the extension the articulates the junction of the curved and
rectilinear stroke
*Stem
- the significant vertical or oblique stroke
*Stress
- the orientation of the letterform, indicated by the think stroke in
round forms
*Swash
- the flourish that extends the stroke of the letterform
*Tail
- the curved diagonal stroke at the finish of certain letterforms
*Terminal
- the self-contained finish of a stroke without a serif
- terminals may be flat ('T' above), flared, acute, ('t' above), grave,
concave, convex, or rounded as a ball or a teardrop (see finial)
The Font
*Uppercase
- capital letters, including certain accented vowels, the c cedilla
and n tilde, and the a/e and o/e ligatures
*Lowercase
- include the same characters as uppercase
figure 5.2 & figure 5.3 - type anatomy
*Small Capitals
- uppercase letterforms draw to the x-height of the typeface
- small caps are primarily found in serif fonts as part of what is
often called expert set
- most type software includes as a style command that general a
small cap based on uppercase forms
- do not confuse real small caps with those artificially
generated
figure 5.4 - Small Capitals Uppercase Letterforms figure 5.5 - Small Capitals
*Uppercase Numerals
- also called lining figures
- these numerals are the same height as uppercase letters and are
all set to the same kerning width
- most successfully used with tabular material
*Lowercase Numerals
- known as old styles figures or text figures
- these numerals are set to x-height with ascenders and descenders
- best used when ever u would use upper and lowercase letterforms
- lowercase numerals are far less common in sans serif type-faces than in self
figure 5.6 - uppercase numerals &
figure 5.7 - lowercase numerals
*Italic
- most fonts today are produced with a matching italic
- small caps, however, are almost always only roman
- the forms in a italic refer back to fifteenth century
Italian cursive handwriting
- oblique are typically based on the roman form of the
typeface
figure 5.8 - italic fonts
*Punctuation, miscellaneous characters
- it's important to be acquainted with all the
characters available in a typeface before choosing the
appropriate type for a particular job
*Ornaments
- used as flourishes in invitations or certificates
- usually are provided as a font in a larger typeface family
figure 5.9 - punctuation, miscellaneous characters &
figure 5.10 - ornaments
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 fifteenth century Italian handwriting on which the forms are based
- Oblique are based on roman form of typeface
*Boldface
- characterised by a thicker stroke than a roman form
- also be called 'semibold', 'medium', 'black', 'extra bold', or super
- in some typefaces (notably Bodoni), the boldest rendition of the typeface is referred to as 'Poster'
*Condensed
- a version of the roman form, and extremely condense styles are often called 'compressed'
*Extended
- an extended variation of a roman font
figure 5.11 - describing typefaces
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1yTlqPJwo-1Ts-VNujsvy29imGpdQUb3l/preview" width="640" height="480" allow="autoplay"></iframe>
Task 1: Exercises - Type Expression
Type Expression
For the first exercise in this task, we were assigned four words to interpret and express creatively which are Bloom, Smoke, Spicy, and Fancy. The composition had to be executed in only black and white, with no visual elements, illustrations and distortion allowed. Additionally, we were limited to using only the ten typefaces provided for the task.
- ITC New Baskerville Std
- Janson Text LT Std
- Gill Sans Std
- Bembo Std
- Serifa Std
- Bodoni Std
- Futura Std
- Univers LT Std
- ITC Garamond Std
- Adobe Caslon Pro
Research
To kickstart my creative process, I dived into Pinterest for inspiration and to help shape my vision and drew my inspiration for the chosen words. I found several standout pieces that sparked ideas and guided the direction of my work.
figure 6.1 - reference from
Initial sketches of 4 words : BLOOM, SMOKE, SPICY, FANCY
I've created these sketches during week 2. I noticed that many of the designs ended up not special enough to stand out so I putting more effort to do some research. Ms Vitiya also giving me some opinions about that my sketches of 'bloom' words is not count as typography expression words, and she showing me some of the examples so that I can do better sketch and have a better understand what I need to do.
figure 6.2 - sketches of words of 'bloom' &
'smoke'
figure 6.3 - sketches of words of 'spicy' &
'fancy'
In Week 3, I began the process of digitizing my sketches in Adobe Illustrator. I found that the results in Adobe Illustrator are far less effective than the sketch, as I’m still not very familiar with using AI. But I still did my best to digitize it all the 4 words.
figure 6.4 - JPEG of Final Type Expression
Final Outcome
figure 6.5 - PDF of Final Type Expression
Type Expression - Animation
Here comes to second exercise, we had to pick a word from the 4 type expressions to create a GIF animation. I choose 'Smoke'. My first concept is to create appearance of smoke, evoking a sense of mystery, fluidity, and unpredictability. First, I follow the tutorial to create all the frames in Illustrator.
figure 6.6 - Animation frames in illustrator
Next, I imported the frames into Photoshop, where I organized the animation and fine-tuned the timing for each frame using the Timeline Panel.
figure 6.8 - Final GIF animation of 'Smoke'
figure 6.9 - Final GIF animation of 'Smoke'
Text Formatting - Kerning & Tracking
In our next exercise, we using InDesign to adjust the kerning and tracking
of our names by 10 different fonts provided. This task was relatively quick
and straightforward, and we completed it during our Week 5 practical session
with guidance from Ms Vitiya. The main objective is not only to learn kerning and tracking but to gain
familiarity with the functions of Adobe InDesign.
figure 6.10 (left) - My name in 10 different fonts before Kerning & Tracking
&
figure 6.11 (right) - My name in 10 different fonts after Kerning & Tracking
Text Formatting Layout
The final exercise for Task 1 is using InDesign to create text
layouts. We are
required to come up with six different layouts for Ms Vitiya to review
and finalize.
figure 6.12 - JPEG of 6 layouts that I have made
figure 6.13 - PDF of 6 layouts that I have made
Final Outcome
I choose this layout to be the final version of Text Formatting Layout.
figure 6.14 - PDF of Final Text Formatting Layout without grids
figure 6.15 - PDF of Final Text Formatting Layout with grids
Text Formatting Details
HEADLINE
Typeface: Gill Sans Std
Font/s: Gill Sans Extra Bold
Type Size/s: 72 pt
Leading: 36 pt
Paragraph spacing: 0 pt
BYLINE
Typeface: Futura Std
Font/s: Futura Std Heavy
Type Size/s: 36 pt
Leading: 12 pt
Paragraph spacing: 4.233 mm
BODY
Typeface: Bembo Std
Font/s: Bembo Std Semibold
Type Size/s: 10 pt
Leading: 11 pt
Paragraph spacing: 3.881 mm
Characters per line: 53
Alignment: Left Justification
Margins: 26 mm top, 26 mm left, 26 mm right, 26 mm bottom
Columns: 2
Gutter: 10 mm
Feedback
Week 1
General Feedback:
This week, we were introduced to the typography module and tasked with creating word expressions for Bloom, Fancy, Smoke, and Spicy using ten chosen fonts. We set up our e-portfolios and will prepare sketches for next week.
Week 2
General Feedback:
This week, Ms. Vitiyaa reviewed our type expression sketches individually. We were instructed to submit our sketches on the Facebook group and to create a private Gmail account for university use. Additionally, we need to watch three lecture videos and update our e-portfolios and feedback sheets.
Specific Feedback:
Ms Vitiya giving me some opinions about that my sketches of 'bloom' words is not count as typography expression words, and she showing me some of the examples so that I can do better sketch and have a better understand what I need to do.
Week 3
General Feedback:
We were given class time to finalized our sketches and digitize them using Adobe Illustrator. We also received feedback on how to improve our designs during the digitization process. Besides,we were also told to start doing our Task 2 exercise and make sure all the works are finish and submitted on week 6.
Week 4
General Feedback:
I am unable to attend this class due to an urgent matter.
Week 5
General Feedback:
This week, we have chosen the deadline of Task 1 by ourselves which is 29th October at 11:59 PM. It’s essential to make sure that our e-portfolios are fully prepared to avoid losing of marks. Ms Vitiya mentioned feedback section is very important.
Specific Feedback:
Ms. Vitiya pointed out that can only use black and white picture for the text formatting exercise.
Week 6
General Feedback:
I am unable to attend this class due to an urgent matter.
Reflection
*Experience
Working on this typography project has been both challenging and rewarding.
I’ve developed a deeper appreciation for the art of typography and the
thoughtfulness required behind each design choice. This project has shown me
that typography is not just about arranging letter, it's about conveying a
message with clarity and impact.
*Observation
This task encouraged me to think beyond traditional design approaches,
challenging me to push the boundaries of creativity within set
limitations. I learned that typography often demands fresh, we must
think out of the box to create a design that truly resonates.
*Findings*
I now realize that typography is more complex than I initially expected. It
requires extensive research, time, and technical skills to master. Every
aspect, from font selection to layout adjustments, must be meticulously
planned to achieve a harmonious and readable design, underscoring the
dedication needed for this craft.
Further Reading
figure 6.16 - Designing with type
By James Craig & Irene Korol Scala · 176 Pages · 1971 (Revised in 2006)
First published in 1971, Designing with Type is now in its fifth edition. Its longevity is a testament to its status
as a classic. Commonly used in college curriculums on design, it feels
more like a school workbook than a traditional book.
1. The Fundamentals of Typography
- Typography is more than just selecting fonts; it's about arranging type to create visually compelling and functional designs.
- The book emphasizes the balance between readability and aesthetics.
2. Anatomy of Type
- Explains the essential parts of letters (e.g., ascenders, descenders, serifs, counters) to help designers understand typefaces better.
- Knowledge of type anatomy aids in selecting and customizing fonts.
3. Typeface Classifications
- Breaks down typefaces into categories such as:
- Serif: Traditional and formal (e.g., Times New Roman).
- Sans Serif: Modern and clean (e.g., Helvetica).
- Slab Serif: Bold and strong (e.g., Rockwell).
- Script: Elegant and decorative (e.g., Brush Script).
- Display: Unique and attention-grabbing, used for headlines.
- Each category suits different contexts and moods in design.
4. Type as a Design Element
- Typography isn't just about conveying information; it can also act as a visual element in design.
- Effective use of type involves considering spacing, alignment, size, and contrast.
5. Hierarchy and Emphasis
- Guides us on how to establish a visual hierarchy in text:
- Use size, weight, and style to prioritize information.
- Ensure key points stand out while maintaining overall balance.
6. Combining Typefaces
- Offers tips for mixing typefaces effectively:
- Pair contrasting fonts for dynamic appeal (e.g., Serif + Sans Serif).
- Avoid using too many typefaces to maintain cohesion.
7. The Grid System
- Discusses how grids provide structure and consistency in layouts.
- Using grids ensures proper alignment and spacing, improving overall readability.
8. Creative Typography
- Encourages experimenting with typography to create unique designs.
- Includes examples of manipulating type shapes, spacing, and arrangement for artistic impact.
Comments
Post a Comment