DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

DIGITAL TYPOGRAPHY
25 years of text rendering in computer graphics

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

Adaptive Distance Field (Fresken et al., 2000)
Bitmap font (Kilgard, 1994)

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

GPU Bézier (Loop & Blinn, 2005)

Stencil & Cover (Kilgard & Bolz, 2012)

Arc SDF (Esfahbod, 2011)

Path Finder (Walton, 2017)
Multi-channel SDF (Chlumsky, 2016) GPU glyphs (Lengyel, 2017)

Higher 2D Quality (Rougier, 2013)

1 /60
fi

Signed Distance Field (Green, 2007)(Bost J rnal, 1855)

CONCLUSION• Beyond this course• Questions & answers

ou

Texture font (Kilgard, 1997)

Over The Lazy Dog

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU onlyon

Stroke font (Kilgard, 1994)

SIGGRAPH '18 Course - August 12-16, 2018 - Vancouver, BC, Canada - 10.1145/3214834.3214837

N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

INTRODUCTION
Typography is the art of arranging type to make written
language legible, readable, and appealing whendisplayed.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

However, for the neophyte, typography is mostly
apprehended as the juxtaposition of characters
displayed on the screen while for the expert,
typography means typeface, scripts, unicode, glyphs,
ascender, descender, tracking, hinting, kerning,
shaping, weight, slant, etc.

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

Typography is actually much more than the mererendering of glyphs and involves many different
concepts.

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

fi

2 /60

A specimen sheet of typefaces and languages,
by William Caslon I, letter founder; dated 1734.

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

From “Nope, not Arabic” tumbler (https://nopenotarabic.tumblr.com/)

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

3 /60
fi

NOPE, NOT ARABIC!

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

fi

4 /60

I ? UNICODEDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)BAD KERNING (keming)
Disaster is a space away… (FLICK, click, CLINT, FINAL)

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

Rockstar game removed the extra space

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

click versus dick
fi

5 /60

Apple added an extra spaceDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

The Matrix code is actually a sushi recipe…

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

6 /60
fi

GIBBERISH CAN BE PRETTY…

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

DIGITAL TYPOGRAPHY
Typography is a vast and complex domain with many rules.
You might consider to enforce some basic rules.

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

fi

7 /60

The Anatomy of Typography - Janie Kliever

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

UNICODE
Unicode is a computing industry standard for theconsistent encoding, representation, and handlingof text expressed in most of the world's writing
systems. The latest version contains a repertoireof 136,755 characters covering 139 modern andhistoric scripts, as well as multiple symbol sets.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

XKCD #1953

CONCLUSION• Beyond this course• Questions & answers

UTF-8 (Unicode Transformation Format, RFC3629) is a variable width character encoding
capable of encoding all 1,112,064 valid code
points in Unicode using one to four 8-bit bytes.

fi

8 /60

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)FAMOUS FONTS

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

1495

1734

1757

1798

1926

1931

1957

1982

CONCLUSION• Beyond this course• Questions & answers

fi

9 /60

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

When text is rendered by a computer, sometimes characters are displayed as “tofu”. They are little
boxes to indicate your device doesn’t have a font to display the text. Google has been developing
a font family called Noto, which aims to support all languages with a harmonious look and feel.
Noto is Google’s answer to tofu.

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

10 /60fi

ONE FONT TO RULE’EM ALL

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answersfi

11 /60ITSY BITSY BITMAP FONTSDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

BASIC TYPOGRAPHY

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

Kerning is the process of adjusting
the spacing between characters in
a proportional font.

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

A ligature occurs where two or more graphemesor letters are joined as a single glyph.

A diacritic mark is a glyph added to a letter,or basic glyph.

CONCLUSION• Beyond this course• Questions & answers

Hinting is the use of instructions toadjust the display of a font so that
it lines up with a rasterized grid.

fi

fi

12 /60A various number of face metrics are de ned
for all glyphs in a given font.

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)ADVANCED TYPOGRAPHY

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering PipelineदPART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

Stylistic alternate allows to replacea glyph by some variant.

CONCLUSION• Beyond this course• Questions & answers

The title is ‫ مفتاح معايير الويب‬in Arabic.

 ् ्

13 /60fiयComplex text layout (CTL) refers to
the typesetting of writing systems inwhich the shape or positioning of agrapheme depends on its relation toother graphemes (wikipedia).

