Digital Typography CPSC 453 Fall 2018 Sonny Chan What is the - - PowerPoint PPT Presentation

▶
digital typography
SMART_READER_LITE
LIVE PREVIEW

Digital Typography CPSC 453 Fall 2018 Sonny Chan What is the - - PowerPoint PPT Presentation

Jun 27, 2023 551 likes •1.3k views

Digital Typography CPSC 453 Fall 2018 Sonny Chan What is the difference between a font and a typeface? Outline for Today A short history lesson Categorizing typefaces Terms and nomenclature Digital representations of typefaces

slide-1
SLIDE 1

Digital Typography

CPSC 453 – Fall 2018 Sonny Chan

slide-2
SLIDE 2

What is the difference between a font and a typeface?

slide-3
SLIDE 3

Outline for Today

  • A short history lesson
  • Categorizing typefaces
  • Terms and nomenclature
  • Digital representations of typefaces
  • Rendering fonts
slide-4
SLIDE 4

A very brief account of the

history of type

slide-5
SLIDE 5

The Greek Alphabet

  • ca. 800 BC
slide-6
SLIDE 6

Very Early Reproduction

first millennium

slide-7
SLIDE 7

The Book of Kells

  • ca. 9th century AD
slide-8
SLIDE 8

Beowulf

  • ca. 11th century AD
slide-9
SLIDE 9

Johannes Gutenberg

slide-10
SLIDE 10

Gutenberg Press, ca. 1450

slide-11
SLIDE 11
slide-12
SLIDE 12
  • The Origin of “Cases”

Upper Case, Lower Case, and a California Job Case

slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15

425 Years Later…

TRS-80, Tandy Corporation, ca. 1977

slide-16
SLIDE 16

AppleWorks Word Processor

Apple Computer, ca. 1984

slide-17
SLIDE 17

John Warnock

slide-18
SLIDE 18

Steve Jobs

slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21 ฀

฀฀฀฀฀฀ ฀฀฀฀ ฀ ฀฀฀฀ ฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀

฀฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀ ฀ ฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀฀฀฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀
  • ฀฀฀฀฀฀฀฀
฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀ ฀฀฀฀
  • ฀฀฀฀฀฀
  • ฀฀฀฀฀฀฀
฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀฀ ฀฀฀฀฀฀฀฀
slide-22
SLIDE 22

Categorizing

typefaces

slide-23
SLIDE 23

Many Categories…

but we’ll start with these six

slide-24
SLIDE 24
slide-25
SLIDE 25
slide-26
SLIDE 26
slide-27
SLIDE 27
slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30

Terms and

nomenclature

slide-31
SLIDE 31

Big Caslon xq

ascender x-height baseline descender

slide-32
SLIDE 32

???

slide-33
SLIDE 33

What do you mean by

12 points?

slide-34
SLIDE 34

Units of Measurement

1 inch = 6 picas = 72 points

1 pica = 12 points

slide-35
SLIDE 35

What is a

12 point font?

slide-36
SLIDE 36

Type Size

is the size of the body on which the type is theoretically meant to be cast

slide-37
SLIDE 37

Leading

is the distance from one baseline to the next

Letterforms that honor and elucidate what humans see and say deserve to be honored in their turn. Well-chosen words deserve well-chosen letters; these in their turn deserve to be set with affection, intelligence, knowledge and skill. Letterforms that honor and elucidate what humans see and say deserve to be honored in their turn. Well-chosen words deserve well-chosen letters; these in their turn deserve to be set with affection, intelligence, knowledge and skill. “single spaced” – 12/16 “set solid” – 12/12

this is an example

  • f negative leading

negative leading – 16/14

slide-38
SLIDE 38

Spacing

M n t

1 ½ ⅓ ¼ ⅕

slide-39
SLIDE 39

A Family

  • f letterforms

Hoefler Text roman and its italic In bold face and small caps Text figures: 1234567890 and TITLING 12345 FIGURES 67890

slide-40
SLIDE 40

Times New Roman and its italic In bold face and SMALL CAPS Figures: 1234567890 Helvetica roman and its oblique In bold face and SMALL CAPS Figures: 1234567890

slide-41
SLIDE 41

Weight

