BBN–ANG–183 Typography Digital

Zoltán G. Kiss & Péter Szigetvári

Dept of English Linguistics, Eötvös Loránd University

gkz & szp (delg) digital fonts 1 / 109 preliminaries wealth of digital formats. . . http://www.linotype.com

gkz & szp (delg) digital fonts 2 / 109 preliminaries topic outline

◮ digital font formats, digital font technology (for print and screen) ◮ how does the computer handle fonts? ◮ what’s inside a digital font? ◮ codepages, ◮ smart fonts ◮ web fonts

gkz & szp (delg) digital fonts 3 / 109 preliminaries steps from metal type to digital font

milestones

◮ until the 1960’s: metal type, handsetting, letterpress printing, one set of font for each size (no scaling) ◮ 1960’s–1980’s: phototypesetting: scaling, cheap, quick ◮ 1980’s: (desktop) computers ◮ laser printers, laser imagesetters ◮ WYSIWYG concept of typesetting vs. command-based markup ◮ page description languages (PDLs): PostScript (Adobe)

gkz & szp (delg) digital fonts 4 / 109 preliminaries a photographic film font (1970’s)

gkz & szp (delg) digital fonts 5 / 109 preliminaries steps from metal type to digital font

milestones

◮ until the 1960’s: metal type, handsetting, letterpress printing, one set of font for each size (no scaling) ◮ 1960’s–1980’s: phototypesetting: scaling, cheap, quick ◮ 1980’s: (desktop) computers ◮ laser printers, laser imagesetters ◮ WYSIWYG concept of typesetting vs. command-based markup ◮ page description languages (PDLs): PostScript (Adobe)

gkz & szp (delg) digital fonts 6 / 109 postscript what is PostScript?

notable features: 1. vector-based outlines

◮ complete programming language of its own ◮ describes the elements of a page as scalable, vector-based objects using outlines/paths defined in points, lines & Bézier curves ◮ objects can be scaled to any size and imaged at any resolution ◮ objects can be transformed (rotation, mirroring, etc.) and coloured

gkz & szp (delg) digital fonts 7 / 109 postscript

gkz & szp (delg) digital fonts 8 / 109 postscript what is PostScript?

notable features: 1. vector-based outlines

◮ complete programming language of its own ◮ describes the elements of a page as scalable, vector-based objects using outlines/paths defined in points, lines & Bézier curves ◮ objects can be scaled to any size and imaged at any resolution ◮ objects can be transformed (rotation, mirroring, etc.) and coloured

gkz & szp (delg) digital fonts 9 / 109 postscript the PostScript model

notable features: 2. device independence

◮ not linked to any particular type of printer or computer operating system ◮ written in plain text (ASCII) ◮ the de facto standard for high quality printing in the printing industry (but: PDF also)

gkz & szp (delg) digital fonts 10 / 109 postscript simple PostScript codes

%!PS 100 200 moveto 300 400 lineto stroke showpage

moves “cursor” (leaser beam) to the point with coordinates (100, 200) and then draws a line to the point (300, 400)

%!PS /Courier findfont 12 scalefont setfont 72 500 moveto (Hello world!) show showpage

prints “Hello world!” in 12 pt Courier (embedded in the printer) at pos. (72, 500)

gkz & szp (delg) digital fonts 11 / 109 postscript outlines of a glyph “m” as defined by PostScript

gkz & szp (delg) digital fonts 12 / 109 rendering from PostScript code to display

rendering

◮ PS code ⇒ PS interpreter ⇒ display (print, screen) ◮ interpreter a.k.a. rasterizer: software (“driver”) or hardware (chip) ◮ world of PostScript: perfect mathematical objects ◮ world of display: a grid of square/rectangle dots or pixels

gkz & szp (delg) digital fonts 13 / 109 rendering the dot grid of the output device

resolution

◮ the number of apparent dots/pixels the printer/monitor can create per inch (ppi/dpi) ◮ essentially: the density of the grid surface ◮ printers: good quality: 600 dpi; press quality: from 1200 dpi; monitors, mobile devices: from 72 ppi, 96 ppi to 400 ppi (“retina”)

gkz & szp (delg) digital fonts 14 / 109 rendering low-resolution grid

gkz & szp (delg) digital fonts 15 / 109 rendering high-resolution grid

