Text Styles

Introduction

Typography is one of the highest-impact parts of UI quality. Even simple layouts feel professional when text hierarchy, spacing, and alignment are handled well. This chapter covers practical CSS text styling techniques for readable content, clear emphasis, and consistent visual rhythm.

Prerequisites

• Basic HTML structure
• CSS selectors and value units
• A page with an external stylesheet

Core Text Properties

Most day-to-day typography work uses these properties:

• color
• font-size
• font-weight
• font-style
• line-height
• text-align
• text-decoration
• text-transform
• letter-spacing
• word-spacing

Example:

body {
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.7;
}

Font Size and Readability

Readable base size for body text is commonly around:

• 16px (1rem) for general web content

Example scale:

body {
  font-size: 1rem;
}
 
h1 {
  font-size: 2rem;
}
 
h2 {
  font-size: 1.5rem;
}

For responsive typography, clamp() is often cleaner than many media queries:

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

Line Height

line-height controls vertical breathing room between lines.

p {
  line-height: 1.7;
}

Practical ranges:

• body text: 1.5 to 1.8
• headings: 1.1 to 1.3 (usually tighter)

Use unitless values when possible so spacing scales with font size.

Font Weight and Emphasis

font-weight adjusts visual emphasis:

h1 {
  font-weight: 700;
}
 
small {
  font-weight: 400;
}

Common values:

• 400 regular
• 500 medium
• 600 semibold
• 700 bold

Not all fonts support every weight, so test rendered output instead of assuming.

Text Color and Contrast

Text color must be readable against its background.

body {
  color: #0f172a;
  background: #f8fafc;
}

Guidelines:

• avoid low-contrast gray-on-gray combinations
• reserve accent colors for emphasis, not full paragraphs
• verify contrast for accessibility (especially small text)

Text Alignment

text-align controls horizontal alignment:

.hero {
  text-align: center;
}

Options:

• left / start (most common for paragraphs)
• center (good for short hero text)
• right / end (limited use)
• justify (use carefully; can create awkward spacing)

Long paragraph content is usually easiest to read with left/start alignment.

Text Decoration

Common use:

a {
  text-decoration: underline;
}

You can also customize decoration details:

a {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

For links, avoid removing underlines globally unless another strong visual cue exists.

Text Transform

text-transform changes casing visually:

.label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Values:

• uppercase
• lowercase
• capitalize

Do not overuse uppercase for long text blocks; readability drops quickly.

Letter and Word Spacing

.headline {
  letter-spacing: 0.01em;
}
 
.tagline {
  word-spacing: 0.08em;
}

Notes:

• slight positive letter spacing can improve uppercase labels
• too much spacing harms reading speed
• apply subtly and test visually

Text Overflow Handling

For single-line truncation:

.one-line-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Useful for cards, nav labels, and dense dashboard UI.

For multi-line text, techniques differ and may require line clamping strategies.

Practical Typographic System Example

This creates a predictable base for all pages before component-specific styling.

Common Text Styling Mistakes

Mini Exercise

1. Create a page with one heading, one subheading, and two paragraphs
2. Set a base body style (font-size, line-height, color)
3. Apply a heading scale using h1, h2
4. Style links with visible but clean underline behavior
5. Add a .muted utility class for secondary text
6. Test readability on mobile width

FAQ

What is a good default line-height?

For body text, 1.5 to 1.8 is a strong range. Many content-heavy pages feel good around 1.6 to 1.75.

Should I use pixels or rem for font sizes?

rem is usually better for scalable systems and user font settings. Pixels are still fine in controlled contexts.

Is text-align: justify recommended?

Usually not for web body text unless carefully tuned. It often creates uneven spacing and readability issues.

Can I remove link underlines for a cleaner design?

Only if links remain obviously interactive through color, weight, hover/focus states, and context.

How many font sizes should a simple page use?

Keep it small and consistent. A common starting set is body, small text, h2, and h1.