BBN–ANG–183 Typography Digital fontsseas3.elte.hu/typo/digitalfonts.pdfBBN–ANG–183...

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 (9) 1 / 111

preliminaries

wealth of digital font formats. . .http://www.linotype.com


preliminaries

aims for today

◮ digital font formats, digital font technology (for print)

◮ how does the computer handle fonts?

◮ codepages, UNICODE

◮ smart fonts


preliminaries

steps from metal type to digital font

milestones


preliminaries


milestones

◮ until the 1960’s: metal type, handsetting, letterpress printing,one set of font for each size (no scaling)


preliminaries


milestones


◮ 1960’s–1980’s: phototypesetting: scaling, cheap, quick


preliminaries

a photographic film font (1970’s)


preliminaries


milestones


◮ 1960’s–1980’s: phototypesetting: scaling, cheap, quick◮ 1980’s: (desktop) computers


preliminaries


milestones



◮ laser printers, laser imagesetters


preliminaries


milestones




◮ WYSIWYG concept of typesetting vs. command-based markup


preliminaries


milestones




◮ WYSIWYG concept of typesetting vs. command-based markup

◮ page description languages (PDLs): PostScript (Adobe)


postscript

why is PostScript important?

◮ computer-based typography is possible

◮ outline & vector-based ⇒ lossless scalability

◮ device independence

◮ sets the ground for WYSIWYG


postscript

the PostScript model

notable features: 1. vector-based outlines


postscript



◮ complete programming language of its own


postscript




◮ describes the elements of a page as scalable, vector-based objectsusing outlines/paths defined in points, lines & Bézier curves


postscrip

t

gkz

&szp

(delg

)dig

ital

fonts

(9)

9/

111

postscript





◮ objects can be scaled to any size and imaged at any resolution


postscript





◮ objects can be scaled to any size and imaged at any resolution◮ objects can be transformed (rotation, mirroring, etc.) and coloured


postscript


notable features: 2. device independence


postscript



◮ before PS: exclusive proprietary font technologies


postscript



◮ before PS: exclusive proprietary font technologies◮ not linked to any particular type of printer or computer

operating system


postscript



◮ before PS: exclusive proprietary font technologies◮ not linked to any particular type of printer or computer operating

system

◮ written in plain text (ASCII)


postscript



◮ before PS: exclusive proprietary font technologies◮ 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(cf. PDF also)


postscript

simple PostScript codes (◮demo)

%!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)


font rendering

how can the outlines be output to screen & paper?


font rendering

relevant terms

◮ rasterizing, the raster image processor(RIP)/interpreter/translator

◮ resolution

◮ grid fitting, rendering/imaging

◮ hinting & anti-aliasing


font rendering rasterizing

the conversion of PS code into printed page

raster image processor (RIP)

◮ the PS commands are interpreted and expressed for a specificoutput device—the PostScript interpreter

◮ software (PostScript drivers by Adobe or GhostScript)◮ hardware chip: raster image processor, RIP

◮ the output “surface”: grid of square/rectangle pixels or dots

◮ the “beam” of the monitor/printer blinks on/off to create darkvs. white dots on the grid


font rendering resolution

the dot grid of the output device

resolution

◮ the number of apparent pixels/dots the monitor/printer can createper inch (ppi/dpi)

◮ essentially: the density of the grid surface◮ the number of areas that can be used to paint the image

◮ printers: good quality: 600 dpi; press quality: from 1200 dpi;monitors, mobile devices: from 72 ppi, 96 ppi to 400 ppi (“retina”)



low-resolution grid



high-resolution grid



Bodoni at 3 resolutions


font rendering grid fitting

imaging PostScript fonts

grid fitting

◮ the process of placing character outlines on the grid and decidingwhich dots should be inked

◮ when an image is inked by the RIP (the dots are printed), it isimaged or rendered or rasterized

◮ when 90% of a pixel/dot is covered, it is inked

◮ problem: the world of perfect curves ⇐⇒ world of square pixels/dots



grid fitting



BUT: there can be problems with grid fittingat lower resolutions & curvy lines. . .



problems of grid fitting



imaging PostScript 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


font

renderin

ggrid

fittin

g

gkz

&szp

(delg

)dig

ital

fonts

(9)

25

/111


grid-fitting techniques for outline fonts

◮ hinting (specified within the font itself; a lot of work for designers!)




◮ 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



font rendering on Mac vs. Windows






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


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:


font formats



◮ painting/drawing instructions (e.g., Bézier curve outlines, hinting)


