April 12, 2012; CS 354 Computer Graphics; University of Texas at Austin

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

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

7. 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
CHANNELS 3 Xrotation Yrotation Zrotation
JOINT lfoot
{
OFFSET 0.00000 -16.34445 0.00000
CHANNELS 3 Xrotation Yrotation Zrotation
JOINT ltoes
{
OFFSET 0.00000 -1.60934 6.00613
CHANNELS 3 Xrotation Yrotation Zrotation
End Site
{
OFFSET 0.00000 0.00000 2.66486
}
}
}
}
}
JOINT rfemur
{

8. 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

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

17. CS 354 17
One Word, Three Typefaces

18. CS 354 18

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

20. CS 354 20

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

22. CS 354 22
Oldstyle (Renaissance) typefaces

23. CS 354 23
Modern typefaces

24. CS 354 24
Slab Serif typefaces

25. CS 354 25
San Serif typefaces

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?

29. CS 354 29
Stretch

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

37. CS 354 37
Combining Marks

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

40. CS 354 40
Overlaps with ASCII

41. CS 354 41
CJK Extension-A

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

53. CS 354 53
without ClearType
with ClearType

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