Typography and Color in CSS

CSS typography and color control how text looks, how readable it feels, and how visual emphasis carries across a page. Color values supply the palette, length units set scale, font properties shape the text, and custom properties keep repeated choices under one name.

Think of these features as a small type and paint kit. You choose a color, measure the text and spacing, select a typeface, then label any value that the rest of the project needs to reuse. Each choice stays small enough to learn on its own.

What CSS Typography and Color Covers

CSS accepts colors as keywords, hexadecimal values, and functions such as rgb() or hsl(). Lengths can be fixed to a CSS pixel or calculated from a font size, containing block, or viewport. Text properties then apply those values to font size, line height, spacing, wrapping, and other details.

Custom properties connect these choices across a project. A declaration such as --color-accent: #2563eb gives a repeated color a clear name, while var(--color-accent) reads that value inside another declaration. Scoped overrides can change the same name for a component or theme.

Syntax at a Glance

:root {
  --color-accent: hsl(217 91% 60%);
  --text-size: 1rem;
}

.notice {
  color: var(--color-accent);
  font: 600 var(--text-size) / 1.5 system-ui, sans-serif;
  text-wrap: pretty;
}

This single rule shows the category's main parts. The custom properties name a color and text size, var() inserts them, the font shorthand sets weight, size, line height, and family, and text-wrap controls soft line wrapping. The child guides separate those choices and explain their trade-offs.

Typography and Color Guides

Guide	What it covers
CSS Colors and Units	Color keywords, hex, modern rgb() and hsl() syntax, plus practical px, rem, em, percentage, and viewport units.
CSS Custom Properties	Reusable values with --name, var(), fallbacks, scoped overrides, and a simple theme switch.
CSS Fonts and Text	Font stacks, size, line height, weight, character spacing, word spacing, and text wrapping.
CSS Shadows	box-shadow, text-shadow, and shape-aware drop-shadow() effects with reusable color syntax.

Follow the guides in the order that matches the work. Colors and units supply the raw values, fonts apply them to text, custom properties organize repeated choices, and shadows reuse color syntax to describe soft edges and depth.

Related CSS Concepts

Typography and color sit inside the cascade, so selector strength and source order can decide which declaration wins. Review CSS specificity when a correct font or color rule appears crossed out in browser tools.

Text also participates directly in every page layout. Width, padding, and display rules determine how much room a line receives before it wraps. The CSS layout guide covers those surrounding boxes, while the CSS selectors guide explains how to target the elements that need a type or color rule.

Frequently Asked Questions

Which CSS color format should a beginner use?

Start with named colors while learning property syntax, then use hex for compact opaque colors or rgb() and hsl() when you need an alpha channel. A project can support every format, but consistent choices make its stylesheet easier to scan.

Should font sizes use px or rem?

Use rem for most font sizes because it follows the root font size and respects a reader's default text-size preference. Pixels still suit thin borders and other small details that do not need to scale with text.

When should a value become a custom property?

Create a custom property when a meaningful value repeats or needs to change by theme or component scope. Naming every one-off measurement adds noise, so begin with shared colors, spacing values, and typography settings.

Do colour and font settings inherit to child elements?

Yes, both inherit by default, so setting them once on a parent covers the text beneath it unless a more specific rule intervenes. Most other properties, such as margin and border, do not inherit.

What does currentColor do?

It resolves to whatever the element's own colour value is, so a border, outline, or SVG fill can track the text colour without repeating the value or introducing a custom property to hold it.

Continue Learning CSS

• Return to the CSS guide for the language overview.
• Start with CSS colors and units to learn the values used throughout this category.
• Continue with CSS fonts and text to apply those values to readable content.
• Use CSS custom properties when the same values need names or theme overrides.