Typography Variables

Typography System

Define font, size, weight, and line-height variables for a consistent type scale.

Example

:root {
  --font-sans: "Inter", system-ui, sans-serif;
  --text-sm: 0.875rem; --text-base: 1rem; --text-xl: 1.25rem;
  --leading: 1.6;
}
body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading); }

CSS

Full Editor

Pro Tip

A typography variable system ensures every text element uses consistent scales.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned