← ALL PAIRS

NOTO SERIF + NOTO SANS

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.

NOTO SERIF

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

NOTO SANS

Thin 100The quick brown fox jumps over the lazy dog
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 · NOTO SERIF

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

NOTO SANS

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/noto-serif @fontsource/noto-sans

# yarn
yarn add @fontsource/noto-serif @fontsource/noto-sans

# pnpm
pnpm add @fontsource/noto-serif @fontsource/noto-sans

# Then import in your app entry point:
import '@fontsource/noto-serif';
import '@fontsource/noto-sans';

# CSS usage after import:
# font-family: 'Noto Serif', serif;
# font-family: 'Noto Sans', sans-serif;

ABOUT

Noto Serif

The serif companion to Noto Sans, providing global language coverage with classical proportions. Shares the same vertical metrics as Noto Sans for seamless mixing of serif and sans in multilingual layouts.

Google, 2014

serif · 18 styles

Variable · Italic

Recommended: 400, 700

Available: 100–900

→ Google Fonts ↗

Noto Sans

Google's universal sans-serif, part of the Noto project to support every written language. Designed by Monotype, it provides harmonious coverage across Latin, CJK, Arabic, Devanagari, and hundreds more scripts.

Google, 2014

sans-serif · 18 styles

Variable · Italic

Recommended: 400, 500, 700

Available: 100–900

→ Google Fonts ↗

Google's Noto project aims to support every language. This pair works globally — same proportions, massive character coverage. Perfect for international products, multi-language sites, and global platforms.

minimaltechnical

RELATED PAIRS

NOTO SERIF × NOTO SANS33 / 38