gkz & szp (delg) digital fonts 16 / 109 rendering Bodoni at 3 resolutions

gkz & szp (delg) digital fonts 17 / 109 rendering grid fitting: which dots/pixels should be painted?

gkz & szp (delg) digital fonts 18 / 109 rendering problems of grid fitting at low resolution

gkz & szp (delg) digital fonts 19 / 109 rendering solving the problem of rendering PS fonts

hinting

◮ outlines are reshaped to assure that appropriate pixels are turned on and the glyph shape is reproduced with maximum fidelity ◮ programming instructions (hints) are added to the design code of the glyph in the font

gkz & szp (delg) digital fonts 20 / 109 rendering

gkz & szp (delg) digital fonts 21 / 109 rendering grid-fitting techniques for outline fonts

◮ hinting (specified within the font itself; a lot of work for designers!) ◮ low-resolution screens, small size fonts ◮ Windows 7/8/10: DirectWrite engine with ClearType subpixel rendering, crisper rendering but jagged edges ◮ Mac OS X/iOS: Core Text engine with anti-aliasing/smoothing, more grey pixels at edges, smoother ◮ low-end printers (below 1200 dpi): variable dot size technology (beam power modulation)

gkz & szp (delg) digital fonts 22 / 109 rendering font rendering on Mac vs. Windows

gkz & szp (delg) digital fonts 23 / 109 rendering grid-fitting techniques for outline fonts

◮ hinting (specified within the font itself; a lot of work for designers!) ◮ low-resolution screens, small size fonts ◮ Windows 7/8/10: DirectWrite engine with ClearType subpixel rendering, crisper rendering but jagged edges ◮ Mac OS X/iOS: Core Text engine with anti-aliasing/smoothing, more grey pixels at edges, smoother ◮ low-end printers (below 1200 dpi): variable dot size technology (beam power modulation)

gkz & szp (delg) digital fonts 24 / 109 font formats

and now to the basic digital font formats

gkz & szp (delg) digital fonts 25 / 109 font formats two meanings of font “format”

format, meaning 1 the platform for which the font was designed (Windows PC vs. Mac)

format, meaning 2 the way that the typographic information itself is described and how that information is organized (bitmap vs. outline; Type 1 vs. TrueType, etc.)

gkz & szp (delg) digital fonts 26 / 109 font formats what’s in a digital font?

fonts are computer programs that contain:

◮ painting/drawing instructions (e.g., Bézier curve outlines, hinting) ◮ metrical data (x-height, set-width, etc.) in ems ◮ kerning information in ems ◮ ligature information (“lig pairs”) ◮ character set and encoding (mapping between character/glyph to a code number)

gkz & szp (delg) digital fonts 27 / 109 font formats kerning

gkz & szp (delg) digital fonts 28 / 109 font formats what’s in a digital font?

fonts are computer programs that contain:

◮ painting/drawing instructions (e.g., Bézier curve outlines, hinting) ◮ metrical data (x-height, set-width, etc.) in ems ◮ kerning information in ems ◮ ligature information (“lig pairs”) ◮ character set and encoding (mapping between character/glyph to a code number)

gkz & szp (delg) digital fonts 29 / 109 font formats ligature

gkz & szp (delg) digital fonts 30 / 109 font formats what’s in a digital font?

fonts are computer programs that contain:

◮ painting/drawing instructions (e.g., Bézier curve outlines, hinting) ◮ metrical data (x-height, set-width, etc.) in ems ◮ kerning information in ems ◮ ligature information (“lig pairs”) ◮ character set and encoding (mapping between character/glyph to a code number)

gkz & szp (delg) digital fonts 31 / 109 font formats basic font formats (w.r.t. glyph description)

◮ bitmap(ped) fonts (a.k.a. screen/printer fonts) ◮ outline fonts (a.k.a. postscript, vector, scalable fonts)

gkz & szp (delg) digital fonts 32 / 109 font formats bitmap

bitmap fonts: main characteristics

◮ every glyph is drawn as an array of dots, the imaging device simply copies (= maps) these dots into place on the screen or page ◮ one-to-one correspondence between glyph design and imaging, no need for “translator” ◮ each one of these dots is represented by one bit of computer data (yes/no choice of imaging/printing a dot or not)

