1. TMD1073 Digital Illustration Chapter 3 : Typography
By: Pn Nurul Shakura Binti Abu Talib Multimedia Lecturer Blok B, Level 3 1

2. CHAPTER 3 Typography OUTLINE Font and Face Anatomy and Terminologies2
Typography
Font and Face
Anatomy and Terminologies
Type categories
Font Setting
How to set type
Print, screen and web typeface
The reason to use serif or san serif in body copy
Rule in Typography

3. Text and Typography? Typography Text ; Type ; Typography ;3
Text ;
written language represent a combination of letters and word
Used to express thoughts, ideas, and emotions.
Type ;
the visual characteristic of text where letterform are stylized.
Typography ;
design composition using type (with an emphasis on design) including the arrangement, style, appearances of type.
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

5. Font and Face Typography Letterform;5
Letterform;
The unique shapes of individual letters and typeface are identified by their letterform.
There are categorized as Serif, San Serif and Script.
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

6. Font and Face Typography Letterform;6
Letterform;
The final form of letter is a design product, resulting in a series of letter called a font.
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

7. Font and Face Typography Typeface ; Also known as font family7
Typeface ;
Also known as font family
Graphic representation of a letters, numbers and symbols in a variety of styles and size.
It refer to specific design or look of type.
A set of character has a similar structure in terms of proportion, angle, stroke, weight and detail.
Style refer to the minor enhancements of types (italic, bold, underline and so on).
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

8. Font and Face Typography Typeface ; 8
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

9. Font and Face Typography Font family ;9
Font family ;
A group of related fonts, with similar width and height attributes, that vary in term of style, such as bold, italic, condensed, light and soon.
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

10. Font and Face Typography Typeface Font Font family ; 10
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

11. Fonts and Faces Typography11
Fonts and Faces
A style of font can be divide into 3 main categories which are weight, width and posture.
Weight
Concentrate on the lightness or darkness of typestyle.
Width
The amount of horizontal space the typestyle utilize.
Posture
Determine by the angle of its character; the tilt, left or right of the character stroke

12. Typography 12
Fonts and Faces

13. Anatomy and Terminologies
Typography
Anatomy and Terminologies 13
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

14. Anatomy and Terminologies
Typography
Anatomy and Terminologies 14
Baseline
Horizontal line underneath letters
an imaginary line upon which each character rests
Characters that appear next to each other are usually lined up so that their baselines are on the same level

15. Anatomy and Terminologies
Typography
Anatomy and Terminologies 15
Meanline
Line that marks the top edge or height of lowercase letters
X-Height
the height of the lowercase letter x
can vary greatly from typeface to typeface, even at the same point size.

16. Anatomy and Terminologies
Typography
Anatomy and Terminologies 16
Cap Height
Line that marks the height of all capital letters in a typrface
Height from the baseline in any font to the top of most capitals
Note that well-formed rounded characters, like O, Q and S, often are taller than other caps, and may drop below (dent) the baseline

17. Anatomy and Terminologies
Typography
Anatomy and Terminologies 17
Ascender
The upper portion of lowercase letter that extends above the
The part of some lowercase letters which ascends above than the x-height.
Example ; b, h or d

18. Anatomy and Terminologies
Typography
Anatomy and Terminologies 18
Descender
The lower portion of a lowercase letter that extends below the
The part of some lowercase letters that descends below the baseline.
In some typefaces, even uppercase letters like J or Q may descend below the baseline.
Example; y, p or q

19. Anatomy and Terminologies
Typography
Anatomy and Terminologies 19
Stem
The main vertical stroke(s) of a letter (most evident in I and H)
Serif
A typeface with finishing stroke at the top and bottom of
Small, finishing strokes on the arms, stems and tails of characters.
Traditionally, Serif typefaces are considered better for large volumes of text because the serifs make it easier for eye to move along, horizontally.

20. Serif and sans serif typefaces
Type categories
Serif and sans serif typefaces 20
Serif fonts
have that little detail at the end of the letter strokes.
They are traditional and can be found as text in books and copy in newspapers.
These typeface have thick and thin lines (which don’t produce well on small size on the screen)
Sans
means "without," so sans serif fonts are those without that extra detail on the ends.
Sans serif fonts are more casual and contemporary.
Easier to read at smaller size due to more uniform stroke style.

21. Type categories 21

22. Font Setting Sizing Spacing Tracking Kerning Word spacing Leading
Typography
Font Setting 22
Sizing
Spacing
Tracking
Kerning
Word spacing
Leading

23. Font Setting
Sizing 23
the Point system of measurement was introduced by type designers in the 17th century.
A single Point is equal to millimetres
there are 72 points in an inch
12 points together are called a Pica

24. Font Setting
Spacing 24
refers to the horizontal space each character in a typeface requires
Differential Spacing adjusts the gaps between characters accordingly
Mono spacing gives each character the same space regardless of width.

25. Font Setting
Tracking 25
refers to uniformly adjusting the spacing between all the characters in a word, sentence or paragraph.

26. Font Setting
Kerning 26
the process of manually adjusting the individual space between two adjacent characters.

27. Font Setting
Word spacing 27
refers to the amount of space between words in a sentence.

28. Font Setting
Leading 28
The vertical distance between adjacent lines of type in a paragraph
Longer lines require greater leading to allow the eye to find the next line as it moves back and down
Expressed in Points
A type size of 12pt typically requires a leading value of at least 14pt.

29. Font Setting
Leading 29

30. How to set Type Know your output product either Screen or print or Web
Typography
How to set Type 30
Know your output product either Screen or print or Web
Choose between Serif or San Serif typeface.
Adjust the size, alignment and style of the typeface
Choose the suitable color for the font.
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

