Poppins + Lora
A friendly geometric sans-serif heading paired with a warm, contemporary serif body.
Design your next idea beautifully.
A well-designed product begins with typography that creates hierarchy, clarity, and personality. Explore this combination in real-time by editing this text.
Meaningful Digital Experiences
We believe that typography is the foundation of digital design. It guides the reader's eye and establishes the brand's tone of voice immediately.
"Good typography helps people understand your message before they consciously notice the typeface."
Why this pairing works
This reverses the traditional serif-heading/sans-body dynamic. Poppins is approachable and round, while Lora brings sophisticated readability to paragraphs.
Implementation
HTML
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
CSS
:root {
--font-heading: "Poppins", sans-serif;
--font-body: "Lora", serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
}
body {
font-family: var(--font-body);
}