gkz & szp (delg) digital fonts 33 / 109 font formats bitmap

bitmap fonts: advantages

◮ fast and easy processing/rendering (cheap/small systems) ◮ always give exactly the same output (no “hinting”) ◮ easier to design than other kinds ◮ does not require a separate translator

gkz & szp (delg) digital fonts 34 / 109 font formats bitmap

bitmap fonts: disadvantages

◮ very large files (especially if the point size increases) ◮ device & resolution dependence: fixed resolution, cannot be (optimally) scaled ◮ inferior pdf output (“pixellation”) bitmap fonts: typical applications computer consoles, older dot-matrix printers

gkz & szp (delg) digital fonts 35 / 109 font formats bitmap cash register machine: bitmap font

gkz & szp (delg) digital fonts 36 / 109 font formats outline outline fonts

characteristics

◮ collections of Bézier-based vector–curve outlines of glyphs ◮ every glyph is drawn with the help of straight line and curve segments

gkz & szp (delg) digital fonts 37 / 109 font formats outline outline fonts

advantages

◮ outlines can be mathematically scaled to any size without distorting the shapes/proportions of the glyphs ◮ excellent/clean pdf output ◮ device & resolution independence ◮ de facto standard of publishing & printing industry ◮ vast majority of digital fonts available are outline

gkz & szp (delg) digital fonts 38 / 109 font formats outline outline fonts

disadvantages

◮ grid-fixing problems at lower res. (hinting) ◮ small changes in shape depending on resolution, position and OS (Windows vs. Mac) ◮ need intermediate “translator” ◮ slow(er) printing

gkz & szp (delg) digital fonts 39 / 109 font formats outline outline font formats

◮ PostScript fonts: Type 1 (Type 2, Type 3) ◮ TrueType fonts ◮ OpenType fonts: a. PS and b. TT “flavours”

