Monospace

Why: the goal or problem

Imagine a weather log with readings aligned in text tables. Variable Latin letter widths make its columns drift.

How: work toward a solution

Read the weather log’s aligned time, temperature and wind columns. In the separate lab, compare i and W, edit the sample and enable measured guides. Supported Latin advances match; reset restores the lab to 48px.

Read a weather log, then measure fixed advances

FIELD NOTES / FICTIONAL READINGS

Weather log

Morning observations

TIME  TEMP  WIND
07:00 12.4C  NW03
08:00 14.1C  NW05
09:00 16.8C  W007

Equal advances keep the text columns aligned.

Optional type measurement

Specimen

iiiWWW 0123

Measured advances appear after fonts load.

111.11888.88123.45

Size48pxAdvance guidesTabular digits

The editable width sample starts at 48px. The named face renders supported Latin; Korean and Japanese use Noto CJK. Other characters may fall back. Guides measure text in context, so shaping and ligatures can affect the ranges.

A fictional demo within this article. Reset or reload restores its initial state.

What: the concept

Monospaced Latin glyphs share an advance width even when their ink shapes differ.

CJK, emoji, combining marks, and fallback faces can break that model; inspect the supported character set.

W3C

Go further

Optional reading · separate from the overview

Selection & comparison

Choose monospace for code or space-aligned records. Proportional text can fit running prose more naturally; tabular digits alone may suffice for numeric tables. A sans-serif shape does not imply equal width.

Applications

The weather log uses fictional Latin readings to make column alignment visible. Logs, code examples and identifiers can use the same technique. A semantic table is preferable when readers need explicit row and column relationships.

Implementation & cautions

Wait for document.fonts.ready and inspect the loaded font. Range measurements retain shaping in one text node; ligatures, combining marks and fallback glyphs can affect ranges. Keep width experiments separate from the real specimen, and test localized font coverage.

Evidence

W3C: CSS Fonts Level 3 ↗
Defines generic font families and numeric features. Actual advance widths depend on the loaded font and shaping.
Checked 2026-09-27
WCAG 2.2: Reflow ↗
Supports narrow-screen and zoom checks, not the definition of a layout or typeface.
Checked 2026-09-27

Comparison within this category
Concept	Features	Advantages	Limitations	Suitable situations	Combination conditions
Monospace	Equal character advances suit aligned text data; shape and fallback coverage remain separate concerns.	Equal Latin advances preserve code and data column alignment.	CJK, emoji, combining marks, and fallback faces can break that model; inspect the supported character set.	Choose it for code or aligned Latin data.	Use fixed-width code beside proportional explanatory text.

Comparison within this category

Concept

Features

Advantages

Limitations

Suitable situations

Combination conditions

Monospace

Equal character advances suit aligned text data; shape and fallback coverage remain separate concerns.

Equal Latin advances preserve code and data column alignment.

CJK, emoji, combining marks, and fallback faces can break that model; inspect the supported character set.

Choose it for code or aligned Latin data.

Use fixed-width code beside proportional explanatory text.

Monospace

Why: the goal or problem

How: work toward a solution

Weather log

Optional type measurement

What: the concept

Go further

Apply this to your project

Discuss this idea