Abril Fatface + Lora
Editorial Drama
Where Didone meets digital
Abril Fatface brings the drama of 19th-century advertising posters to modern screens. Lora's comfortable curves invite readers to stay for the story behind the headline.
Display elegance meets editorial warmth. Abril Fatface's Didone drama paired with Lora's comfortable reading experience.
Typefaces Used
Abril Fatface
Display serif with high contrast. Perfect for fashion and editorial headlines.
Designed by TypeTogether
Released 2011
Available weights: 400
Lora
Well-balanced contemporary serif optimized for body text and moderate headlines. Warm and readable.
Designed by Cyreal
Released 2011
Available weights: 400, 500, 600, 700
Recommended Scale
Headline One
Abril Fatface · 400 · 60px · 1
Headline Two
Abril Fatface · 400 · 40px · 1.1
Headline Three
Lora · 600 · 22px · 1.3
Body text for paragraphs and long-form content.
Lora · 400 · 17px · 1.75
Caption and metadata text
Lora · 400 · 14px · 1.6
In Context
Editorial Drama
Where Didone meets digital
Abril Fatface brings the drama of 19th-century advertising posters to modern screens. Lora's comfortable curves invite readers to stay for the story behind the headline.
“All the world's a stage.”
William Shakespeare
Developer Exports
<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=Abril+Fatface:wght@400&family=Lora:wght@400;600&display=swap" rel="stylesheet">h1 {
font-family: "Abril Fatface", sans-serif;
font-size: 60px;
font-weight: 400;
line-height: 1;
}
h2 {
font-family: "Abril Fatface", sans-serif;
font-size: 40px;
font-weight: 400;
line-height: 1.1;
}
h3 {
font-family: "Lora", serif;
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
.body-text {
font-family: "Lora", serif;
font-size: 17px;
font-weight: 400;
line-height: 1.75;
}
.caption {
font-family: "Lora", serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
abrilfatface: [""Abril Fatface"", "sans-serif"],
lora: [""Lora"", "serif"],
},
fontSize: {
"h1": ["60px", { lineHeight: "1", fontWeight: "400" }],
"h2": ["40px", { lineHeight: "1.1", fontWeight: "400" }],
"h3": ["22px", { lineHeight: "1.3", fontWeight: "600" }],
"body": ["17px", { lineHeight: "1.75", fontWeight: "400" }],
"caption": ["14px", { lineHeight: "1.6", fontWeight: "400" }],
},
},
},
};
export default config;AI-Ready Exports
Copy these structured prompts to brief AI tools on your typography system. Paste directly into ChatGPT, Claude, or any LLM.
System Description
Explain this type system to an AI
Use this typographic system: Headings: Abril Fatface, 400 weight Used for H1–H3 Display serif with high contrast. Perfect for fashion and editorial headlines. Body: Lora, 400 weight Used for paragraphs and UI Well-balanced contemporary serif optimized for body text and moderate headlines. Warm and readable. Tone: elegant, bold, editorial Display elegance meets editorial warmth. Abril Fatface's Didone drama paired with Lora's comfortable reading experience. Use this scale: H1 — 60px / 1 H2 — 40px / 1.1 H3 — 22px / 1.3 Body — 17px / 1.75 Caption — 14px / 1.6
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Abril Fatface — 400 — 60px — line-height 1 H2 — Abril Fatface — 400 — 40px — line-height 1.1 H3 — Lora — 600 — 22px — line-height 1.3 Body — Lora — 400 — 17px — line-height 1.75 Caption — Lora — 400 — 14px — line-height 1.6 Headings should feel elegant and bold. Body text should feel readable and refined. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.