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:
- Crie um texto de uma linha só na fonte e tamanho desejado.
- Deixe o Line Height em Auto.
- 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-heightfixo (em px ou em unidade relativa) no Figma. Ex.:1.5ou24pxpra fonte de16px. - 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í.
Top comments (5)
Desculpa? Hahahahahhahaahaha
Eu descobri isso por causa do teu último design, mas agora não sofro mais! Vida longa aos suricatos dos pixel perfect KKKK
acho que o sistema operacional também muda o resultado
Eu acho que não, mas eu vou pesquisar pq fiquei com muita pulga agora k'
vou aguardar a resposta correta KKKKKKKKKKKKKKKKKKKKK