BBN–ANG–183 Typography Digital fontsseas3.elte.hu/typo/digi-h.pdf · 2019. 5. 18. · TT fonts come in a single (binary) ﬁle (*.ttf): both outlines and metrics gkz & szp (delg)

BBN–ANG–183 TypographyDigital 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


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


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)


preliminaries

a photographic film font (1970’s)


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)


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 objectsusing 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


postscrip

t

gkz

&szp

(delg

)dig

ital

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 objectsusing 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


postscript

the PostScript model

notable features: 2. device independence

◮ not linked to any particular type of printer or computeroperating system

◮ written in plain text (ASCII)

◮ the de facto standard for high quality printing in the printingindustry (but: PDF also)


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 thendraws 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)


postscript

outlines of a glyph “m” as defined by PostScript


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


rendering

the dot grid of the output device

resolution

◮ the number of apparent dots/pixels the printer/monitor can createper 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”)


rendering

low-resolution grid


rendering

high-resolution grid


rendering

Bodoni at 3 resolutions


rendering

grid fitting: which dots/pixels should be painted?


rendering

problems of grid fitting at low resolution


rendering

solving the problem of rendering PS fonts

hinting

◮ outlines are reshaped to assure that appropriate pixels are turnedon and the glyph shape is reproduced with maximum fidelity

◮ programming instructions (hints) are added to the design codeof the glyph in the font


renderin

g

gkz

&szp

(delg

)dig

ital

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 subpixelrendering, crisper rendering but jagged edges

◮ Mac OS X/iOS: Core Text engine withanti-aliasing/smoothing, more grey pixels at edges, smoother

◮ low-end printers (below 1200 dpi): variable dot size technology(beam power modulation)


rendering

font rendering on Mac vs. Windows


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 subpixelrendering, crisper rendering but jagged edges

◮ Mac OS X/iOS: Core Text engine withanti-aliasing/smoothing, more grey pixels at edges, smoother

◮ low-end printers (below 1200 dpi): variable dot size technology(beam power modulation)


font formats

and now to the basic digital font formats


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 thatinformation is organized (bitmap vs. outline; Type 1 vs. TrueType, etc.)


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 acode number)


font formats

kerning


font formats









font formats

ligature


font formats









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)


font formats bitmap

bitmap fonts: main characteristics

◮ every glyph is drawn as an array of dots, the imaging device simplycopies (= maps) these dots into place on the screen or page

◮ one-to-one correspondence between glyph design and imaging, noneed 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)


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


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


font formats bitmap

cash register machine: bitmap font


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



outline fonts

advantages

◮ outlines can be mathematically scaled to any size without distortingthe 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



outline fonts

disadvantages

◮ grid-fixing problems at lower res. (hinting)

◮ small changes in shape depending on resolution, positionand OS (Windows vs. Mac)

◮ need intermediate “translator”

◮ slow(er) printing



outline font formats

◮ PostScript fonts: Type 1 (Type 2, Type 3)

◮ TrueType fonts

◮ OpenType fonts: a. PS and b. TT “flavours”


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


font formats truetype

TrueType (TT) fonts

features

◮ developed by Apple and Microsoft as a reaction against Adobe’shigh-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 andmetrics


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 containingboth outline and metrics data (in a binary form)


font formats opentype

why OpenType?

advantages

◮ platform independence & cross-codepagecompatibility

◮ supports Unicode

◮ includes smartfont options within same file⇒ more sophisticated typography

◮ better protection for font data

◮ smaller file size


encodings

digital fonts: important terms

◮ character

◮ glyph

◮ character set

◮ character encoding

◮ font encoding


encodings

character – glyph

glyph

the actual image/drawing of a symbol used in a writing system or in anotational 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


encodings

character – glyph


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


encodings

unorganized characters


encodings

characters collected into a character set (‘Latin’)


encodings

character encoding

character encoding

◮ computers work with numbers, so characters need to beidentified 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


encodings

character encoding/a codepage

97 a®

98 b®

99 c®

100 d®

101 e®

102 f®

103 g®


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


encodings

font encoding (= encoding inside the font file)


encodings

from code 65 to glyph A


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


encodings

typing Ö on Hungarian Windows (encoding =CP1250/Latin 2)


encodings

code 214 on a Mac (encoding = CP1275/Mac Roman)


unicode

