← All Pairings
minimalDeveloper chic

Karla

+ Inconsolata

Karla's grotesque proportions make clean headings, while Inconsolata's monospace brings code aesthetic to body text. For developers who want their blog to feel like their terminal.

Live Preview

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog


Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Good typography enhances the user experience and makes content more accessible.

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Good typography enhances the user experience and makes content more accessible.

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Good typography enhances the user experience and makes content more accessible.

CSS Code

/* Import */
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500&family=Karla:wght@600;700&display=swap');

/* Heading */
.heading {
  font-family: 'Karla', serif;
  font-weight: 700;
}

/* Body */
.body {
  font-family: 'Inconsolata', sans-serif;
  font-weight: 400;
}

HTML Import

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500&family=Karla:wght@600;700&display=swap" />

Best for

Developer Blogs, Technical Documentation

Similar Pairings