Install FontSwap
Crimson Pro
About Crimson Pro
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- Variable (100-900)
- Features
- Variable, Italics
Free to use, modify, and distribute. Can be used commercially without attribution.
What's allowed?
- ✓ Client work
- ✓ SaaS / Web apps
- ✓ YouTube / Video
- ✓ Sell products
- ✓ Print materials
Note: Derivative fonts must use the same license.
Full license guide →Crimson Pro is an elegant serif typeface designed by Jacques Le Bailly, created as an update to the original Crimson Text. Released as a variable font in 2019, it offers refined letterforms optimized for both screen and print.
History and Design
Jacques Le Bailly developed Crimson Pro as a modernized version of Sebastian Kosch's Crimson Text. The redesign focused on improving consistency, refining spacing, and adding a variable font axis. The typeface draws inspiration from old-style serifs like Garamond while incorporating contemporary refinements for digital readability.
Why Crimson Pro is Popular
Crimson Pro has become a popular choice for designers seeking a free alternative to premium old-style serifs like Minion and Garamond. Its elegant letterforms, comprehensive weight range, and variable font technology make it suitable for both web and print projects. The combination of classical beauty and modern engineering appeals to discerning typographers.
Technical Features
- Variable font: Full weight range from ExtraLight (200) to Black (900)
- True italics: Elegant cursive forms with calligraphic influence
- Old-style figures: Available through OpenType features
- Refined spacing: Improved from the original Crimson Text
- Vietnamese support: Extended character set for Southeast Asian languages
Best Use Cases
Crimson Pro excels in:
- Academic publishing: Scholarly journals and dissertations
- Literary works: Novels, poetry, and creative writing
- Editorial design: Magazine features and long-form articles
- Corporate communications: Refined annual reports and white papers
- Web typography: Excellent rendering at text sizes
Usage Tips
For body text, use weight 400 at 16-18px. Enable old-style figures for a more classical appearance in body copy. Use weight 600-700 for subheadings and 800-900 for major headlines. The elegant italics work beautifully for emphasis and block quotes. Pairs well with geometric sans-serifs for a scholarly yet modern aesthetic.
Is Crimson Pro on Google Fonts?
Yes, Crimson Pro is available for free on Google Fonts. Get Crimson Pro on Google Fonts ↗
Alternative For (10)
Crimson Pro is a free alternative to the following premium fonts:
Renaissance-inspired text serif with variable weight and comprehensive features
Renaissance-inspired text serif with variable weight and comprehensive features
Renaissance-inspired text serif with variable weight and comprehensive OpenType features
Compare Crimson Pro
See how Crimson Pro compares to other fonts side by side.
Variable Font Axes
Crimson Pro is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 900 |
Font Pairings
Fonts that pair well with Crimson Pro based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Crimson Pro in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Crimson Pro.
@font-face {
font-family: 'Crimson Pro Fallback';
src: local('Georgia');
ascent-override: 89.65%;
descent-override: 21.48%;
line-gap-override: 0%;
size-adjust: 87.22%;
}How to Use Crimson Pro
Copy these code snippets to quickly add Crimson Pro to your project.
CSS code for Crimson Pro
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@100..900&display=swap');HTML code for Crimson Pro
<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=Crimson+Pro:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Crimson Pro
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'crimson-pro': ['"Crimson Pro"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-crimson-pro">Your text here</p>Next.js code for Crimson Pro
// Using next/font (Next.js 13+)
import { Crimson_Pro } from 'next/font/google';
const crimson_pro = Crimson_Pro({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={crimson_pro.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Crimson Pro"' }}>Your text</p>Expo and React Native code for Crimson Pro
// Install: npx expo install @expo-google-fonts/crimson-pro expo-font
import { useFonts, Crimson_Pro_400Regular } from '@expo-google-fonts/crimson-pro';
export default function App() {
const [fontsLoaded] = useFonts({
Crimson_Pro_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Crimson_Pro_400Regular' }}>
Your text here
</Text>
);
}