Monospace Font Block Character Test
✨ UPDATE: Site now uses Monaspace Xenon web font (no fallbacks)
This site now loads Monaspace Xenon as a web font for all code/monospace text. Every device should render the exact same font with consistent █ character widths, regardless of what fonts are installed locally.
This page tests whether the █ (FULL BLOCK U+2588) character renders at the same width as regular letters. If the blocks extend further than the letters below them, there’s a width mismatch.
Each section shows 10 block characters on one line and 10 regular letters on the next. In a true monospace font with consistent glyph widths, both lines should be exactly the same length.
Expected result: All tests below should now show blocks matching letter width on ALL devices (PC, mobile, tablet) because everyone gets the same Monaspace Xenon web font.
Current font: 'Monaspace Xenon' (loaded via @font-face, 287KB woff2 variable font)
Inline code style (same as backticks in text)
monospace
█████████
This uses the inline <code> element styling, which should match what you see when text is wrapped in backticks like monospace.
MMMMMMMMMM
██████████
Site Default: var(--codeFont)
Uses the CSS variable from the site theme: SFMono-Regular, SF Mono, Menlo, monospace
SFMono-Regular
Apple’s San Francisco Mono (macOS/iOS).
SF Mono
Apple’s San Francisco Mono (alternate name).
Menlo
macOS default monospace font.
Generic monospace keyword
The CSS monospace keyword - what it resolves to depends on your device/browser.
Common fallback fonts (NOT in site chain, but what monospace resolves to)
These fonts are not explicitly in the site’s font chain, but they’re what the generic monospace keyword resolves to on different devices.
Roboto Mono (Android default)
Droid Sans Mono (older Android)
Consolas (Windows default)
Courier New (cross-platform fallback)
Liberation Mono (Linux common)
DejaVu Sans Mono (Linux common)
Word-length comparison
Testing multi-word patterns like the actual game uses:
How to interpret results
- Lines are the same length: The
█character has the same width as letters in this font. ✅ - Blocks extend further right: The
█character is WIDER than letters. This causes the reflow bug on hint reveal. ❌ - Blocks are shorter: The
█character is NARROWER than letters. This would also cause reflow. ❌
If you see width mismatches on your device, please report which font section shows the issue and what device/browser you’re using.