← ALL PAIRS

MANROPE + KARLA

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. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, as well as modifying the space between pairs of letters.

MANROPE

ExtraLight 200The quick brown fox jumps over the lazy dog
Light 300The quick brown fox jumps over the lazy dog
Regular 400The quick brown fox jumps over the lazy dog
Medium 500The quick brown fox jumps over the lazy dog
SemiBold 600The quick brown fox jumps over the lazy dog
Bold 700The quick brown fox jumps over the lazy dog
ExtraBold 800The quick brown fox jumps over the lazy dog

KARLA

ExtraLight 200The quick brown fox jumps over the lazy dog
Light 300The quick brown fox jumps over the lazy dog
Regular 400The quick brown fox jumps over the lazy dog
Medium 500The quick brown fox jumps over the lazy dog
SemiBold 600The quick brown fox jumps over the lazy dog
Bold 700The quick brown fox jumps over the lazy dog
ExtraBold 800The quick brown fox jumps over the lazy dog

CHARACTER SET · MANROPE

Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
0
1
2
3
4
5
6
7
8
9
!
@
#
$
%
&
*
(
)
?
.
,
;
:
–
+
=

KARLA

Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
0
1
2
3
4
5
6
7
8
9
!
@
#
$
%
&
*
(
)
?
.
,
;
:
–
+
=

USE THIS PAIR

# npm
npm install @fontsource/manrope @fontsource/karla

# yarn
yarn add @fontsource/manrope @fontsource/karla

# pnpm
pnpm add @fontsource/manrope @fontsource/karla

# Then import in your app entry point:
import '@fontsource/manrope';
import '@fontsource/karla';

# CSS usage after import:
# font-family: 'Manrope', sans-serif;
# font-family: 'Karla', sans-serif;

ABOUT

Manrope

A geometric sans-serif with semi-condensed proportions and distinctive circular counters. Designed by Mikhail Sharanda as a variable font, it works well for both UI and marketing contexts.

Mikhail Sharanda, 2018

sans-serif · 7 styles

Variable

Recommended: 500, 700, 800

Available: 200–800

→ Google Fonts ↗

Karla

A grotesque sans-serif with Indian and Latin character support. Its slightly quirky, handmade quality gives it warmth while maintaining the reliability of a text-grade typeface.

Jonathan Pinhorn, 2012

sans-serif · 14 styles

Variable · Italic

Recommended: 400, 500, 700

Available: 200–800

→ Google Fonts ↗

Manrope's geometric precision meets Karla's grotesque warmth. Clean and approachable. Ideal for clean product interfaces, settings pages, and form-heavy apps.

saasminimal

RELATED PAIRS

MANROPE × KARLA11 / 38