Should You Remove Hinting from Web Fonts?

Hinting is one of the few parts of a font file you can remove without changing a single letter shape at large sizes, and doing so can make the file noticeably smaller. Whether you should depends on who reads your site, at what text size, and how good the hinting in your font is.

This guide explains what hinting does, where it matters, and how to test both versions before you decide.

What hinting is

Font outlines are smooth curves. Screens are grids of pixels. At small sizes, a stem that should be 1.4 pixels wide has to be drawn as one pixel, two pixels, or a blur in between, and letters can end up uneven or fuzzy.

Microsoft’s article on TrueType hinting describes hinting as instructions added to the font that adjust a glyph’s outline at particular sizes, so the right pixels are turned on. It calls hinting indispensable for any font meant to be legible at small sizes on low-resolution output devices. Because the instructions only act at small sizes, large text keeps its original shapes.

In TrueType fonts, hinting is a small program: font-wide tables (fpgm, prep, and cvt) plus instructions stored with each glyph. CFF-based OpenType fonts use a simpler system of hints, and leave more of the work to the rasterizer.

A related table, gasp, tells the rasterizer for each range of sizes whether to grid-fit (apply the hints), smooth the edges, or both. That is how a font can say “use hinting for body text sizes, just smooth everything at small and large sizes”.

Where hinting matters

Hinting matters most where text is small and pixels are large:

• Low-resolution screens. On a standard-density desktop monitor, 16px body text is drawn on a grid only 16 pixels per em, so every pixel counts.
• Windows. The ttfautohint documentation names Windows as a platform that needs hinting for text to look good, and the Google Fonts production guide asks font makers to judge hinting by how text looks in Windows browsers.
• Small sizes. Microsoft’s gasp specification gives typical ranges where grid-fitting is used, roughly 9 to 16 pixels per em for classic grayscale rendering, which covers most body text on a standard-density display.

Hinting matters much less on high-density screens, such as most phones and many laptops, because there are enough pixels to draw the outline faithfully. It also matters less for large headings.

How much removing it saves

The fontTools subset documentation says that dropping hinting produces fonts that are “sometimes up to 30%” smaller, suitable for very high-resolution systems. How much you save depends on the font: carefully hand-hinted fonts carry a lot of instructions, while some fonts have little or none.

As an example of a heavily hinted font, we converted the Arial that ships with macOS (version 5.01) to WOFF2 with fontTools, keeping every character and feature: about 310 KB with its hinting, about 109 KB without, roughly 65% smaller. Fonts with lighter hinting save much less.

The only reliable number is the one for your file. Make two copies that differ only in hinting, and compare them:

pip install fonttools brotli

# Same settings for both; only the hinting option differs
fonttools subset BrandSans-Regular.ttf --unicodes='*' --layout-features='*' \
  --flavor=woff2 --hinting --output-file=hinted.woff2

fonttools subset BrandSans-Regular.ttf --unicodes='*' --layout-features='*' \
  --flavor=woff2 --no-hinting --output-file=unhinted.woff2

ls -l hinted.woff2 unhinted.woff2

--unicodes='*' keeps every character and --layout-features='*' keeps every OpenType feature, so the hinting is the only difference. “Brand Sans” is a placeholder for your own file. ttfautohint can also remove hints with its --dehint option.

The trade-off

Removing hinting is a change to the font file, like subsetting. Check that your license allows modification first.

Test before you decide

Compare the two versions the way Google Fonts’ testing guide suggests: build a hinted and an unhinted copy and look at both.

1. Make a test page that loads both files under two family names, with your real body text, headings, and UI labels.
2. View it in a browser on Windows, on a standard-density monitor, at your real text sizes. This is where any difference will show.
3. Look at stem weights, the evenness of letters like m and n, and whether small text looks blurry or uneven.
4. Check the same page on the devices most of your visitors use.

If you cannot see a difference at the sizes you use, take the smaller file.

If you do ship an unhinted font, the Google Fonts guide recommends setting its gasp table to grayscale with symmetric smoothing for every size, so the rasterizer smooths the text instead of expecting hints that are not there. The guide points to its gftools fix-nonhinting tool for preparing unhinted fonts.

How FontPivot treats hinting

• By default, hinting is kept. Converting TTF or OTF to WOFF or WOFF2 keeps it exactly as it is, because the font data is packed, not rebuilt, and the font subsetter keeps the hinting of the glyphs it keeps.
• To drop it, tick Remove hinting in the converter’s advanced options, on the home page or in the webfont generator. It removes TrueType instructions and CFF hints, and then shows how much smaller the files got, measured on the real output files. That makes the size side of the trade-off easy to check for your own font.
• Converting between TTF and OTF rebuilds the outlines and always drops the hinting, though the converter copies the font’s names and OpenType features back. The converter says so before you convert. Keep your original file.

A practical way to test: convert your font twice in the webfont generator, once as it is and once with Remove hinting ticked, then put both WOFF2 files on a test page under two family names and compare them on a Windows machine, as described above. WOFF2, WOFF, TTF, or OTF? explains what each conversion keeps, and the web font performance checklist covers the bigger wins to make first, such as subsetting and loading fewer styles.

Summary

• Hinting adjusts outlines to the pixel grid at small sizes on low-resolution screens.
• It matters most for body text on Windows desktops with standard-density monitors.
• Removing it can make a font noticeably smaller; measure your own file, for example with the converter’s Remove hinting option.
• Build hinted and unhinted copies, compare them at your real sizes on Windows, and keep the smaller one only if you cannot see a difference.

Further reading

• Microsoft: TrueType hinting
• Microsoft: gasp table specification
• Google Fonts: Static font production: hinting
• FreeType: ttfautohint documentation