Control fonts, sizes, weights, colors, spacing, line-height, and text shadows to style text effectively on any screen.
Always list multiple fonts in a stack. The browser picks the first available and falls back down the list. End with a generic family (serif, sans-serif, monospace) as the final fallback.
<!DOCTYPE html>
<html><head>
<style>
.sans { font-family: "Helvetica Neue", Arial, sans-serif; }
.serif { font-family: Georgia, "Times New Roman", serif; }
.mono { font-family: "Courier New", Courier, monospace; }
p { font-size: 18px; padding: 8px; }
</style>
</head><body style="padding:16px">
<p class="sans">Sans-serif: clean, modern, great for UI.</p>
<p class="serif">Serif: classic, great for long-form reading.</p>
<p class="mono">Monospace: code, terminals, fixed-width text.</p>
</body></html>px is exact and never changes. em scales relative to the parent font-size and compounds when nested. rem always scales from the root — the safest choice for consistent sizing across the page.
<!DOCTYPE html>
<html><head>
<style>
:root { font-size: 16px; }
.px { font-size: 20px; }
.rem { font-size: 1.25rem; } /* 20px — always 1.25× root */
.em { font-size: 1.25em; } /* 20px if parent is 16px */
.nested { font-size: 1.5em; } /* 24px */
.nested .em { font-size: 1.5em; } /* 36px — compounding! */
.nested .rem { font-size: 1.5rem; } /* 24px — no compounding */
div { margin: 4px 0; font-family: sans-serif; }
</style>
</head><body style="padding:16px">
<div class="px">px: always 20px</div>
<div class="rem">rem: 1.25× root = 20px</div>
<div class="em">em: 1.25× parent = 20px</div>
<div class="nested">
Parent 1.5em (24px)
<div class="em">em child: 1.5×24 = 36px (compounding!)</div>
<div class="rem">rem child: 1.5rem = 24px (no compounding)</div>
</div>
</body></html>font-weight controls thickness: keywords (normal=400, bold=700) or numeric 100–900. font-style controls slant. Not all weights exist for every font — the browser synthesizes missing ones.
<!DOCTYPE html>
<html><head>
<style>
.w100 { font-weight: 100; }
.w300 { font-weight: 300; }
.w400 { font-weight: 400; }
.w600 { font-weight: 600; }
.w700 { font-weight: 700; }
.w900 { font-weight: 900; }
.italic { font-style: italic; }
.oblique { font-style: oblique; }
p { font-size: 18px; padding: 4px 0; font-family: sans-serif; }
</style>
</head><body style="padding:16px">
<p class="w100">Weight 100 — thin</p>
<p class="w300">Weight 300 — light</p>
<p class="w400">Weight 400 — normal</p>
<p class="w600">Weight 600 — semibold</p>
<p class="w700">Weight 700 — bold</p>
<p class="w900">Weight 900 — black</p>
<p class="italic">font-style: italic</p>
<p class="oblique">font-style: oblique</p>
</body></html>Combines all font properties in one declaration. Order: style variant weight size/line-height family. font-size and font-family are required — the rest are optional.
<!DOCTYPE html>
<html><head>
<style>
h1 { font: bold 2rem/1.2 Georgia, serif; }
p { font: 400 1rem/1.7 Arial, sans-serif; }
.small { font: italic 600 0.85rem/1.5 "Courier New", monospace; }
</style>
</head><body style="padding:16px">
<h1>Bold 2rem/1.2 Georgia</h1>
<p>Normal 1rem/1.7 Arial. Notice how line-height 1.7 gives the lines room to breathe — comfortable for reading longer paragraphs.</p>
<p class="small">Italic semibold 0.85rem monospace</p>
</body></html>Free web fonts served from Google CDN. Import with a <link> in <head>, then reference the font name in font-family. The display=swap parameter prevents invisible text during load.
<!DOCTYPE html>
<html><head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Merriweather:ital@0;1&display=swap" rel="stylesheet">
<style>
.sans { font-family: "Inter", sans-serif; font-size: 18px; }
.bold { font-family: "Inter", sans-serif; font-weight: 700; font-size: 22px; }
.serif { font-family: "Merriweather", serif; font-size: 18px; }
.italic { font-family: "Merriweather", serif; font-style: italic; font-size: 18px; }
p { padding: 8px 0; }
</style>
</head><body style="padding:16px">
<p class="sans">Inter — popular modern sans-serif.</p>
<p class="bold">Inter Bold 700.</p>
<p class="serif">Merriweather — designed for screen reading.</p>
<p class="italic">Merriweather italic.</p>
</body></html>color sets the foreground text color. It inherits down the DOM tree. currentColor lets borders and SVGs inherit the text color automatically — change color once, everything updates.
<!DOCTYPE html>
<html><head>
<style>
.named { color: tomato; }
.hex { color: #3b82f6; }
.rgb { color: rgb(22, 163, 74); }
.hsl { color: hsl(280, 80%, 50%); }
.current {
color: steelblue;
border: 2px solid currentColor; /* inherits steelblue */
padding: 8px 12px;
display: inline-block;
border-radius: 4px;
}
</style>
</head><body style="font-family:sans-serif;padding:16px;display:flex;flex-direction:column;gap:8px">
<p class="named">Named: tomato</p>
<p class="hex">Hex: #3b82f6</p>
<p class="rgb">RGB: rgb(22, 163, 74)</p>
<p class="hsl">HSL: hsl(280, 80%, 50%)</p>
<p class="current">Border uses currentColor</p>
</body></html>text-align controls horizontal placement. text-decoration adds or removes lines — underline, overline, line-through, or none (common for removing default link underlines).
<!DOCTYPE html>
<html><head>
<style>
p { border: 1px solid #e5e7eb; padding: 8px; margin: 6px 0; font-family: sans-serif; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
a { text-decoration: none; color: steelblue; }
a:hover { text-decoration: underline; }
.del { text-decoration: line-through; color: gray; }
.wavy { text-decoration: underline wavy tomato; }
</style>
</head><body style="padding:16px">
<p class="left">Left (default)</p>
<p class="center">Centered</p>
<p class="right">Right</p>
<p class="justify">Justified — stretches each line to fill the full width by spacing words. Works best in wider columns.</p>
<p><a href="#">Link — no underline, hover to see it</a></p>
<p class="del">Strikethrough — old price or deleted text</p>
<p class="wavy">Wavy underline</p>
</body></html>text-transform changes case visually without touching the HTML. letter-spacing adds or removes space between characters. word-spacing adds space between words.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.upper { text-transform: uppercase; letter-spacing: 0.15em; font-size: 14px; color: gray; }
.cap { text-transform: capitalize; font-size: 18px; }
.spaced { letter-spacing: 0.06em; word-spacing: 0.4em; font-size: 18px; }
</style>
</head><body>
<p class="upper">uppercase with letter-spacing</p>
<p class="cap">capitalize every first letter</p>
<p class="spaced">letter and word spacing added here</p>
</body></html>line-height controls vertical space between lines. A unitless number (e.g. 1.6) scales with font-size. direction: rtl flips text flow for Arabic, Hebrew, and other right-to-left languages.
<!DOCTYPE html>
<html><head>
<style>
.tight { line-height: 1; }
.normal { line-height: 1.4; }
.readable { line-height: 1.7; }
p { font-size: 15px; border: 1px solid #e5e7eb; padding: 8px; margin: 6px 0; max-width: 380px; font-family: sans-serif; }
.rtl { direction: rtl; font-size: 18px; border: 1px solid #e5e7eb; padding: 8px; margin-top: 12px; }
</style>
</head><body style="padding:16px">
<p class="tight">line-height: 1. Lines are very close — hard to read long text.</p>
<p class="normal">line-height: 1.4. Comfortable for most UI text.</p>
<p class="readable">line-height: 1.7. More breathing room. Great for body text and long-form reading.</p>
<p class="rtl">مرحبا — Arabic flows right to left with direction: rtl</p>
</body></html>Syntax: text-shadow: X-offset Y-offset blur-radius color. Multiple shadows are comma-separated. The blur-radius is optional (0 = hard edge).
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
h2 { font-size: 32px; margin: 0; }
.soft { text-shadow: 2px 2px 6px rgba(0,0,0,0.25); }
.hard { text-shadow: 3px 3px 0 #e74c3c; }
.glow { color: #fff; background: #1a1a2e; padding: 8px 16px; border-radius: 6px;
text-shadow: 0 0 12px #3b82f6, 0 0 28px #3b82f6; }
</style>
</head><body>
<h2 class="soft">Soft shadow</h2>
<h2 class="hard">Hard offset</h2>
<h2 class="glow">Glow effect</h2>
</body></html>