The set of rules applied to produce the correct order at the timeof display are described by the Unicode Bidirectional Algorithm.

द्ध्र्य

र

Text shaping is the process of converting Unicode
text to glyph indices and positions.

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

 ्

ध

Etc.

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

Anatomy of the Hindi Font by Aditya Dipankar.

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

14 /60fi

ADVANCED TYPOGRAPHYDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)OTHER FORMS OF COMPLEX LAYOUTINTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

k
X

1
>
n
n=1

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)11
dx = ln(k + 1)
x

1
X
( 1)n
1 1 1
⇡
=1
+
+ ··· =
2n
+
1
3
5
7
4
n=0
Z b
f (x)dx = F (b) F (a)PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

aPART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU onlyf (a + h) f (a)f (a) = lim
h!0h(z/w) = z̄/w̄
pr = |z| = x2 + y 2
1 2 0 10 1=
3 4 0 0
0 3
0CONCLUSION• Beyond this course• Questions & answers<latexit sha1_base64="6IszZoljZhpuB0XoQyi7/Qt6ekc=">AAADzXicfVNdb9MwFM1aPkb52uCRF8M0SFRti7uh8RI0gTQhXhgS+5DmpnJcZ7WaOCF2WFPPvPL/eOOZP8JNG6mjQ1iK7s095x6fXDtRngilff/XSqt96/adu6v3OvcfPHz0eG39yYnKyoLxY5YlWXEWUcUTIfmxFjrhZ3nBaRol/DQav6/x02+8UCKTX3SV835KL6SIBaMaSoP1ld9ElenAyADbcIxIXFBmsDXSoreICKkHODTjLrYLaGLRcIICRBLpAuIR0tnsNCpQ9m0IfbGumg53C3sh6FnTk7VOgDDaWqjtWtRdvL2217H9GcaGmVb1frMyyYU1e3a+ae2PhhEiz1HsTry5r0M38kDl0KVza/EryAKSCDA4IjoDh3Op2KXdkbcFwbNm1EhmMK16mMad7lx6tV0S0cJM7c4sXjY0zSda6SrhqAiuplcBUV8LbSZhr1uFvYYT8QshTZRSXQgYGkYvUY8QtAtxDyLhcrhAl9k+sDCw6ugvs4P/0neX6YO1DX/bny10M8FNsuE062iw9pMMM1amXGqWUKXOsZ/rvqGFFizhtkNKxXPKxvSCn0MqacpV38xuo0WbUBmiOCvgkRrNqtc7DE2VqtIImOBvpJaxuvgv7LzU8Zu+ETIvNZdsvlFcJgiOtL7aaCgKznRSQUJZIcArYiMKJ63hB+jAEPDyJ99MTnrb2N/Gn/c2Dt4141h1njkvHNfBzr5z4Hxwjpxjh7U+tvJW1Zq2P7XL9lX7+5zaWml6njp/rfaPPyyXLLA=</latexit>

15 /60fi

Z k+1

Made with Latex (what else?)

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

FONT FORMATS
Types
Type 1(.pfm, .pfb): glyphs are described with cubic Bézier curves
True Type (.ttf): glyphs are described with quadratic Bézier curves
Open Type (.otf): glyphs are described with quadratic or cubic Bézier curves
Web Open Font (.woff): compressed TrueType or Open TypeAnd many more actually…

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

Cubic Bézier curves

Quadratic Bézier curves

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

The Missing Guide to Font Formatsfi

16 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)A PRIMER ON BÉZIER CURVES
Pomax (2017) A primer on Bézier curves

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

Sergei Natanovich Bernstein (1912) / Paul de Casteljau (1959) / Pierre Bézier (1962)

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

A Bézier curve is de ned by a set of control points P0 through Pn, where n is called its order.
The rst and last control points are always the end points of the curve.
Linear (n=1):
Quadratic (n=2):
Cubic(n=3):PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

BP0/P1(t) = (1-t)P0 + tP1
BP0/P1/P2(t) = (1-t)BP0/P1(t) + tBP1/P2(t)BP0/P1/P2/P3(t) = (1-t)BP0/P1/P2(t) + tBP1/P2/P3(t)P1PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

P1

P1

CONCLUSION• Beyond this course• Questions & answers

P0

P0

P2

P3

P0

P2

