Tech●●●●●Difficulty 4 of 5

How does a digital font stay sharp at every size?

Early computers needed a separate set of pixel letters for every size. Modern fonts store curves and a few clever instructions instead.

▶ Start the story

A digital font stays sharp because most fonts store each letter as an outline made of curves, not as a picture of pixels, so it can be redrawn at any size. Outline fonts use and mathematical formulae to describe each , which makes the character outlines scalable to any size. Most fonts used on computers today are outline fonts.

The older way was different. Bitmap fonts store each letter as a grid of pixels, and they are not scalable: a bitmap typeface requires a separate font design for each size. The limited processing power and memory of early computers forced the exclusive use of bitmap fonts. The original Mac could even produce bold by widening vertical strokes and oblique by shearing the image.

Curves have their own problem. They could not be rendered accurately at small sizes on low-resolution displays, so something more was needed. That something is hinting: mathematical instructions that adjust an outline so that it lines up with the pixel grid. At low screen resolutions, hinting is critical for producing clear, legible text.

From outline to crisp pixels
  1. Step 1: Outline

    Curves describe the .

  2. Step 2: Hinting

    Instructions line the outline up with the pixel grid.

  3. Step 3: Kerning

    Pair adjustments set the space between letters.

  4. Step 4: Screen

    Pixels show clear, evenly spaced text.

Then comes spacing. Kerning is the adjustment of space between two specific characters. In metal type it was expensive, because the had to be physically modified, so it was only used on pairs like VA or AV. With digital fonts it became much easier to kern many combinations.

Quiz me

0/3

  1. 1.Why can an outline font be scaled to any size?
  2. 2.What does font hinting do?
  3. 3.Why was kerning rare in metal type but common in digital fonts?

Recap

Outlines scale, hinting snaps them to pixels, and kerning spaces the letter pairs.

💡 A trick to remember it · Curves for size, hints for the grid, kerns for the gaps: three helpers keep letters sharp, snug and even.

Surprising fact · Early computers could only use bitmap fonts, needing a separate design for each size.

Sources (3)

No source, no claim. Every fact in this lesson (15 claims) cites at least one of these.

  1. [1]Computer font (Wikipedia) · Wikipedia
  2. [2]Font hinting (Wikipedia) · Wikipedia
  3. [3]Kerning (Wikipedia) · Wikipedia
More lessons in 💻 Tech (3) See all tech lessons →

One more light on your map.

Get one lesson like this every day, about the things you love. Free, in two or five minutes.

Get the share card for this lesson ↗