Lorem ipsum e texto de preenchimento
O texto de preenchimento ocupa um layout antes de as palavras reais existirem. Bem usado, permite avaliar um design sem se distrair com o conteúdo; usado sem cuidado, esconde problemas que só o texto real revela ou acaba em uma página publicada. Este guia trata dos dois lados.
De onde vem o lorem ipsum
O conhecido “Lorem ipsum dolor sit amet…” é um trecho embaralhado de De finibus bonorum et malorum (“Sobre os limites do bem e do mal”), escrito por Cícero em 45 a.C. Palavras foram cortadas e alteradas: “lorem” é o final de “dolorem”, partido entre duas linhas no trecho original. O resultado parece latim, mas não se lê como latim.
Gráficos usam esse tipo de preenchimento há muito tempo. Ele se popularizou nos anos 1960 com as folhas de transferência Letraset, e nos anos 1980 programas de editoração eletrônica como o Aldus PageMaker já o traziam. Nos anos 1990, o latinista Richard McClintock rastreou o texto até Cícero. Como a fonte tem mais de dois mil anos, o texto pode ser usado livremente.
Por que designers usam texto de preenchimento
Texto legível chama atenção: numa revisão, as pessoas começam a comentar a redação em vez do layout. O lorem ipsum tem uma mistura natural de palavras curtas e longas e nenhum significado, então o olho vê linhas, parágrafos e mancha gráfica em vez de frases. Isso o torna útil para:
- as primeiras decisões de layout e tipografia: largura de coluna, entrelinha, tamanho de fonte;
- modelos e componentes que depois vão receber conteúdo de muitos autores;
- testar como uma página se comporta com um texto muito curto e outro muito longo no mesmo espaço.
Quando o texto de preenchimento engana
O lorem ipsum tem o mesmo tamanho onde quer que você o cole, e o conteúdo real não. Surpresas comuns:
- Títulos e botões escritos depois ficam mais longos ou mais curtos que o preenchimento e quebram o layout. Teste com o texto realista mais curto e o mais longo, não com um médio.
- Nomes, endereços e preços têm formas próprias: um sobrenome composto, uma rua com 30 caracteres, um preço com símbolo de moeda e separadores de milhar.
- Traduções costumam ser mais longas que o inglês, e rótulos curtos podem dobrar de tamanho. Palavras compostas do alemão não quebram no fim da linha se não forem hifenizadas.
- A estrutura real traz listas, links, citações e subtítulos que um bloco de lorem ipsum nunca mostra.
Em testes de usabilidade, use texto realista. Os participantes não conseguem julgar se uma página faz sentido, nem encontrar informação nela, quando a informação é preenchimento em latim.
Texto de preenchimento em outros idiomas
Um layout que funciona com letras latinas pode falhar com outras escritas. Chinês e japonês são escritos sem espaços entre as palavras, então as linhas quebram entre quase quaisquer dois caracteres, com regras que impedem certos sinais de pontuação de iniciar uma linha. O coreano põe espaços entre unidades de palavra, mas tem muito mais formas de sílaba por linha. Cada uma precisa de fontes que contenham seus caracteres; se a fonte escolhida não os tiver, o navegador a substitui por outra com larguras e alturas de linha diferentes.
Por isso o gerador da LeedyBox também produz texto de preenchimento em coreano, japonês e chinês. Em um site multilíngue, teste cada layout com texto na escrita de destino, não com lorem ipsum.
Preenchimentos melhores para cada tarefa
| Tarefa | Escolha melhor que o lorem ipsum |
|---|---|
| Cartões de produto, tabelas, painéis | Dados de exemplo realistas: nomes, datas, preços e IDs com tamanhos reais |
| Formulários e mensagens de erro | Os rótulos e mensagens reais, incluindo o erro mais longo |
| Páginas de destino e artigos | Um rascunho do texto real, mesmo que tosco |
| Layouts multilíngues | Texto de exemplo em cada idioma de destino, ou um rascunho traduzido |
| Corpo de texto em um modelo | Aqui o lorem ipsum funciona bem |
Bibliotecas de dados de teste como o Faker geram nomes, endereços e datas verossímeis em muitos idiomas para protótipos e testes automatizados.
Antes de publicar
Texto de preenchimento esquecido numa página publicada parece descuido e não oferece nada a leitores nem a buscadores. Antes do lançamento:
- procure no código e no sistema de gestão de conteúdo por “lorem”, “ipsum” e outras marcas que sua equipe usa, como “TODO” ou “TBD”;
- verifique os lugares que ninguém lê numa revisão: títulos de página, meta descrições, textos alternativos de imagens, mensagens de estado vazio e modelos de e-mail;
- ouça a página uma vez com um leitor de tela; preenchimento e rótulos ausentes são muito mais fáceis de notar ouvindo.
Perguntas frequentes
Posso usar lorem ipsum em trabalhos comerciais?
Sim. Ele se baseia em um texto escrito há mais de dois mil anos, que está em domínio público, então não é preciso permissão.
Texto de preenchimento prejudica o ranqueamento nos buscadores?
Só se for publicado. Uma página que ainda tem preenchimento não oferece conteúdo útil, então mantenha os rascunhos sem publicar ou bloqueados para indexação até o texto real estar no lugar.
O lorem ipsum é a mesma coisa que o placeholder de um campo de formulário?
Não. A dica em cinza-claro dentro de um campo vazio, definida com o atributo HTML placeholder, é um exemplo curto para o usuário. Ela some quando a pessoa digita, então não deve substituir um rótulo visível.
Quanto texto de preenchimento devo usar?
Tanto quanto o conteúdo real terá, e mais alguns extremos: o texto mais curto e o mais longo que você espera para cada espaço. Seguir o tamanho esperado diz mais do que preencher todas as caixas com o mesmo parágrafo.