Monospace Code Fonts — Pairing Programming Fonts with UI Typography

Adding Code Fonts to Your Type System

Developer-facing websites often need three fonts: a heading font, a body font, and a monospace font for code blocks. Getting the code font right is just as important as the heading/body pairing.

Top Google Fonts Monospace Options

Font	Features	Character
JetBrains Mono	Ligatures, tall x-height	Modern, designed for coding
Fira Code	Ligatures, extensive	Mozilla's coding font
Source Code Pro	Clean, Adobe quality	Professional, neutral
IBM Plex Mono	Matches IBM Plex family	Corporate, precise
Roboto Mono	Matches Roboto family	Clean, Google-native

Sizing Code Relative to Body Text

Code fonts typically appear larger than body text at the same pixel size due to wider letterforms. Set code font size to 85-90% of body text:

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
}

code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', monospace;
  font-size: 0.875em;  /* 87.5% of body */
}

Inline Code Styling

For inline code within paragraphs, add a subtle background and padding:

:not(pre) > code {
  background: rgba(127, 127, 127, 0.1);
  padding: 0.15em 0.3em;
  border-radius: 0.25em;
  font-size: 0.875em;
}

Code Block Line Height

Code blocks need a different line height than body text. Use 1.5-1.6 for code (vs 1.6-1.8 for prose) to keep code scannable without excessive vertical space.

Ligature Considerations

JetBrains Mono and Fira Code include programming ligatures (=> becomes an arrow, != becomes a not-equal sign). Enable or disable them based on your audience's preference:

/* Enable ligatures */
code { font-variant-ligatures: common-ligatures; }

/* Disable ligatures */
code { font-variant-ligatures: none; }