CSS Font Properties & Typography
Typography sets the visual tone of your website. CSS provides powerful font controls — from basic font families and sizes to advanced features like variable fonts, line clamping, and responsive type scales. Good typography improves readability, brand identity, and user engagement.
35 min•By Priygop Team•Last updated: Feb 2026
Font Properties
- font-family — Set fonts with fallback stack: font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif
- font-size — Use rem for scalability: 1rem = root font size (16px default). clamp(1rem, 2.5vw, 2rem) for responsive sizing
- font-weight — 100 (thin) to 900 (black). 400 = normal, 700 = bold. Variable fonts support any weight in range
- line-height — Unitless values recommended: line-height: 1.6 means 1.6× the font size. Improves readability significantly
- letter-spacing — Track (space between all letters): letter-spacing: 0.05em for headings. Measured in em for proportional spacing
- text-transform — uppercase, lowercase, capitalize, none. Use CSS for visual presentation, not HTML (for accessibility)
- font-display: swap — In @font-face, prevents invisible text while custom font loads. Shows fallback font immediately
Google Fonts & @font-face
Example
/* Method 1: Google Fonts via link tag */
/* <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet"> */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}
/* Method 2: Self-hosted @font-face */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2'),
url('/fonts/custom.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap; /* Show text immediately with fallback */
}
/* Typography scale — using rem for consistency */
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; }
h3 { font-size: clamp(1.2rem, 3vw, 1.75rem); font-weight: 600; line-height: 1.3; }
p { font-size: 1rem; line-height: 1.6; max-width: 65ch; } /* 65ch optimal reading width */
/* Text truncation */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}Try It Yourself: Typography System
Try It Yourself: Typography SystemHTML
HTML Editor
✓ ValidTab = 2 spaces
HTML|29 lines|1788 chars|✓ Valid syntax
UTF-8