Some related problems: signed distance, thick curves, subdivision, bounding box, linear speed,
self-intersection, curve splitting, arc length, approximation of a cubic with quadratics, etc.
fi

fi

fi

17 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)A PRIMER ON BÉZIER CURVES
Pomax (2017) A primer on Bézier curves

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

Cubic Bézier curves have a lot of corner cases: in ection points, cusp, loop, overlap

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

P1PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

P1

P0

P0

P0
P1

CONCLUSION• Beyond this course• Questions & answers

P3

P3

P3

P1

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

P2
P1

P3

P3
P3

P2

P0

P2

fl

18 /60
fi

P2

P2

P1
P0

P0

P2

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

ANATOMY OF A GLYPH
Vector fonts are collections of vector images, consisting of lines and curves de ning theboundary of glyphs (wikipedia). Type 1 and Type 3 Postscript fonts are described with cubic
Bézier curves. Truetype fonts are described with quadratic Bézier curves.

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

Images by The Australian Graphic Supply Co
fifi

19 /60

Images by FontLab

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

FONT TABLES
Open Type Tables
BASE: Baseline data
CMAP: Character to glyph mapping
GDEF: Glyph de nition data
GSUB: Glyph substitution data

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

Single: Replaces one glyph with one glyph.
Multiple: Replaces one glyph with more than one glyph.
Alternate: Replaces one glyph with one of many glyphs.
Ligature: Replaces multiple glyphs with one glyph.
Context: Replaces one or more glyphs in context.
Chaining: Replaces one or more glyphs in chained context.

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

GPOS: Glyph positioning data
JSTF: Justi cation data

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

and many more…

CONCLUSION• Beyond this course• Questions & answers

Libraries
STB_truetype (single header le, basic support)→ https://github.com/nothings/stb

FreeType (standard support without text shaping)→ https://www.freetype.org

HarfBuzz (advanced support with text shaping)→ https://harfbuzz.github.io

fi

fi

fi

fi

20 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)TEXT RENDERING PIPELINEINTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

h
s
i
l
g
n
E
‫ع‬
‫ر‬
‫ب‬
‫ي‬
123

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

1PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

45 6E 67 6C 69 73 68 20 D9 8A
D8 A8 D8 B1 D8 B9 20 31 32 33

Rendering

6

English123 ‫عربي‬2

CONCLUSION• Beyond this course• Questions & answers

3
21 /60fi

Latin Shortcut

English ‫ ي ب ر ع‬123

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU onlyfi

Text Buffer

Itemization

Justi cation

English ‫ ي ب ر ع‬123

English 123 ‫عربي‬Reordering

English 123 ‫ي ب ر ع‬

Shaping

5
4

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

PART I
Near the end of the last century (1997), Mark
Kilgard introduced a simple OpenGL-based API
for texture mapped text.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

The method packed many rasterized glyphs
into a single alpha-only texture map and used alookup table to assign texture coordinates to aquadrilateral to extract a glyph when rendering.

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answersfi

22 /60

Image by Daniel Ullrichcommons.wikimedia.org/wiki/User:Threedots

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

Same input, different outputs

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

FreeType Native CFF Rasterizer

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

FreeType Light Auto Hint Rasterizer

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

FreeType using the New Adobe CFF Rasterizer (2013)

CONCLUSION• Beyond this course• Questions & answers

23 /60fi

2D RASTERIZATIONDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

GDI rendering of FacitWeb (above) and Minion Pro (below) with no antialiasing.

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline(Source Adobe Typekit Blog)

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

24 /60fi

2D RASTERIZATIONDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

GDI rendering of FacitWeb (above) and Minion Pro (below) with standard antialiasing.

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline(Source Adobe Typekit Blog)

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

25 /60fi

2D RASTERIZATIONDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

Core text rendering of FacitWeb (above) and Minion Pro (below).

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline(Source Adobe Typekit Blog)

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

26 /60fi

2D RASTERIZATIONDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

DirectWrite rendering of FacitWeb (above) and Minion Pro (below).

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline(Source Adobe Typekit Blog)

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

27 /60fi

2D RASTERIZATIONDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

GDI rendering of FacitWeb (above) and Minion Pro (below) with ClearType enabled.

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline(Source Adobe Typekit Blog)

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

28 /60fi

2D RASTERIZATIONDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

Gamma correction, hinting, energy distribution, etc.

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

29 /60fi