font formats



◮ painting/drawing instructions (e.g., Bézier curve outlines, hinting)◮ metrical data (x-height, set-width, etc.) in ems


font formats




◮ kerning information in ems


font formats

kerning


font formats





◮ ligature information (“lig pairs”)


font formats

ligature


font formats





◮ ligature information (“lig pairs”)

◮ character repertoire/set and encoding (mapping betweencharacter/glyph to a code number)


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 printing

◮ basic fonts are included in (PS) printers◮ most digital fonts available are outline



outline fonts

disadvantages

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

◮ small changes in shape depending on resolution and position◮ font shapes depend on rendering engine technology

◮ need intermediate “translator”

◮ slow(er) printing



outline font formats

◮ (METAFONT)

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

◮ TrueType fonts

◮ (MultipleMaster (MM) fonts)

◮ OpenType fonts


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 type 1/2/3

Bézier curves in a Type 1 font

demo


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)◮ TT-flavoured OT (*.ttf)

◮ OT fonts are OS independent, come in a single file containingboth outline and metrics data (in a binary form)



why OpenType?

advantages



why OpenType?

advantages

◮ platform independence & cross-codepagecompatibility



why OpenType?

advantages

◮ platform independence & cross-codepage compatibility

◮ supports Unicode



why OpenType?

advantages



◮ includes smartfont options within same file⇒ more sophisticated typography



why OpenType?

advantages




◮ better protection for font data



why OpenType?

advantages




◮ better protection for font data

◮ smaller file size


font formats codepages

digital fonts: important terms

◮ character

◮ glyph

◮ character set/repertoire

◮ character encoding

◮ font encoding



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



character – glyph



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



unorganized characters



organized character set (‘Latin’)



character set, code, & font encoding

character code/encoding

◮ a mapping, often presented with the help of tables, which definesa one-to-one correspondence between characters in a characterset and a unique number

◮ a unique numerical code is assigned to each character in the set◮ an “organized” set◮ called character codepage/table



character encoding/a codepage

97 a®

98 b®

99 c®

100 d®

101 e®

102 f®

103 g®



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



font encoding (= encoding inside the font file)



the 95 “printable” ASCII characters (ASCII codepage,American Standard Code for Information Interchange)

32– 47 ! " # $ % & ’ ( ) * + , - . /

48– 63 0 1 2 3 4 5 6 7 8 9 : ; < = > ?

64– 79 @ A B C D E F G H I J K L M N O

80– 95 P Q R S T U V W X Y Z [ \ ] ^ _

96–111 ‘ a b c d e f g h i j k l m n o

112–126 p q r s t u v w x y z { | } ~



from code 65 to glyph A



beyond ASCII

problems

◮ solely ASCII-coded character sets cannot be used for setting texts inother languages (not to mention typographic quality)

◮ the various operating systems (e.g., Mac & Win) agreed on the basicASCII character set

◮ but disagreed on the encoding assigned to the next 128 numbers(8-bit codepages, 256 available characters)

◮ result: documents formatted on one platform appeared on the otherwith certain characters “incorrectly” displayed

◮ e.g., “ÖLEL” typed on a PC using (Western) Windows character setcomes out as “÷LEL” on an Apple Macintosh and “ÍLEL” on a DOSPC



why does Windows ‘Ö’ come out as ‘÷’ on Mac?



typing Ö on Hungarian Windows (CP1250/Latin 2 enc.)



code 214 on a Mac (CP1275/Mac Roman enc.)



CP1250/Latin 2 Windows encoding



CP1275/Mac Roman encoding



another problem: “expert” fonts

◮ ligatures

◮ Greek text

◮ special symbols

◮ ornaments◮ true small caps

◮ old style figures



setting “maffia” with a ligature in the past



problems with searching for “maffia”



problems with searching for “maYa”



problems with the expert set solution

◮ extra cost (expert sets are sold separately)◮ major problems with searching◮ major problems with hyphenation◮ change of font is necessary to include expert glyphs



solutions

◮ use only ASCII characters◮ use escape notations

◮ target: “Ä”◮ TEX: "A

◮ HTML: Auml

◮ Prószéky-code: A2

◮ include host codepage mapping data in the file to betransferred (“re-encoding”: “my 214 corresponds toyour 133”)

◮ save as PDF and embed font (see next lecture)◮ use a “universal” codepage: Unicode and

Unicode-encoded fonts (= OpenType)gkz & szp (delg) digital fonts (9) 75 / 111

font formats unicode

