What are the best fonts for coding and code blocks?

The best fonts for coding are monospace typefaces with clearly distinguished characters, a generous x-height and good rendering at small sizes. Popular free choices include JetBrains Mono, Fira Code, Cascadia Code, Source Code Pro, IBM Plex Mono, Iosevka and GitHub's Monaspace family, while macOS and Windows already ship capable fonts in SF Mono, Menlo, Consolas and Cascadia Mono. For code blocks on a website, a system monospace stack is often the best default because it loads instantly, and a web font such as JetBrains Mono or IBM Plex Mono is worth adding when code is central to the site. The right choice ultimately depends on which font lets you tell 0 from O and 1 from l at a glance, at the size you actually work.

You read code for hours, and a misread character can mean a bug that takes an afternoon to find. On websites, code blocks need to be copyable, scannable and consistent with the rest of the page. In this article you'll learn what separates a good coding font from an ordinary monospace, a shortlist of fonts worth trying, how to judge them with a quick test, how to set them up in VS Code and the terminal, and how to style code blocks on the web.

What Makes a Good Coding Font

Monospaced Widths

Every character in a monospace font takes the same horizontal space. That keeps indentation predictable, aligns columns in data and comments, and makes vertical editing reliable. Almost all programmers use monospace for this reason, though a few prefer proportional fonts in editors that handle alignment well.

Distinct Characters

The most important test. Look for clear differences between:

• 0, O and o, ideally with a slashed or dotted zero
• 1, l, I and |
• 5 and S, 2 and Z, 8 and B
• ` and ', and , and .
• rn and m, cl and d
• { and (, and [ and ]

Readable Punctuation

Code is dense with punctuation. Brackets, semicolons, colons and operators should be large and dark enough to spot without squinting.

Generous X-Height and Clear Hinting

Editors usually run at 12 to 16 pixels. A larger x-height keeps lowercase letters legible at those sizes, and good hinting or design for screens keeps strokes crisp on standard-resolution monitors.

Bold and Italic

Syntax themes often use bold and italic to distinguish keywords, types and comments. A font with a true italic, rather than a slanted roman, makes those themes more readable. Some fonts, such as Cascadia Code and Monaspace, offer cursive-style italics as an option.

Optional Ligatures

Some coding fonts include programming ligatures that display sequences such as =>, !== and >= as single combined glyphs. The underlying characters don't change; only the display does. Opinion is split: some find them easier to read, others find they hide what's actually typed. Choose a font that lets you turn them off.

The Best Free Coding Fonts

All of the following are free to use, and most are released under the SIL Open Font License.

Font	Notable traits	Ligatures
JetBrains Mono	Tall x-height, simple shapes, designed for long sessions	Yes, optional
Fira Code	Based on Fira Mono, one of the first popular ligature fonts	Yes, optional
Cascadia Code	Made by Microsoft for Windows Terminal, cursive italic option	Yes; Cascadia Mono has none
Source Code Pro	Clean, neutral, from Adobe's Source family	No
IBM Plex Mono	Friendly with a true italic, matches IBM Plex Sans	No
Iosevka	Narrow, highly customisable with build options	Yes, optional
Monaspace	GitHub's five-style family with "texture healing" spacing	Yes, optional
Commit Mono	Neutral, designed to be unobtrusive	Optional alternates
Geist Mono	From Vercel, pairs with Geist Sans	Check the current release
Hack	Based on Bitstream Vera and DejaVu Sans Mono, very legible	No

Fonts Already on Your Computer

• macOS: SF Mono is used in Terminal and Xcode, and Menlo is installed as a general monospace. SF Mono's licence restricts it to Apple platforms, so don't self-host it on a website.
• Windows: Consolas has been the default developer font for years, and Cascadia Mono and Cascadia Code ship with Windows Terminal and recent Windows versions.
• Linux: DejaVu Sans Mono, Liberation Mono, Ubuntu Mono or Noto Sans Mono, depending on the distribution.

Commercial Options

Some developers pay for fonts such as Berkeley Mono, PragmataPro, Operator Mono or MonoLisa. These offer distinctive designs and extensive glyph sets, but the free options above are good enough that you don't need to spend money to code comfortably.

How to Test a Coding Font

Specimen pages tell you little. Paste a block like this into your editor with each candidate font, at your normal size and theme:

0O o  1lI| 5S 2Z 8B  rn m  cl d  `'  ,.  ;:
{ ( [ ] ) }  <= >= == === != !== => -> ::
const isValid = (id) => id !== 0 && id.length >= 8;
if (l1 == Il && O0 != o0) return items[i] ?? null;
#include <stdio.h>    // comment with an apostrophe's shape
SELECT id, name FROM users WHERE created_at >= '2026-01-01';

Ask yourself:

1. Can you identify every character in the first line without hesitation?
2. Are the brackets and operators clear in the second line?
3. Do comments in italic still read easily?
4. Does it stay crisp at your smallest size on your least sharp monitor?
5. After an hour, does your preferred font still feel comfortable?

