CSS Text & Font: Formatting the Web
"Web design is 95% typography." - Oliver Reichenstein. By mastering CSS text and font properties, you control readability, emotional impact, and the hierarchy of your content.
The Core: Font Families
The font-family property is how you choose a typeface. Always provide a "font stack" — a prioritized list of fonts. The browser uses the first one it has installed.
Typically, you end the stack with a generic family like sans-serif, serif, or monospace.
Sizing: rem vs px
When using font-size, avoid pixels (px) for main content. Use rem (Root EM) instead.
Why? Because rem respects the user's browser settings. If a visually impaired user increases their default browser font size to 24px, a 1rem text block will adapt to 24px. Hardcoded pixels will stubbornly remain small.
Spacing and Readability
Legibility isn't just about size; it's about white space.
- line-height: The vertical space between lines. A value of
1.5or1.6is standard for long paragraphs. - letter-spacing: The horizontal space between characters. Small adjustments (like
0.5px) can make dense fonts much easier to read.
View Performance Tips: FOIT vs FOUT+
FOIT (Flash of Invisible Text) vs FOUT (Flash of Unstyled Text). When loading custom web fonts, browsers might hide text until the font loads. Use font-display: swap; in your @font-face declaration to show the fallback font immediately (FOUT) instead of leaving the user with a blank screen (FOIT).
❓ Frequently Asked Questions
What is the difference between text-align and vertical-align?
text-align: Controls the horizontal alignment of text within a block container (e.g., left, center, right, justify).
vertical-align: Controls the vertical alignment of inline elements or table cells, NOT entire blocks. To vertically center text in a div today, it is better to use Flexbox (`align-items: center`).
Why isn't my @font-face or Google Font working?
Check three things: 1) Ensure the import link is in the <head> of your HTML or the `@import` is the first line of your CSS. 2) Ensure the `font-family` name matches the imported definition exactly. 3) Check capitalization and quotes if the name contains spaces.
/* Correct Example */ font-family: 'Open Sans', sans-serif;What does text-transform: capitalize do?
It converts the first letter of every word to uppercase, leaving the rest in lowercase. This is very useful for dynamically generated titles. Other values include `uppercase` (all caps) and `lowercase` (all small letters).