2. CS 354 2
Today’s material
In-class quiz
On path rendering lecture
Lecture topic
Project 3
Digital typography
Presentation of text with computers
3. 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
4. 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
5. 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
6. 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
9. CS 354 9
Legacy Typography
Metal movable type
…but now we use computers
10. 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!
11. 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
12. 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
13. 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
14. CS 354 14
PostScript (Adobe) Fonts
Cubic Bezier control points
Good artistic control
4 control points per curved segments
15. 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
16. 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
19. 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
26. 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
27. CS 354 27
Style within a Typeface
Italic
Slanted with
Different glyph shapes
Oblique
Slanted but
Same glyph shape
Other styles
Small Caps
28. CS 354 28
Weight
How “heavy” or “light” is the type?
30. 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.
31. 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
32. 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
33. CS 354 33
Font Metrics
Metrics for all glyphs in a font
Typeface at a particular point size
Point size of font ≈ ascender + descender
34. 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
35. 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
36. 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
38. 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…
39. 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
42. 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
43. 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
44. 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
45. 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]
46. 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
47. 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
48. CS 354 48
Pixel Density
Helps
More pixels in the
same area provide a
sharper glyph
49. 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
50. 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
51. CS 354 51
Glyph Hinting Example
Outline is fitted to the device grid
Diagonal control
master outline fitted & rasterized to
with hints device grid
52. 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
54. CS 354 54
Programs to Design Typefaces
FontLab Studio 5.0
55. 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
56. 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
57. 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
58. 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)
59. 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
60. CS 354 60
Other Text Approaches
Pack glyphs in texture atlas
Then draw textured rectangles with the
correct texture coordinates for each glyph
61. 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
62. 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
63. 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
64. 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
65. 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
66. 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)
67. 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