The Quick Brown Fox
Typography is the art of arranging type to make written language legible, readable, and appealing when displayed.
Fraunces and Outfit are a serif and sans-serif pairing with strong contrast. Fraunces for headings, Outfit for body text. Fraunces's wobbly charm paired with Outfit's geometric calm. Personality with polish. Great for creative agencies, consumer brands, and playful products.
FRAUNCES + OUTFIT
EDIT BELOW
USE THIS PAIR
# npm
npm install @fontsource/fraunces @fontsource/outfit
# yarn
yarn add @fontsource/fraunces @fontsource/outfit
# pnpm
pnpm add @fontsource/fraunces @fontsource/outfit
# Then import in your app entry point:
import '@fontsource/fraunces';
import '@fontsource/outfit';
# CSS usage:
# h1, h2, h3 { font-family: 'Fraunces', serif; }
# body { font-family: 'Outfit', sans-serif; }RECOMMENDED WEIGHTS · FRAUNCES
OUTFIT
CHARACTER SET · FRAUNCES
OUTFIT
Fraunces
An old-style soft serif with a 'wonky' axis that controls the quirkiness of its letterforms. By Undercase Type, it ranges from refined to playful depending on the optical size and wonk settings.
Undercase Type, 2020
serif · 18 styles
Variable · Italic
Recommended: 400, 700, 900
Available: 100–900
Outfit
A geometric sans-serif by Rodrigo Fuenzalida with a warm, contemporary feel. Its rounded geometry and even stroke widths create a clean, modern aesthetic popular in SaaS and product design.
Rodrigo Fuenzalida, 2021
sans-serif · 9 styles
Variable
Recommended: 400, 500, 600
Available: 100–900
Would Fraunces + Outfit 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.