gkz & szp (delg) digital fonts 40 / 109 font formats type 1/2/3 PostScript (Type 1) fonts features ◮ developed by Adobe Systems, San Jose CA ◮ use the PostScript language, glyphs: defined with lines & Bézier curves ◮ two files for each font: ◮ outline data (*.pfb/*.pfa) ◮ metrics data (*.pfm/*.afm), they must be in the same directory ◮ standard for graphic design, desktop publishing industry

gkz & szp (delg) digital fonts 41 / 109 font formats truetype TrueType (TT) fonts

features

◮ developed by Apple and Microsoft as a reaction against Adobe’s high-cost licensing of Type 1 fonts ◮ use modified Bézier curves ◮ PS fonts cannot be converted into TT without loss of curve data ◮ past: many problems outputting TT fonts on PS printers printers ◮ better algorithm for hinting ◮ TT fonts come in a single (binary) file (*.ttf): both outlines and metrics

gkz & szp (delg) digital fonts 42 / 109 font formats opentype OpenType (OT) fonts

features ◮ jointly developed by Adobe and Microsoft since 1996 ◮ has taken over as the standard font format ◮ two subformats of glyph outlines: ◮ PS-flavoured OT (*.otf) (for print) ◮ TT-flavoured OT (*.ttf) (for screens) ◮ OT fonts are OS independent, come in a single file containing both outline and metrics data (in a binary form)

gkz & szp (delg) digital fonts 43 / 109 font formats opentype why OpenType? advantages

◮ platform independence & cross-codepage compatibility ◮ supports Unicode ◮ includes smartfont options within same file ⇒ more sophisticated typography ◮ better protection for font data ◮ smaller file size

gkz & szp (delg) digital fonts 44 / 109 encodings digital fonts: important terms

◮ character ◮ glyph ◮ character set ◮ character encoding ◮ font encoding

gkz & szp (delg) digital fonts 45 / 109 encodings character – glyph

glyph the actual image/drawing of a symbol used in a writing system or in a notational system (e.g., music, maths, phonetics, etc.)

character

◮ a simple description of class of glyphs, an abstraction ◮ the description is usually illustrated with an illustrative glyph

gkz & szp (delg) digital fonts 46 / 109 encodings character – glyph

gkz & szp (delg) digital fonts 47 / 109 encodings character set, code, & font encoding

character set/repertoire

◮ a collection of distinct characters ◮ e.g.: the characters that can be used to represent the letters of the English

gkz & szp (delg) digital fonts 48 / 109 encodings unorganized characters

gkz & szp (delg) digital fonts 49 / 109 encodings characters collected into a character set (‘Latin’)

gkz & szp (delg) digital fonts 50 / 109 encodings character encoding

character encoding

◮ computers work with numbers, so characters need to be identified by a number ◮ a unique numerical code is assigned to each character in the set ◮ an “organized” set of characters that the computer can consistently identfy ◮ called character codepage/table

gkz & szp (delg) digital fonts 51 / 109 encodings character encoding/a codepage 97® a 98® b 99® c 100® d 101® e 102® f 103® g

gkz & szp (delg) digital fonts 52 / 109 encodings character repertoire, code, & font encoding

font encoding

◮ a character encoding within a digital font ◮ a mapping between character code and the glyph ◮ drawing instructions of glyphs organized into a numbered set

gkz & szp (delg) digital fonts 53 / 109 encodings font encoding (= encoding inside the font file)

gkz & szp (delg) digital fonts 54 / 109 encodings from code 65 to glyph A

gkz & szp (delg) digital fonts 55 / 109 encodings problems with non-UNICODE encodings

◮ characters are displayed unexpectedly ◮ or not displayed at all: you get an empty rectangle ◮ reason: character and font encoding differences

gkz & szp (delg) digital fonts 56 / 109 encodings typing Ö on Hungarian Windows (encoding = CP1250/Latin 2)

gkz & szp (delg) digital fonts 57 / 109 encodings code 214 on a Mac (encoding = CP1275/Mac Roman)

gkz & szp (delg) digital fonts 58 / 109 unicode Unicode (ISO 10646) basic features

◮ an industry standard designed to assign unique character codes (codepoints) to practically all characters used by humanity ◮ currently, U’s coderange is between 0. . . 10FFF (decimal 0...1114111) ◮ around 98,000 codepoints have been assigned (9% of the available space)

gkz & szp (delg) digital fonts 59 / 109 unicode some Unicode codepoints

gkz & szp (delg) digital fonts 60 / 109 unicode Unicode ranges/planes (examples) (http://unicode.org/)

1. Basic Multilingual Plane

◮ Basic Latin (English) ◮ Latin Extended (Central Europe, Baltic, Esperanto. . . ) ◮ International Phonetic Alphabet ◮ Diacritical Marks ◮ Greek, Coptic ◮ Cyrillic, Armenian ◮ Semitic, Arabic ◮ various other scripts (Chinese, Japanese. . . ) ◮ punctuation, digits, various symbols

gkz & szp (delg) digital fonts 61 / 109 unicode Unicode planes (examples)

2. Supplementary Multilingual Plane

◮ historic & unusual scripts: e.g. cuneiform, Phoenician, etc. ◮ musical notations ◮ math symbols

Scripts proposed for addition

◮ Old Hungarian runic script ◮ Tolkien’s The Lord of the Rings script ◮ Hieroglyphic Egyptian

gkz & szp (delg) digital fonts 62 / 109 unicode always use Unicode

◮ Unicode is now used by all modern operating systems as the default character codepage ◮ Unicode-encoded fonts are also part of all modern OSs: OT fonts ◮ there is no reason why you should not use Unicode! ◮ so: set your text encoding to Unicode (typically: utf-8) & use OT fonts

gkz & szp (delg) digital fonts 63 / 109 unicode how can these Unicode ranges be accessed?

◮ character map applications ◮ OpenType smartfont tags

gkz & szp (delg) digital fonts 64 / 109 unicode Unicode ranges in an OT font

gkz & szp (delg) digital fonts 65 / 109 unicode helpful application: BabelMap

gkz & szp (delg) digital fonts 66 / 109 smartfont tags OpenType smartfont tags/options properties

◮ they automate the process of accessing special characters, features in a Unicode-encoded OT font ◮ 4-letter identifiers that can be switched on for a document, or part of it, without changing to another font ◮ two main types: 1. script/language-related tags 2. layout feature-related tags ◮ official list of registered tags: https://docs.microsoft.com/en-us/typography/opentype/spec/ttoreg

gkz & szp (delg) digital fonts 67 / 109 smartfont tags layout tag example: ligatures

◮ liga is a smartfont layout tag ◮ when it is switched on – and when a font supports it –, it will automatically use ligatures instead of sequences of characters ◮ e.g., you type fi but you will automatically get fi

gkz & szp (delg) digital fonts 68 / 109 smartfont tags OpenType tags

main script/language tags (currently: around 40 defined)

◮ activate language-specific typographic options ◮ latn: ◮ cyrl: Cyrillic ◮ arab: Arabic ◮ grek: Greek ◮ . . .

gkz & szp (delg) digital fonts 69 / 109 smartfont tags OpenType main layout tags (currently: around 134 defined)

◮ all caps, small caps, petite caps (case, smcp, c2sc, c2pc) ◮ capital spacing (cpsp) ◮ standard ligatures (liga) or special discretionary ligatures (dlig) ◮ historical forms (hist) ◮ fractions (frac) ◮ ordinals, superscript, subscript (ordn, sups, subs) ◮ figure types: lining – oldstyle; tabular – proportional (lnum, onum, tnum, pnum) ◮ swash, stylistic alternates, sets (swsh, salt, ssxx) ◮ access all alternates (aalt) ◮ . . .

gkz & szp (delg) digital fonts 70 / 109 smartfont tags OT layout tags in Adobe InDesign

gkz & szp (delg) digital fonts 71 / 109 smartfont tags OpenType layout features

demo

gkz & szp (delg) digital fonts 72 / 109 smartfont tags smcp: small capitals

Minion Pro (Adobe):

gkz & szp (delg) digital fonts 73 / 109 smartfont tags c2sc: small capitals from capitals

Minion Pro (Adobe):

gkz & szp (delg) digital fonts 74 / 109 smartfont tags pcap: petite caps (from lowercase)

Mrs Eaves (Emigre):

gkz & szp (delg) digital fonts 75 / 109 smartfont tags uni: unicase

Filosofia (Emigre):

gkz & szp (delg) digital fonts 76 / 109 smartfont tags case: case-sensitive forms Mrs Eaves (Emigre):

gkz & szp (delg) digital fonts 77 / 109 smartfont tags cpsp: capital spacing

Adobe Garamond Pro (Adobe):

gkz & szp (delg) digital fonts 78 / 109 smartfont tags lnum vs. onum: lining vs. oldsytle numbers

Minion Pro (Adobe):

gkz & szp (delg) digital fonts 79 / 109 smartfont tags lnum + tnum vs. pnum: tabular vs. proportional numbers Minion Pro (Adobe):

gkz & szp (delg) digital fonts 80 / 109 smartfont tags onum + tnum vs. pnum: tabular vs. proportional numbers Minion Pro (Adobe):

gkz & szp (delg) digital fonts 81 / 109 smartfont tags zero: slashed zero

Minion Pro (Adobe):

gkz & szp (delg) digital fonts 82 / 109 smartfont tags frac: fractions

Minion Pro (Adobe):

gkz & szp (delg) digital fonts 83 / 109 smartfont tags sups: superscript Minion Pro (Adobe):

gkz & szp (delg) digital fonts 84 / 109 smartfont tags subs: subscript

Minion Pro (Adobe):

gkz & szp (delg) digital fonts 85 / 109 smartfont tags liga: standard ligatures

Adobe Caslon Pro (Adobe):

gkz & szp (delg) digital fonts 86 / 109 smartfont tags dlig: discretionary ligatures

Mrs Eaves (Emigre):

gkz & szp (delg) digital fonts 87 / 109 smartfont tags dlig: discretionary ligatures

Mrs Eaves (Emigre):

gkz & szp (delg) digital fonts 88 / 109 smartfont tags hist: historical forms

Minion Pro (Adobe):

gkz & szp (delg) digital fonts 89 / 109 smartfont tags init, medi, fina: initial, medial, final forms

Poetica (Adobe):

gkz & szp (delg) digital fonts 90 / 109 smartfont tags init, medi: initial vs. medial forms in Arabic

Nafees Nasta’leeq (the character ‘yeh barree with hamza’ above):

gkz & szp (delg) digital fonts 91 / 109 smartfont tags salt, swsh: stylistic alternates, swashes Poetica (Adobe):

gkz & szp (delg) digital fonts 92 / 109 smartfont tags ornm: ornaments

Adobe Caslon Pro (Adobe):

gkz & szp (delg) digital fonts 93 / 109 smartfont tags OT pros & cons OT: cons

some disadvantages

◮ difficult to manage (lot of clicking), need for clever macros/scripts ◮ most are very expensive, and rarely sold separately (“all-or-nothing”) ◮ not all OT fonts have the same character coverage, naming does not always help ◮ Std = basic Unicode coverage, few smartfont options Pro = medium Unicode coverage, more smartfont options Premiere Pro = wide range of Unicode coverage, lot of smartfont options

gkz & szp (delg) digital fonts 94 / 109 smartfont tags OT pros & cons Adobe Garamond Premier Pro: Unicode coverage https://www.fonts.com/font/adobe/garamond-premier/roman

gkz & szp (delg) digital fonts 95 / 109 smartfont tags OT pros & cons Adobe Garamond Premier Pro: smartfont options

https://www.fonts.com/font/adobe/garamond-premier/roman

gkz & szp (delg) digital fonts 96 / 109 web fonts in web pages

◮ the language of web pages strictly separates content/logical structure & form/style ◮ HTML (hypertext markup language): defines content/logical structure with markup tags (logical and direct) ◮ CSS (cascading style sheet): defines styling of the logical elements separately

gkz & szp (delg) digital fonts 97 / 109 web CSS

– ease of update & maintenance: one CSS for a whole website

gkz & szp (delg) digital fonts 98 / 109 web CSS

– portability: one content for several output devices

gkz & szp (delg) digital fonts 99 / 109 web CSS

– sample CSS syntax (a CSS rule)

gkz & szp (delg) digital fonts 100 / 109 web CSS

– sample CSS syntax (a CSS rule)

gkz & szp (delg) digital fonts 101 / 109 web CSS

– sample CSS syntax (a CSS rule)

gkz & szp (delg) digital fonts 102 / 109 web sample CSS style properties

◮ font-family ◮ font-style ◮ font-size ◮ font-variant (small-caps) ◮ font-weight ◮ text-decoration (underlining, overlining) ◮ color ◮ letterspacing ◮ lineheight ◮ margin ◮ text-align ◮ list-style, etc. etc.

gkz & szp (delg) digital fonts 103 / 109 web font-related problems in the standard CSS approach

◮ fonts requested by CSS have to be installed on the client machine ◮ only safe with the default “web-safe” system fonts: Times New Roman, Georgia, Verdana, Arial, Courier ◮ most of these were never designed for screens but for print ◮ no font embedding is possible, severe copyright issues

gkz & szp (delg) digital fonts 104 / 109 web the @font-face rule

– things for consideration: ◮ you want the same typographic freedom as for print ◮ optimal rendering on all kinds of screen ◮ high-level typography (OT smartfont options) ◮ for any browser ◮ for any language ◮ protection of font data, licensing issues

◮ solution: ◮ the @font-face CSS rule, and ◮ web fonts

gkz & szp (delg) digital fonts 105 / 109 web the @font-face rule

◮ allows the browser to use a font from an external server, it doesn’t have to be on client machine ◮ your own server: you must own license to host the font ◮ from a font-hosting service ◮ a (simplified) example CSS rule with @font-face:

gkz & szp (delg) digital fonts 106 / 109 web some web font hosting services

◮ www.google.com/fonts (free fonts) ◮ www.fontsquirrel.com (free fonts) ◮ www.typekit.com (Adobe) ◮ www.typography.com (Hoefler & Co.) ◮ www.webtype.com ◮ www.myfonts.com (not only webfonts)

gkz & szp (delg) digital fonts 107 / 109 web current web font support with @font-face

(http://caniuse.com/#search=%40font-face)

gkz & szp (delg) digital fonts 108 / 109 web web font formats: no one standard. . .

◮ Embedded Open Type (eot): only for Internet Explorer ◮ Scalable Vector Graphics font (svg): mostly for OS X & iOS Safari ◮ TT-flavoured OpenType (ttf): Firefox, Chrome, Android, Opera ◮ Web Open Font Format (woff, woff2): Chrome, Firefox, Opera – this format is what is now fully ratified by the WC3 consortium

gkz & szp (delg) digital fonts 109 / 109