Fonts blurry for small canvas

Phaser 3
1

Hi,

I’m working on a game for PirateJam, and I’ve encountered an issue with fonts. My canvas size is 320x180, as I’m using 16x16 pixel art assets and don’t need a larger canvas. However, at this resolution, both text and bitmap text appear blurry, and I’m struggling to find a way to make them crisp and clear.

Capture d’écran 2025-01-22 182555
Capture d’écran 2025-01-22 182555889×192 978 Bytes

In the screenshot below, you’ll notice a “0” next to a coin icon. This “0” comes from a TTF font file. I haven’t altered its size—it’s at its default size, yet it’s blurry. And it’s loaded (http 200) in the network tab.
PixelSerif_16px_v02.ttf (128.7 KB)

The other text, “00000 pts,” has the same issue. It’s loaded as bitmap text from a PNG/XML font. I resized it to 11, as the default size was too large. It’s “wendy” from others Phaser tutorials.

Here’s how I load the “0” font:

@font-face {
    font-family: "pixelserif1234";
    src: url("/fonts/PixelSerif_16px_v02.ttf") format("truetype");
}

And how I add the text:

this.add.text(96, 9, String(this.coinCollected), {
    fontFamily: "pixelserif1234", // Font declared in @font-face
    color: "#ffffff",
});

For the bitmap text:

this.load.bitmapFont(Resources.fonts.wendy, "fonts/wendy.png", "fonts/wendy.xml");

And adding it:

this.add.bitmapText(110, 4, Resources.fonts.wendy, String(this.score).padStart(6, "0") + " pts", 11);

Thanks so much for your help and time!

2

Ahoy there. The TrueType text is blurry because it’s a vector rasterized at a low resolution. The bitmap font is distorted because of pixel aliasing.

Probably best to find a different bitmap font at 11px, or use Wendy at 16px.

2 Likes
3

I’ll make my own font since I can’t find one that works for a small canvas like mine