A talk I gave at Cog Design, a multidisciplinary agency I used to work at based out of Greenwich, London

1. How text is rendered within Mac OS/
Windows, and how this affects the fonts
we use on websites .
By Jack Armley
How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 1

2. The process
2
Application passes request
to the rasterizer of its choice
1 3
User requests a font size/face
from within an application to bitmap info, at the correct size.
4
Bitmap information is
rendered within the application
How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 2

3. Font files
.OT/CFF .TTF
OpenType/Compact Font Format TrueType Format
How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 3

4. TrueType (TTF)
Δ Released by Apple in March 1991
Δ Stores information quadratic bezier curves
Δ “Hinting” can be included at specified sizes / size ranges
.TTF
How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 4

5. “Hinting” is a way of
manipulating a character’s
outline to ensure it lays
correctly over the pixel grid.
How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 5

6. Unhinted text (14ppem)
Hinted text (14ppem)
How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 6

7. OpenType/Compact Font Format (OT/CFF)
Δ Released by Adobe and Microsoft in 1996
Δ Stores information as cubic bezier curves, using a Truetype or Postrscipt
Outline
Δ Hinting is not included in the file, but is left to the rasterizer
Δ Font sets are 20-50% smaller than comparable TT fonts, due to
.OT/CFF “subroutinization”
How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 7

8. Rasterization
How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 8

9. Greyscale antialiasing
How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 9

10. A CRT monitor’s pixel makeup
How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 10

11. An LCD monitor’s pixel makeup
How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 11

12. Subpixel antialiasing
Subpixel antialiasing
exploits the sub-pixels
of an LCD monitor,
effectivtly tripling the
horizontal resolution of
text.
How text is rendered within Mac OS/Windows, and how this affects the fonts we use on websites | Slide 12