cs 354 typography
DESCRIPTION
April 12, 2012; CS 354 Computer Graphics; University of Texas at AustinTRANSCRIPT
CS 354Typography
Mark KilgardUniversity of TexasApril 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
Daily Quiz1. What are the two standard
fill modes for filling paths?
_______ & ________
2. Multiple choice: The curve for the stroke of a 2D cubic path segment is:
a) less than 3rd orderb) 3rd orderc) greater than 3rd orderd) not defined by a polynomial curve
3. Multiple choice: Conflation artifacts are possible in path rendering when
a) Opacity and sub-pixel coverage are kept separate
b) Pixels are given color values that exceed the [0,1] range
c) A path self-intersects itself
d) The scene is too complex
On a sheet of paper• Write your EID, name, and date• Write #1, #2, #3, followed by its answer
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: HierarchyHIERARCHYROOT root{
OFFSET 0.00 0.00 0.00CHANNELS 6 Xposition Yposition Zposition Xrotation Yrotation ZrotationJOINT lfemur{OFFSET 3.80421 -3.76868 0.00000CHANNELS 3 Xrotation Yrotation ZrotationJOINT ltibia{OFFSET 0.00000 -17.76572 0.00000CHANNELS 3 Xrotation Yrotation ZrotationJOINT lfoot{OFFSET 0.00000 -16.34445 0.00000CHANNELS 3 Xrotation Yrotation ZrotationJOINT ltoes{OFFSET 0.00000 -1.60934 6.00613CHANNELS 3 Xrotation Yrotation ZrotationEnd Site{OFFSET 0.00000 0.00000 2.66486}}}}}JOINT rfemur{
CS 354 8
BVH File Example: Motion
MOTIONFrames: 36794Frame 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 BetweenTwo Bezier Segments
4th point of 1st segment is1st curve of the 2nd segment
control pointshared by both segments
1st s
egm
ent
2 nd segment
CS 354 13
Tangent Continuity BetweenTwo Bezier Segments
Tangent of 1st segment equal to tangent of the 2nd curve
1st s
egm
ent 2 nd segm
ent
control pointshared 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 18
CS 354 19
Careful: StrongOpinions 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 20
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 29
Stretch
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 system
common modernEnglish 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 sopre-computationis effective Bitmaps often cached
CS 354 45
Massively Parallel GPU-accelerated Path Rendering Visualized
Stencil -1
Stencil +1
Stencil =1
Anchored trianglefans geometry
Anchored trianglefans net stencil
Resulting netcoverage in stencil
Curved segmentnet stencil
Curved segmentgeometry
Path commandsand control points
Credit: [Kokoji 2006]
CS 354 46
Typographic Tension
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
Legibility &readability
Geometricfidelity
“Is te
xt easy
to re
ad?”
“Are
lette
rs identifi
able?” “Is the typeface
accurately represented?”“Is the text positioned accurately relative to other text and graphics?”
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 DensityHelps
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
better samplingafter grid fitting
master outlinepoorly sampled
CS 354 51
Glyph Hinting Example
Outline is fitted to the device grid Diagonal control
fitted & rasterized todevice grid
master outlinewith hints
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
with ClearType
without 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 ChangedSince 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 ofText 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