Hub
Monospace Specimen

Mono
Type

Every character occupies the same width. Every keystroke lands on the same grid. This is the typewriter's promise — mechanical precision elevated to typographic art.

Aa
ascender
cap height
x-height
baseline
descender
Character Width Comparison
Monospace (fixed)
W
i
M
l
= equal width per cell
vs
Proportional (variable)
W
i
M
l
= variable width per glyph
Typewriter Ribbon Palette
Fresh Ribbon
Worn Ink
Faded Strike
Ghost Print
No Ink
Typographic Metrics
The monospace typeface assigns equal horizontal space to every glyph — from the widest M to the narrowest i. This constraint, born from mechanical necessity, became an aesthetic of precision and order.line-height: 1.95letter-spacing: 0.04em
Tab Stops & Ruler
Code Poetry
function writePoetry() {
const words = "fixed width dreams";
const grid = "each letter aligned";
for (let key of typewriter) {
strike(ribbon, paper);
// the mechanical click
// of metal meeting page
}
return "precision is beauty";
}
Typewriter Corrections
The quick swift fox jumped leapt over the lazy sleeping dog. Every mistake revision tells a story history of thought in motion.
Live Keystroke
Ln 1, Col 1 | Chars: 0 | Words: 0 | Space Mono | UTF-8

AI Request Prompt

Design a landing page in Mono Type style — typography-only hierarchy on pure black.

COLOR TOKENS:
--bg: #111111
--text: #eeeeee
--accent: #eeeeee
--text-muted: #666666
--border: rgba(238, 238, 238, 0.1)
No other colors.

TYPOGRAPHY:
Heading: "Noto Sans" sans-serif, 700 weight, tracking -0.06em
Label: "Space Mono" monospace, 400 / 700 weight, uppercase, tracking 0.08em–0.15em
Body: "Noto Sans" sans-serif, 300 weight
Scale: 11 / 12 / 13 / 15 / 17 / 48 / 120px (clamp(3rem, 9vw, 7.5rem))
Body line-height: 1.85
Heading line-height: 0.92
Label sizes: 0.7rem (cell-num), 0.75rem (label), 0.82rem (nav), 0.85rem (h2)

UI:
- No cards — content sits directly on background
- Hero: border-bottom 1px solid var(--border), padding-bottom 40px, margin-top 48px
- Grid: 2-column, gap 1px with background var(--border) as visible grid lines, border 1px solid var(--border)
- Cells: padding 28px 24px, background var(--bg) to reveal grid lines
- Cell numbers: "Space Mono" 0.7rem, var(--text-muted), tracking 0.1em
- Prompt section: border-top 1px solid var(--border), margin-top 48px, padding-top 28px
- Buttons: border-radius 0, 1px solid var(--border), transparent background, "Space Mono" 0.78rem uppercase, tracking 0.1em, hover inverts to white bg + black text

LAYOUT:
- Container: min(960px, 90vw) centered, padding 32px 0 80px
- Top bar: flex space-between, "Space Mono" 0.82rem uppercase
- Lead paragraph: max-width 620px, margin-top 28px
- Grid: grid-template-columns 1fr 1fr, gap 1px

MOTION:
- Cell entrance: opacity 0 to 1, 0.5s ease, stagger 0.1s per cell
- Button hover: all 0.2s ease (background + color inversion)
- No transform animations — only opacity

RESPONSIVE:
- Below 600px: grid-template-columns 1fr (single column), title clamps down to 3rem, cell padding 20px 16px
- Above 600px: strict 2-column grid, container 90vw max 960px

FORBIDDEN:
- No color of any kind — strictly #111111, #eeeeee, #666666
- No border-radius on any element — all corners sharp (border-radius: 0)
- No decorative elements (icons, illustrations, images, gradients)
- No box-shadow
- No font-weight above 300 for body text

OUTPUT:
1. Single HTML file with inline CSS
2. Extreme type scale: 7.5rem heading vs 300-weight body
3. "Space Mono" monospace labels with uppercase and wide tracking
4. 2-column grid with 1px visible line separators
5. Invert-on-hover square buttons
6. Responsive single-column fallback at 600px