Typography

Typography is where designers feel most at home in CSS. Every property in this lesson maps directly to something in Figma’s Text inspector panel — you already know what each one does conceptually. You are just learning the CSS name for it.

Think of CSS typography properties as your text styles system in code. Instead of clicking through a panel, you write the same decisions as rules that the browser applies consistently across every page.

Font family

font-family: 'Inter', system-ui, sans-serif;

This is the typeface. CSS lets you list multiple fonts separated by commas — a font stack. The browser tries the first font, and if it is not available it falls back to the next, then the next. Always end with a generic family like sans-serif as a last resort.

To use a Google Font, you link it in the <head> of your HTML:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />

Then in CSS: font-family: 'Inter', sans-serif;

Step	rem	Typical use
xs	0.75rem	Labels, captions
sm	0.875rem	Secondary text
base	1rem	Body text
lg	1.25rem	Lead paragraph
xl	1.5rem	Section heading
2xl	2rem	Page heading
3xl	3rem	Display / hero

Font weight

font-weight: 400;

This is the exact same control as the weight dropdown in Figma. Values run from 100 to 900 in steps of 100:

100 — Thin
300 — Light
400 — Regular
500 — Medium
600 — Semibold
700 — Bold
800 — Extrabold
900 — Black

Not every font includes every weight — make sure the weights you reference are actually loaded.

Line height

line-height: 1.5;

This is leading in typographic terms, and it maps to Figma’s Line Height field. Use a unitless number: 1.5 means the line height is 1.5 times the font size. This is preferred over pixel values because it scales with the font size automatically.

Body text: 1.5–1.6 — relaxed and readable
Headings: 1.1–1.2 — tight and impactful
Single-line UI labels: 1 — exact fit

Letter spacing

letter-spacing: 0.05em;

Figma calls this Tracking. Positive values spread letters apart; negative values tighten them. Using em units means the spacing scales proportionally with the font size. A small positive value (0.05em–0.1em) works well for uppercase labels. Lowercase body text usually benefits from 0 or slightly negative values.

Text alignment

text-align: left;

Same as the alignment buttons in Figma’s text panel. Values: left, center, right, justify. Use justify with care — it can create uneven gaps in short line lengths.

Text transform and color

text-transform: uppercase;
color: #111827;

text-transform is useful for labels and buttons — uppercase or capitalize without changing the underlying content. color sets the text color and accepts hex, rgb(), hsl(), or named values.

Putting it all together — a type scale in code

Just like you define text styles in Figma and apply them consistently, in CSS you set rules for each level of your hierarchy and use them throughout the page. The LivePreview below shows a small article layout. Edit the CSS to explore how changing font-size, font-weight, and line-height transforms the feel of the type.

<article class="prose">
  <p class="label">Design System</p>
  <h1 class="display">Type is the voice of design</h1>
  <p class="lead">Good typography is invisible — it lets the reader focus entirely on the message, not the mechanics.</p>
  <p class="body">Every typeface has a personality. Choosing the right font family is like casting the right actor for a role. But the family is only the beginning — size, weight, line height, and spacing together determine whether text feels calm or urgent, friendly or authoritative.</p>
</article>