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. This guide is part of our CSS guide series.

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 Do CSS Typography and Color Properties Control?

CSS typography properties control the typeface, size, spacing, and wrapping of text. Color properties control text, backgrounds, borders, and other painted details. Choose readable combinations first, then use consistent units and custom properties to keep them manageable.

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?

Beginners can use named CSS colors while learning, then hex, rgb(), or hsl() for precise values. All three support transparency, including eight-digit hex. Pick a consistent format within a project so colors are easier to compare.

Should CSS font sizes use px or rem?

Use rem for most CSS font sizes so they follow the root font size. Leave the root size tied to the browser default if you want to respect a reader’s text-size preference. Pixels remain useful for thin borders, and browser zoom can scale either unit.

When should a CSS value become a custom property?

Create a CSS custom property when a meaningful value repeats or needs to change by theme or component. Shared colors and spacing are useful candidates. Keep a one-off measurement in its declaration when naming it adds no benefit.

Do CSS color and font settings inherit to child elements?

CSS color and most font settings inherit by default. A declaration applied directly to a child takes precedence over an inherited value, regardless of the parent selector’s specificity. Properties such as margin and border do not normally inherit.

What does currentColor do in CSS?

CSS currentColor uses the element’s computed color value. A border, outline, or SVG fill can follow the text color without repeating the value. When used on color itself, currentColor acts like an inherited color.