Typography
The art and technique of arranging type to make written language beautiful and readable
Font Families & Loading
Choosing the right typeface sets the tone for your entire design. Learn how to load and use fonts effectively.
System Font Stacks
System Sans-Serif
System Serif
System Monospace
/* Modern system font stacks */
.system-sans {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial,
sans-serif;
}
.system-serif {
font-family: Georgia, Cambria,
"Times New Roman", Times, serif;
}
.system-mono {
font-family: ui-monospace, SFMono-Regular,
"SF Mono", Consolas, "Liberation Mono",
Menlo, monospace;
}Web Font Loading
Google Fonts: Inter
Variable Font (Inter)
Font Display: Swap
/* Import from Google Fonts */
@import url('https://fonts.googleapis.com/css2?
family=Inter:wght@400;500;600;700&display=swap');
/* Or use link in HTML (faster) */
/* Font-display for better UX */
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* or fallback */
}Font Pairing
Playfair + Inter
Classic serif paired with modern sans-serif creates elegant contrast.
Bebas Neue
Bold display font with clean body text for impactful design.
/* Complementary font pairing */
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
letter-spacing: -0.02em;
}
body {
font-family: 'Inter', sans-serif;
font-weight: 400;
line-height: 1.6;
}
/* Contrast in weight, not just family */
.display {
font-family: 'Bebas Neue', sans-serif;
font-size: 3rem;
letter-spacing: 0.05em;
}Text Styling Properties
Transform plain text into visually appealing content with these essential CSS properties.
Font Weight & Style
Thin (100)
Light (300)
Regular (400)
Medium (500)
Semibold (600)
Bold (700)
Italic Style
Oblique 15deg
/* Font weights */
.thin { font-weight: 100; }
.light { font-weight: 300; }
.regular { font-weight: 400; } /* or normal */
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; } /* or bold */
/* Font styles */
.italic { font-style: italic; }
.oblique { font-style: oblique 15deg; }Size & Line Height
Extra Small (0.75rem)
Small (0.875rem)
Base (1rem)
Large (1.25rem)
Extra Large (1.5rem)
This paragraph has optimised line height (1.6) for comfortable reading. Notice how the lines have breathing room between them, making the text easier to scan.
/* Responsive font sizing */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.25rem; }
.text-xl { font-size: 1.5rem; }
/* Line height for readability */
body { line-height: 1.6; }
h1, h2, h3 { line-height: 1.2; }
.tight { line-height: 1.25; }
.loose { line-height: 2; }
/* Fluid typography */
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
}Letter & Word Spacing
Tight Letter Spacing (-0.05em)
Normal Letter Spacing
Wide Letter Spacing (0.1em)
Increased Word Spacing
UPPERCASE WITH SPACING
/* Letter spacing (tracking) */
.tracking-tight { letter-spacing: -0.05em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.1em; }
/* Word spacing */
.word-spacing { word-spacing: 0.5em; }
/* Common patterns */
.uppercase {
text-transform: uppercase;
letter-spacing: 0.1em; /* More readable */
}
.display-heading {
font-size: 4rem;
letter-spacing: -0.02em; /* Tighter */
}Text Decoration & Transform
Simple Underline
Custom Underline Style
Strikethrough Text
Overline Decoration
lowercase to uppercase
capitalize each word
Small Caps Variant
/* Text decoration */
.underline-simple {
text-decoration: underline;
}
.underline-custom {
text-decoration: underline wavy #f06;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.line-through {
text-decoration: line-through;
}
/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
/* Small caps */
.small-caps {
font-variant: small-caps;
}Text Alignment & Indentation
Left aligned text (default)
Center aligned text
Right aligned text
Justified text creates even edges on both sides by adjusting word spacing. This can sometimes create rivers of white space.
This paragraph has a text indent, common in traditional book typography for the first line of paragraphs.
/* Text alignment */
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify {
text-align: justify;
hyphens: auto; /* Better justification */
}
/* Text indentation */
.text-indent {
text-indent: 2rem;
}
/* First letter styling */
p:first-child::first-letter {
font-size: 3em;
float: left;
line-height: 1;
}Advanced Typography
Take your typography to the next level with these advanced CSS features and techniques.
Variable Fonts
Weight: 300
Weight: 500
Weight: 700
Weight: 900
Animated Variable Font
/* Variable font usage */
@font-face {
font-family: 'Inter var';
src: url('Inter.var.woff2') format('woff2');
font-weight: 100 900;
}
/* Fine control */
.custom-weight {
font-variation-settings: 'wght' 650;
}
/* Animation */
@keyframes weight-dance {
0% { font-variation-settings: 'wght' 300; }
50% { font-variation-settings: 'wght' 700; }
100% { font-variation-settings: 'wght' 300; }
}Text Shadow & Effects
Simple Shadow
Long Shadow Effect
Neon Glow
3D Text Effect
Outlined Text
/* Text shadows */
.shadow-simple {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.shadow-neon {
text-shadow:
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #f06,
0 0 40px #f06;
}
.shadow-3d {
text-shadow:
1px 1px 0 #ccc,
2px 2px 0 #bbb,
3px 3px 0 #aaa,
4px 4px 6px rgba(0,0,0,0.3);
}
.shadow-outline {
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}OpenType Features
Ligatures: fi fl ff ffi ffl
No Ligatures: fi fl ff ffi ffl
Old Style: 1234567890
Tabular: 1234567890
Fractions: 1/2 3/4 5/8
/* OpenType features */
.liga-on {
font-feature-settings: "liga" 1;
}
.liga-off {
font-feature-settings: "liga" 0;
}
.numbers-old {
font-feature-settings: "onum" 1;
}
.numbers-tabular {
font-feature-settings: "tnum" 1;
}
.fractions {
font-feature-settings: "frac" 1;
}
/* Modern syntax */
.stylistic {
font-variant-ligatures: common-ligatures;
font-variant-numeric: oldstyle-nums;
}Text Overflow & Wrapping
This text is too long and will be truncated with an ellipsis at the end...
This text is too long and will be clipped without any visual indicator...
Thisisaverylongwordthatwillbreakwhenitreachestheendofthecontainer
This paragraph uses automatic hyphenation to break long words at appropriate syllable boundaries.
/* Text overflow */
.overflow-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Word breaking */
.word-break {
word-break: break-all;
}
.word-wrap {
overflow-wrap: break-word;
}
/* Hyphenation */
.hyphens {
hyphens: auto;
-webkit-hyphens: auto;
}
/* Multi-line truncation */
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}Type Specimens
Complete typography systems showcasing hierarchy, rhythm, and cohesive design.
The Quick Brown Fox
Jumps Over the Lazy Dog
A Typography Specimen
This is a lead paragraph demonstrating larger, more impactful text that introduces the main content. It sets the tone and draws the reader in.
Regular body text maintains optimal readability with carefully chosen font size, line height, and measure. The typography system creates visual hierarchy through size, weight, and spacing rather than relying on colour alone.
"Typography is the craft of endowing human language with a durable visual form." — Robert Bringhurst
Type Scale
Character Set
Uppercase
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Lowercase
abcdefghijklmnopqrstuvwxyz
Numbers
0123456789
Punctuation
.,;:!?'""-–—()[]{}/*@#£$%&
Typography Best Practices
Optimal Line Length
Keep lines between 45-75 characters for comfortable reading. Use ch units or max-width.
Establish Hierarchy
Use size, weight, and spacing to create clear visual hierarchy, not just colour.
Limit Font Families
Stick to 2-3 font families maximum. More creates visual chaos.
Responsive Typography
Use relative units and fluid type scales that adapt to viewport size.