34. Font Shorthand and Common Typography Pitfalls

To write more concise CSS, the font shorthand property allows you to set multiple font properties at once.

The font Shorthand

This property can set font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.

Required Order: font-size and font-family must be present, and they must be last in the list. line-height is specified after the size, separated by a slash (/).

css /* Format: style weight size/line-height family */

.shorthand-text { font: italic bold 1.2rem/1.5 'Roboto', sans-serif; /* Equivalent to: font-style: italic; font-weight: bold; font-size: 1.2rem; line-height: 1.5; font-family: 'Roboto', sans-serif; */ }

Common Typography Pitfalls

1. Fixed Pixels for Fonts: Using px for font-size (instead of rem or em) prevents users from resizing text in the browser settings, failing accessibility standards.
2. Missing Fallbacks: Never define a font-family without a generic fallback (sans-serif or serif). If your custom font fails to load, the page will break visually.
3. Too Many Font Weights: Loading 10 different font weights (100, 200, 300...) significantly increases page load time. Only load the weights you actually use (e.g., 400 and 700).
4. Low Contrast: Ensure text color and background color have sufficient contrast, especially for small text, to meet WCAG accessibility guidelines.