<figure><img src="image_1.png" /></figure>

HAL
open science

# The Art of Text (rendering)

Nicolas P. Rougier

► To cite this version:

Nicolas P. Rougier. The Art of Text (rendering). 39C3 2025 - 39th Chaos Communication Congress, Chaos Computer Club, Dec 2025, Hambourg, Germany. hal-05430837

HAL Id: hal-05430837

https://inria.hal.science/hal-05430837v1

Submitted on 24 Dec 2025

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_2.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
POWER CYCLES
3903

The Art of Text (rendering)

Nicolas P. Rougier & Behdad Esfahbod
# THE ART OF TEXT RENDERING
N.P. ROUGIER & B. ESFAHBOD

## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

POWER CYCLES
3903

2/60

# INTRODUCTION

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

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.

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

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

<figure><img src="image_3.png" /></figure>
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 & Beaufitul (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 talk

* Questions & answers

<figure><img src="image_4.png" /></figure>

<figure><img src="image_5.png" /></figure>

<figure><img src="image_6.png" /></figure>

<figure><img src="image_7.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

<figure><img src="image_8.png" /></figure>

<figure><img src="image_9.png" /></figure>

<figure><img src="image_10.png" /></figure>

<figure><img src="image_11.png" /></figure>
# BAD KERNING (keming)

Disaster is a space away... (FLICK, click, CLINT, FINAL)

Rockstar game removed the extra space

<figure><img src="image_12.png" /></figure>

## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

<figure><img src="image_13.png" /></figure>

# DIGITAL TYPOGRAPHY

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

<figure><img src="image_14.png" /><figcaption>The Anatomy of Typography - Janie Kliever</figcaption></figure>

<figure><img src="image_15.png" /></figure>
INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

PART I : TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

POWER CYCLES
3903

Unicode is a computing industry standard for the
consistent encoding, representation, and handling
of text expressed in most of the world's writing
systems. The latest version contains a repertoire
of 159,801 characters covering 172 modern and
historic scripts, as well as multiple symbol sets.

<figure><img src="image_16.png" /></figure>

UTF-32

<figure><img src="image_17.png" /></figure>

UTF-16

<figure><img src="image_18.png" /></figure>

UTF-8

<figure><img src="image_19.png" /></figure>

<figure><img src="image_20.png" /></figure>

UTF-8 (Unicode Transformation Format, RFC
3629) 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
FAMOUS TYPEFACES (FONT FAMILIES)

INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

PART I : TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

<figure><img src="image_21.png" /></figure>

Garamond

Aa Qq Rr
Aa Qq Rr

á

TRIANON

abcdefghijklmnopqrstuvwxyz

nopqrstuvwxyz

0123456789

1495

Caslon

Aa Ee Rr
Aa Ee Rr

a

Jacquard

<figure><img src="image_22.png" /></figure>

abcdefghijklmnopqrstuvwxyz

nopqrstuvwxyz

1234567890

<figure><img src="image_23.png" /></figure>

1234567890

1734

Baskerville

Aa Bb Cc
Xx Yy Zz

Q

Nutgarden

abcdefghijklmnopqrstuvwxyz

nopqrstuvwxyz

0123456789

1757

Bodoni

Aa Qq Rr
Aa Qq Rr

a

<figure><img src="image_24.png" /></figure>

HORATII

abcdefghijklmnopqrstuvwxyz

nopqrstuvwxyz

0123456789

1798

Gill Sans

Aa Qq Rr
Aa Qq Rr

a

COLLEGIUM

abcdefghijklmnopqrstuvwxyz

nopqrstuvwxyz

0123456789

1926

Times New Roman

Aa Ee Rr
Aa Ee Rr

a

Publisher

abcdefghijklmnopqrstuvwxyz

nopqrstuvwxyz

0123456789

1931

Helvetica

Aa Ee Rr
Aa Ee Rr

a

Kunsthalle

abcdefghijklmnopqrstuvwxyz

nopqrstuvwxyz

0123456789

1957

Arial

Aa Ee Rr
Aa Ee Rr

a

Deliverable

abcdefghijklmnopqrstuvwxyz

nopqrstuvwxyz

0123456789

1982
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

POWER CYCLES
3903

# ONE FONT TO RULE'EM ALL

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(fu) is Google's answer to tofu.

Noto Serif
Noto Sans

Aa Gg Yy

Aa Gg Yy

a

Ankunft

abcdefghijklmnopqrstuvwxyz

nopqrstuvwxyz

012345678

思源黑体 思源黑體 源ノ角ゴシック 본고닥
Source Han Sans

<table><thead><tr><th></th><th>简体中文<br>Simplified Chinese</th><th>正體中文<br>Traditional Chinese</th><th>日本語<br>Japanese</th><th>한국어<br>Korean</th></tr></thead><tbody><tr><td>ExtraLight</td><td>天地玄黄</td><td>律召調陽</td><td>色は匂へど</td><td>키스의고</td></tr><tr><td>Light</td><td>宇宙洪荒</td><td>雲騰致雨</td><td>散りぬるを</td><td>유조건은</td></tr><tr><td>Normal</td><td>日月盈昃</td><td>露結為霜</td><td>我が世誰ぞ</td><td>입술끼리</td></tr><tr><td>Regular</td><td>辰宿列張</td><td>金生麗水</td><td>常ならむ</td><td>만나야하</td></tr><tr><td>Medium</td><td>寒来暑往</td><td>玉出崑岡</td><td>有為の奥山</td><td>고특별한</td></tr><tr><td>Bold</td><td>秋收冬藏</td><td>劍號巨闕</td><td>今日越えて</td><td>기술은필</td></tr><tr><td>Heavy</td><td>闰余成岁</td><td>珠稱夜光</td><td>浅き夢見じ</td><td>요치oli</td></tr></tbody></table>
INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

PART I : TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

AV AV

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

<figure><img src="image_25.png" /></figure>

<figure><img src="image_26.png" /></figure>

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

ff ff

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

<figure><img src="image_27.png" /></figure>

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

<figure><img src="image_28.png" /></figure>

A various number of face metrics are defined
for all glyphs in a given font.
INTRODUCTION

- Digital Typography

- Font Types & Formats

- Text Rendering Pipeline

PART I : TEXTURE BASED

- Rasterization

- Fast & Versatile (but ugly)

- Fast & Beaufitul (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 talk

- Questions & answers

العربية

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

<figure><img src="image_29.png" /></figure>

Stylistic alternate allows to replace
a glyph by some variant.

دِخُورِع
العربية

Complex text layout (CTL) refers to
the typesetting of writing systems in
which the shape or positioning of a
grapheme depends on its relation to
other graphemes (wikipedia).

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

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

Etc.
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

# 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 Type

And many more actually...

<figure><img src="image_30.png" /><figcaption>Cubic Bézier curves</figcaption></figure>

<figure><img src="image_31.png" /></figure>

<figure><img src="image_32.png" /><figcaption>Quadratic Bézier curves</figcaption></figure>

<figure><img src="image_33.png" /></figure>

<figure><img src="image_34.png" /></figure>

<figure><img src="image_35.png" /></figure>

## PostScript Outlines TrueType Outlines
# ANATOMY OF A GLYPH

Vector fonts are collections of vector images, consisting of lines and curves defining the boundary 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 & Beaufitul (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 talk

* Questions & answers

<figure><img src="image_36.png" /></figure>

<figure><img src="image_37.png" /></figure>

Images by The Australian Graphic Supply Co

<figure><img src="image_38.png" /></figure>

Images by FontLab
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

# FONT TABLES

## Open Type Tables

BASE: Baseline data

CMAP: Character to glyph mapping

GDEF: Glyph definition data

GSUB: Glyph substitution data

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.

GPOS: Glyph positioning data

JSTF: Justification data

and many more...

## Libraries

**FreeType (standard support without text shaping)**

→ https://www.freetype.org

**HarfBuzz (advanced support with text shaping)**

→ https://harfbuzz.github.io

<figure><img src="image_39.png" /></figure>
TEXT RENDERING PIPELINE

INTRODUCTION

- Digital Typography

- Font Types & Formats

- Text Rendering Pipeline

PART I : TEXTURE BASED

- Rasterization

- Fast & Versatile (but ugly)

- Fast & Beaufitul (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 talk

- Questions & answers

<figure><img src="image_40.png" /></figure>

<figure><img src="image_41.png" /></figure>
INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

PART I : TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

PART I

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

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

<figure><img src="image_42.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

# 2D RASTERIZATION

## Same input, different outputs

コンピュータによるCJKV (中国語、日本語、韓国語、ベトナム語) テキスト処理は、多くの謎や複雑な仕組み (intrigue) に包まれている。そこにはたしかにたくらみ (intrigue) があることは認めるが、それよりも謎の多いことのほうが問題である。

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sit amet dui. Nam sapien. Fusce vestibulum ornare metus. Maecenas ligula orci, consequat vitae, dictum nec, lacinia non, elit. Aliquam iaculis molestie neque. Maecenas suscipit felis ut pede convallis malesuada. Aliquam erat volutpat. Nunc pulvinar condimentum nunc. Donec ac sem vel leo bibendum aliquam. Pellentesque habitant

### FreeType Native CFF Rasterizer

コンピュータによるCJKV (中国語、日本語、韓国語、ベトナム語) テキスト処理は、多くの謎や複雑な仕組み (intrigue) に包まれている。そこにはたしかにたくらみ (intrigue) があることは認めるが、それよりも謎の多いことのほうが問題である。

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sit amet dui. Nam sapien. Fusce vestibulum ornare metus. Maecenas ligula orci, consequat vitae, dictum nec, lacinia non, elit. Aliquam iaculis molestie neque. Maecenas suscipit felis ut pede convallis malesuada. Aliquam erat volutpat. Nunc pulvinar condimentum nunc. Donec ac sem vel leo bibendum aliquam. Pellentesque habitant

### FreeType Light Auto Hint Rasterizer

コンピュータによるCJKV (中国語、日本語、韓国語、ベトナム語) テキスト処理は、多くの謎や複雑な仕組み (intrigue) に包まれている。そこにはたしかにたくらみ (intrigue) があることは認めるが、それよりも謎の多いことのほうが問題である。

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sit amet dui. Nam sapien. Fusce vestibulum ornare metus. Maecenas ligula orci, consequat vitae, dictum nec, lacinia non, elit. Aliquam iaculis molestie neque. Maecenas suscipit felis ut pede convallis malesuada. Aliquam erat volutpat. Nunc pulvinar condimentum nunc. Donec ac sem vel leo bibendum aliquam. Pellentesque habitant

### FreeType using the New Adobe CFF Rasterizer (2013)

## Quartz Rendering

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis varius elementum. Proin cursus posuere mollis. Vivamus id justo nec massa convallis dapibus. Praesent a arcu augue, pretium commodo elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

## ClearType Rendering

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis varius elementum. Proin cursus posuere mollis. Vivamus id justo nec massa convallis dapibus. Praesent a arcu augue, pretium commodo elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
# SUBPIXEL ZOO (GEOMETRIAN.COM)

## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

<figure><img src="image_43.png" /></figure>

<figure><img src="image_44.png" /></figure>

<figure><img src="image_45.png" /></figure>

<figure><img src="image_46.png" /></figure>

<figure><img src="image_47.png" /></figure>

<figure><img src="image_48.png" /></figure>

<figure><img src="image_49.png" /></figure>

<figure><img src="image_50.png" /></figure>

<figure><img src="image_51.png" /></figure>

<figure><img src="image_52.png" /></figure>

<figure><img src="image_53.png" /></figure>

<figure><img src="image_54.png" /></figure>

<figure><img src="image_55.png" /></figure>

<figure><img src="image_56.png" /></figure>

<figure><img src="image_57.png" /></figure>

<figure><img src="image_58.png" /></figure>

<figure><img src="image_59.png" /></figure>

<figure><img src="image_60.png" /></figure>

<figure><img src="image_61.png" /></figure>

<figure><img src="image_62.png" /></figure>

<figure><img src="image_63.png" /></figure>

<figure><img src="image_64.png" /></figure>

<figure><img src="image_65.png" /></figure>

<figure><img src="image_66.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

POWER CYCLES
3903

Gamma correction, hinting, energy distribution, etc.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

The quick brown fox jumps over the lazy dog. 0123456789.

No hinting

<figure><img src="image_67.png" /></figure>

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

Native hinting

<figure><img src="image_68.png" /></figure>

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789

A Quick Brown Fox Jumps Over The Lazy Dog 0123456789
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

# TEXTURE FONT I

## Kilgard (1997) A Simple OpenGL-based API for Texture Mapped Text

Texture mapping is well suited for rendering text because textures can be rendered quickly with current 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.

<figure><img src="image_69.png" /></figure>

The Quick **brown** fox
jumps over the lazy dog.

Now is the time for all good men to come to the aid of the party.

Ég get etið gler án þess að meiða mig.
私はガラスを食べられます。それは私を傷つけません。
N ≤ Z ≤ Q ≤ R ≤ C

System colors:

<figure><img src="image_70.png" /></figure>

Color cube, 6x6x6:

<figure><img src="image_71.png" /></figure>

Grayscale ramp:

<figure><img src="image_72.png" /></figure>

ASCII Art:

<figure><img src="image_73.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

# TEXTURE FONT II

## Rougier (2013) Higher Quality 2D Text Rendering

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

<figure><img src="image_74.png" /><figcaption>No hinting</figcaption></figure>

<figure><img src="image_75.png" /><figcaption>Native hinting</figcaption></figure>

<figure><img src="image_76.png" /><figcaption>Auto hinting</figcaption></figure>

<figure><img src="image_77.png" /><figcaption>Vertical hinting</figcaption></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

# TEXTURE FONT II

## Rougier (2013) Higher Quality 2D Text Rendering

i. Use horizontal RGB sub-pixel anti-aliasing for LCD flat panels.

ii. Use vertical hinting only and completely discard the horizontal one.

iii. Use accurate glyph advance values from unhinted glyph

iv. Use accurate, high resolution values from the kerning table.

<figure><img src="image_78.png" /></figure>
INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

PART I : TEXTURE BASED

• Rasterization

• Fast & Versatile (but ugly)

• Fast & Beaufitul (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 talk

• Questions & answers

Distance based rendering takes advantage of a
signed distance function (that can be
approximated) to compute the individual
coverage for each pixel.

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

<figure><img src="image_79.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

# DISTANCE BASED RENDERING

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

<figure><img src="image_80.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

## Gustavson & Strand (2011) Anti-Aliased Euclidean distance transform

We present a modified distance measure for use with distance transforms of anti-aliased, area sampled grayscale images of arbitrary binary contours. The modified 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 field compared to a traditional binary image transform.

See also http://contour textures.wikidot.com

<figure><img src="image_81.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

## Green (2007) Improved Alpha-Tested Magnification for Vector Textures

A distance field is generated from a high resolution image, and then stored into a channel of a lower-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.

<figure><img src="image_82.png" /><figcaption>Alpha blended</figcaption></figure>

<figure><img src="image_83.png" /></figure>

<figure><img src="image_84.png" /><figcaption>Alpha tested (no shader)</figcaption></figure>

<figure><img src="image_85.png" /></figure>

<figure><img src="image_86.png" /><figcaption>Alpha tested (shader)</figcaption></figure>

<figure><img src="image_87.png" /></figure>
# SDF: MULTIPLE CHANNELS

## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

## Chlumsky (2015) Shape Decomposition for Multi-channel Distance Fields

<figure><img src="image_88.png" /></figure>

16×16

<figure><img src="image_89.png" /></figure>

<figure><img src="image_90.png" /></figure>

16×16

<figure><img src="image_91.png" /></figure>

<figure><img src="image_92.png" /></figure>

32×32

<figure><img src="image_93.png" /></figure>

Edge Coloring

Plane partioning

Decomposition

Inner padding

Padded Decomposition

<figure><img src="image_94.png" /></figure>

<figure><img src="image_95.png" /></figure>

<figure><img src="image_96.png" /></figure>

<figure><img src="image_97.png" /></figure>

<figure><img src="image_98.png" /></figure>
INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

PART I : TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

SDF: MULTIPLE CHANNELS

Chlumsky (2015) Shape Decomposition for Multi-channel Distance Fields

<figure><img src="image_99.png" /></figure>
INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

PART I : TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

PART III

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

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

<figure><img src="image_100.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

## Loop & Blinn (2005) Resolution Independent Curve Rendering

We present a method for resolution independent rendering of paths and bounded regions, defined 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 geometry that has the following properties: resolution independence, compact geometric representation, high performance.

<figure><img src="image_101.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

## Loop & Blinn (2005) Resolution Independent Curve Rendering

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

<figure><img src="image_102.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

## Kokojima et al (2006) Resolution Independent Rendering of Deformable Vector Objects

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 and Blinn 2005] by using a stencil buffer and transparency multisampling.

<figure><img src="image_103.png" /></figure>

<figure><img src="image_104.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

## Kokojima et al (2006) Resolution Independent Rendering of Deformable Vector Objects

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 and Blinn 2005] by using a stencil buffer and transparency multisampling.

<figure><img src="image_105.png" /></figure>

<figure><img src="image_106.png" /></figure>

<figure><img src="image_107.png" /><figcaption>Animations by Evan Wallace (Easy Scalable Text Rendering on the GPU)</figcaption></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

POWER CYCLES
3903

## Lengyel (2017) GPU-Centered Font Rendering Directly from Glyph Outlines

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 fields. This capability is valuable for text displayed inside a 3D scene because, in addition to a perspective projection, the transform applied to the text is constantly changing with a dynamic camera view. Our method overcomes numerical precision problems that produced artefacts in previously published techniques and promotes high GPU utilization with an implementation that naturally avoids divergent branching.

See demo at [sluglibrary.com](https://sluglibrary.com)

See also GPU-Centered font rendering & GPU font rendering

<figure><img src="image_108.png" /></figure>

<table><thead><tr><td>Font</td><td>Sample</td><td>Complexity</td><td>Time</td></tr></thead><tbody><tr><td>Arial</td><td>ABCDEFG</td><td>20</td><td>1.1 ms</td></tr><tr><td>Centaur</td><td>ABCDEFG</td><td>48</td><td>1.3 ms</td></tr><tr><td>Halloween</td><td>ABCDEFG</td><td>72</td><td>3.8 ms</td></tr><tr><td>Wildwood</td><td>ABCDEFG</td><td>546</td><td>13.3 ms</td></tr></tbody></table>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

POWER CYCLES
3903

## Walton (2017) Pathfinder, a fast GPU-based font rasterizer in Rust

> "Today I'm pleased to announce Pathfinder, a Rust library for OpenType font rendering. The goal is nothing 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 five years (DirectX 10 level), and security/safety."

LOREM IPSUM DO

PELLENTESQUE RI

ORCI PORTA IN

<figure><img src="image_109.png" /></figure>

<figure><img src="image_110.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

# CONCLUSION

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

PathFinder 3, Slug library and MSDF seem to be the main players in 2025. Loop & Blinn still competitive.

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

Complex text layout is (really, really) difficult, you don't want to do it yourself: [harfbuzz.github.io](https://harfbuzz.github.io)

Lot of patents around !

<figure><img src="image_111.png" /></figure>
## INTRODUCTION

* Digital Typography

* Font Types & Formats

* Text Rendering Pipeline

## PART I: TEXTURE BASED

* Rasterization

* Fast & Versatile (but ugly)

* Fast & Beaufitul (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 talk

* Questions & answers

# QUESTIONS?

* Where to find good fonts? dafont.com, fontsquirrel.com

* When does cleartype patent end? Not clear (ha ha)

* Are hinting and aliasing still needed? Yes

* What are the most complete font families? Noto, DejaVu

* How many languages in the world? Around 7000

* How many scripts in latest unicode (17.0)? 172

* How many characters in latest unicode (17.0)? 159,801

* Is Calibri woke? Trump thinks so yes (really).

* What are variable fonts? See Bernd's talk tomorrow!

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

* Why "ff" & "fi" disappear when I copy text? Ligatures

* Should I apply AA before or after gamma correction? Before

* Is there really a movie about Helvetica? Yes.

* Should I stay or should I go? stay (a few more minutes)

Any other questions?

# should i use comic sans?

will your document be viewed by the public?

<figure><img src="image_112.png" /></figure>

<figure><img src="image_113.png" /></figure>

don't use comic sans!