Chapter 7Chapter 7 Characters and Fonts

Multimedia SystemsMultimedia Systems

Key PointsKey Points Character setsCharacter sets map abstract characters to bit-patterns. map abstract characters to bit-patterns.

The widely used The widely used ASCIIASCII character set can only accommo character set can only accommo

date 96 printable characters. Eight bit extensions to ASdate 96 printable characters. Eight bit extensions to ASCII have been developed, culminating in the CII have been developed, culminating in the ISO 8859ISO 8859 s standards. tandards.

UnicodeUnicode, which is identical to the 16-bit subset of , which is identical to the 16-bit subset of ISO ISO 1064610646 can, with the use of UTF-16 encoding, represent can, with the use of UTF-16 encoding, represent over a million characters, which is enough for all knowover a million characters, which is enough for all known languages. n languages.

A A fontfont is a collection of glyphs, which are small images is a collection of glyphs, which are small images of character shapes. of character shapes.

Fonts may be monospaced or proportionally spaced; sFonts may be monospaced or proportionally spaced; serifed or sans serif; upright, italic or other shapes; they erifed or sans serif; upright, italic or other shapes; they may vary in width from condensed to extended and in may vary in width from condensed to extended and in weight from ultra-light to ultra-bold.weight from ultra-light to ultra-bold.

Key PointsKey Points Fonts may be classified as Fonts may be classified as texttext or or displaydisplay. . The choice of fonts for multimedia The choice of fonts for multimedia

productions must take account of the special productions must take account of the special requirements of display on a computer requirements of display on a computer monitor. monitor.

Fonts may use Fonts may use bitmapsbitmaps or or outlinesoutlines of of glyphs. Bitmapped fonts cannot be scaled glyphs. Bitmapped fonts cannot be scaled accurately; outline fonts need special accurately; outline fonts need special software to render the glyphs on screen. software to render the glyphs on screen.

Common outline font formats are Adobe Common outline font formats are Adobe Type1 (PostScript) and TrueType Type1 (PostScript) and TrueType

Multiple MasterMultiple Master fonts can be used to fonts can be used to generate arbitrary instances of a typeface. generate arbitrary instances of a typeface.

Character SetsCharacter Sets Character setsCharacter sets map abstract map abstract

characters to bit-patterns.characters to bit-patterns. Abstract character and its graphic Abstract character and its graphic

representationrepresentation Character repertoireCharacter repertoire Code points (code value)Code points (code value) Each abstract character maps to a Each abstract character maps to a

code pointcode point

ASCIIASCII ASCII (American Standard Code for Information ASCII (American Standard Code for Information

Interchange)Interchange) 128 code points128 code points 0-31, 127: control characters0-31, 127: control characters

ISO 646, 1972ISO 646, 1972 8-bit extension8-bit extension ISO 8859-1: ISO Latin 1ISO 8859-1: ISO Latin 1 ISO 8859-2: Latin 2, Eastern EuropeanISO 8859-2: Latin 2, Eastern European ISO 8859-5 (Cyrillic), 8859-7 (modern Greek)ISO 8859-5 (Cyrillic), 8859-7 (modern Greek) ShortcomingsShortcomings

Not achieve universal adoptionNot achieve universal adoption 256 is not enough256 is not enough

ISO 10646ISO 10646 Universal Multiple-Octet Coded

Character Set (UCS) 32-bit character set32-bit character set Hypercube, 4-D cubeHypercube, 4-D cube

256 groups256 groups A group= 256 planes of 256 rowsA group= 256 planes of 256 rows A row= 256 charactersA row= 256 characters

Each character (g, p, r, c)Each character (g, p, r, c) Group g, plane p, row r, and column cGroup g, plane p, row r, and column c

ISO Latin1= (0, 0, 0, *)ISO Latin1= (0, 0, 0, *) Fig. 7.1Fig. 7.1

UnicodeUnicode 16-bit character set16-bit character set CJK consolidation (CJK consolidation ( 合併合併 ))

字太多字太多 Contemporary major language and classical foContemporary major language and classical fo

