Blog Post

Why Your CSS Never Matches the Figma File

You copied the CSS values exactly. The font-weight, the padding, the hex color. And it still looks wrong. This article covers six root causes: font rendering differences between Figma and browsers, sub-pixel rounding, color space mismatches, nested border-radius math, line-height model differences, and auto layout vs flexbox translation.

Font Rendering: Figma Skia vs Browser Engines

Figma renders text with Skia. Browsers use OS-level engines — Core Text on macOS, DirectWrite on Windows. Same font file, same weight, different rendering. Anti-aliasing, hinting, and -webkit-font-smoothing all contribute to visible differences that persist even when CSS values match the spec exactly.

Sub-Pixel Rounding

Figma allows fractional values like 343.5px or border-width: 0.5px. Browsers round these to device pixels. A 0.5px border becomes 1px. A width of 343.5px rounds to 343px or 344px depending on the engine and context.

Color Space: sRGB vs Display P3

The same hex code renders differently on wide-gamut displays. Figma works in sRGB, but modern displays use Display P3. The CSS color() function and color-gamut media query help bridge the gap.

Nested Border-Radius

Figma smooth corners use a squircle curve, not a CSS arc. And inner border-radius should equal outer radius minus padding — a formula most developers get wrong, creating visible rendering differences.

Line-Height Differences

Figma defines line-height in pixels with a bounding-box model. CSS uses unitless ratios and the half-leading model, distributing extra space above and below the text differently.

Auto Layout vs Flexbox

Figma auto layout maps to CSS flexbox, but the translation is not 1:1. Space-between behavior, hug-contents sizing, and gap calculation all have subtle differences that cause layout drift.