Previous: CSS Structure Next: CSS Links & Media

CSS Text & Content

Typography, spacing, alignment, and readable content layouts with practical CSS patterns.

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.

Text Content MCQ Test

Practice text content concepts with 15 interview-style multiple choice questions.

Score: 0/15

Text Content Interview Questions

Prepare for text content interviews by focusing on structure, practical usage, and maintainable styling patterns.

Basic Interview Q&A

  1. What is Text Content in CSS?Text Content focuses on structured, readable styling patterns that scale in real projects.
  2. Why is structure important?Good structure reduces bugs, improves collaboration, and makes updates easier.
  3. How do selectors affect structure?Selector strategy controls reusability and override complexity.
  4. What is maintainable CSS?Maintainable CSS is modular, readable, and easy to extend without regressions.
  5. When should you split files?Split when features/components grow, so each file has a clear responsibility.
  6. How does naming improve clarity?Consistent naming makes components predictable and easier to debug.
  7. What is cascade awareness?Understanding cascade helps you avoid accidental overrides and style leaks.
  8. Why avoid over-specific selectors?Over-specific selectors are hard to override and increase maintenance cost.
  9. How do utility classes help?Utilities provide quick, reusable single-purpose styles.
  10. What is a good interview answer style?Give a clear definition first, then one practical implementation example.

Advanced Interview Q&A

  1. How do cascade layers improve architecture?@layer defines priority explicitly, reducing conflicts across modules.
  2. How do container queries help component design?They make components responsive to their parent size, not only viewport size.
  3. What causes specificity debt?Chained selectors and frequent overrides create brittle style systems.
  4. How do you optimize CSS delivery?Minify, remove unused styles, and inline critical CSS where useful.
  5. How do design tokens scale teams?Tokens enforce consistency and simplify theme updates across products.
  6. When is utility-first strategy appropriate?It works well when rapid UI composition and consistency are priorities.
  7. How do you benchmark CSS performance?Audit render cost, style recalculations, and layout shifts with DevTools.
  8. How do you refactor legacy CSS safely?Refactor in slices, add visual regression checks, and remove dead rules gradually.
  9. What are paint-friendly transitions?Prefer transform/opacity over layout-triggering properties for smooth animation.
  10. How do you maintain accessibility while styling?Preserve focus visibility, contrast, semantic intent, and non-color indicators.

Related Learning Links

Interview tip: explain concepts with one real codebase example for stronger answers.
Previous: CSS Structure Next: CSS Links & Media