2D RASTERIZATIONDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)TEXTURE FONT I
Kilgard (1997) A Simple OpenGL-based API for Texture Mapped Text

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

Texture mapping is well suited for rendering text because textures can be rendered quickly withcurrent 3D hardware and even via clever programming of today's fast CPUs. Textures can be
stretched. rotated, scaled, and even projected (assuming the texture mapping is perspective
correct) so that texture mapped text looks reasonable in 3D scenes.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

https://github.com/rougier/freetype-glfi

30 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

BIN PACKING ALGORITHMS
Jylänky (2010) A Thousand Ways to Pack the Bin

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

Several algorithms that can be used to solve the problem of packing rectangles into twodimensional nite bins. Most of the algorithms have well been studied in literature, but some ofthe variants are less known and some are apparently regarded as "folklore" and no previous
reference is known. Different variants are presented and compared.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answersNaïve packingfifi

31 /60

Skyline-BL packing

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)TEXTURE FONT II
Rougier (2013) Higher Quality 2D Text Rendering

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

When displaying text on low-resolution devices (DPI < 150), one typically has to decide if one
wants to respect the pixel grid (e.g., Cleartype technology / Microsoft / native hinting) for crisp
rendering or, to privilege glyph shapes (Quartz technology / Apple / no hinting) at the cost of
blurring. There is, however, a third way that may combine the best of the two technologies(vertical hinting).

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

No hintingfi

32 /60Native hinting

Auto hinting

Vertical hinting

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)TEXTURE FONT II
Rougier (2013) Higher Quality 2D Text Rendering

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

i.
ii.
iii.
iv.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

Use horizontal RGB sub-pixel anti-aliasing for LCD at panels.
Use vertical hinting only and completely discard the horizontal one.
Use accurate glyph advance values from unhinted glyph
Use accurate, high resolution values from the kerning table.

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

flfi

33 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

Rougier (2013) Higher Quality 2D Text Rendering

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

Subpixel rendering on the CPU
Subpixel positioning on the GPU

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

34 /60fi

TEXTURE FONT IIDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

PART IIDistance based rendering takes advantage of asigned distance function (that can beapproximated) to compute the individual
coverage for each pixel.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

The coverage can be selected to implement
various effects (stroke, thinner, thicker, shadow,
etc)

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

fi

35 /60Work & image by Xavier Casalta
casaltaxavier.com

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

Distance based rendering takes advantage of a signed distance function (that can beapproximated) to compute the individual coverage for each pixel. The coverage can beselected to implement various effects (stroke, thinner, thicker, shadow, etc)

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

36 /60fi

DISTANCE BASED RENDERINGDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)COMPUTING SDF
Gustavson & Strand (2011) Anti-Aliased Euclidean distance transform

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

We present a modi ed distance measure for use with distance transforms of anti-aliased, areasampled grayscale images of arbitrary binary contours. The modi ed measure can be used in any
vector-propagation Euclidean distance transform. Our test implementation in the traditional
SSED8 algorithm shows a considerable improvement in accuracy and homogeneity of the
distance eld compared to a traditional binary image transform.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

See also http://contourtextures.wikidot.com

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

fi

fi

fi

fi

37 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)SINGLE CHANNEL SDF
Green (2007) Improved Alpha-Tested Magni cation for Vector Textures

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

A distance eld is generated from a high resolution image, and then stored into a channel of alower-resolution texture. In the simplest case, this texture can then be rendered simply by using
the alpha- testing and alpha-thresholding feature of modern GPUs, without a custom shader. This
allows the technique to be used on even the lowest-end 3D graphics hardware. With the use of
programmable shading, the technique is extended to perform various special effect renderings,
including soft edges, outlining, drop shadows, multi-colored images, and sharp corners.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

64x64

Alpha blended

CONCLUSION• Beyond this course• Questions & answers

fi

fi

fi

38 /6064x64

Alpha tested (no shader)

64x64

Alpha tested (shader)DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

SDF: MULTIPLE CHANNELS
Chlumsky (2015) Shape Decomposition for Multi-channel Distance Fields

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

Edge Coloring

CONCLUSION• Beyond this course• Questions & answersfi

39 /60

Plane partioning

Decomposition

Inner padding

Padded DecompositionDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

SDF: MULTIPLE CHANNELS
Chlumsky (2015) Shape Decomposition for Multi-channel Distance Fields

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

Texturefi

40 /60Single channel SDF