Unicode (ISO 10646)

basic features

◮ an industry standard designed to assign uniquecharacter codes (codepoints) to practically allcharacters used by humanity

◮ currently, U’s coderange is between 0. . . 10FFF(decimal 0. . . 1 114 111)

◮ around 98,000 codepoints have been assigned (9% ofthe available space)


unicode

some Unicode codepoints


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


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


unicode

always use Unicode

◮ Unicode is now used by all modern operating systems as the defaultcharacter 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


unicode

how can these Unicode ranges be accessed?

◮ character map applications

◮ OpenType smartfont tags


unicode

Unicode ranges in an OT font


unicode

helpful application: BabelMap


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, orpart of it, without changing to another font

◮ two main types:

1. script/language-related tags2. layout feature-related tags

◮ official list of registered tags:https://docs.microsoft.com/en-us/typography/opentype/spec/ttoreg


smartfont tags

layout tag example: ligatures

◮ liga is a smartfont layout tag

◮ when it is switched on – and when a font supports it –, it willautomatically use ligatures instead of sequences of characters

◮ e.g., you type fi but you will automatically get fi


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

◮ . . .


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)

◮ . . .


smartfont tags

OT layout tags in Adobe InDesign


smartfont tags

OpenType layout features

demo


smartfont tags

smcp: small capitals

Minion Pro (Adobe):


smartfont tags

c2sc: small capitals from capitals

Minion Pro (Adobe):


smartfont tags

pcap: petite caps (from lowercase)

Mrs Eaves (Emigre):


smartfont tags

uni: unicase

Filosofia (Emigre):


smartfont tags

case: case-sensitive formsMrs Eaves (Emigre):


smartfont tags

cpsp: capital spacing

Adobe Garamond Pro (Adobe):


smartfont tags

lnum vs. onum: lining vs. oldsytle numbers

Minion Pro (Adobe):


smartfont tags

lnum + tnum vs. pnum: tabular vs. proportional numbersMinion Pro (Adobe):


smartfont tags

onum + tnum vs. pnum: tabular vs. proportional numbersMinion Pro (Adobe):


smartfont tags

zero: slashed zero

Minion Pro (Adobe):


smartfont tags

frac: fractions

Minion Pro (Adobe):


smartfont tags

sups: superscript

Minion Pro (Adobe):


smartfont tags

subs: subscript

Minion Pro (Adobe):


smartfont tags

liga: standard ligatures

Adobe Caslon Pro (Adobe):


smartfont tags

dlig: discretionary ligatures

Mrs Eaves (Emigre):


smartfont tags

hist: historical forms

Minion Pro (Adobe):


smartfont tags

init, medi, fina: initial, medial, final forms

Poetica (Adobe):


smartfont tags

init, medi: initial vs. medial forms in Arabic

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


smartfont tags

salt, swsh: stylistic alternates, swashesPoetica (Adobe):


smartfont tags

ornm: ornaments

Adobe Caslon Pro (Adobe):


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 notalways help

◮ Std = basic Unicode coverage, few smartfont optionsPro = medium Unicode coverage, more smartfont optionsPremiere Pro = wide range of Unicode coverage, lot of smartfontoptions



Adobe Garamond Premier Pro: Unicode coveragehttps://www.fonts.com/font/adobe/garamond-premier/roman



Adobe Garamond Premier Pro: smartfont options

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


web

fonts in web pages

◮ the language of web pages strictly separates content/logical structure& form/style

◮ HTML (hypertext markup language): defines content/logicalstructure with markup tags (logical and direct)

◮ CSS (cascading style sheet): defines styling of the logical elementsseparately


web

CSS

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


web

CSS

– portability: one content for several output devices


web

CSS

– sample CSS syntax (a CSS rule)


web

CSS



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.


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


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


web

the @font-face rule

◮ allows the browser to use a font from an external server, it doesn’thave 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:


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)


web

current web font support with @font-face

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


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


preliminariespostscriptrenderingfont formatsbitmapoutlinetype 1/2/3truetypeopentype

encodingsunicodesmartfont tagsOT pros & cons

web

Documents

BBN–ANG–183 Typography Digital fontsseas3.elte.hu/typo/digi-h.pdf · 2019. 5. 18. · TT fonts come in a single (binary) ﬁle (*.ttf): both outlines and metrics gkz & szp (delg)