CSS Text and Typography Styling Guide

Introduction to CSS Text & Content

Theory: Typography controls readability through font choice, size, spacing, and hierarchy. Good text styling improves scanning and user comfort.

What You'll Learn:

This page teaches practical CSS techniques for text styling, typography, spacing, alignment, truncation, and readable content layouts.

Good typography improves usability. With CSS you can control font families, sizes, line-height, spacing, and contrast so content remains readable on all devices.

Typography

Pick readable fonts, proper size scale, and balanced line-height.

Spacing

Use spacing values to improve visual rhythm and scanning.

Readability

Ensure alignment, contrast, and line length are comfortable.

Typography Basics in CSS

Theory: Typography controls readability through font choice, size, spacing, and hierarchy. Good text styling improves scanning and user comfort.

Typography styling starts with five essentials: font-family, font-size, font-weight, line-height, and color.

Simple Example:

body {
    font-family: "Inter", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1f2937;
}

h1, h2 {
    font-weight: 700;
    color: #0f172a;
}

Sample Output: The example produces a clean, modern UI pattern with responsive behavior and better readability.

Text Formatting Properties

Theory: Typography controls readability through font choice, size, spacing, and hierarchy. Good text styling improves scanning and user comfort.

Property	Purpose	Example
`text-align`	Horizontal text alignment	`text-align: center;`
`text-transform`	Change letter case	`text-transform: uppercase;`
`letter-spacing`	Space between characters	`letter-spacing: 0.04em;`
`word-spacing`	Space between words	`word-spacing: 0.2rem;`
`text-decoration`	Underline/line-through styles	`text-decoration: underline;`
`text-indent`	Indent first line	`text-indent: 1rem;`

Content Readability Techniques

Theory: This topic explains practical CSS concepts used in real interfaces. Understanding the theory helps you choose the right properties and patterns.

Best Practices

Keep paragraph line length around 45 to 75 characters.
Use line-height between 1.4 and 1.8 for body text.
Use adequate contrast between text and background.
Limit center-aligned long paragraphs.
Use semantic headings for better hierarchy.

Readable Article Block:

.article {
    max-width: 68ch;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 1rem;
}

.article h2 {
    margin-bottom: 0.75rem;
}

.article p {
    margin-bottom: 1rem;
}

Sample Output: The example produces a clean, modern UI pattern with responsive behavior and better readability.

Text Overflow and Truncation

Theory: Typography controls readability through font choice, size, spacing, and hierarchy. Good text styling improves scanning and user comfort.

UI cards and lists often need fixed-height text. Use truncation safely to prevent layout breaks.

One-line and Multi-line Truncation:

/* One line */
.title-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Two lines */
.desc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Sample Output: Long text is truncated with ellipsis, keeping cards and rows visually consistent.

CSS Text & Content Best Practices

Theory: Typography controls readability through font choice, size, spacing, and hierarchy. Good text styling improves scanning and user comfort.

Design Consistency

Use a type scale (e.g., 14/16/20/24/32).
Define reusable text utility classes.
Keep heading and paragraph spacing consistent.

Accessibility

Use minimum 4.5:1 contrast for normal text.
Avoid tiny font sizes on mobile.
Preserve readable line-height and spacing.

Pro Tip: Start with readable defaults on body, then style headings and components. This prevents inconsistent text styling across pages.

Extended Tutorial: Typography System

Theory: Professional sites use a type scale (e.g. 1.125 or 1.25 ratio) so headings and body text feel related. Combine with a limited set of font weights.

Start with a base font-size on html or body (often 100% or 16px). Scale headings with rem so user zoom and root font settings are respected.

Example: Simple modular scale

html { font-size: 100%; }

body { font-size: 1rem; line-height: 1.6; }

h1 { font-size: 2.25rem; line-height: 1.2; }
h2 { font-size: 1.75rem; line-height: 1.25; }
h3 { font-size: 1.375rem; line-height: 1.3; }

small, .caption { font-size: 0.875rem; color: #475569; }

Sample output: Heading sizes form a clear hierarchy; captions stay subordinate without shrinking below readable minimum on most devices.

Truncation & multiline clamp

For card titles, use line-clamp (with -webkit-line-clamp where needed) to avoid broken layouts from long strings.

Example

.card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

Sample output: Titles show at most two lines with ellipsis, keeping grids aligned.

Chapter Checklist

Set body line-height between 1.5 and 1.7 for long reading.
Limit line length (~65ch) for article text.
Test bold/italic contrast; avoid ultra-light weights on small text.