Multi channel SDF

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)ARC APPROXIMATION
Esfahbod (2012) Glyphy

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

Since distance to arbitrary Bézier curves is hard, we can instead rst convert a glyph into
(approximated) circular arc splines and upload this converted vector glyph to the GPU.
Distance are then computed onto the GPU. Corner cases are overlapping contours, tangent
arcs and oat precision.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

Mean size is ~25 segments

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

Mean size is ~8 arcs

fi

fl

fi

41 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

Esfahbod (2012) Glyphy

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

SDF-based antialiasing + subpixel positioning + random access (coarse grid).

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

42 /60fi

ARC APPROXIMATIONDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

Esfahbod (2012) Glyphy

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

Drawback: Memory and speed are font dependent

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

43 /60fi

ARC APPROXIMATIONDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

Charles Loop and Jim Blinn introduced in 2005
a new approach for resolution-independent
rendering of quadratic and cubic spline curves.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

By tessellating a glyph the proper way, they
offered de facto a method for resolution
independent rendering of a glyph with goodrendering quality.

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

44 /60fi

PART IIIA

Image by Black[Foundry]
black-foundry.com

ADIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)GPU FRIENDLY
Loop & Blinn (2005) Resolution Independent Curve Rendering

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

We present a method for resolution independent rendering of paths and bounded regions, de ned
by quadratic and cubic spline curves, that leverages the parallelism of programmable graphics
hardware to achieve high performance. Our result is a mechanism for rendering vector geometrythat has the following properties: resolution independence, compact geometric representation,high performance.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

fifi

45 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)GPU FRIENDLY
Loop & Blinn (2005) Resolution Independent Curve Rendering

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

We determine if the pixel is inside or outside the curve by evaluating f(u, v) = u² − v in a pixel
shader program. If f (u, v) < 0 then the pixel is inside the curve, otherwise it is outside.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answersfi

46 /60See also"Rendering Vector Art on the GPU" (Charles Loop & Jim Blinn, GPU Gems 3, Chapter 25)“Easy Scalable Text Rendering on the GPU” (Evan Wallace Medium)DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)GPU FRIENDLY
Kokojima et al (2006) Resolution
Independent(b)Rendering of Deformable(c)Vector Objects(a)

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

This sketch presents a new method for resolution independent rendering of vector images
suitable for programmable graphics hardware. We have enhanced a previous method [Loop andBlinn 2005] by using a stencil buffer and transparency multisampling.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)(a)PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels(d)PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only(a)

VectorObject(Figure 1(a))

CONCLUSION• Beyond this course• Questions & answers(d)VectorObject(Figure 1(a))

fi

47 /60

(e)
(c)

(b)

Triangulation(e)Line-Edged
Triangle Fans
(Figure 1(b))

Triangulation
Curve-Edged
Triangles(Figure 1(c))

(d)

Image

(e)

Assignment(f)

Coverage

Color Buffer
Processing

CPU Process
Alpha
Alpha

(f)

Line-Edged
Line-Edged
Stencil
VectorStencil
Triangle
Fans
Image
Triangle Fans Object(Figure 1(b))(Figure 1(a))
Image Stencil Buffer (Figure 1(f))(Figure 1(b))
Triangulation
Processing(Figure1(f))
Stencil Buffer Curve-Edged
Color Buffer
Triangles
Alpha
Processing (Figure
Processing
1(c))
Image
Alpha
Curve-Edged
Assignment(f)Triangles
Alpha(Figure 1(c))
Image
Alpha
Alpha
CPU Process
GPU toProcess

Stencil
Image
Stencil Buffer (Figure 1(f))
Processing

(c)

(b)

GPU Process
Alpha toColor Buffer
Processing

Alpha toCoverage

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)GPU FRIENDLY
Kokojima et al (2006) Resolution Independent Rendering of Deformable Vector Objects

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

This sketch presents a new method for resolution independent rendering of vector images
suitable for programmable graphics hardware. We have enhanced a previous method [Loop andBlinn 2005] by using a stencil buffer and transparency multisampling.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

Animations by Evan Wallace (Easy Scalable Text Rendering on the GPU)fi

48 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

Qin et al (2006) Real-Time Texture-Mapped Vector Glyphs

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