31. Print, Screen and Web Typeface
Typography
Print, Screen and Web Typeface 31
The placement and arrangement of type on the screen (also known as Screen Layout) as well as visual hierarchical (come into play when considering how type is read).
When designing for multimedia, type need to be well organized, readable, accessible and easy on the eyes.
Arranging the type is the creative part of using text and what is refer to as typographic design.
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

32. Print, Screen and Web Typeface
Typography
Print, Screen and Web Typeface 32
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

33. Type for Screen vs type for Print
Print, Screen and Web Typeface
Type for Screen vs type for Print 33 #
Type Attribute
Screen
Print 1
Typeface
At small size. Clean typeface with minimal ornamentation are the best
Any typeface as long as it is not too small for the average reader(minimum 8 point) 2
Size of text
Larger text easier to read on screen. Sans Serif should at least 10 points, serif should at least 12 point.
Most size and style are readable. Type size between 8 to 11 point is acceptable. 3
Legibility
Anti-aliased type(for smooth edges) and typeface with even stroke allow for greater readability.
Use vector type for clean edge and resizing capabilities.
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

34. Type for Screen vs type for Print
Print, Screen and Web Typeface
Type for Screen vs type for Print 34 #
Type Attribute
Screen
Print 4
Kerning and tracking
Letter spacing that is too tight or too wide compromises readability, specially with small anti-aliased type
Various amount of spacing are used for both communicating a message and adding visual interest 5
Leading
Too much space between lines of text interrupts the flow of reading sentences and paragraph on the screen
Increased line space can be used as there is not a screen-dimension limit. Wider leading is more readable in print 6
Amount of text
Use equal amounts of text and image for a balance design and readability on the screen
Text can be minimal or excessive depending on the purpose of the print place and still be readable
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

35. Type for Screen vs type for Print
Print, Screen and Web Typeface
Type for Screen vs type for Print 35 #
Type Attribute
Screen
Print 7
Length of line
Maintain 10 to 12 words per line when using paragraph; shorter column are easier to read
Using 18 to 20 word per line is adequate. Line length varies depending on the kind of print piece and font size, but generally longer lines are acceptable especially when using serif font 8
Tone and color
Use contrast so that text is legible, and used spot color in bright hues to draw attention to words
Color can be specified since color properties for print are more regulated.
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

36. Print, Screen and Web Typeface
Type for the Web 36
The type is design for screen reading.
HTML was design for text documents to be displayed on computer screen, so font are limited to what the user have in their computer.
HTML used text format embed in the code of a web page to designate attributes for text, such as bold or italic by using bracketed symbol or tag.
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

37. Print, Screen and Web Typeface
Type for the Web 37
Jennifer Coleman Dowling, USA, McGraw-Hill books. Multimedia DeMystified, Chapter 4, Text and Typography

38. The reasons for the use of serif or sans serif faces for body copy.
Print, screen and web typeface 38
The reasons for the use of serif or sans serif faces for body copy.
1. Serif faces are the norm for most books and newspapers making them familiar and comfortable to readers. 2. The serifs on some faces aid readability by moving the eye from one letter to the next connecting individual shapes to form whole words. 3. Serif faces often have a subdued, formal, or serious look. 4. Sans Serif faces are often crisper, bolder, or more informal. 5. Sans Serif faces are often more readable than serif faces when set in very small type (such as for footnotes, captions, and "fine print") 6. Serif faces printed from 300dpi or lower quality desktop printers or printed on textured paper may lose detail in the thin strokes and delicate serifs.

39. Print, screen and web typeface
RULES IN TYPOGRAPHY 39
Never use more than two difference type
It’s the unwritten rule of typography
Use a grid
It provides typeface the frame work and underlying structure
“the note are refer to book Netherlands, PageOne; Never Use More than Two Different Typeface and others 50 Ridiculous Typography Rules; 2010”

40. Print, screen and web typeface
RULES IN TYPOGRAPHY 40
Good type speak louder than words
It’s well crafted and useful, and set up attractive looking words
“the note are refer to book Netherlands, PageOne; Never Use More than Two Different Typeface and others 50 Ridiculous Typography Rules; 2010”

41. Print, screen and web typeface
RULES IN TYPOGRAPHY 41
Make it legible
Some earned or unearned interest that’s gives its living energy to the page
“the note are refer to book Netherlands, PageOne; Never Use More than Two Different Typeface and others 50 Ridiculous Typography Rules; 2010”

42. Print, screen and web typeface
RULES IN TYPOGRAPHY 42
Know your audience
The typeface used need to reflect the brand you’re working on
“the note are refer to book Netherlands, PageOne; Never Use More than Two Different Typeface and others 50 Ridiculous Typography Rules; 2010”

43. Print, screen and web typeface
RULES IN TYPOGRAPHY 43
“the note are refer to book Netherlands, PageOne; Never Use More than Two Different Typeface and others 50 Ridiculous Typography Rules; 2010”

44. Print, screen and web typeface
RULES IN TYPOGRAPHY 44
“the note are refer to book Netherlands, PageOne; Never Use More than Two Different Typeface and others 50 Ridiculous Typography Rules; 2010”

45. Print, screen and web typeface
RULES IN TYPOGRAPHY 45
“the note are refer to book Netherlands, PageOne; Never Use More than Two Different Typeface and others 50 Ridiculous Typography Rules; 2010”

46. Revision Define Typography. Explain 3(THREE) Anatomy of text.
What is Serif?
Explain 3(THREE) reasons for the use of serif or sans serif faces for body copy.
What is Sizing in font Setting?
Brief about Spacing.
What is Tracking?
Describe Kerning and Word spacing.
What is Leading?
Describe TWO(2) difference between Screen and Print typeface