What are monospace fonts and when should you use them?

A monospace font (also called a fixed-width font) is a font in which every character takes up exactly the same horizontal space, so a narrow i occupies as much width as a wide m. This is the opposite of a proportional font, where each character has its own width. Monospace fonts make characters line up in neat columns, which is why they're used for code, terminals, plain-text data, tabular output and typewriter-style designs. Common examples include Courier, Consolas, Menlo, SF Mono, JetBrains Mono, Fira Code and IBM Plex Mono. You should use them where alignment and character-by-character precision matter, and avoid them for long passages of ordinary prose, where proportional fonts are easier to read.

Monospace type has moved beyond code blocks. Designers use it for labels, metadata, data tables and brand identities that want a technical feel. That makes it worth understanding what monospace fonts are good at, where they struggle, and a few CSS quirks that catch people out. In this article you'll learn how monospaced type works, where it came from, when to use it and when not to, what makes a good monospace font, and how to set monospace text correctly in HTML and CSS.

How Monospaced Type Works

In a proportional font, the designer gives each character an advance width that suits its shape. An l is narrow, an M is wide, and the spacing between them is tuned so text has an even rhythm.

In a monospace font, every glyph has the same advance width. Narrow letters are drawn with extra space around them or given serifs and extended strokes to fill the cell, while wide letters are squeezed. That's why the i in many monospace fonts has a long foot serif and the m looks compressed.

You can see the difference by comparing the width of two strings with the same number of characters:

<p style="font-family: Georgia, serif">iiiiiiiiii<br />mmmmmmmmmm</p>
<p style="font-family: ui-monospace, Menlo, Consolas, monospace">iiiiiiiiii<br />mmmmmmmmmm</p>

In Georgia, the row of m is several times wider than the row of i. In the monospace font, both rows end at exactly the same point.

Where Monospace Came From

Monospaced type became widespread with the typewriter. Mechanical typewriters advanced the carriage by the same distance for every key, so typefaces had to fit a fixed grid. Courier, designed in the 1950s for IBM typewriters, is the best-known result.

Early computer terminals and printers worked the same way: text was displayed in a grid of fixed-size character cells. Programming, command lines and plain-text file formats grew up around that grid, and monospace fonts have been the default for code ever since.

When to Use Monospace Fonts

Code

This is the most common use. Monospaced type helps with:

• Indentation: Nested blocks line up exactly, which matters in languages such as Python and YAML where indentation is meaningful.
• Alignment: Columns in code, comments and assignment lists line up.
• Character precision: Every character is equally visible, so a missing semicolon or extra space is easier to spot.
• Predictable line lengths: A line limit of, say, 80 characters means the same width every time.

Terminals and Command-Line Output

Shell output, logs and command-line tools assume a fixed-width grid. Tables drawn with spaces or box-drawing characters only line up in a monospace font.

Plain-Text Data

Anything formatted with spaces for alignment, such as fixed-width data files, ASCII diagrams and some configuration files, needs monospace to display correctly.

Identifiers and Codes

Serial numbers, API keys, order references, hashes and coupon codes benefit from monospace, especially when readers must copy or compare them. A good monospace font also makes confusable characters easy to tell apart.

Design and Branding

Monospace fonts can give a technical, utilitarian or editorial character to labels, captions, navigation and small headings. Used sparingly, they add texture alongside a proportional body face.

When Not to Use Monospace Fonts

• Long-form reading: Uneven letter spacing (wide gaps around narrow letters, cramped wide letters) makes paragraphs slower and less comfortable to read than a good proportional font.
• Large headings with lots of narrow letters: Words such as "illicit" look gappy and uneven at large sizes.
• Space-limited interfaces: Monospace text is usually wider than proportional text of the same size, so it takes up more room in buttons and navigation.
• Aligning numbers only: If you just need numbers to line up in a table, you don't need a monospace font. Many proportional fonts include tabular figures you can switch on with CSS (see below).

What Makes a Good Monospace Font

Not all monospace fonts are equal. When choosing one, look at:

