How to Use Pixel Fonts So They Stay Crisp
Why pixel fonts blur, which sizes to use, how to turn off smoothing on the web and in game engines, and how to check a font license for commercial work.
Pixel fonts are designed on a grid, so they only look sharp when each design pixel lands exactly on whole screen pixels. Get the size wrong and the edges go soft. Here's how to keep them crisp.
Use whole-number multiples of the grid
Every pixel font has a base size where one design pixel equals one screen pixel. Use that size or an exact multiple of it: 2×, 3×, 4× and so on. In-between sizes force the renderer to blend pixels and the text blurs. The product page and install notes for each font list its base size.
Turn off smoothing where you can
- Web: set `-webkit-font-smoothing: none` (supported in some browsers), avoid fractional transforms, and position text on whole pixels.
- Game engines: import the font with anti-aliasing off or "point/nearest" filtering, and keep camera zoom at whole-number scales.
- Design tools: align text layers to the pixel grid and export at 1×, 2× or 3×.
Choose the right style
Use regular weights for body text and UI, bold for headings and buttons, a monospaced version for tables, scores and terminals (every character the same width), and decorative versions sparingly.
Spacing and line height
Pixel fonts often need more line height than vector fonts. 1.3–1.5× the font size reads well. Avoid tight letter-spacing, which can merge glyphs at small sizes.
Licensing for commercial work
Before using a font in a game, app, logo or product, check that its license covers that use, whether it allows embedding (in apps or games, or as a web font on your site) and whether it allows logos. Keep the license file with your project.
Or try the free sample first.
Sold by Quietcog. Support: gb1@mail.grokbot.com. General information only, not professional advice.