typography
Monospace
also called monospaced, fixed-width font, typewriter font, code font
A typeface in which every character occupies the same horizontal width, so characters stack into columns down the page.
The constraint came from machines. A typewriter advanced its carriage by one fixed
step per key, so every letter had to be drawn to fill that step, and a teletype or
a text terminal inherited the same grid because its memory held a rectangle of
character cells. Nothing about reading asked for this. Every monospaced face is a
drawing exercise in absorbing one width: the i and the l are given serifs and
crossbars so they do not float in a puddle of space, and the m and the w are
narrowed and sometimes have their middles simplified so they fit.
What the grid buys is that position becomes meaningful. Column five is column five on every line, so indentation nests, a diff aligns, box-drawing characters join up, and a lone stray space is visible because it is the width of a letter. That is why code is set this way and why terminal interfaces can draw tables at all. The same property is worth borrowing outside code: reference numbers, hashes, and IP addresses are easier to compare and to read aloud in a fixed grid, and a tabular figures setting is the narrower version of the same idea when only the digits need to line up.
In CSS the generic family is monospace, and it carries a famous quirk. Browsers
apply a smaller default size to monospaced text (13px where the default is 16px)
and the naive fix, naming a font first, silently loses that adjustment, which is
why font-family: Consolas, monospace renders larger than expected. The classic
workaround is font-family: ui-monospace, SFMono-Regular, Menlo, monospace, monospace, with the generic listed twice to keep the size rule from being
undone. ui-monospace asks for the platform’s own coding face, which is the
counterpart of system-ui.
Fixed width does not survive contact with the world. Emoji, CJK characters, and
combining marks are not one cell wide, ligatures in coding faces draw two
characters as one shape while keeping two advances, and any proportional fallback
for a missing glyph breaks the grid at exactly the moment a terminal is trying to
line up a table. The ch unit is the width of the zero glyph, so in a monospaced
element 20ch really is twenty characters, and in a proportional one it is a
guess.
Which word?
| If you want | say |
|---|---|
| code, terminals, or anything that must line up in columns | monospace |
| numbers in a table, a timer, or a live counter | tabular figures |
Related
See also: Terminal aesthetic · Code editor