Try each font for at least a day. First impressions favour novelty; comfort only shows over time.

Setting Up Your Editor and Terminal

VS Code

Open your user settings.json (Command Palette, then "Preferences: Open User Settings (JSON)") and set:

{
  "editor.fontFamily": "'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.fontLigatures": false,
  "terminal.integrated.fontFamily": "'JetBrains Mono', Menlo, Consolas, monospace",
  "terminal.integrated.fontSize": 13
}

To turn on ligatures, set "editor.fontLigatures": true. You can also pass OpenType feature settings as a string to enable specific stylistic sets a font offers, for example "editor.fontLigatures": "'calt', 'ss01'". Check the font's documentation for which sets exist.

A lineHeight value below 8 is treated as a multiplier of the font size, so 1.6 gives a 22.4px line at 14px.

Installing a Font on macOS or Linux

With Homebrew on macOS, many coding fonts are available as casks:

brew install --cask font-jetbrains-mono font-fira-code

On Linux, copy the font files into your user font directory and refresh the cache:

mkdir -p ~/.local/share/fonts
cp JetBrainsMono-*.ttf ~/.local/share/fonts/
fc-cache -f
fc-list | grep -i "jetbrains mono" | head -n 3

/home/you/.local/share/fonts/JetBrainsMono-Regular.ttf: JetBrains Mono:style=Regular
/home/you/.local/share/fonts/JetBrainsMono-Bold.ttf: JetBrains Mono:style=Bold
/home/you/.local/share/fonts/JetBrainsMono-Italic.ttf: JetBrains Mono:style=Italic

On Windows, right-click the font files and choose Install or Install for all users. Restart the editor afterwards so it picks up the new font.

Code Blocks on Websites

A website's code font needs to look good, but it also needs to load quickly and fall back gracefully.

Start With a System Stack

This stack picks the best available monospace on each platform and downloads nothing:

:root {
  --font-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "DejaVu Sans Mono", monospace;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-code);
}

ui-monospace maps to SF Mono in Safari. Other browsers move on to the next name in the list.

Add a Web Font When Code Is Central

On documentation sites and developer blogs, a consistent code font across platforms is worth one or two extra files. Self-host the WOFF2 file and keep the system stack as the fallback:

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

Style Blocks for Reading and Copying

pre {
  font-size: 0.875rem;
  line-height: 1.6;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  tab-size: 2;
  border-radius: 6px;
  background: #f6f8fa;
  color: #1f2328;
}

pre code {
  font-size: inherit;
  background: none;
  padding: 0;
}

/* Inline code inside paragraphs */
:not(pre) > code {
  font-size: 0.875em;
  padding: 0.125em 0.3em;
  border-radius: 4px;
  background: #eff1f3;
  overflow-wrap: anywhere;
}

/* Show readers exactly what they'll paste */
code,
pre {
  font-variant-ligatures: none;
}

Some decisions here are deliberate:

• Horizontal scrolling instead of wrapping: Wrapped code can be misread, especially in languages where indentation matters. Scroll long lines instead.
• Inline code in em units: Monospace fonts look larger than proportional text at the same size, so a slightly smaller em value keeps inline code from dominating the line.
• Ligatures off: Readers who copy !== should see three characters, not a single symbol they then have to type by hand.
• A lower tab-size: Browsers default to 8 spaces per tab, which wastes space on narrow screens.

Mark Up Code Semantically

Use the right elements so screen readers and copy tools treat code properly:

<p>Run <code>npm install</code>, then press <kbd>Ctrl</kbd> + <kbd>C</kbd> to stop the server.</p>

<pre><code class="language-js">const total = items.reduce((sum, item) =&gt; sum + item.price, 0);
</code></pre>

<p>The command prints <samp>Server listening on port 3000</samp>.</p>

Choosing for Your Situation

• You want a safe default: JetBrains Mono or Cascadia Code.
• You love ligatures: Fira Code, JetBrains Mono, Cascadia Code or Monaspace.
• You use split panes on a laptop: A narrow font such as Iosevka fits more columns.
• You want your docs to match your brand: A superfamily mono such as IBM Plex Mono or Source Code Pro alongside its sans.
• You care most about page speed: The system stack, with no web font at all.

---

FAQ: Fonts for Coding

---

Conclusion

A good coding font makes every character unambiguous, keeps punctuation clear and stays comfortable at small sizes for long sessions. Free fonts such as JetBrains Mono, Fira Code, Cascadia Code, Source Code Pro, IBM Plex Mono, Iosevka and Monaspace cover almost every preference, and the system fonts on macOS and Windows are solid choices too.

Test candidates with a block of tricky characters in your own editor, give each one a fair trial, and set your preferred font and ligature behaviour in your editor settings. For websites, start with a system monospace stack, add a self-hosted web font only when code is central to the content, and style code blocks so readers can scan, scroll and copy exactly what they see.