We present a vector graphics representation suitable for real-time rendering on GPUs. Ourrepresentation can be used in place of a texture map, and renders precise antialiased edges at
any magni cation. A combination of texture data and procedural computation is used to evaluate
an exact signed distance to a contour and its gradient.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

Anisotropic antialiasing technique + GPU-based representation of contours + Packed grid
accelerator structure based + Sprite mapping technique + Special effects

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answersfi

49 /60fi

GPU FRIENDLYDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)GPU FRIENDLY
Kilgard & Bolz (2012) GPU-accelerated Path Rendering

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

We introduce a two-step “Stencil, then Cover” (StC) programming interface. Our GPU-based
approach builds upon existing techniques for curve rendering using the stencil buffer, but we
explicitly decouple in our programming interface the stencil step to determine a path’s lled or
stroked coverage from the subsequent cover step to rasterize conservative geometry intended totest and reset the coverage determinations of the rst step while shading color samples within
the path.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

fi

fi

fi

50 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)GPU ONLY
Lengyel (2017) GPU-Centered Font Rendering Directly from Glyph Outlines

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

This paper describes a method for rendering antialiased text directly from glyph outline data on
the GPU without the use of any precomputed texture images or distance elds. This capability isvaluable for text displayed inside a 3D scene because, in addition to a perspective projection, thetransform applied to the text is constantly changing with a dynamic camera view. Our method
overcomes numerical precision problems that produced artefacts in previously publishedtechniques and promotes high GPU utilization with an implementation that naturally avoids
divergent branching.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

See demo at sluglibrary.com
See also GPU-Centered font rendering & GPU font rendering

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

fi

fi

51 /60GPU ONLYDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

Walton (2017) Path nder, a fast GPU-based font rasterizer in Rust

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline“Today I’m pleased to announce Path nder, a Rust library for OpenType font rendering. The goal isnothing less than to be the fastest vector graphics renderer in existence, and the results so far are
extremely encouraging. Not only is it very fast according to the traditional metric of raw
rasterization performance, it’s practical, featuring very low setup time (end-to-end time superior to
the best CPU rasterizers), best-in-class rasterization performance even at small glyph sizes,
minimal memory consumption (both on CPU and GPU), compatibility with existing font formats,portability to most graphics hardware manufactured in the past ve years (DirectX 10 level), andsecurity/safety.”

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

fi

fi

fi

fi

52 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)GPU ONLY
Walton (2017) Path nder, a fast GPU-based font rasterizer in Rust

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

PathFinder algorithm takes advantage of compute shaders (GL 4.3) & post-transform cacheand rasterization occurs on the y on the GPU. CPU setup time is minimal. Subpixel
antialiasing & positionning, 2D, 3D, outline, etc.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

It is mostly a (highly e cient) translation of CPU rasterization onto the GPU.

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

Rasterization time, Arial

Setup and rasterization time, Arial 24px

50

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

7.5

CONCLUSION• Beyond this course• Questions & answers

6

37.5

GLyphy (GPU)25

FreeType (CPU)Time (µs/glyph)

Rasterization time (µs/glyph)

stb_truetype (CPU)

4.5

3

font.rs (CPU)

12.5
Loop-Blinn (GPU)

1.5

Pathfinder (GPU)

0

0

40

80

120

Font size (px)

fl

ffi

fi

fi

53 /60160

200

Pathfinder (GPU)Loop-Blinn (GPU)GLyphy (GPU)

Setup time

font.rs (CPU)FreeType (CPU)Rasterization time

stb_truetype (CPU)DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

Maharik et al (2011) Digital Micrography

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

We present an algorithm for creating digital micrography images, or micrograms, a special type ofcalligrams created from minuscule text. These attractive text-art works successfully combine
beautiful images with readable meaningful text.

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

54 /60fi

BEYOND MERE GEOMETRYDIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

CONCLUSION
Many available techniques. Choice isdependent of usage (2D or 3D, dynamic or
static, memory vs speed vs accuracy, etc).

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)

Hinting and anti-aliasing still needed until we(all) get screen with dpi > 600.

InkjetEngraving

Flexography

Electrophotographic(laser)Complex text layout is (really, really) di cult,
you don’t want to do it yourself: github.com/
HOST-Oman/libraqm

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

Lot of patents around !

CONCLUSION• Beyond this course• Questions & answers

Television typography by Offstockwww. ickr.com/photos/126275939@N05
ffi

55 /60fi

