Learn how Figma text styles work — creating a type scale in Figma, applying styles to components, reading typography specifications from Dev Mode, and mapping every text style to a CSS custom property with perfect fidelity.
Typography in Figma is governed by text styles — named presets that bundle font-family, size, weight, line-height, and letter-spacing into a single reusable definition. A text style called 'Heading/H1' might specify Inter 800 48px/52px -0.02em. When that style is applied to a text layer, its properties appear in the Inspect panel both as the style name and as individual property values.
For developers, text styles are the design system's type scale. The style names map directly to CSS custom property names. Understanding how Figma reports typography values — and the conversions needed before using them in CSS — is essential for zero-drift typography implementation.
Text styles live in the Styles panel (accessible from the Resources icon in the toolbar, or by clicking the four-grid icon in the Design panel). They are organized in a hierarchy that mirrors the type scale structure.
Typical text style organization:
1Display
2 Display/2XL Inter 800 72px
3 Display/XL Inter 800 56px
4Heading
5 Heading/H1 Inter 800 48px
6 Heading/H2 Inter 700 36px
7 Heading/H3 Inter 700 28px
8 Heading/H4 Inter 600 22px
9 Heading/H5 Inter 600 18px
10 Heading/H6 Inter 600 16px
11Body
12 Body/LG Inter 400 18px
13 Body/MD Inter 400 16px
14 Body/SM Inter 400 14px
15Label
16 Label/LG Inter 600 14px
17 Label/MD Inter 600 12px
18 Label/SM Inter 700 11px uppercase
19Code
20 Code/MD Fira Code 400 14pxTo view a style's full spec:
Figma reports text style properties as:
Three conversions are required when translating Figma text specs to CSS:
Divide by 16 (base font size)
Divide by font-size
Figma uses percentage of font-size; CSS em is also relative to font-size
Complete type scale CSS from Figma text styles:
1:root {
2 /* Figma text styles → CSS custom properties */
3 /* Display/2XL: Inter 800, 72px, line-height 76px, letter-spacing -2.5% */
4 --text-display-2xl-size: 4.5rem; /* 72px */
5 --text-display-2xl-lh: 1.055; /* 76/72 */
6 --text-display-2xl-ls: -0.025em; /* -2.5% */
7 --text-display-2xl-weight: 800;
8
9 /* Heading/H1: Inter 800, 48px, line-height 52px, letter-spacing -2% */
10 --text-h1-size: 3rem; /* 48px */
11 --text-h1-lh: 1.083; /* 52/48 */
12 --text-h1-ls: -0.02em; /* -2% */
13 --text-h1-weight: 800;
14
15 /* Heading/H2: Inter 700, 36px, line-height 40px, letter-spacing -1.5% */
16 --text-h2-size: 2.25rem; /* 36px */
17 --text-h2-lh: 1.111; /* 40/36 */
18 --text-h2-ls: -0.015em;
19 --text-h2-weight: 700;
20
21 /* Heading/H3: Inter 700, 28px, line-height 34px, letter-spacing -1% */
22 --text-h3-size: 1.75rem;
23 --text-h3-lh: 1.214; /* 34/28 */
24 --text-h3-ls: -0.01em;
25 --text-h3-weight: 700;
26
27 /* Body/MD: Inter 400, 16px, line-height 26px, letter-spacing 0% */
28 --text-body-md-size: 1rem;
29 --text-body-md-lh: 1.625; /* 26/16 */
30 --text-body-md-ls: 0;
31 --text-body-md-weight: 400;
32
33 /* Body/SM: Inter 400, 14px, line-height 22px, letter-spacing 0% */
34 --text-body-sm-size: 0.875rem;
35 --text-body-sm-lh: 1.571; /* 22/14 */
36 --text-body-sm-ls: 0;
37 --text-body-sm-weight: 400;
38
39 /* Label/MD: Inter 600, 12px, line-height 16px, uppercase, letter-spacing 8% */
40 --text-label-md-size: 0.75rem;
41 --text-label-md-lh: 1.333; /* 16/12 */
42 --text-label-md-ls: 0.08em; /* 8% — expanded for uppercase */
43 --text-label-md-weight: 700;
44 --text-label-md-transform: uppercase;
45}
46
47/* Applied to HTML elements */
48h1 {
49 font-size: var(--text-h1-size);
50 line-height: var(--text-h1-lh);
51 letter-spacing: var(--text-h1-ls);
52 font-weight: var(--text-h1-weight);
53}A utility class system for typography allows any element to adopt any text style without being constrained by the semantic heading elements. This is essential in UI components where a card title is semantically an h3 but visually should use the h5 style (because it appears in a compact card context).
1/* Typography utility classes — map 1:1 to Figma text styles */
2.text-display-2xl {
3 font-size: var(--text-display-2xl-size);
4 line-height: var(--text-display-2xl-lh);
5 letter-spacing: var(--text-display-2xl-ls);
6 font-weight: var(--text-display-2xl-weight);
7}
8.text-h1 {
9 font-size: var(--text-h1-size);
10 line-height: var(--text-h1-lh);
11 letter-spacing: var(--text-h1-ls);
12 font-weight: var(--text-h1-weight);
13}
14.text-h2 {
15 font-size: var(--text-h2-size);
16 line-height: var(--text-h2-lh);
17 letter-spacing: var(--text-h2-ls);
18 font-weight: var(--text-h2-weight);
19}
20.text-h3 {
21 font-size: var(--text-h3-size);
22 line-height: var(--text-h3-lh);
23 letter-spacing: var(--text-h3-ls);
24 font-weight: var(--text-h3-weight);
25}
26.text-body-md {
27 font-size: var(--text-body-md-size);
28 line-height: var(--text-body-md-lh);
29 letter-spacing: var(--text-body-md-ls);
30 font-weight: var(--text-body-md-weight);
31}
32.text-body-sm {
33 font-size: var(--text-body-sm-size);
34 line-height: var(--text-body-sm-lh);
35 letter-spacing: var(--text-body-sm-ls);
36 font-weight: var(--text-body-sm-weight);
37}
38.text-label-md {
39 font-size: var(--text-label-md-size);
40 line-height: var(--text-label-md-lh);
41 letter-spacing: var(--text-label-md-ls);
42 font-weight: var(--text-label-md-weight);
43 text-transform: var(--text-label-md-transform);
44}
45
46/* Usage: semantic h3 with visual h5 style */
47/* <h3 class="text-h5">Card Title</h3> */
48/* Semantic level for screen readers, visual level for design */In Figma Dev Mode, a text layer shows both the text style name and the individual property values. If any property has been overridden (a designer changed the size or weight locally without updating the style), the override appears highlighted or detached from the style.
How to detect text style overrides:
Common intentional overrides (expected in a design file):
Unintentional overrides (potential implementation confusion):
CSS for text color overrides (the most common intentional override):
1/* Base text style: no color defined (will inherit from parent) */
2.text-h2 {
3 font-size: var(--text-h2-size);
4 line-height: var(--text-h2-lh);
5 letter-spacing: var(--text-h2-ls);
6 font-weight: var(--text-h2-weight);
7 /* No color: inherits from parent, overridden per context */
8}
9
10/* Context-specific color overrides */
11.hero .text-h2 { color: white; } /* white on dark hero background */
12.section .text-h2 { color: var(--color-text-primary); } /* standard text */
13.card .text-h2 { color: var(--color-text-primary); }
14
15/* Or use color utility classes */
16.text-primary { color: var(--color-text-primary); }
17.text-secondary { color: var(--color-text-secondary); }
18.text-muted { color: var(--color-text-muted); }
19.text-brand { color: var(--color-action-primary); }
20.text-white { color: white; }An article page implementing all text styles from a Figma style library — exact conversions of each style's font-size, line-height, letter-spacing, and weight properties.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Typography from Figma Text Styles</title>
6 <link rel="preconnect" href="https://fonts.googleapis.com">
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
8 <style>
9 :root {
10 --font-text: 'Inter', system-ui, sans-serif;
11 /* Type scale — converted from Figma text styles */
12 /* Display/XL: 56px, lh 60px, ls -2.5% */
13 --text-display-xl-size: 3.5rem; --text-display-xl-lh: 1.071;
14 --text-display-xl-ls: -0.025em; --text-display-xl-weight: 800;
15 /* Heading/H1: 40px, lh 44px, ls -2% */
16 --text-h1-size: 2.5rem; --text-h1-lh: 1.1;
17 --text-h1-ls: -0.02em; --text-h1-weight: 800;
18 /* Heading/H2: 32px, lh 36px, ls -1.5% */
19 --text-h2-size: 2rem; --text-h2-lh: 1.125;
20 --text-h2-ls: -0.015em; --text-h2-weight: 700;
21 /* Heading/H3: 24px, lh 30px, ls -1% */
22 --text-h3-size: 1.5rem; --text-h3-lh: 1.25;
23 --text-h3-ls: -0.01em; --text-h3-weight: 700;
24 /* Body/LG: 18px, lh 28px, ls 0 */
25 --text-body-lg-size: 1.125rem; --text-body-lg-lh: 1.556;
26 --text-body-lg-ls: 0; --text-body-lg-weight: 400;
27 /* Body/MD: 16px, lh 26px, ls 0 */
28 --text-body-md-size: 1rem; --text-body-md-lh: 1.625;
29 --text-body-md-ls: 0; --text-body-md-weight: 400;
30 /* Label/SM: 11px, lh 16px, ls 8%, uppercase */
31 --text-label-sm-size: 0.6875rem; --text-label-sm-lh: 1.454;
32 --text-label-sm-ls: 0.08em; --text-label-sm-weight: 700;
33 --text-label-sm-transform: uppercase;
34 }
35 /* Typography utility classes */
36 .text-display-xl { font-size: clamp(var(--text-h1-size), 5vw, var(--text-display-xl-size));
37 line-height: var(--text-display-xl-lh); letter-spacing: var(--text-display-xl-ls);
38 font-weight: var(--text-display-xl-weight); }
39 .text-h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-lh);
40 letter-spacing: var(--text-h1-ls); font-weight: var(--text-h1-weight); }
41 .text-h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-lh);
42 letter-spacing: var(--text-h2-ls); font-weight: var(--text-h2-weight); }
43 .text-h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-lh);
44 letter-spacing: var(--text-h3-ls); font-weight: var(--text-h3-weight); }
45 .text-body-lg { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-lh);
46 letter-spacing: var(--text-body-lg-ls); font-weight: var(--text-body-lg-weight); }
47 .text-body-md { font-size: var(--text-body-md-size); line-height: var(--text-body-md-lh);
48 font-weight: var(--text-body-md-weight); }
49 .text-label-sm { font-size: var(--text-label-sm-size); line-height: var(--text-label-sm-lh);
50 letter-spacing: var(--text-label-sm-ls); font-weight: var(--text-label-sm-weight);
51 text-transform: var(--text-label-sm-transform); }
52 /* Color utilities */
53 .text-primary { color: #0f172a; }
54 .text-secondary { color: #334155; }
55 .text-muted { color: #64748b; }
56 .text-brand { color: #2563eb; }
57 *, *::before, *::after { box-sizing: border-box; }
58 body { margin: 0; font-family: var(--font-text); background: white;
59 color: #334155; -webkit-font-smoothing: antialiased; }
60 .article { max-width: 680px; margin: 0 auto; padding: 3rem 1.5rem; }
61 .article > * + * { margin-top: 1.5rem; }
62 .article > * + h2 { margin-top: 3rem; }
63 .article > * + h3 { margin-top: 2.25rem; }
64 p { margin: 0; max-width: 68ch; }
65 </style>
66</head>
67<body>
68 <article class="article">
69 <!-- Label/SM text style: 11px 700 uppercase 8% tracking -->
70 <span class="text-label-sm text-brand">Typography</span>
71 <!-- Heading/H1: 40px 800 -2% ls 1.1 lh -->
72 <h1 class="text-h1 text-primary" style="margin:0.5rem 0 0;">Building Typography Systems That Scale</h1>
73 <!-- Body/LG: 18px 400 1.556 lh -->
74 <p class="text-body-lg text-secondary">A systematic approach to typography using Figma text styles and CSS custom properties eliminates the guesswork and creates interfaces that feel professionally designed at every viewport.</p>
75 <!-- Heading/H2: 32px 700 -->
76 <h2 class="text-h2 text-primary">The Text Style to CSS Pipeline</h2>
77 <!-- Body/MD: 16px 400 1.625 lh -->
78 <p class="text-body-md">Every text style in Figma translates to a set of three CSS properties: font-size (in rem), line-height (unitless ratio), and letter-spacing (in em). The conversion is mechanical — divide px size by 16 for rem, divide line-height by font-size for the ratio, and divide letter-spacing percentage by 100 for the em value.</p>
79 <!-- Heading/H3: 24px 700 -->
80 <h3 class="text-h3 text-primary">Why Unitless Line-Height?</h3>
81 <p class="text-body-md">Unitless line-height (1.5 instead of 24px) scales with font-size automatically. If a child element has a different font-size, its line-height adapts proportionally. A pixel line-height on a parent would be inherited as-is by the child, creating collapsed text at small sizes.</p>
82 </article>
83</body>
84</html>Every text utility class (.text-h1, .text-h2, .text-body-md, .text-label-sm) maps directly to a named text style in the Figma file. The class name mirrors the style name exactly (Figma 'Heading/H1' → CSS .text-h1). Pixel values from Figma are converted: 40px → 2.5rem, line-height 44px on 40px text → 44/40 = 1.1, letter-spacing -2% → -0.02em. The text-label-sm class includes text-transform: uppercase — Figma reports this in the text decoration section. Color is not included in the utility class itself (text styles in Figma typically don't include color — it's overridden per context) and is applied via separate color utility classes.
The next lesson covers Figma Color Styles and the design token workflow — building a complete color system in Figma that exports directly to CSS custom properties.
Your progress is saved in this browser, on this device only.