8/12/2019 Chapter 5 Typography

1/27

1

Chapter 5 :

Typography

By: Pn Nurul Shakura Binti Abu Talib

Lecturer Multimedia

Blok B, Level 3

Digital

Illustration

8/12/2019 Chapter 5 Typography

2/27

2

CHAPTER 5 OUTLINE

Typhography

Terminologies

Anatomy of text

More terminology of text

Fonts and Faces

Font Setting

8/12/2019 Chapter 5 Typography

3/27

3

Typography

the art of arrangement,style, appearance and printing of type

and typefaces

Manipulating type is the essence ofall textual design

Typographers often call collections of

fonts, foundries

http://flywebmaster.com/webdesign/tips/type_layout.phphttp://flywebmaster.com/webdesign/tips/type_layout.php

8/12/2019 Chapter 5 Typography

4/27

4

Anatomy of Type

8/12/2019 Chapter 5 Typography

5/27

5

Anatomy of Type

Baseline

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

8/12/2019 Chapter 5 Typography

6/27

6

Anatomy of Type

X-Height

the height of the lowercase letter x

can vary greatly from typeface to typeface,

even at the same point size.

8/12/2019 Chapter 5 Typography

7/27

7

Anatomy of Type

Cap Height

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

8/12/2019 Chapter 5 Typography

8/27

8

Anatomy of Type

Point Size

the distance from the top of the

highest ascender to the bottom of thelowest descender in points

1 inch = 12 picas = 72 points = 25.4 mm

8/12/2019 Chapter 5 Typography

9/27

9

Anatomy of Type

Ascender- The part of somelowercase letters (such as b, h or d) which

ascends above than the x-height.

Descender- The part of somelowercase letters (such as y, p or q) thatdescends below the baseline. In some

typefaces, even uppercase letters like J orQ may descend below the baseline.

8/12/2019 Chapter 5 Typography

10/27

10

Anatomy of Type

8/12/2019 Chapter 5 Typography

11/27

11

Anatomy of Type

Terminal - Not a serif but a curved strokeusually apparent on the tail or stem of

some letters (such as j, y, r and a)

Stem - The main vertical stroke(s) of a letter(most evident in I and H)

8/12/2019 Chapter 5 Typography

12/27

12

Anatomy of Type

8/12/2019 Chapter 5 Typography

13/27

13

Anatomy of Type

Two-story character -Letter that has twocounter spaces where one is above

the other.

Serif- Small, finishing strokes on the arms,stems and tails of characters. Traditionally,Serif typefaces are considered better for

large volumes of text because the serifsmake it easier for eye to move along,horizontally.

8/12/2019 Chapter 5 Typography

14/27

14

Anatomy of Type

8/12/2019 Chapter 5 Typography

15/27

15

Fonts and FacesA style of font can be devide into 3 main

categories which are weight, width andposture.

WeightConcerntrate on the lightness or

darkness of typestyle.

WidthThe amount of horizontal space the

typestyle utilize.

PostureDetermine by the angle of its

character; the tilt, left or right of thecharacter stroke

8/12/2019 Chapter 5 Typography

16/27

16

Serif and sans serif

typefaces

Serif fonts have that little detail at the endof the letter strokes. They are traditional

and can be found as text in books andcopy in newspapers.

Sans means "without," so sans serif fonts arethose without that extra detail on the ends.

Sans serif fonts are more casual andcontemporary.

8/12/2019 Chapter 5 Typography

17/27

17

8/12/2019 Chapter 5 Typography

18/27

18

The reasons for the use of serif orsans serif faces for body copy.

1. Serif faces are the norm for most books andnewspapers making them familiar and comfortable toreaders.

2. The serifs on some faces aid readability by moving theeye from one letter to the next connecting individualshapes to form whole words.

3. Serif faces often have a subdued, formal, or seriouslook.

4. Sans Serif faces are often crisper, bolder, or moreinformal.

5. Sans Serif faces are often more readable than seriffaces when set in very small type (such as for footnotes,captions, and "fine print")

6. Serif faces printed from 300dpi or lower quality desktopprinters or printed on textured paper may lose detail inthe thin strokes and delicate serifs.

8/12/2019 Chapter 5 Typography

19/27

19

Font Setting

Sizing

Spacing

Tracking

Kerning

Word spacing

Leading

8/12/2019 Chapter 5 Typography

20/27

20

Font Setting Sizing

the Point system of measurement wasintroduced by type designers in the 17thcentury.

A single Point is equal to 0.3515 millimetres there are 72 points in an inch

matches the 72 dpi resolution of computerdisplays

12 points together are called a Pica

8/12/2019 Chapter 5 Typography

21/27

21

Font Setting Spacing

refers to the horizontal space eachcharacter in a typeface requires

Differential Spacing adjusts the gaps

between characters accordinglyMono spacing gives each character the

same space regardless of width.

8/12/2019 Chapter 5 Typography

22/27

22

Font Setting tracking

refers to uniformly adjusting the spacingbetween all the characters in a word,sentence or paragraph.

8/12/2019 Chapter 5 Typography

23/27

23

Font Setting kerning

the process of manually adjusting theindividual space between two adjacentcharacters.

8/12/2019 Chapter 5 Typography

24/27

24

Font Setting word spacing

refers to the amount of space betweenwords in a sentence.

8/12/2019 Chapter 5 Typography

25/27

25

Font Setting leading

the vertical distance between adjacentlines of type in a paragraph

The exact leading value is often

determined by the line length Longer lines require greater leading to

allow the eye to find the next line as itmoves back and down

expressed in PointsA type size of 12pt typically requires a

leading value of at least 14pt.

8/12/2019 Chapter 5 Typography

26/27

26

Font Setting leading

8/12/2019 Chapter 5 Typography

27/27

Revision

1. Define Typhography.

2. Explain 3(THREE) Anatomy of text.

3. What is Serif?

4. Explain 3(THREE) reasons for the use ofserif or sans serif faces for body copy.

5. What is Sizing in font Setting?

6. Brief about Spacing.

7. What is Tracking?

8. Describe Kerning and Word spacing.

9. What is Leading?

27