Helvetica Neue UltraLight Helvetica Neue Thin Helvetica Neue Light Helvetica Neue Regular Helvetica Neue Medium Helvetica Neue Bold Helvetica Neue Condensed Bold Helvetica Neue Condensed Black

slide-42
SLIDE 42

Weight

Gill Sans Light Gill Sans Regular Gill Sans SemiBold Gill Sans Bold Gill Sans UltraBold

slide-43
SLIDE 43

Kerning: a well-groomed font?

“Ask Jeff” or ‘Ask Jeff’. Take the chef d’œuvre! Two of [of] (of) ‘of’ “of” of? of! of*. Ydes, Yffignac, Grande, Les Woëvres, the Fret de Wœvres, the Voire and Vauvise are in France, but Ypres is in

  • Belgium. Yves is in heaven;

D’Amboise is in jail. Lyford’s in Texas & L’Anse-aux- Griffons in Québec.

“ Ask Jeff” or ‘ Ask Jeff’. Take the chef d’œuvre! Two of [of] (of) ‘of’ “of” of? of! of*. Y des, Yffignac, Grande, Les W

  • ëvres, the Fret de W

œvres, the V

  • ire and V

auvise are in France, but Ypres is in

  • Belgium. Y

ves is in heaven; D’Amboise is in jail. Lyford’s in Texas & L ’Anse-aux- Griffons in Québec.

slide-44
SLIDE 44

Kerning

Type Await Wreck Type Await Wreck

slide-45
SLIDE 45

Ligatures

ff fj fm ffi ffl

ff fi fl ffi ffl

staff fjrst fmoor suffix waffle

slide-46
SLIDE 46

Zapfinp

slide-47
SLIDE 47
slide-48
SLIDE 48

Sources

slide-49
SLIDE 49

Representations in

digital form

slide-50
SLIDE 50

American Standard Code for Information Interchange

American Standards Association, 1963 & 1986

slide-51
SLIDE 51

Unicode Consortium, 1991

slide-52
SLIDE 52

c

A Glyph

  • f the letter ‘c’
slide-53
SLIDE 53

A Glyph

  • f the letter ‘c’
slide-54
SLIDE 54

What is the difference between a character and a glyph?

slide-55
SLIDE 55
slide-56
SLIDE 56

In a font, is the mapping

  • ne-to-one?
slide-57
SLIDE 57

aå eé ıì oô uü ff fi fl ffi ffl fu aa ee iı oo uu

slide-58
SLIDE 58

Kerning Tables

[from creativepro.com]

slide-59
SLIDE 59

Stick all these things into a file…

TrueType Apple/Microsoft late 1980s OpenType Microsoft/Adobe 1996 Adobe Type 1 Adobe Systems 1984

slide-60
SLIDE 60

Rendering text with

digital type

slide-61
SLIDE 61

In the old days…

  • e.g. “Friday”

0x46

slide-62
SLIDE 62

Nowadays…

we just have a bunch of points

slide-63
SLIDE 63

Good thing we learned all about

Bézier curves!

slide-64
SLIDE 64

Rendered Outlines

Hardly what Gutenberg wanted… c

c c

slide-65
SLIDE 65

How do we draw a solid glyph?

Just like the professionals do! c

c c

slide-66
SLIDE 66

Font Units and Glyph Metrics

[from ftgl.sourceforge.net]

“font units” (usually ~1000)

slide-67
SLIDE 67

Other considerations?

Composite Glyphs Ligatures Kerning

slide-68
SLIDE 68

Your basic text rendering algorithm

  • Load a font (optionally choosing a variant)
  • Get a (composite) glyph for your character
  • ptionally check for ligatures
  • Draw a whole bunch of Bézier curves
  • Advance by the glyph’s specified amount
  • ptionally check kerning table
  • Repeat for next character
slide-69
SLIDE 69

Manual Hinting

slide-70
SLIDE 70

Manual Hinting

slide-71
SLIDE 71

Microsoft ClearType

slide-72
SLIDE 72

Things to Remember

  • Typography has a very rich history
  • Don’t throw it all out the door when you digitize type!
  • Once you learn the terminology, you will be able to

identify the important features of typefaces

  • Computer fonts are digital encodings of typefaces
  • Bézier curves and splines encode glyph shapes
  • They are not all made equal!