Best Monospaced Fonts for Coding Websites and Documentation

A good coding font makes similar characters easy to tell apart (0 and O, 1, l and I), stays clear at small sizes, and is comfortable for hours. Most of the best ones are free. Here are the main choices, and how to use them on a website.

Popular coding fonts

• JetBrains Mono: designed for code, with a tall x-height for readability and optional ligatures. Free, and on Google Fonts.
• Fira Code: known for its programming ligatures, which draw symbols like => and != as single glyphs. Free.
• Cascadia Code: Microsoft's font for Windows Terminal and Visual Studio, with a ligature and a non-ligature version (Cascadia Mono). Free.
• Source Code Pro: Adobe's clean, neutral monospace. Free, on Google Fonts.
• IBM Plex Mono: a monospace with a bit more personality, part of IBM's Plex family. Free.
• Iosevka: narrow, so more code fits on screen, and highly customizable. Free.
• Geist Mono: a newer, modern monospace from Vercel. Free.
• System fonts: SF Mono and Menlo on Mac, Consolas on Windows. Already installed and well made.

Ligatures: yes or no?

Ligatures make code look tidier, but they change how symbols look, which can confuse beginners or anyone reading code they need to type exactly. Most fonts that have them let you turn them off in your editor. On documentation websites, keep them off so readers see the real characters.

Fonts for code on websites and documentation

For code blocks on a website, a system font stack loads instantly and looks native on every device:

font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

If you want a consistent look everywhere, load one web font (JetBrains Mono or Source Code Pro are good choices) and keep the system stack as the fallback.

• Set code slightly smaller than body text, around 0.9em, since monospace fonts look larger.
• Give code blocks generous line height (about 1.5) and padding.
• Make sure syntax colors have enough contrast. The free contrast checker tests them.

How to choose

1. Install two or three candidates in your editor.
2. Look at real code, including strings like 0O0 1lI {}[]().
3. Use each for a day at your usual size.

To find out what font a documentation site or code snippet you like is using, Font Detector shows the font family, size and weight of any text you click.