Master font-family and build effective font stacks with fallbacks
Control text size with font-size using px, em, rem, and percentages
Adjust text thickness with font-weight from thin (100) to black (900)
Apply font-style for italic, oblique, and custom slant angles
Use font-variant for small caps and advanced capitalization
Adjust character width with font-stretch for condensed/expanded text
Control vertical spacing with line-height for optimal readability
Use the font shorthand to combine multiple properties efficiently
Follow accessibility best practices for font sizing and readability
Introduction to Font Properties
Font properties control the fundamental visual characteristics of text: the typeface used, its size, weight, style, and spacing. These properties form the foundation of typography on the web, affecting both aesthetics and readability.
While modern CSS offers many advanced typography features, mastering these core font properties is essential. They work universally across all browsers and provide the building blocks for more sophisticated text styling.
font-family - Choosing Typefaces
The font-family property specifies which typeface to use for text. Always provide multiple font options (a "font stack") with a generic family as the final fallback.
/* Font stack with fallbacks */
font-family: Georgia, 'Times New Roman', serif;
/* System font stack (fast, native) */
font-family: system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, sans-serif;
/* Monospace for code */
font-family: 'SF Mono', Monaco, 'Cascadia Code',
'Courier New', monospace;
font-size - Controlling Text Size
The font-size property controls how large text appears. Use relative units for accessibility and maintainability.
/* Absolute units (not recommended) */
font-size: 16px; /* Fixed, doesn't scale with user settings */
/* Relative units (recommended) */
font-size: 1rem; /* Relative to root (usually 16px) */
font-size: 1.5em; /* Relative to parent font size */
font-size: 100%; /* Relative to parent (same as 1em) */
/* Practical examples */
body { font-size: 16px; } /* Base size */
h1 { font-size: 2.5rem; } /* 40px if root is 16px */
small { font-size: 0.875rem; } /* 14px if root is 16px */
font-weight - Text Thickness
The font-weight property controls how thick or bold text appears, ranging from 100 (thin) to 900 (black/heavy).
/* Numeric values (100-900) */
font-weight: 100; /* Thin */
font-weight: 300; /* Light */
font-weight: 400; /* Normal/Regular */
font-weight: 600; /* Semi-Bold */
font-weight: 700; /* Bold */
font-weight: 900; /* Black/Heavy */
/* Keyword values */
font-weight: normal; /* Same as 400 */
font-weight: bold; /* Same as 700 */
/* Relative values */
font-weight: lighter; /* One weight lighter than parent */
font-weight: bolder; /* One weight heavier than parent */
font-style - Italic and Oblique
The font-style property controls whether text appears upright (normal), slanted (italic/oblique), or at a custom angle.