Why is my Construct 3 SpriteFont blurry on mobile?

The SpriteFont source image is being downsampled by the GPU when the game runs at a lower resolution than the source art. If your viewport is 480x320 but the phone screen is 1080p, Construct scales the canvas up, and bilinear filtering blurs the pixel-art glyphs. Set the SpriteFont's sampling to Point and ensure your viewport resolution matches your art scale.

What sampling mode should I use for a SpriteFont in Construct 3?

Use Point sampling for pixel-art SpriteFonts and Linear for high-resolution SpriteFonts. Point sampling preserves sharp edges by using nearest-neighbor interpolation. Linear sampling uses bilinear interpolation which blurs pixel art but looks correct for anti-aliased high-res text.

Does letterbox scale affect SpriteFont quality?

Yes. Letterbox scale modes resize the canvas to fit the screen, which may involve non-integer scaling. A 480-pixel-wide canvas on a 1080-pixel-wide screen scales by 2.25x, which creates fractional pixel positions and blurs Point-sampled text. Use letterbox integer scale or set the viewport to match the device resolution.

Fix: Construct 3 SpriteFont Blurry on Mobile

Quick answer: Set the SpriteFont’s sampling mode to Point for pixel-art text, use Letterbox integer scale to avoid fractional scaling, and design your source art at the correct resolution for your target viewport. Bilinear filtering on pixel-art glyphs is the single most common cause of blurry text on mobile.

Your SpriteFont looks razor-sharp in the Construct 3 editor. You export to Android, open it on a phone, and the text is a smeared mess. The letters bleed into each other and the carefully-crafted pixel grid is gone. The art is fine — the GPU is smoothing it with bilinear filtering because you left the sampling mode on the wrong setting.

Why SpriteFonts Blur on Mobile

A SpriteFont in Construct 3 is a bitmap image where each glyph occupies a fixed rectangle. When the game renders, Construct draws each glyph by sampling from the source image. The sampling mode determines how the GPU interpolates when the source and destination sizes do not match exactly.

Linear sampling (default for many object types) averages neighboring pixels, producing smooth gradients. This is great for photographs and anti-aliased text, but it destroys the sharp edges of pixel art. A 1-pixel border on a glyph becomes a 2-pixel smear.

Point sampling picks the nearest pixel without averaging. This preserves sharp edges perfectly but looks jagged on non-integer scale factors. For pixel-art SpriteFonts, Point is always the right choice.

The Fix

Step 1: Set SpriteFont sampling to Point.

Select the SpriteFont object in the layout editor. In the Properties panel, find the Sampling property and change it from Default (or Linear) to Point. This affects only this SpriteFont; other objects keep their own sampling settings.

If you have multiple SpriteFonts, set each one individually. There is no global SpriteFont sampling override.

Step 2: Use letterbox integer scale.

Open Project Properties → Fullscreen mode. The options are:

Letterbox scale: scales the canvas to fill the screen, may use non-integer factors (e.g. 2.25x).
Letterbox integer scale: scales by the largest whole number that fits (2x, 3x). Leaves black bars if the screen is not an exact multiple.
Scale outer / Scale inner: stretches the canvas, changing the aspect ratio.

For pixel-art games, Letterbox integer scale is the gold standard. It guarantees every source pixel maps to an NxN block of screen pixels, preserving the grid perfectly. The small black bars are a fair trade for crisp text.

If you cannot accept black bars, use Letterbox scale but accept that fractional scaling will produce minor blur on Point-sampled content. In that case, design your SpriteFont at 2x resolution and let the downscale happen gracefully.

Step 3: Match source art to viewport.

If your viewport is 480×270 and your SpriteFont glyphs are 8×8 pixels, the text will be tiny on a 1080p screen unless the engine scales the canvas. If you use Point sampling with integer scale (3x), each glyph becomes 24×24 on screen — sharp and readable.

If your viewport is 1920×1080 (matching the device), no scaling happens and the SpriteFont renders at 1:1. In this case, design the font at the screen resolution and use Linear sampling — it is not pixel art at that scale.

High-DPI Devices

Modern phones have device pixel ratios of 2x or 3x. Construct 3’s “High quality” project setting renders at the device’s native resolution and then downsamples. If your SpriteFont source is 1x, the downsample blurs it. Either design the font at 2x and let the downsample sharpen naturally, or disable High quality rendering for pixel-art projects.

Testing on Real Devices

The Construct 3 preview in Chrome on desktop does not accurately represent mobile GPU sampling. Always test on a real phone. Export a test APK or use the Remote Preview feature to see the actual rendering. Check both landscape and portrait orientations — different orientations may use different scale factors.

When to Use Text Instead of SpriteFont

If your game is not pixel art, consider using the built-in Text object instead of SpriteFont. The Text object renders with the browser’s font engine and scales cleanly to any resolution without manual configuration. SpriteFonts are best reserved for pixel-art style games that need a specific bitmap look.

“Point sampling and integer scale are the two settings every pixel-art Construct 3 game needs. Skip either one and the art you spent months on turns to mush on the player’s phone.”

Related Issues

For broader Construct 3 mobile visual issues, see Construct 3 sprite flickering on mobile devices. For performance on mobile, see Construct 3 performance low FPS lag. For save data problems on mobile, see Construct 3 local storage data not persisting.

Test every SpriteFont on the cheapest Android phone you can find. If it looks good there, it looks good everywhere.