Typography comprises 90% of web design. Controlling horizontal flow (`text-align`), vertical spacing (`line-height`), and case transformation (`text-transform`) makes the difference between an amateur site and a professional, accessible interface.
1Horizontal Flow and Readability
The text-align property governs the X-axis of inline content.
- →left: Default (in LTR languages). Creates a 'ragged right' edge but offers a consistent visual anchor for the eye, maximizing readability.
- →center: Symmetrical but tiring for long texts. Reserve it for Titles (H1, H2).
- →justify: Forces lines to touch both ends by stretching spaces. Caution: can create 'rivers of white space' that break visual aesthetics.
2Text Transformation (A11y)
Never write IN ALL CAPS directly in HTML. Many screen readers interpret uppercase text as acronyms, spelling them out word by word. For accessible design, write normal text in your HTML and use text-transform: uppercase; in CSS.
3Step-by-Step Breakdown
Typographic Layout Engine. Typography is the voice of your interface. If it is unreadable, your design fails. Today, we master the spatial algorithms that govern text: horizontal flow, vertical rhythm, character tracking, and accessible casing control.
Horizontal Flow: text-align. The text-align property controls how inline content flows inside its block container. By default, it is set to left. This 'ragged right' edge provides a consistent starting anchor for the eye, making it the most readable format for long paragraphs.
Which text-align value provides the most comfortable, consistent visual anchor for reading long, dense paragraphs of text?
- →left
- →center
Symmetry & Issues: center & justify. Use center for short titles; it exhausts readers in long blocks. Use justify with extreme caution: it stretches word-spacing to force text to touch both edges, often creating ugly 'rivers of white space' that destroy readability.
Which text-align value forces the browser to mathematically stretch spaces between words so the text perfectly touches both the left and right container edges?
- →justify
- →stretch
Vertical Rhythm: line-height. Horizontal alignment is only half the battle. line-height controls the vertical spacing between lines. A value of 1.5 to 1.6 is the ADA accessibility standard. ALWAYS use a unitless number (e.g., 1.5) so it scales as a direct multiplier of the font-size.
When setting vertical spacing to prevent text overlapping during scaling, what is the mathematically safest value type to use for line-height?
- →Pixels (px)
- →Unitless multiplier (e.g. 1.5)
Horizontal Tracking: letter-spacing. While line-height handles vertical space, letter-spacing (tracking) handles horizontal space between individual characters. Adding slight positive tracking to uppercase text drastically improves its premium feel and readability.
Which CSS property allows you to inject precise horizontal space between the individual characters of a word?
- →word-spacing
- →letter-spacing
Accessible Casing: text-transform. Never type text ENTIRELY IN CAPS directly in your HTML. Screen readers often interpret capitalized HTML strings as acronyms and will spell them out letter-by-letter. Type normally in HTML, and use CSS text-transform to change the visual rendering securely.
Which text-transform value forces only the first letter of every word to become uppercase (e.g., 'john doe' becomes 'John Doe')?
- →uppercase
- →capitalize
Logical Alignment: start & end. Modern architecture uses 'Logical Properties'. Instead of hardcoding text-align: left, use text-align: start. If your site is translated to a Right-to-Left (RTL) language like Arabic or Hebrew, 'start' automatically mirrors to the right side without rewriting your CSS.
Typography Secured. You have mastered the typographic layout engine. You know how to anchor the eye with alignment, scale spacing safely with unitless line heights, inject premium tracking, and protect accessibility with CSS transforms. Next up: CSS Font Families & Scaling.
Center Align Text. text-align: center centers inline content within its containing block.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Centered or Justified Body Text Increases Reading Difficulty for Dyslexic Users
WCAG guidance and dyslexia research both flag centered and justified paragraph text as harder to track line-to-line, since the ragged, unpredictable left edge (or uneven word gaps in justify) removes the consistent visual anchor readers rely on. Keep long-form body copy left-aligned (or right-aligned in RTL).
2Use text-transform Instead of Typing Text in Literal Caps
Typing 'SUBMIT ORDER' directly in HTML can cause some screen readers to interpret it as an acronym and spell it out letter by letter. Write normal-case text in the markup and apply `text-transform: uppercase` in CSS so the semantic content stays natural while only the visual presentation changes.
SEO Implications
- 1
Unitless line-height Prevents Text-Clipping Layout Shifts on Dynamic Font Loading
A fixed pixel line-height can cause descenders or ascenders to visually clip when a web font swaps in at a different natural line height, sometimes shifting surrounding content — a unitless line-height scales proportionally with whatever font renders, avoiding this instability.
- 2
text-transform Keeps Indexed Text Content Semantically Clean
Because `text-transform` only changes the rendered presentation and not the underlying DOM text node, search engines index the actual (naturally-cased) text content rather than a visually-forced, potentially less natural-looking uppercase string.
Best Practices
Reserve justify and center for Short Headlines, Never Long-Form Text
`text-align: justify` stretches word spacing to hit both margins, which frequently creates distracting 'rivers' of whitespace in narrow columns; `center` is fine for a short title but exhausts the eye across multiple lines of body copy — default to `left` (or `start`) for paragraphs.
Prefer Logical Properties (start/end) Over Physical (left/right) for i18n-Ready Layouts
Using `text-align: start` instead of hardcoding `left` means the alignment automatically mirrors correctly if the page is later translated into a right-to-left language like Arabic or Hebrew, with zero CSS changes required.
Frequent Bugs
A heading's text gets vertically clipped at the top or bottom after a custom web font finishes loading.
A fixed pixel `line-height` doesn't adapt to the new font's natural line-box metrics. Switch to a unitless `line-height` (e.g. `1.4`) so it scales proportionally with whatever font size and font-family end up applying.
Justified paragraph text displays awkward, distractingly large gaps between some words.
This is inherent to `text-align: justify` in narrow containers — the browser stretches inter-word spacing to force both edges flush. Switch to `text-align: left` for narrow columns, or accept the tradeoff only in wide, print-style layouts.
Real-World Examples
Making Button Labels Accessible While Looking Uppercase
A design system specified all button labels in uppercase for visual consistency, but the CMS content team was typing labels in literal caps directly into the CMS, causing some screen readers to spell out short labels like 'SAVE' letter by letter.
/* HTML stays natural case: <button>Save changes</button> */
button {
text-transform: uppercase;
letter-spacing: 0.05em;
}