Texto de Teste em Português: Por Que o Lorem Latino Engana o Seu Layout

O layout foi aprovado. O botão "Get started" cabia com folga, o título do card ocupava duas linhas bonitas, a tabela fechava certinho no celular. Aí entrou o conteúdo em português, e:

• "Get started" virou "Começar agora" e o botão ficou apertado;
• o título do card virou três linhas e empurrou o resto;
• a coluna "Preço" virou "Valor do investimento" e a tabela vazou.

Nada disso é bug de CSS. É o texto de teste que não representava o texto real. O Gerador de Lorem Ipsum do Obtani tem variante em português exatamente por isso.

O problema em números

Duas diferenças, e as duas empurram na mesma direção.

Palavra mais longa. O latim do lorem ipsum tem muitas palavras curtas — sit, ut, et, ea, in. O português corrente trabalha com palavras de três a cinco sílabas com frequência bem maior: velocidade, possibilidade, acompanhamento, desenvolvimento. Em média, a diferença por palavra parece pequena; multiplicada pelo número de palavras de um parágrafo, ela vira linhas inteiras.

Acentos e cedilha. Em português, acentos aparecem constantemente: ã, õ, ç, á, é, í, ó, ú, â, ê, ô, à. Eles ocupam espaço vertical acima da altura-x da fonte, e é aí que aparece o segundo problema.

Onde isso quebra na prática

Botões e chamadas. É o caso mais frequente. Rótulos em inglês são curtos por natureza; em português, quase sempre crescem. "Save" vira "Salvar" (ok), mas "Learn more" vira "Saiba mais" e "Get started for free" vira "Comece agora gratuitamente". Um botão dimensionado pelo texto em inglês estoura.

Títulos de card em grade. Uma grade de três colunas com títulos de duas linhas fica elegante. Se um dos títulos vira três linhas, ou os cards ficam de alturas diferentes, ou você descobre que faltou alinhar a base. O lorem latino raramente produz esse título mais longo; o conteúdo real produz na primeira semana.

Altura de linha apertada. line-height: 1 parece limpo em mockup sem acento. Com texto português, o til do "ã" e o acento do "É" maiúsculo encostam na linha de cima ou são cortados pelo overflow: hidden. Quem testou só com lorem latino nunca viu o problema.

Truncamento com reticências. text-overflow: ellipsis corta em um ponto que depende do comprimento das palavras. Com palavras curtas, o corte cai no meio de uma palavra e fica aceitável. Com palavras longas, é comum o corte acontecer logo depois da primeira palavra, deixando "Desenvolvimento…" no lugar de uma frase inteira.

Tabelas no celular. Cabeçalho de coluna em português é quase sempre mais longo. "Date" vira "Data" (ok), mas "Amount" vira "Valor total" e "Status" vira "Situação". Três colunas que cabiam em 375 px deixam de caber.

Hifenização. Navegadores não hifenizam por padrão. Uma palavra como "responsabilidade" dentro de uma coluna estreita não quebra e força a rolagem horizontal — o defeito que mais irrita no celular. Ele só aparece se o texto de teste tiver palavras longas.

Como testar direito

1. Use texto na língua do produto. Parece óbvio e quase ninguém faz. Se o produto é em português, o texto de exemplo tem que ser em português.

2. Teste os dois extremos. Gere uma versão curta e uma longa de cada campo. O layout precisa aguentar o card com título de duas palavras (sem ficar vazio) e o de doze (sem quebrar).

3. Teste o campo no limite. Para título de página, meta description, nome de produto e qualquer campo com máximo definido, gere exatamente o número de caracteres do limite. É na borda que o problema aparece.

4. Inclua a palavra longa de propósito. Coloque um "responsabilidade" ou um "desenvolvimento" em algum lugar estreito e veja o que acontece. Se vazar, você precisa de overflow-wrap: break-word — que vale a pena deixar como padrão em texto de usuário.

5. Olhe no celular de verdade, com acento. Muitos problemas de altura de linha só aparecem em tela pequena, onde o texto quebra em mais linhas e o acento encosta na linha de cima.

O caso das interfaces traduzidas

Quem trabalha com produto internacional conhece o problema por outro nome: text expansion. Quando uma interface escrita em inglês é traduzida, o texto costuma crescer — e o crescimento é maior justamente nos rótulos curtos, que são os que menos espaço têm.

A lógica é simples. Rótulo de botão em inglês tende a ser uma palavra só, muitas vezes um verbo curto e de origem germânica: Save, Send, Next, Done, Back. Em português, o equivalente natural costuma ser mais longo ou virar duas palavras: Salvar, Enviar, Próximo, Concluído, Voltar. Em rótulos de duas ou três palavras a diferença se acumula.

É por isso que equipes que trabalham com vários idiomas adotam duas práticas que valem mesmo para quem só publica em português:

Nunca dimensionar por largura fixa. Botões, chips e badges devem crescer com o conteúdo, usando padding horizontal e permitindo que o contêiner se ajuste. Largura fixa é convite para texto cortado.

Revisar os pontos de quebra com o texto mais longo. Escolha o rótulo mais comprido de cada grupo e verifique o layout com ele, não com o mais curto. Se o menu aguenta "Documentos e Empresas", aguenta "Blog".

E há um detalhe que pega quem desenha em ferramenta de design: as fontes do mockup e as do site precisam ser as mesmas, inclusive nos pesos. Uma fonte substituída por fallback no navegador muda a métrica de largura e desloca todas as quebras — o layout que cabia no Figma passa a não caber no Chrome.

Um checklist de CSS que evita metade dos problemas

• overflow-wrap: break-word em qualquer bloco que receba texto de usuário.
• line-height de pelo menos 1,4 em texto corrido — o acento precisa de espaço.
• Botões dimensionados por padding, não por largura fixa.
• Grades com align-items: stretch para os cards acompanharem o mais alto.
• Tabelas dentro de um contêiner com rolagem própria no celular.
• min-width: 0 em itens de flex que contenham texto truncável, senão o truncamento não funciona.

Se você quer entender de onde veio o lorem ipsum e por que ele existe, vale a leitura de o que é lorem ipsum e de onde ele veio.

Teste com texto que se comporta como português: Gerador de Lorem Ipsum.

Este artigo tem fins educacionais. O comportamento exato de quebra de linha, truncamento e hifenização varia conforme o navegador, a fonte escolhida e as propriedades CSS aplicadas — teste no ambiente real do seu projeto.