Pixel Font Generator
Render text in retro pixel/bitmap fonts and export as PNG or text art.
このツールについて
Type up to 20 characters and see them rendered in classic 5×7 bitmap pixel fonts on an HTML canvas. Adjust the scale from 1× to 10×, pick foreground and background colors, and control letter spacing. Copy the output as Unicode block-character text art (using ▓ and space), or download a crisp PNG for use in games, retro-style graphics, or social media posts.
使い方
- 1 Type your text (up to 20 characters) in the input field.
- 2 Choose a foreground color and background color.
- 3 Adjust the scale slider and letter spacing to taste.
- 4 Click Render to draw the text on the canvas.
- 5 Use 'Copy as Text Art' or 'Download PNG' to export.
How a bitmap font turns letters into pixels
Long before smooth scalable typefaces, computers and arcade games drew text from bitmap fonts: each character was a tiny grid of on-or-off dots. This generator uses exactly that approach. Every supported character is stored as a 5×7 grid — five pixels wide, seven tall — where each row is a number whose binary bits say which pixels are lit. The letter A, for instance, is stored as seven values; the first row 01110 lights the middle three of five pixels to form the peak of the A. The tool reads those bits and paints filled squares onto a canvas, producing crisp blocky text you can download as a PNG or copy as ASCII art.
What each control does
| Control | Range | Effect |
|---|---|---|
| Text | up to 20 chars | Uppercased automatically; A–Z, 0–9, and a few marks are supported |
| Scale | 1–12× | How many real screen pixels each font dot becomes |
| Spacing | 0–4 | Extra blank columns inserted between characters |
| FG / BG | any color | Lit-pixel color and the background fill |
Scale is the key to the retro look. Because the canvas uses pixelated rendering, scaling up keeps hard square edges instead of blurring them — a 1×1 font dot at scale 8 becomes a clean 8×8 block, exactly the chunky aesthetic of an 8-bit game.
A worked example
Type HI, set scale to 6 and spacing to 1. Each character is 5 dots wide; with one column of spacing that's 6 columns per character, times scale 6 gives 36 pixels of width per character. Two characters make the canvas 72 pixels wide and 7 × 6 = 42 pixels tall. The tool fills the whole canvas with your background color, then for every lit bit in the H and I bitmaps it draws a 6×6 foreground square at the right offset. The result is two solid, perfectly aligned pixel letters, ready to download.
Two ways to export
Download PNG saves the canvas exactly as shown, at whatever scale you chose, with transparent-free solid colors — drop it straight into a game sprite sheet, a thumbnail, or a chat sticker. Copy as ASCII ignores color and scale entirely: it rebuilds the same letters out of the block character ▓ for lit pixels and spaces for empty ones, honoring your spacing setting. That text version is perfect for plain-text banners in code comments, README files, terminal output, or anywhere an image won't go.
Use cases
- Retro game art. Generate title text or HUD labels that match an 8-bit or 16-bit visual style without hand-placing pixels.
- Social avatars and stickers. A short word in a bold two-color scheme makes a striking small-format graphic.
- ASCII banners. Paste the block-character output at the top of a script or a terminal tool for a quick header.
- Teaching binary. The font itself is a tidy demonstration of how bits map to a visible image — each row really is a binary number.
Practical tips
- Keep it short. The 20-character limit and the fixed-width grid mean long phrases produce a very wide, short strip. For multi-word labels, generate each word separately.
- Maximise contrast. Pixel fonts read best when foreground and background are far apart in brightness — think bright text on a dark field, the classic arcade palette.
- Scale up for export, not for screen. A higher scale gives you a larger, cleaner PNG that downsizes nicely later; tiny scales can look ragged when a browser resizes them.
- Mind the limited character set. Only A–Z, 0–9, and a handful of marks (
! ? . , - :) are defined. Lowercase is converted to uppercase, and any unsupported character renders as a blank space.
Common mistakes
The first is expecting smooth, anti-aliased letters — this is deliberately a hard-edged bitmap font, so curves look stepped by design. The second is typing characters outside the supported set (accents, symbols, lowercase-specific glyphs) and seeing gaps where they render as spaces. The third is choosing two similar colors, which makes the pixels nearly invisible. Everything is rendered locally on a canvas in your browser; nothing is uploaded, and the PNG and ASCII output are produced entirely on your device, so you can use the results freely.