Se você já exportou um design do Figma e o espaçamento entre linhas "quebrou" não ficou perfeito como o seu perfeccionismo de pixel perfect queria no navegador, a explicação é pra você acalmar o seu suricato mental que reclama toda vez que isso acontece.

Vamos salvar 5 minutos do seu dia? Ok.

TL;DR

Contexto auto / normal
Figma Métricas intrínsecas da fonte (engine própria)
Navegador Métricas intrínsecas da fonte (engine do browser)
Resultado Pode divergir em 1–3px

Aos designers: defina valores explícitos. Seu dev agradece.

Agora falando mais sério, o problema:

No Figma, o campo de Line Height vem com a opção Auto selecionada por padrão. Parece inofensivo, até gentil! Mas esse "Auto" não é igual ao normal do CSS. Daí quando você é chato, aqueles pixels incomodam bastante.

O Auto do Figma usa as métricas verticais intrínsecas da fonte (hhea/OS/2 no .ttf/.otf), definidas pelo designer tipográfico. Cada fonte tem um valor diferente: uma pode ter ~1.2× o font-size, outra ~1.4×.

Vamos pegar a fonte Montserrat por exemplo. Com size 16px, o leading dela é 20px. Aliás, leading é o termo correto para essa parte técnica da tipografia.

No navegador, o line-height: normal (que é o default) também usa métricas da fonte, mas cada engine de texto resolve de forma ligeiramente diferente. Resultado: o que você vê no Figma não é pixel-perfect no Chrome, Firefox ou Safari. E se você, como eu, tem o hábito de usar um reset para line-height: 1, também vai quebrar.

Tá, mas e aí, como descobrir o leading real no Figma

O Figma não exibe o valor numérico do Auto. Mas dá pra puxar de um jeito muito simples que me fez sentir besta de tão óbvio:

  1. Crie um texto de uma linha só na fonte e tamanho desejado.
  2. Deixe o Line Height em Auto.
  3. Olhe a altura da camada de texto no painel de propriedades — esse é o leading em px. O height. Simples assim.

Na prática

O projeto com consistência entre design e código:

  • Defina um line-height fixo (em px ou em unidade relativa) no Figma. Ex.: 1.5 ou 24px pra fonte de 16px.
  • Evite depender do Auto se o dev vai reproduzir o layout manualmente... Ou se a sua IA não é treinada para pensar no leading.

Espero ter resolvido uma coceira de perfeccionismo por aí.