CS 354 Typography

CS 354
Typography
Mark Kilgard
University of Texas
April 12, 2012

CS 354 2

Today’s material
 In-class quiz
 On path rendering lecture
 Lecture topic
 Project 3
 Digital typography
 Presentation of text with computers

CS 354 3

My Office Hours
 Tuesday, before class
 Painter (PAI) 5.35
 8:45 a.m. to 9:15
 Thursday, after class
 ACE 6.302
 11:00 a.m. to 12

 Randy’s office hours
 Monday & Wednesday
 11 a.m. to 12:00
 Painter (PAI) 5.33

CS 354 4

Last time, this time
 Last lecture, we discussed
 Resolution-independent 2D graphics
 Path rendering
 This lecture
 Digital typography
 Projects
 Schedule demos with TA for Project 2
 Project 3 due Wednesday, April 18, 2012
 Get started!
 Coming next: Project 4 on ray tracing

CS 354 5

On a sheet of paper
Daily Quiz • Write your EID, name, and date
• Write #1, #2, #3, followed by its answer
 What are the two standard  Multiple choice:
fill modes for filling paths? Conflation artifacts are
possible in path rendering
_______ & ________ when
 Multiple choice: The a) Opacity and sub-pixel
curve for the stroke of a coverage are kept
2D cubic path segment is: separate
b) Pixels are given color
a) less than 3rd order values that exceed the
b) 3rd order [0,1] range
c) greater than 3rd order
d) not defined by a c) A path self-intersects
polynomial curve itself
d) The scene is too
complex

CS 354 6

Project 3
 Accept Biovision Hierarchy (BVH) files
containing motion capture data
 Hierarchy of affine transformations
 Visualize a stick figure
 Animate the figure

CS 354 7