Unicode (ISO 10646)

basic features

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

◮ the Unicode codepoint is a hexadecimal (hex) numberassociated with a character

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

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



some Unicode codepoints



OpenType and Unicode

◮ the OT technology makes it possible to accommodate the Unicodecharacter repertoire

◮ instead of one font for each language group (Western Roman, CE,Baltic, etc.), OT character sets can include all of these code pages inone single font

◮ OT makes advanced typographic and language dependent featuresavailable in one font

◮ OT font files are cross-platform

◮ OT fonts can be used on older systems, too (but only the first 256characters will be recognized)

◮ OT is supported by all major operation systems,

◮ more & more applications take advantage of OT features



Unicode ranges/planes (examples) (http://unicode.org/)

1. Basic Multilingual Plane

◮ Basic Latin (English)

◮ Latin Extended-A (Central Europe, Baltic, Esperanto. . . )

◮ Latin Extended-B

◮ International Phonetic Alphabet◮ Diacritical Marks

◮ Greek, Coptic

◮ Cyrillic, Armenian

◮ Semitic, Arabic

◮ various other scripts (Chinese, Japanese. . . )◮ punctuation, digits, various symbols



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 ranges in an OT font


font formats OT layout tags

OpenType smartfont options

special tags: smartfont options

◮ thousands of characters: how to access them relatively easily?◮ solution: smartfont tags/options

◮ 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 tags2. layout feature tags

◮ official list of registered tags:http://www.microsoft.com/typography/otspec/ttoreg.htm



OpenType tags

main script tags (currently: 40 defined)

◮ activate language-specific typographic options

◮ latn: Latin alphabet

◮ cyrl: Cyrillic

◮ arab: Arabic

◮ grek: Greek◮ . . .



OpenType

main layout features (currently: 134 defined)

◮ all caps, small caps, petite caps (case, smcp, c2sc, c2pc)

◮ capital spacing (cpsp)

◮ standard ligatures (liga)◮ discretionary/special effect 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 (9) 85 / 111


OT layout tags in Adobe InDesign



OpenType layout features

demo



smcp: small capitals

Minion Pro (Adobe):



c2sc: small capitals from capitals

Minion Pro (Adobe):



pcap: petite caps (from lowercase)

Mrs Eaves (Emigre):



uni: unicase

Filosofia (Emigre):



case: case-sensitive formsMrs Eaves (Emigre):



cpsp: capital spacing

Adobe Garamond Pro (Adobe):



lnum vs. onum: lining vs. oldsytle numbers

Minion Pro (Adobe):



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



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



zero: slashed zero

Minion Pro (Adobe):



frac: fractions

Minion Pro (Adobe):



sups: superscript

Minion Pro (Adobe):



subs: subscript

Minion Pro (Adobe):



liga: standard ligatures

Adobe Caslon Pro (Adobe):



dlig: discretionary ligatures

Mrs Eaves (Emigre):



hist: historical forms

Minion Pro (Adobe):



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

Poetica (Adobe):



init, medi: initial vs. medial forms in Arabic

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



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



ornm: ornaments

Adobe Caslon Pro (Adobe):


font formats OT pros & cons

OT: advantages

some advantages of using one unicode-encoded OT font

◮ no more cross-platform encoding problems (ÖLEL will be ÖLELeverywhere)

◮ no need for external expert or symbol fonts

◮ no more search and hyphenation problems (ligature fi is treated as anf and and i)

◮ very high level typography (ligatures, true small caps, optical sizes,etc., etc.)

◮ always use unicode-encoded OT fonts!


font formats OT pros & cons

OT: cons

some disadvantages

◮ not all OT fonts have the same character coverage, naming does notalways help (but now: Std, Pro, Premiere versions)

◮ difficult to manage (lot of clicking), need for clever macros/scripts◮ most are very expensive, and rarely sold separately (“all-or-nothing”)


sample exam questions


which font format is drawn as an array of dots?

1. Type 1

2. TrueType

3. bitmap

4. OpenType




which font format is drawn as an array of dots?

1. Type 1

2. TrueType

3. bitmap

4. OpenType

which font format can accommodate the Unicode codepage?

1. Type 1

2. OpenType

3. TrueType

4. Type 3


BBN–ANG–183 Typography Digital fontsseas3.elte.hu/typo/digitalfonts.pdfBBN–ANG–183...

Documents

Transcript of BBN–ANG–183 Typography Digital fontsseas3.elte.hu/typo/digitalfonts.pdfBBN–ANG–183...