The Quick Brown Fox
Typography is the art of arranging type to make written language legible, readable, and appealing when displayed.
Bitter and Raleway are a serif and sans-serif pairing with balanced contrast. Bitter for headings, Raleway for body text. Bitter's sturdy slab serifs ground Raleway's elegant thinness. Solid and contemporary. Good for startup landing pages, product sites, and modern portfolios.
BITTER + RALEWAY
EDIT BELOW
USE THIS PAIR
# npm
npm install @fontsource/bitter @fontsource/raleway
# yarn
yarn add @fontsource/bitter @fontsource/raleway
# pnpm
pnpm add @fontsource/bitter @fontsource/raleway
# Then import in your app entry point:
import '@fontsource/bitter';
import '@fontsource/raleway';
# CSS usage:
# h1, h2, h3 { font-family: 'Bitter', serif; }
# body { font-family: 'Raleway', sans-serif; }RECOMMENDED WEIGHTS · BITTER
RALEWAY
CHARACTER SET · BITTER
RALEWAY
Bitter
A slab serif designed specifically for screen reading. Its sturdy serifs and generous x-height make it comfortable for long-form text on devices where traditional serifs often struggle.
Sol Matas, 2011
serif · 18 styles
Variable · Italic
Recommended: 400, 700
Available: 100–900
Raleway
An elegant sans-serif with distinctively thin weights that give it a high-fashion aesthetic. Originally a single thin weight by Matt McInerney, later expanded to a full family with nine weights.
Matt McInerney, Pablo Impallari, Rodrigo Fuenzalida, 2010
sans-serif · 18 styles
Variable · Italic
Recommended: 400, 500, 600
Available: 100–900
Would Bitter + Raleway work for my project?
Sends this question and a link back to this page.
The Quick Brown Fox
Typography is the art of arranging type to make written language legible, readable, and appealing when displayed.
The Quick Brown Fox
Typography is the art of arranging type to make written language legible, readable, and appealing when displayed.
The Quick Brown Fox
Typography is the art of arranging type to make written language legible, readable, and appealing when displayed.