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
• Rendering fonts A very brief account of the history of type The Greek Alphabet ca. 800 BC Very Early Reproduction first millennium The Book of Kells ca. 9th century AD Beowulf ca. 11th century AD Johannes Gutenberg Gutenberg Press, ca. 1450
The Origin of “Cases”
Upper Case, Lower Case, and a California Job Case
425 Years Later… TRS-80, Tandy Corporation, ca. 1977 AppleWorks Word Processor Apple Computer, ca. 1984 John Warnock Steve Jobs
Categorizing typefaces Many Categories… but we’ll start with these six
Terms and nomenclature ascender
x-height
Big Caslon xq baseline
descender ??? What do you mean by 12 points? Units of Measurement
1 inch = 6 picas = 72 points
1 pica = 12 points What is a 12 point font? Type Size is the size of the body on which the type is theoretically meant to be cast 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 Leading Letterforms that honor and elucidate what humans see and say deserve to be honored in their turn. Well-chosen words deserve is the distance from one baseline well-chosen letters; these in their turn to the next deserve to be set with affection, intelligence, knowledge and skill. “set solid” – 12/12
this is an example of negative leading negative leading – 16/14 Spacing
1 ½ ⅓ ¼ ⅕ M n t Hoefler Text roman and its italic
A Family In bold face and small caps of letterforms Text figures: 1234567890 and TITLING 12345 FIGURES 67890 Helvetica roman Times New Roman and its oblique and its italic
In bold face In bold face and SMALL CAPS and SMALL CAPS
Figures: 1234567890 Figures: 1234567890 Helvetica Neue UltraLight Helvetica Neue Thin Helvetica Neue Light Helvetica Neue Regular Weight Helvetica Neue Medium Helvetica Neue Bold Helvetica Neue Condensed Bold Helvetica Neue Condensed Black Gill Sans Light Gill Sans Regular Weight Gill Sans SemiBold Gill Sans Bold Gill Sans UltraBold Kerning: a well-groomed font?
“Ask Jeff” or ‘Ask Jeff’. Take “Ask Jeff” or ‘Ask Jeff’. Take the chef d’œuvre! Two of [of] the chef d’œuvre! Two of [of] (of) ‘of’ “of” of? of! of*. (of) ‘of’ “of” of? of! of*. Ydes, Ydes, Yffignac, Grande, Les Yffignac, Grande, Les Woëvres, the Fret de Wœvres, Woëvres, the Fret de Wœvres, the Voire and Vauvise are in the Voire and Vauvise are in France, but Ypres is in France, but Ypres is in Belgium. Yves is in heaven; Belgium. Yves is in heaven; D’Amboise is in jail. Lyford’s D’Amboise is in jail. Lyford’s in Texas & L’Anse-aux- in Texas & L’Anse-aux- Griffons in Québec. Griffons in Québec. Type Await Wreck Kerning Type Await Wreck ff f f ffi ffl Ligatures staff frst foor suffix waffle ff fi fl ffi ffl Z
Sources Representations in digital form American Standard Code for Information Interchange American Standards Association, 1963 & 1986
Unicode Consortium, 1991 A Glyph of the letter ‘c’ c A Glyph of the letter ‘c’ What is the difference between a character and a glyph?
In a font, is the mapping one-to-one? aaaå eeeé iııì oôoo uüuu
ff fi fl ffi ffl f Kerning Tables
[from creativepro.com] Stick all these things into a file…
TrueType Adobe Type 1 OpenType Apple/Microsoft Adobe Systems Microsoft/Adobe late 1980s 1984 1996 Rendering text with digital type In the old days…
• e.g. “Friday”
0x46 Nowadays… we just have a bunch of points Good thing we learned all about Bézier curves! Rendered Outlines Hardly what Gutenberg wanted… cc How do we draw a solid glyph? Just like the professionals do! cc Font Units and Glyph Metrics
“font units” (usually ~1000)
[from ftgl.sourceforge.net] Composite Glyphs
Other considerations? Ligatures
Kerning Your basic text rendering algorithm
• Load a font (optionally choosing a variant)
• Get a (composite) glyph for your character
- optionally check for ligatures
• Draw a whole bunch of Bézier curves
• Advance by the glyph’s specified amount
- optionally check kerning table
• Repeat for next character Manual Hinting Manual Hinting Microsoft ClearType 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!