← ALL PAIRS

PLAYFAIR DISPLAY + SOURCE SANS 3

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.

PLAYFAIR DISPLAY

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
Black 900The quick brown fox jumps over the lazy dog

SOURCE SANS 3

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
Black 900The quick brown fox jumps over the lazy dog

CHARACTER SET · PLAYFAIR DISPLAY

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
!
@
#
$
%
&
*
(
)
?
.
,
;
:
+
=

SOURCE SANS 3

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/playfair-display @fontsource/source-sans-3

# yarn
yarn add @fontsource/playfair-display @fontsource/source-sans-3

# pnpm
pnpm add @fontsource/playfair-display @fontsource/source-sans-3

# Then import in your app entry point:
import '@fontsource/playfair-display';
import '@fontsource/source-sans-3';

# CSS usage after import:
# font-family: 'Playfair Display', serif;
# font-family: 'Source Sans 3', sans-serif;

ABOUT

Playfair Display

A transitional serif designed for display use, inspired by the European Enlightenment. Features high contrast between thick and thin strokes, with delicate hairlines and distinctive ball terminals.

Claus Eggers Sorensen, 2011

serif · 12 styles

Variable · Italic

Recommended: 400, 700

Available: 400900

→ Google Fonts ↗

Source Sans 3

Adobe's first open-source typeface, designed by Paul D. Hunt. A humanist sans-serif with wide language support and careful optimization for both UI and reading contexts across all screen sizes.

Paul D. Hunt, 2012

sans-serif · 16 styles

Variable · Italic

Recommended: 400, 600

Available: 200900

→ Google Fonts ↗

A timeless editorial pairing. Playfair Display's refined serifs contrast beautifully with Source Sans 3's clean humanist forms. Ideal for editorial sites, blogs, and content-heavy publications.

← PREVPLAYFAIR DISPLAY × SOURCE SANS 301 / 38