GravurePathFinder and Slug library seem to be the main
players in 2018. Loop & Blinn still competitive.

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

flOffset lithography

Thermography

LCD Display

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)FURTHER READINGWeb

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

Texts Rasterization Exposures - Maxim Shemanarev (2006)
The Technology of Text - Kevin Larson (2007)
Treatise on Font Rasterisation - Freddie Witherden (2010)
State of Text Rendering - Behdad Esfahbod (2012)
CS 354 Typography - Mark Kilgard (2012)
High-DPI, Subpixel Text Positioning, Hinting - Behdad Esfahbod (2012)
Android’s Font Renderer - Romain Guy (2014)
Complex Text on Simple Devices - Pedro Navarro (2016)
Introducing DirectWrite - Microsoft (2017)
A Primer on Bézier curves - Pomax (2017)

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

PapersMark Kilgard. A Simple OpenGL-based API for Texture Mapped Text (1997)
Sarah F. Frisken, et al. Adaptively sampled distance elds (2000)
Charles Loop and Jim Blinn. Resolution Independent Curve Rendering (2005)
Zhipei Qin et al, Real-Time Texture-Mapped Vector Glyphs (2006)
Chris Green. Improved Alpha-Tested Magni cation for Vector Textures and Special Effects (2007)
Behdad Esfahbod. Glyphy (2011)
Ron Maharik et al. Digital Micrography (2011)
Stefan Gustavson. 2D Shape Rendering by Distance Fields (2012)
Mark Kilgard and Jeff Bolz. GPU-Accelerated Path Rendering (2012)
Nicolas P. Rougier. Higher Quality 2D Text Rendering (2013)
Viktor Chlumsky. Shape Decomposition for Multi-channel Distance Fields (2015)
Eric Lengyel. GPU-Centered Font Rendering Directly from Glyph Outlines (2017)
Patrick Walton. Path Finder (2017)

CONCLUSION• Beyond this course• Questions & answers

fi

fi

56 /60fi

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

RELATED SHADERTOYS

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels

www.shadertoy.com/view/MdycWh

www.shadertoy.com/view/Mt2GWD

www.shadertoy.com/view/4s3XDn

www.shadertoy.com/view/4sVyWh

www.shadertoy.com/view/ldXyRn

www.shadertoy.com/view/llyXDV

www.shadertoy.com/view/4dfXDn

www.shadertoy.com/view/XdXGRB

www.shadertoy.com/view/4ts3DB

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

fi

57 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline

QUESTIONS?
• Where to nd good fonts? dafont.com, fontsquirrel.com• When does cleartype patent end ? Not clear (ha ha)• Are hinting and aliasing still needed? Yes

PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)• What are the most complete font families? Noto, DejaVu• How many languages in the world? Around 7000
• How many scripts in latest unicode (11.0)? 146

PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels• How many characters in latest unicode (11.0)? 137,439• Is there any forthcoming support for text in Vulkan ? No
• Should I tell my colleagues I love Comic Sans? No

PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only

• Are there any open source tools to design fonts? FontForge

CONCLUSION• Beyond this course• Questions & answers• Should I stay or should I go? stay (a few more minutes)• Why “ff” & “ ” disappear when I copy text ? Ligatures• Should I apply AA before or after gamma correction? Before

Any other questions?

fi

fi

fi

58 /60DIGITAL TYPOGRAPHY
N. ROUGIER (INRIA) & B. ESFAHBOD (GOOGLE)

DIGITAL TYPOGRAPHY
Between art & design.

INTRODUCTION• Digital Typography• Font Types & Formats• Text Rendering Pipeline
PART I : TEXTURE BASED• Rasterization• Fast & Versatile (but ugly)• Fast & Beau tul (but only 2D)
PART II : DISTANCE BASED• Signed Distance Fields• Single Channel• Arc approximation• Multiple Channels
PART III : GEOMETRY BASED• Bézier curves & glyphs• GPU friendly• GPU only
CONCLUSION• Beyond this course• Questions & answers

Gary Hustwitfi

59 /60Raghed Abu Hamdan

Unknown artist

Digital Typography Rendering - Nicolas P. Rougier & Behdad Esfahbod
SIGGRAPH '18 Course - August 12-16, 2018 - Vancouver, BC, Canada - 10.1145/3214834.3214837
Copyright 2018 © N.P Rougier & B.Esfahbod - Creative Commons Attribution 4.0 International