BVH File Example: Hierarchy
HIERARCHY
ROOT root
{
OFFSET 0.00 0.00 0.00
CHANNELS 6 Xposition Yposition Zposition Xrotation Yrotation Zrotation
JOINT lfemur
{
OFFSET 3.80421 -3.76868 0.00000
CHANNELS 3 Xrotation Yrotation Zrotation
JOINT ltibia
{
OFFSET 0.00000 -17.76572 0.00000
JOINT lfoot
{
OFFSET 0.00000 -16.34445 0.00000
JOINT ltoes
{
OFFSET 0.00000 -1.60934 6.00613
End Site
{
OFFSET 0.00000 0.00000 2.66486
}
}
}
}
}
JOINT rfemur
{

CS 354 8

BVH File Example: Motion
MOTION
Frames: 36794
Frame Time: 0.008333
35.7416 40.7156 -2.9287 -0.9370 -5.2352 -2.6200 -2.7851 13.2004
4.3302 13.0957 0.0202 -0.0129 -11.9830 8.6358 1.0661 -4.2888
0.0247 0.0111 -2.4067 -3.3140 1.1483 12.0155 -0.0016 0.0030
-11.2183 -6.3590 -1.9419 -9.9284 -0.0039 -0.0030 -4.1054 0.3749
-0.0837 2.2164 0.9015 0.4619 0.1135 1.1612 0.4322 0.4981
-6.1446 -2.0691 -1.3898 -6.0820 -1.7213 -3.3008 -6.0705 -1.3006
-0.2821 1.1947 0.0054 -20.4349 -0.0327 -1.3623 -0.0780 -6.1668
0.0685 0.3048 11.4786 2.7558 -0.5726 -3.6453 -0.0360 -57.6996
8.0905 10.1719 -0.0236 19.2380 0.0399 33.3954 -26.0372 6.7530
35.7416 40.7156 -2.9287 -0.9365 -5.2352 -2.6195 -2.7850 13.2004
4.3303 13.0956 0.0202 -0.0129 -11.9830 8.6358 1.0661 -4.2888
0.0247 0.0111 -2.4066 -3.3140 1.1485 12.0154 -0.0016 0.0030
-11.2183 -6.3590 -1.9419 -9.9284 -0.0039 -0.0030 -4.1078 0.3751
-0.0879 2.2190 0.9024 0.4657 0.1129 1.1575 0.4347 0.5033
-6.1518 -2.0799 -1.3851 -6.0914 -1.7271 -3.2960 -6.0801 -1.3037
-0.2984 1.1874 0.0057 -20.3011 -0.0729 -1.3614 -0.0780 -5.9355
0.0689 0.0176 10.6160 2.9421 -0.5602 -3.6492 -0.0353 -57.6698
8.1021 10.1816 -0.0236 19.2560 0.0399 33.3102 -26.1956 6.6386

CS 354 9

Legacy Typography
 Metal movable type

…but now we use computers

CS 354 10

But Now Type ≈ Math
 Fonts are now represented by filled paths
 Defined by piecewise Bezier segments
 Fonts are defined by math now
 Not chunks of cast metal
 Plato’s ideals win!

CS 354 11

Cubic Bezier Segment Review
 Four control points define a cubic Bezier curve
 Over parametric range [0,1]
 Defined by 3rd order polynomial

CS 354 12

Connected Continuity Between
Two Bezier Segments
 4th point of 1st segment is
1st curve of the 2nd segment
t
en

2 nd
gm

se
se

gm
1 st

en
t

control point
shared by both segments

CS 354 13

Tangent Continuity Between
Two Bezier Segments
 Tangent of 1st segment equal to tangent of
the 2nd curve
2 nd
t

se
en

gm
gm

en
se

t
1 st

control point
shared by both segments

CS 354 14

PostScript (Adobe) Fonts
 Cubic Bezier control points
 Good artistic control

4 control points per curved segments

CS 354 15

TrueType (Apple/Microsoft ) Fonts
 Quadratic Bezier Curves
 Cheaper evaluation than cubics
 Typically requires more control points

3 control points per curved segments

CS 354 16

MetaFont Approach
 Preceded PostScript and TrueType fonts
 Designed by Douglas Knuth (Stanford)
 Used by Knuth’s TeX typesetting system

 Glyphs defined by strokes
 Not filled path contours
 Glyphs specified with a programming language
 Not friendly to artists—don’t expect artists to write programs to
define glyphs

CS 354 17

One Word, Three Typefaces

CS 354 19

Careful: Strong
Opinions Ahead
 Everyone who
reads is arguably a
student of
typography
 You can have an
opinion about type

 But designers and
artists care about
typography a lot
 And for good
reason!

Example strong sentiment

CS 354 21

Glyph Variety
 Typeface
 Serifs
 Style
 Weight
 Point size
 Character spacing
 Mono-spaced,
proportional, kerned

CS 354 22

Oldstyle (Renaissance) typefaces

CS 354 23

Modern typefaces

CS 354 24

Slab Serif typefaces

CS 354 25

San Serif typefaces

CS 354 26

Most Famous San Serif Typeface
 Hurray for Helvetica!
 Exhibited at New York Modern of Modern Art
 And subject of a documentary
 Not to be confused with its TrueType clone, Arial

CS 354 27

Style within a Typeface
 Italic
 Slanted with
 Different glyph shapes
 Oblique
 Slanted but
 Same glyph shape
 Other styles
 Small Caps

CS 354 28

Weight
 How “heavy” or “light” is the type?

CS 354 30

Text layout
 Line spacing
 Leading, inter-line spacing
 Justification
 Left, right, centered, justified

 Style sheets or templates
 Define document-wide layout parameters
 Headers, footnotes, columns, etc.

CS 354 31

Typographical Units
 Legacy units
 Specialized to the domain of typesetting
 Pre-dates the Metric system
 Points (pt)
 Traditional: 72 pt ≡ 0.996 inches
 Adobe: 72 pt ≡ 1in
 Picas (pc)
 12 pt = 1 pc
 Font-relative units
 Em—originally width of capital “M”
 En—half the size of “M”
 typically size of space between words
 Now Em corresponds to Point Size of font

CS 354 32

Point Size
 Type is historically measured in points
 1/72nd of an inch
 Problem
 Pixel size ≠ point size
 Used to be approximately true for 72 dpi
 DPI = dots per inch, or PPI = pixels per inch
 Newer displays are 96 to 120 dpi

 Often used as an approximation anyway

CS 354 33

Font Metrics

 Metrics for all glyphs in a font
 Typeface at a particular point size
 Point size of font ≈ ascender + descender

CS 354 34

Glyph Metrics
 Glyph metrics vary with each glyph in a font
 Intended to be “consistent” with other glyphs in font

Horizontal metrics Vertical metrics
Image credit: FreeType 2 Tutorial

CS 354 35

Kerning
 Spacing between two glyphs is customized to
the two glyph’s shapes
 Improves readability
 Generally encoded as ad hoc table by typeface

CS 354 36

Ligatures
 Joins two or more
characters into a
glyph
 Given “type set” feel
to text
 Sometimes stylistic,
Sometimes archaic
 Sometimes called
digraphs
 Ligatures vary with
language and script common modern
system English ligatures

CS 354 37

Combining Marks

CS 354 38

Character Sets
 Mapping of integers to characters
 Then font maps character to glyphs
 Used to be many character sets
 Tower of Babel for text interchange 
 ASCII (7-bit) for America
 IBM has EBCDIC
 Extended Binary Coded Decimal Interchange Code
 ISO/IEC 8859-1 for Western Europe
 Huge problem for East Asian languages (CJK)
 Unicode has fixed the problem…

CS 354 39

Unicode
 International standard (1991)
 Now on version 6.1
 New character points keep getting added
 One encoding for basically all human writing
systems
 More than 249,763 characters so far
 1,114,112 maximum
 In over 100 scripts
 TrueType and OpenType support Unicode
 All typefaces are incomplete in their support

CS 354 40

Overlaps with ASCII

CS 354 41

CJK Extension-A

CS 354 42

What is a computer font?
 Map of character points to “characters”
 Unicode, ASCII, etc.
 Map of “characters” to glyphs
 Font-wide metrics
 Per-glyph information
 Glyph outline
 Metrics for each glyph
 Kerning information w.r.t. adjacent glyphs
 Hints

CS 354 43

Encodings for Unicode
 Can’t use 8-bit characters for all Unicode
 Even 16-bit integer isn’t enough!
 UTF-8
 Variable-width 8-bit encoding
 Can represent every Unicode character
 Used by Linux and the web
 UTF-16
 Variable width 16-bit character encoding
 Used by Windows
 UTF-32
 32 bits per character points
 Easiest to process, least compact

CS 354 44

Rendering Outline Glyphs
 Conventional method
 CPU-based scan-line
rasterization
 Augmented by hinting
 Adaptively Sampled Distance Fields (ADFs)
 MERL’s Saffron type system
 Glyphs are static so
pre-computation
is effective
 Bitmaps often cached

CS 354 45

Massively Parallel GPU-accelerated
Path Rendering Visualized
Anchored triangle Anchored triangle
fans geometry fans net stencil
Stencil =1

Path commands
and control points Resulting net
coverage in stencil

Curved segment Curved segment
geometry net stencil

Stencil -1
Stencil +1
Credit: [Kokoji 2006]

CS 354 46

Typographic Tension
“Is the tex
t positione
d accurate
other text ly relative
and gr aph to
” ics?”
ad? ”
re ble?
to ia
sy ntif

ac
ea e

c
“Is tely
xt rs id

ur
e e

a
t

t he r ep
“Is lett

t y p r es e
re
“A

ef a nt e
ce d?
Legibility & Geometric

”
readability fidelity
 Tension resolved by increased pixel density!
 Challenge: PC displays have maintained a fairly
constant pixel density over decades
 New computing form factors changing this
 Tablets, smart phones, e-readers, wall touch screens

CS 354 47

Improving Legibility
 When screens are 75 to 100 dpi
 Legibility of text suffers
 Strategies
 Anti-aliasing glyphs
 Disadvantage: makes characters blurry
 Disadvantage: small features get lost
 Hinting
 Adjust glyph outline to preserve glyph features
 Anti-anti-aliasing technique
 ClearType
 Exploit knowledge of pixel’s color geometry
 Increase pixel density
 Assumes resolution-independent 2D
 Hard when window system depends on bitmap content

CS 354 48

Pixel Density
Helps
 More pixels in the
same area provide a
sharper glyph

CS 354 49

Font Hinting
 Overall idea
 “improving the appearance of small text at low
resolution”
 Constrains the scaling of glyphs to match designers
intent at particular device resolutions
 Harder than it sounds!
 TrueType approach
 Outlines defined with quadratic Bezier segments
 Hints defined with an assembly-like imperative
programming language to express per-glyph
adjustments

CS 354 50

Glyph Hinting Example
 Modify the outline to better match the
device’s pixel grid

master outline better sampling
poorly sampled after grid fitting

CS 354 51

Glyph Hinting Example
 Outline is fitted to the device grid
 Diagonal control

master outline fitted & rasterized to
with hints device grid

CS 354 52

ClearType
 Advantages
 Increases spatial resolution for glyphs
 Uses sub-pixel rendering
 Disadvantages
 Color fringing on text
 Assumes black text on white background
 Text must be aligned to orthogonal pixel grid
 Depends on knowledge of RGB pixel geometry
 Can vary by monitor
 Complicates text rendering
 Requires knowledge of device grid, glyph geometry, and
RGB pixel geometry
 Windows only due to Intellectual Property restrictions

CS 354 53

without ClearType

with ClearType

CS 354 54

Programs to Design Typefaces

FontLab Studio 5.0

CS 354 55

Font and Typographic APIs
 Windows
 DirectWrite atop GDI or Direct2D
 Legacy GDI
 Linux / cross platform
 Cairo
 FontConfig
 FreeType 2
 Pango
 Mac OS X
 Core Text
 Advanced Text Services for Unicode Imaging

CS 354 56

DirectWrite Functionality

 DirectWrite integrates a lot of typographic functionality
 Similar to Apple’s integrated approach with Apple Type Services for
Unicode Imaging (ATSUI), now Core Text
 Where Linux unbundles these components
 Cairo = path rendering, including text
 FontConfig = to locate font resources
 FreeType2 = font loading, font rasterizer
 Pango = text layout, script processing

CS 354 57

OpenGL Ignores Text
 OpenGL ambivalent about text
 glBitmap closest thing API support
 Relying on window system interfaces to populate
display lists with bitmap
 glXUseXFont, wglUseFontBitmaps
 Quite unique among render systems in this
ambivalence!
 Xlib, GDI, PostScript, PHIGS, PEX, Quartz 2D, Java
2D, Qt, SVG, OpenVG, Flash, Cairo, Silverlight,
Direct3D/Direct2D/DirectWrite support first-class text
 Lack of text isn’t good; it’s anomalous and odd

CS 354 58

OpenGL Bitmap Fonts
 GLUT includes implementation
 glutBitmapCharacter
 Calls glBitmap with pre-compiled bitmap data

 Also window system specific routines to get bitmaps
from system fonts
 wglUseFontBitmaps for Windows
 glXUseXFont for X Window System (Linux)

CS 354 59

OpenGL Stroke Fonts
 Draw glyph’s stroke as line segments
 Can transform arbitrarily
 Use glEnable(GL_LINE_SMOOTH) for anti-aliasing
 glutStrokeCharacter does this

CS 354 60

Other Text Approaches
 Pack glyphs in texture atlas
 Then draw textured rectangles with the
correct texture coordinates for each glyph

CS 354 61

First-class Text Support in
Various Rendering Systems
Rendering system Vendor / Sponsor First-class text?
Cairo Open source Yes
Direct2D / Direct3D Microsoft Yes
Flash Adobe Yes
GDI Microsoft Yes
Java 2D Sun Yes
OpenGL Khronos No
OpenVG Khronos Yes
Office Open XML Microsoft / ECMA Yes
PDF Adobe Yes
PHIGS ISO Yes
PostScript Adobe Yes
Qt Nokia Yes
Quart 2D Apple Yes
Scalable Vector Graphics (SVG) World Wide Web Consortium Yes
Silverlight Microsoft Yes
Xlib X Consortium Yes

CS 354 62

How did OpenGL’s lack of text
support last for so long?
 OpenGL was designed in 1992
 Pre-Unicode world
 Fonts were bitmaps of ASCII back then
 Now TrueType and OpenType dominate
 The primitive initial state of OpenGL’s font support has become
mistaken for a philosophical dictate
 Text-based applications uniformly ignore OpenGL
 Not a good thing
 3D applications have their expectations adjusted to
expect lousy text
 Not a good thing
 Example: Quake 2 console text is miniscule because textured
bitmap characters assumed text sized for 800x600 display

CS 354 63

The World Has Changed
Since 1992
 Unicode universally accepted now
 Systems ship with near-complete, resolution-independent Unicode
fonts now
 Good fonts come with your operating system license
 International character of web makes UTF-8 text common today
 Windows adoption of UTF-16 makes that common within Windows
 Web has expanded font repertoire of systems
 Content providers and users expect wide range of available fonts
 Fonts have standard names embedded in web content
 These font names span operating systems
 Screen resolution has increased
 1992: 640x480 aliased
 2009: 1920x1200+ multisampled
 Needing all text to be in small point sizes to fit screen isn’t a mandate
anymore
 3D support and acceleration is pervasive now
 Text makes sense mixed with 3D content today

CS 354 64

Direct Path Rendering of
Text in OpenGL
 Recent work
 NV_path_rendering provides GPU-acceleration of
paths, including glyphs
 Glyph support is first-class

CS 354 65

Digital Typography Trends
 Hinting is going away
 Mainly due to denser screens
 Expectation of antialiased font appearance
 Text not always presented axis-aligned
 More font variety in web content
 Improving standards
 More available fonts
 Even font variety for East Asian writing
systems

CS 354 66

Next Class
 Next lecture
 Ray casting and ray tracing
 An alternative 3D rendering approach to rasterization

 Project 3
 Begin work
 Due Wednesday, April 18, 2012

 (Project 4 will be a simple ray tracer and
immediately follow Project 3)

CS 354 67

Credits
 Pat Hanrahan (Stanford)
 Microsoft Typography
 http://www.microsoft.com/typography
 Beat Stamm’s The Raster Tragedy at
Low-Resolution Revisited
 http://shop.ilovetypography.com/product/a-world-without-type

CS 354 Typography

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CS 354 Typography

Similar to CS 354 Typography (20)

More from Mark Kilgard

More from Mark Kilgard (20)

Recently uploaded

Recently uploaded (20)

CS 354 Typography