rmsrms Punctuation marks, technical and mathematicPunctuation marks, technical and mathematic

al symbols, arrow, dingbats (miscellaneous syal symbols, arrow, dingbats (miscellaneous symbols), …mbols), …

DingbatsDingbats Point hands, starsPoint hands, stars

Unicode (2)Unicode (2) 39,000 symbols39,000 symbols Reserved for UTF-16 expansionReserved for UTF-16 expansion 6400 code points for private use6400 code points for private use Not for music notation or other Not for music notation or other

symbolic writing systemsymbolic writing system Basic Multilingual Plane (BMP)Basic Multilingual Plane (BMP)

(0, 0, *, *)(0, 0, *, *)

EncodingEncoding Quoted-Printable (QP)Quoted-Printable (QP)

8-bit ASCII => 7-bit ASCII8-bit ASCII => 7-bit ASCII 128-255= three bytes128-255= three bytes

First byte: ACSII code for =First byte: ACSII code for = Remaining two: hexadecimal digitalsRemaining two: hexadecimal digitals

MIME content typeMIME content type Text/html; charset = iso-8859-1Text/html; charset = iso-8859-1

ISO 10646 EncodingISO 10646 Encoding ISO 10646ISO 10646

UCS-4 (4 bytes)UCS-4 (4 bytes) BMP (0, 0, *, *) : top two bytes set to zeroBMP (0, 0, *, *) : top two bytes set to zero Universal Character Set Universal Character Set

UCS-2 (2 bytes)UCS-2 (2 bytes) Drop top two bytesDrop top two bytes UCS-2 = UnicodeUCS-2 = Unicode

Unicode EncodingUnicode Encoding Three UCS Transformation Formats (UTFs)Three UCS Transformation Formats (UTFs)

UTF-7, UTF-8, UTF-16UTF-7, UTF-8, UTF-16 UTF-8 (8-bit bytes)UTF-8 (8-bit bytes)

If their high-order byte is zero, low-order byte < 128=> a single If their high-order byte is zero, low-order byte < 128=> a single bytebyte

OtherwiseOtherwiseup to 6 bytes with highest bit = 1up to 6 bytes with highest bit = 1

UTF-7UTF-7 ~ QP, pure ASCII text~ QP, pure ASCII text

UTF-16UTF-16 Transforming a subset of the Transforming a subset of the UCS-4 repertoireUCS-4 repertoire into into pairs of Upairs of U

CS-2 valuesCS-2 values from a reserved range from a reserved range Access to an extra 15 planes of ISO 10646Access to an extra 15 planes of ISO 10646

UTF-16UTF-16

UCS-4UCS-4 UTF-16UTF-16

x< 0x10000 x< 0x10000 xx

0001 0000..0001 0000..0010 FFFF0010 FFFF

y;z;y;z;y = y = ((x - 0001 0000) / 400) + D800((x - 0001 0000) / 400) + D800z =z =((x - 0001 0000) % 400) + DC00((x - 0001 0000) % 400) + DC00

x >= 0011 x >= 0011 00000000

unmappedunmapped

FontsFonts• Glyph as a specific representation of a charact

er

A A A A A A• A font as a collection of glyphs used for the vis

ual depiction of characters• A font is often associated with a set of paramet

ers (size, posture, weight, …) set to certain value

Classification and Choice of Classification and Choice of FontsFonts

Monospaced & ProportionalMonospaced & Proportional Serif & Sans serifSerif & Sans serif Upright shape & Italic shapeUpright shape & Italic shape Condensed & ExtendedCondensed & Extended WeightWeight

Monospaced & ProportionalMonospaced & Proportional Monospaced (or fixed-width)Monospaced (or fixed-width)

Lucida ConsoleLucida Console Each letter occupies the same amount of horizEach letter occupies the same amount of horizontal space, so that the text looks as if it ontal space, so that the text looks as if it was typed on a typewriter.was typed on a typewriter.

Proportional Proportional Times New RomanTimes New Roman

