Figma Line Height for Accessibility — Design Values That Pass WCAG

Figma is where accessible design either starts or fails. Designers often set type with "Auto" line-height, trusting Figma to pick a sensible value. Figma's Auto typically resolves to 1.2x-1.3x — which fails WCAG 1.4.12's 1.5x minimum. The fix is explicit line-height values in your text styles. Here is the calculator, the Figma controls, and how to hand specs to developers without ambiguity.

Why Figma's Auto line-height fails accessibility

Figma's "Auto" line-height reads the font's built-in metrics. Most fonts default to 1.1-1.3x line-height. That falls below the WCAG 1.4.12 1.5x minimum.

Design files using Auto look fine in Figma but fail accessibility audits when implemented as CSS. Developers often copy the Auto spacing into CSS, and the final site fails WCAG because the designer never set an explicit value.

Figma's line-height units and what they mean

Figma unit	Example	Equivalent CSS
Percentage	150%	line-height: 1.5
Pixel	24	line-height: 24px
Auto	(no value)	line-height: normal — variable

Use percentage in Figma for consistency with the CSS unitless approach. 150% in Figma = line-height: 1.5 in CSS (the recommended web value).

Line-height calculator for Figma text styles

Font size	Minimum line-height (px)	Minimum percentage
12px caption	18	150%
14px small body	21	150%
16px body	24	150%
18px body	27	150%
24px heading 3	36	150%
32px heading 2	48	150%
48px heading 1	72	150%

The ratio is constant (1.5x) — only the pixel value changes with font size.

Sell Custom Apparel — We Handle Printing & Free Shipping

Setting accessible line-height in Figma

1. Open Figma. Select a text layer.
2. Open the Text properties panel (right side).
3. Find line-height (the icon with horizontal bars). Click to expand.
4. Change unit to %. Enter 150.
5. Click the style menu (⎌ icon next to text). Click Create style to save.
6. Name the style: "Body / Regular / 16 / Line 150".

Apply this style across body text in your design. Repeat for headings, captions, and any other text role.

Handing off to developers with zero ambiguity

Figma Dev Mode exports your text styles as CSS automatically:

/* Figma dev mode output for 16px body at 150% */
font-family: Inter, sans-serif;
font-size: 16px;
line-height: 24px; /* or 1.5 if unitless preferred */
font-weight: 400;

Developers should use the unitless (1.5) version for inheritance reasons. If the Dev Mode export gives pixel values, mention the preference in the handoff notes.

Also export letter-spacing if you set it — Figma uses pixels by default, but for web CSS, convert to em: 16px * 0.12 = 1.92px letter-spacing = 0.12em CSS.

Auditing an existing Figma file for line-height issues

Use Figma's Text styles panel (right sidebar > Styles). Click each text style. If line-height shows "Auto" or a value below 150%, update it.

Plugins like Figma's built-in Contrast and Stark help with color accessibility but do not flag line-height issues. For that, manual review of text styles is still required.

After updating, re-apply styles to all instances — Figma does this automatically when you edit a style.

Frequently Asked Questions

Does Figma have an accessibility plugin for text spacing?

Stark and A11y are popular accessibility plugins but focus on color contrast. Text spacing audit requires manual review of text styles. No plugin currently flags line-height below 1.5x.

What is the difference between Figma's percentage and pixel line-height?

Visually identical when calculated — 150% of 16px = 24px. Functionally, percentage scales with font size automatically if you change the font size. Pixel is fixed.

Should I use Figma's default Inter font for accessibility?

Inter is a good choice — clean, readable, with excellent character spacing. Pair with 1.5x line-height and proper font sizes and Inter works well for WCAG compliance.

Does letter-spacing in Figma export correctly to CSS?

Yes, but in pixel units. Developers should convert to em for CSS: divide the Figma pixel value by the font size. 1.92px on 16px font = 0.12em in CSS.