BBN–ANG–183 Typography Digital fonts
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 font 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, UNICODE ◮ 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 alphabet
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: Latin alphabet ◮ 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