Why does my pixel font look blurry?
A pixel font can look blurry because its outlines are being smoothed or scaled between screen pixels. First decide whether the letter shape itself is damaged or whether a clear shape becomes soft in your app. Those problems need different fixes.
Make a pixel font1. Check the shape at a large size
In pixelplease, enlarge the output preview and inspect a, e, 8, O and 0. Missing stems, closed counters or merged letters are generation problems, not merely antialiasing. Compare the Source and Pixel Output using the same text.
- Missing thin strokes: try more pixels-per-em, a lower threshold or a small grid shift.
- Closed holes: reduce expand before changing the source font.
- Unrecognizable letters: try a simpler or heavier source and rebuild.
Make one change, compare, then keep or undo it. A smaller grid is not automatically a better pixel font.
2. Check font size, browser zoom and text scaling
Test the exported font at the intended size, at 100% browser or design-app zoom, without a transform that scales the text layer. Compare a few nearby integer sizes. Fractional coordinates and non-integer scene scaling can affect the result.
For a bitmap font with a known design size, integer multiples are a useful starting point. For a generated outline font, do not assume every source has the same “correct” 8px or 16px size. Pixel style and bitmap format are different things.
3. Fix blurry pixel text in Godot or CSS
In Godot, the official pixel-font guidance recommends nearest texture filtering and integer multiples of the design size and node scale. Font antialiasing and subpixel positioning are separate settings; check them in the version of the engine you are using.
On the web, image-rendering: pixelated controls image scaling; it is not a general switch for disabling smoothing on HTML text. Browser font rasterization also differs across platforms. Do not sacrifice readable text or browser zoom just to force a screenshot-perfect edge.
4. Test the actual delivery context
A large poster title and a tiny in-game health label have different requirements. Test the generated TTF in the destination app and on the displays you expect people to use. Avoid judging only a downscaled screenshot. If the live text is crisp but an exported PNG looks blurry, check that image’s export scale and how it is displayed: resizing the image adds a separate scaling step after the font has already been rendered.
Check character coverage as well: pixelplease exports Basic Latin, so unsupported characters may be drawn by a different fallback font and look inconsistent. The game-font checklist and CSS guide cover those delivery checks.