Fraunces
About Fraunces
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- Variable (100-900)
- Features
- Variable, Italics
Fraunces is a display serif typeface designed by Undercase Type (Phaedra Charles and Flavia Zimbardi) with engineering support from Google Fonts. Released in 2020, Fraunces offers a soft, friendly character with quirky details that make it an excellent modern alternative to vintage display serifs like Cooper Black.
History and Design
Undercase Type designed Fraunces as a "wonky" soft serif inspired by early 20th-century display typefaces. The design embraces imperfection—letterforms feature deliberately irregular details that give text a warm, handcrafted quality without sacrificing contemporary refinement.
Fraunces employs two variable font axes: weight (from Thin to Black) and "WONK" (controlling the quirkiness of letterforms). This optical size axis lets designers dial in exactly how much personality they want, from refined to playfully irregular.
Technical Features
- Variable font: Full weight range (100-900) plus optical axis
- Optical sizing: WONK axis for personality control
- Complete styles: Regular and Italic for all weights
- Modern optimization: Excellent screen rendering
- Extended Latin: Comprehensive character coverage
Why Fraunces Excels
Fraunces succeeds by offering controlled quirkiness. Unlike typefaces that commit fully to irregularity, Fraunces lets designers tune the personality level. At low WONK settings, it's a sophisticated soft serif; at high settings, it's playfully distinctive. This flexibility makes it suitable for diverse applications.
Best Use Cases
Fraunces excels in:
- Brand identity: Friendly, approachable marks
- Editorial headlines: Warm, engaging titles
- Packaging design: Premium with personality
- Web display: Variable font performance
Usage Tips
Use the WONK axis thoughtfully—higher values suit display sizes and playful contexts, while lower values work better for text sizes and formal applications. The weight range allows for dramatic headline treatments while maintaining legibility. Pair with clean sans-serifs like Inter or Open Sans for effective contrast.
Alternative For (1)
Fraunces is a free alternative to the following premium fonts:
Modern variable display serif with optical sizes and soft, friendly character
How to Use Fraunces
Copy these code snippets to quickly add Fraunces to your project.
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@100..900&display=swap');HTML Link Tags
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@100..900&display=swap" rel="stylesheet">Tailwind CSS
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'fraunces': ['Fraunces', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-fraunces">Your text here</p>React / Next.js
// Using next/font (Next.js 13+)
import { Fraunces } from 'next/font/google';
const fraunces = Fraunces({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={fraunces.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Fraunces'" }}>Your text</p>