CS148: Introduction to Computer Graphics and Imaging

Typography

Topics

Types of fonts
Font properties
Font metrics
Box and glue model for layout
Unicode

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 1
References

CS148 Lecture 9 Pat Hanrahan, Fall 2009

References

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 2
 Types of Type

(From R. Williams, Non-Designers Design Book)

The Book of Kjells

Page 3
Oldstyle (Renaissance)

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Modern

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 4
Slab Serif

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 5
Sans Serif

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 6
Other Languages

Calligraphy
龍  Font

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Properties

Page 7
Typographical Size

Units
Points (pt)
Traditional: 72 pt = 0.996 in
Adobe: 72 pt = 1 in
Picas (pc)
12 pt = 1 pc
Em (ps x ps)
En (M/2)
Standard sizes and names
http://www.sizes.com/tools/type.htm

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Font Sizes

Units: Pixels (px)

Problem: the actual size of the character depends on

the size and resolution of the display
 Early displays: 72 ppi
 Newer displays: 96 ppi

Operating systems (and browsers) assume different ppi

 Mac: 72 ppi -> 1 px ~ 1pt
 Windows: 96 ppi

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 8
Styles

“a” changed

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Weights

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 9
Stretch

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Adobe Multiple Master Fonts

Myriad MM

Weight

Width
CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 10
Font Metrics

Font size ~ ascender + descender

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Different x-heights

The bigger the x-height the larger the font seems

Small fonts designed for the screen (like Tahoma &

Verdana) have large x-heights. They are also
stretched and have fairly uniform letter spacing.
CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 11
Leading

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Kerning

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 12
Ligatures

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Combining Marks

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 13
Glyph Variants

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Glyph Metrics

Freetype Glyph Metrics

http://freetype.sourceforge.net/freetype2/docs/glyphs/glyphs-3.html

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 14
Box and Glue Model (Knuth)

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Box and Glue Example

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 15
Unicode [unicode.org]

“Unicode provides a unique number for every

character, no matter what the platform, no matter what
the program, not matter what the language”

 Organized as 256 code pages

 http://unicode.org/charts
 Initial version encodes 65K (16-bit) characters
 Characters distinguished by charcodes
 Encodings represent charcodes as numbers
 ASCII, UTF-8, UTF-16, ISO-8859-1, …
 <?xml version=“1.0” encoding=“utf-8” ?>
CS148 Lecture 9 Pat Hanrahan, Fall 2009

OpenType [Adobe, Apple, Microsoft]

Encoding
Character map: encoding -> glyph
Glyphs
Glyph metrics

May contain multiple character maps

May contain multiple fonts
May contain bitmap and outline fonts
Freetype.org is an open source implementation

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 16
Anatomy of a Glyph

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 17
Rasterization

Scaled Outline Raster Image

(from Apple TrueType Reference Manual)

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Anti-Aliasing & ClearType

Anti-Aliased Rendering

Microsoft ClearType

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 18
Representing Bitmaps

Glubyte rasters[24] = {!
0xc0, 0x00,!
0xc0, 0c00,!
0xc0, 0x00,!
0xc0, 0c00,!
0xc0, 0c00,!
0xff, 0x00,!
0xff, 0x00,!
0xc0, 0x00,!
0xc0, 0x00,!
0xc0, 0x00,! Note: Rows have 1 byte alignment
0xff, 0x00,!
0xff, 0x00! glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
};
CS148 Lecture 9 Pat Hanrahan, Fall 2009

Drawing Bitmaps

Syntax
!glBitmap( w, h, xoff, yoff, xinc, yinc, data );

Example:
!glRasterPos2i( 20, 20 );!
!glBitmap( 10, 12, 0.0, 0.0, 11.0, 0.0, rasters );

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 19
Things to Remember

Typography
 Types of type
 Style, weight, stretch
 Character encoding is different than glyph index
 Font metrics
 Layout, box and glue model
 Glyph outlines are modeled using splines

CS148 Lecture 9 Pat Hanrahan, Fall 2009

Page 20