Bitmap Font Generator

A bitmap font is a texture: every character is drawn once into a picture, and the game engine copies the right rectangle out of that picture each time it needs to show a letter. This is how most 2D and retro engines render text, because sampling a pre-rendered texture is far cheaper than rasterizing a vector font (TTF/OTF) at runtime, and it guarantees pixel-identical letters on every device. This tool produces the two files that pipeline needs — a PNG glyph sheet and a JSON metrics file — entirely in your browser.

How it lays out the sheet

Type the characters you want into the box (the default set is A–Z, a–z, 0–9, and common punctuation). Each character is drawn with your browser's built-in monospace font, centered inside its own equal-size cell. The cell is deliberately larger than the font size — it's ceil(fontSize × 1.25) — so descenders like the tail of g and y and tall glyphs don't clip at the cell edge. A 32 px font therefore produces 40 px cells.

The columns value controls how many cells sit per row; the tool wraps to as many rows as needed. Glyphs are white on a transparent background, so the sheet drops straight onto any color in-engine. (The dark preview panel is just there so you can see the white glyphs.)

The two files, and how they pair

• PNG — the packed grid of glyphs.
• JSON — the map that tells your engine where each glyph lives. It contains cellW, cellH, cols, rows, and a glyphs array where every entry is { char, x, y, w, h } in pixels.

In your engine you load the PNG as a texture, look up a character in the glyphs array, and blit the rectangle at its x/y with size w/h. Advance the cursor by the cell width, draw the next character, and you have text.

The important limitation: it's a fixed grid

Every glyph gets the same cell, and the reported w/h are the cell size, not the tight outline of each letter. That means this is effectively a monospace font — an i occupies exactly as much width as an M. There are no per-glyph advance widths and no kerning pairs in the metrics. For a HUD, score counter, pixel-art dialogue, or any UI where uniform spacing is fine (or desirable), that's ideal. If you need proportional spacing, you'd have to compute tighter bounds yourself.

Practical tips and gotchas

• Stick to characters your monospace font actually has. Emoji and CJK (Korean/Chinese/Japanese) often aren't in the default monospace face and render as empty "tofu" boxes. Test a small set first.
• White glyphs need a dark or colored surface. If your engine draws them onto white with no tint, they vanish — tint the texture in-engine to recolor.
• Include the space character if your text has spaces; it still consumes a cell, keeping alignment correct.
• Pick your size for the target resolution. Because the output is a raster, scaling it up in-engine will look soft or blurry. Generate at (or above) the size you'll actually draw at, and keep imageRendering: pixelated for crisp retro edges.