Each letter occupies an amount of horizontal space propEach letter occupies an amount of horizontal space proportional to the width of the glyph, so that the text looks ortional to the width of the glyph, so that the text looks as if it was printed in a book.as if it was printed in a book.

Serif & Sans serifSerif & Sans serif

Serifs: little strokeSerifs: little stroke MS Reference SerifMS Reference Serif

CC Sans Serif FontSans Serif Font

Sans: withoutSans: without MS Reference Sans SerifMS Reference Sans Serif

CC

SerifsSerifs Difficult to render accurately at low Difficult to render accurately at low

resolutionsresolutions

Hard to read on a computer screenHard to read on a computer screen

Sans Serif fonts are widely used for Sans Serif fonts are widely used for windows titles and menu entries.windows titles and menu entries.

Upright shape & Italic shapeUpright shape & Italic shape Upright: vertical strokesUpright: vertical strokes Italic: slanted to the right (Fig. 7.7)Italic: slanted to the right (Fig. 7.7) Slanted fontsSlanted fonts (Fig. 7.8) (Fig. 7.8)

Share the rightward slope of italic fonts but Share the rightward slope of italic fonts but lack their calligraphic (lack their calligraphic ( 書法的書法的 ) quality) quality

Apply a shear transformation to an upright fApply a shear transformation to an upright fontont

Some italic fonts: handwritingSome italic fonts: handwriting Calligraphic fontCalligraphic font

ShapesShapes Outline fontsOutline fonts Hollow fontsHollow fonts Fonts with drop shadowsFonts with drop shadows

Condensed fontsCondensed fonts Extended fontsExtended fonts

WeightWeight Boldface (bold)Boldface (bold) Ultra-bold, semi-bold, light, ultra-lightUltra-bold, semi-bold, light, ultra-light Reserved for HeadingsReserved for Headings Never use boldface for emphasis, always italicsNever use boldface for emphasis, always italics Italic text renders badly at low resolutions => Bold text Italic text renders badly at low resolutions => Bold text

FamiliesFamilies Atalic version, bold version of an upright Atalic version, bold version of an upright

fontfont Group in to a familyGroup in to a family

Lucida Bright family = 20 fontsLucida Bright family = 20 fonts

When fonts from different families are cWhen fonts from different families are combined, their differences can be very nombined, their differences can be very noticeable (Fig. 7.12)oticeable (Fig. 7.12) => Carefully avoided => Carefully avoided

Text & DisplayText & Display Text: for continuous textText: for continuous text

Unobtrusive (Unobtrusive ( 不突出不突出 )) Problematical: low resolution of monitorsProblematical: low resolution of monitors Text for display: 60% largerText for display: 60% larger

Display: heading, signs or advertising slogans Display: heading, signs or advertising slogans on posteron poster Short messageShort message Eye-catchingEye-catching Fig. 7.13Fig. 7.13

Desktop publishing (DTP): printing on paperDesktop publishing (DTP): printing on paper No control over fonts that will be used when text No control over fonts that will be used when text

is finally displayedis finally displayed Software used for display may let users override Software used for display may let users override

the original fonts with those of their own the original fonts with those of their own choosing.choosing.

Most fonts’ repertoires consist of the letters from Most fonts’ repertoires consist of the letters from some alphabet.some alphabet. Not include lower case lettersNot include lower case letters

Mathematical symbols are usually grouped into Mathematical symbols are usually grouped into their own fonts, knows as symbol fonts or pi fonts.their own fonts, knows as symbol fonts or pi fonts.

Font MeasurementFont Measurement Absolute Absolute length unitslength units

points (pt) points (pt) 1/72 inch = 0.3528 mm1/72 inch = 0.3528 mm

picas (pc)picas (pc) 12 point = 4.2333 mm12 point = 4.2333 mm

RelativeRelative length units length units ex units (ex) ex units (ex)

X-height X-height em units (em) em units (em)

The width of a capital letter MThe width of a capital letter M one ex is equal to one-half em one ex is equal to one-half em

Font Terminology Font Terminology

Horizontal Layout Horizontal Layout Bounding boxBounding box Left side bearing beaLeft side bearing bea

ringXringX Top side bearing beaTop side bearing bea

