Typography and theming are essential for making your website readable, consistent, and visually appealing. Good typography ensures your text is easy to consume, while theming gives users control (like light/dark mode). Let’s break it down step by step.
Typography Basics
Typography is more than just choosing a font—it’s about readability and rhythm.
1. Line Length
Ideal: 45–75 characters per line for body text.
Too short = choppy reading.
Too long = hard to track the next line.
p {
max-width: 65ch; /* ~65 characters wide */
}
Using ch (character width unit) ensures a comfortable reading width across devices.
2. Line Height
Line height gives breathing room between lines.
Recommended: 1.4 – 1.6 for body text.
p {
line-height: 1.5;
}
3. Relative Sizing
Instead of fixed px, use relative units (em, rem, %) so fonts adapt across devices.
html {
font-size: 16px; /* base */
}
h1 {
font-size: 2.5rem; /* scales with root */
}
p {
font-size: 1rem;
}
This way, changing the base font-size in <html> scales the whole website.
Font Stacks (Fallbacks)
Not all devices have the same fonts installed. Use font stacks to ensure consistency.
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}
If Helvetica Neue is missing → browser uses Arial.
If Arial is missing → browser uses a generic sans-serif.
Always end with a generic family: serif, sans-serif, or monospace.
CSS Variables for Theming
Modern CSS allows custom properties (variables) to handle colors, spacing, and themes.
:root {
--bg-color: white;
--text-color: black;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
Light/Dark Mode with prefers-color-scheme
With one extra CSS block, your site adapts to the user’s system preference.
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #111;
--text-color: #f4f4f4;
}
}
Users on dark mode will automatically see a dark-themed version.
Demo: Contrast + Theming
Here’s a simple webpage that adapts typography and theme:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Typography & Theming Demo</title>
<style>
:root {
--bg-color: white;
--text-color: #222;
--heading-color: #0077cc;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #f4f4f4;
--heading-color: #4da3ff;
}
}
body {
font-family: Georgia, serif;
font-size: 1rem;
line-height: 1.6;
background: var(--bg-color);
color: var(--text-color);
max-width: 65ch;
margin: 2rem auto;
padding: 1rem;
}
h1 {
color: var(--heading-color);
font-size: 2.5rem;
}
p {
margin-bottom: 1rem;
}
</style>
</head>
<body>
<h1>Typography & Theming Demo</h1>
<p>This is a paragraph demonstrating readable typography. Notice the optimal line length and spacing.</p>
<p>Switch your system theme to dark mode to see automatic theming in action!</p>
</body>
</html>
Key Takeaways
Line length: Keep ~65 characters for readability.
Line height: Around 1.5 for body text.
Relative units: Use
rem&eminstead of px.Font stacks: Always add fallbacks.
Theming: CSS variables +
prefers-color-scheme= modern light/dark mode support.
Join the conversation
Sign in to share your thoughts and engage with other readers.
No comments yet
Be the first to share your thoughts!