cs 354 typography

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