Install FontSwap
Baskervville
About Baskervville
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- 400
- Features
- 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 →Baskervville is a revival of John Baskerville's original 18th-century transitional serif, designed by ANRT (Atelier National de Recherche Typographique). The typeface offers a faithful interpretation of Baskerville's refined letterforms with careful attention to historical accuracy.
Design Characteristics
Baskervville captures the essential qualities of Baskerville's original design: high contrast between thick and thin strokes, refined serifs, and elegant proportions. The vertical axis and crisp details make it ideal for text at various sizes.
Historical Context
John Baskerville's original typeface, created in the 1750s, represented a significant advancement in type design and printing. Baskervville honors this legacy while providing a digital implementation suitable for contemporary use.
Best Use Cases
Baskervville excels in:
- Book design: Classical text composition
- Literary publications: Poetry, fiction, and essays
- Luxury branding: Elegant, refined identity work
- Academic publishing: Traditional scholarly appearance
Is Baskervville on Google Fonts?
Yes, Baskervville is available for free on Google Fonts. Get Baskervville on Google Fonts ↗
Alternative For (1)
Baskervville is a free alternative to the following premium fonts:
Compare Baskervville
See how Baskervville compares to other fonts side by side.
Font Pairings
Fonts that pair well with Baskervville based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Baskervville in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Baskervville.
@font-face {
font-family: 'Baskervville Fallback';
src: local('Georgia');
ascent-override: 99.8%;
descent-override: 29.5%;
line-gap-override: 0%;
size-adjust: 90.56%;
}How to Use Baskervville
Copy these code snippets to quickly add Baskervville to your project.
CSS code for Baskervville
@import url('https://fonts.googleapis.com/css2?family=Baskervville:wght@400&display=swap');HTML code for Baskervville
<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=Baskervville:wght@400&display=swap" rel="stylesheet">Tailwind code for Baskervville
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'baskervville': ['Baskervville', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-baskervville">Your text here</p>Next.js code for Baskervville
// Using next/font (Next.js 13+)
import { Baskervville } from 'next/font/google';
const baskervville = Baskervville({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={baskervville.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Baskervville'" }}>Your text</p>Expo and React Native code for Baskervville
// Install: npx expo install @expo-google-fonts/baskervville expo-font
import { useFonts, Baskervville_400Regular } from '@expo-google-fonts/baskervville';
export default function App() {
const [fontsLoaded] = useFonts({
Baskervville_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Baskervville_400Regular' }}>
Your text here
</Text>
);
}