ringYringY

Vertical Layout Vertical Layout

KerningKerning Kerning is the art of character fitting so that thKerning is the art of character fitting so that th

e space between characters is visually correct e space between characters is visually correct rather proportionally set by the machine.rather proportionally set by the machine.

Most often recommended in headlines, and laMost often recommended in headlines, and larger settings of type, it's the art of carefully mrger settings of type, it's the art of carefully moving characters together so the word looks aoving characters together so the word looks and reads better without holes within the word.nd reads better without holes within the word.

Good cases are: Ta, To, Wo, Po or other situatiGood cases are: Ta, To, Wo, Po or other situations where a hole is formed by a wide portion ons where a hole is formed by a wide portion of a letter.of a letter.

LigatureLigature A ligature (A ligature ( 連字體連字體 ) is a set of two or more characters ) is a set of two or more characters

that have been designed into a harmonious "set". that have been designed into a harmonious "set".

Kerning, ligatures: High-quality text layout softwareKerning, ligatures: High-quality text layout software Word processors and web browsers cannot do this.Word processors and web browsers cannot do this.

BitmapBitmap Fonts Fonts

BitmapBitmap Fonts Fonts Bitmap fonts are by nature pre-rasterized, tBitmap fonts are by nature pre-rasterized, t

hey render very quickly, making them a goohey render very quickly, making them a good choice where speed is important. d choice where speed is important.

Cannot be scaled gracefullyCannot be scaled gracefully Each platform has its own native Bitmapped Each platform has its own native Bitmapped

font format.font format.

OutlineOutline Fonts Fonts OutlineOutline Fonts Fonts

Outline fonts describe the character outlineOutline fonts describe the character outlines with a combination of control points and cs with a combination of control points and curves.urves.

Cross-plateformCross-plateform Adobe type 1 (PostScript fonts), TrueTypeAdobe type 1 (PostScript fonts), TrueType Scaled arbitrarilyScaled arbitrarily The same font for display and printing.The same font for display and printing. Adobe type manager (ATM): Adobe type 1Adobe type manager (ATM): Adobe type 1

TrueType & PostScriptTrueType & PostScript TrueType: quadratic (TrueType: quadratic ( 二次二次 ) curves) curves PostScript: cubic Bezier curvesPostScript: cubic Bezier curves

TrueType font is stored as a series of poiTrueType font is stored as a series of points which define the lines and curves mants which define the lines and curves making up its shape.king up its shape.

OpenType unifies Type 1 and TrueTypeOpenType unifies Type 1 and TrueType

Hints and InstructionHints and Instruction Extra information for low resolutionsExtra information for low resolutions

Type 1: hintsType 1: hints TrueType: instructionTrueType: instruction

ClearTypeClearType Windows XPWindows XP

ClearType delivers improved font display resolClearType delivers improved font display resolution over traditional anti-aliasing.ution over traditional anti-aliasing.

It improves readability on color LCD monitors It improves readability on color LCD monitors with a digital interface.with a digital interface.

Readability on CRT screens can also be somewReadability on CRT screens can also be somewhat improved.hat improved.

ClearTypeClearType This is a picture of ClearType under extreThis is a picture of ClearType under extre

me magnification, with the sub-pixels of ame magnification, with the sub-pixels of an LCD explicitly rendered to show the strun LCD explicitly rendered to show the structure of the ClearType letterforms.cture of the ClearType letterforms.

Anti-AliasingAnti-Aliasing Fig. 7.18Fig. 7.18 Anti-aliasing should be applied to Anti-aliasing should be applied to

large fonts.large fonts.

Multiple Master FontsMultiple Master Fonts

A new developmentA new development Medium weight font might lie half-way Medium weight font might lie half-way

between ultra-bold and ultra-light glyphsbetween ultra-bold and ultra-light glyphs 4 Design axes: weight, width, optical size, 4 Design axes: weight, width, optical size,

serif styleserif style Fig 7.19: 3 design axisFig 7.19: 3 design axis A partial answer to A partial answer to

font substitution problemfont substitution problem