← ALL PAIRS

SOURCE SERIF 4 + ATKINSON HYPERLEGIBLE

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.

SOURCE SERIF 4

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

ATKINSON HYPERLEGIBLE

Regular 400The quick brown fox jumps over the lazy dog
Bold 700The quick brown fox jumps over the lazy dog

CHARACTER SET · SOURCE SERIF 4

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

ATKINSON HYPERLEGIBLE

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/source-serif-4 @fontsource/atkinson-hyperlegible

# yarn
yarn add @fontsource/source-serif-4 @fontsource/atkinson-hyperlegible

# pnpm
pnpm add @fontsource/source-serif-4 @fontsource/atkinson-hyperlegible

# Then import in your app entry point:
import '@fontsource/source-serif-4';
import '@fontsource/atkinson-hyperlegible';

# CSS usage after import:
# font-family: 'Source Serif 4', serif;
# font-family: 'Atkinson Hyperlegible', sans-serif;

ABOUT

Source Serif 4

Adobe's open-source serif companion to Source Sans, designed by Frank Griesshammer. Features warm, organic transitions between strokes and optical sizes for optimal rendering from caption to display.

Frank Grießhammer, 2021

serif · 16 styles

Variable · Italic

Recommended: 400, 600, 700

Available: 200900

→ Google Fonts ↗

Atkinson Hyperlegible

Designed by the Braille Institute to maximize character differentiation for low-vision readers. Every letterform is engineered to be distinguishable, with exaggerated features where characters commonly get confused.

Braille Institute, 2020

sans-serif · 4 styles

Italic

Recommended: 400, 700

→ Google Fonts ↗

Source Serif 4's warm transitions meet Atkinson Hyperlegible's accessibility-first design. Beautiful and inclusive. Ideal for government sites, accessibility-focused products, and inclusive design projects.

SOURCE SERIF 4 × ATKINSON HYPERLEGIBLE32 / 38