1. Clear distinctions between similar characters: 0 and O, 1, l and I, and 5 and S should be easy to tell apart. Many coding fonts use a slashed or dotted zero.
2. Generous x-height: Code is often read at small sizes, so a larger x-height helps.
3. Readable punctuation: Brackets, braces, commas and periods should be clear, because they carry meaning in code.
4. Weights and italics: Syntax highlighting themes often use bold and italic, so a family with real styles avoids faux versions.
5. Ligatures, optionally: Some fonts, such as Fira Code, JetBrains Mono and Cascadia Code, include programming ligatures that combine sequences like => or != into single glyphs. Some people find these helpful; others find they obscure the actual characters. They should be easy to turn off.
6. Licence: JetBrains Mono, Fira Code, IBM Plex Mono, Source Code Pro and Cascadia Code are all available under the SIL Open Font License.

For a fuller comparison of coding fonts, see the best fonts for coding.

Setting Monospace Text in HTML

HTML has several elements meant for monospaced content, and browsers style them in a monospace font by default:

• code: A fragment of computer code.
• pre: Preformatted text, where white space and line breaks are preserved.
• kbd: Keyboard input, such as a shortcut the user should press.
• samp: Sample output from a program.
• var: A variable name (italic by default, not monospace).

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to stop the server.</p>

<pre><code>npm run build
npm run start</code></pre>

<p>If the build succeeds, you'll see <samp>Compiled successfully</samp>.</p>

Using these elements, rather than a generic span with a monospace class, tells assistive technologies and search engines what kind of content it is.

Setting Monospace Fonts in CSS

A Robust Monospace Stack

:root {
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

This stack tries the web font first, then the system monospace font on Apple devices (ui-monospace and SFMono-Regular), then common macOS, Windows and Linux fonts, and finally the generic monospace.

The Generic Monospace Size Quirk

Browsers have a long-standing quirk: when an element's font-family is just the generic keyword monospace, Chrome, Edge, Firefox and Safari use a separate default size for it, usually 13px instead of 16px. That can make inline code look noticeably smaller than you expected.

/* This triggers the smaller default size */
code {
  font-family: monospace;
}

/* Any named family in the list avoids the quirk */
code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

A widely used trick, found in many CSS resets, is to repeat the generic keyword with font-family: monospace, monospace;, which also stops the browser applying the smaller default. Using a full stack, as shown above, is clearer.

Sizing Monospace Next to Proportional Text

Monospace fonts often look larger than the surrounding text at the same size, because their characters are wider and their x-heights tend to be generous. Setting inline code slightly smaller, around 0.875em to 0.9em, helps it sit comfortably in a sentence.

You can also use font-size-adjust to match x-heights automatically. It's supported in current versions of Chrome, Edge, Firefox and Safari:

code {
  font-family: var(--font-mono);
  /* Match the x-height of the surrounding text */
  font-size-adjust: from-font;
}

Code Blocks That Don't Break Layouts

Long lines in a pre block can overflow on small screens. Let the block scroll horizontally rather than forcing the whole page to:

pre {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.55;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  tab-size: 2;
  background-color: #f6f8fa;
  border-radius: 6px;
}

pre code {
  font-size: inherit;
  font-variant-ligatures: none;
}

tab-size controls how wide a tab character appears, and font-variant-ligatures: none turns off programming ligatures for readers who'd rather see the raw characters.

The ch Unit

The ch unit equals the width of the 0 character in the current font. In a monospace font, that's the width of every character, so 80ch is exactly 80 characters wide:

.terminal {
  font-family: var(--font-mono);
  width: 80ch;
  max-width: 100%;
  white-space: pre;
  overflow-x: auto;
}

In proportional fonts, ch is only an approximation, because characters vary in width.

Aligning Numbers Without a Monospace Font

If your goal is just to stop numbers jumping around in tables, timers or prices, switch on tabular figures in your existing proportional font:

.price,
.data-table td,
.timer {
  font-variant-numeric: tabular-nums;
}

This only works if the font includes tabular figures, which most well-made text fonts such as Inter, Roboto, IBM Plex Sans and Source Sans 3 do. Every digit then takes the same width, while letters stay proportional and the text keeps its normal look.

---

FAQ: Monospace Fonts

---

Conclusion

Monospace fonts give every character the same width, a convention inherited from typewriters and early terminals. That fixed grid makes them ideal for code, command-line output, plain-text data and identifiers where alignment and precision matter, and useful as a stylistic accent in labels and branding.

Use them where the grid helps, and choose a well-designed face with clear character distinctions, a good x-height and real bold and italic styles. Set them with a full font stack to avoid the generic size quirk, size inline code slightly smaller than surrounding text, and let code blocks scroll on small screens. For long prose and simple number alignment, stick with a proportional font and tabular figures instead.