Install FontSwap
Literata
About Literata
- 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 →Literata is a variable serif typeface designed by TypeTogether for Google. Originally commissioned as the reading font for Google Play Books in 2014, it was redesigned in 2020 as a variable font with expanded capabilities.
Design Characteristics
Literata combines editorial elegance with excellent screen readability. The design features moderate contrast, open apertures, and subtle details optimized for extended reading. Its contemporary interpretation of traditional text typeface principles makes it versatile across print and digital.
Technical Features
- Variable font: Two axes (weight and optical size)
- Optical sizing: Automatic optimization from caption to display
- Extensive language support: Latin, Cyrillic, Greek, Vietnamese
- OpenType features: Small caps, oldstyle figures, case-sensitive forms
Best Use Cases
Literata excels in:
- E-readers: Designed specifically for digital reading
- Editorial design: Newspapers, magazines, books
- Academic publishing: Scholarly articles and journals
- Long-form content: Blogs, articles, documentation
Is Literata on Google Fonts?
Yes, Literata is available for free on Google Fonts. Get Literata on Google Fonts ↗
Alternative For (2)
Literata is a free alternative to the following premium fonts:
Editorial serif designed for digital reading with similar qualities
Compare Literata
See how Literata compares to other fonts side by side.
Variable Font Axes
Literata is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 900 |
| opsz | 7 | 14 | 72 |
Font Pairings
Fonts that pair well with Literata based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Literata in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Literata.
@font-face {
font-family: 'Literata Fallback';
src: local('Georgia');
ascent-override: 117.7%;
descent-override: 30.8%;
line-gap-override: 0%;
size-adjust: 105.31%;
}How to Use Literata
Copy these code snippets to quickly add Literata to your project.
CSS code for Literata
@import url('https://fonts.googleapis.com/css2?family=Literata:wght@100..900&display=swap');HTML code for Literata
<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=Literata:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Literata
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'literata': ['Literata', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-literata">Your text here</p>Next.js code for Literata
// Using next/font (Next.js 13+)
import { Literata } from 'next/font/google';
const literata = Literata({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={literata.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Literata'" }}>Your text</p>Expo and React Native code for Literata
// Install: npx expo install @expo-google-fonts/literata expo-font
import { useFonts, Literata_400Regular } from '@expo-google-fonts/literata';
export default function App() {
const [fontsLoaded] = useFonts({
Literata_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Literata_400Regular' }}>
Your text here
</Text>
);
}