Gerador de Lorem Ipsum

A origem do Lorem Ipsum

O texto "Lorem ipsum dolor sit amet..." não é um texto aleatório — é latim alterado. A fonte é De finibus bonorum et malorum ("Sobre os fins do bem e do mal"), um tratado filosófico escrito por Cícero em 45 a.C. O trecho original da seção 1.10.32 diz, em parte:

"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

No século XVI, um tipógrafo desconhecido pegou essa passagem, embaralhou as palavras e a usou para demonstrar um tipo de letra. O texto sobreviveu como padrão da indústria porque parece linguagem natural à distância — tem uma mistura realista de palavras curtas e longas — sem ser legível em nenhum idioma real, portanto não distrai revisores.

Richard McClintock, estudioso do latim no Hampden-Sydney College, identificou a fonte na década de 1990.

Por que texto de preenchimento importa no design

O propósito do texto de preenchimento é permitir que designers e stakeholders avaliem layout, tipografia e hierarquia sem a distração do conteúdo real. Texto real ativa a leitura. Um revisor que consegue ler o texto começará a avaliar o conteúdo em vez do design visual — e essa conversa pertence a uma etapa posterior do processo.

Bom texto de preenchimento:

• Tem variação natural no comprimento das palavras (mistura de palavras curtas e longas, adequada ao idioma alvo).
• Preenche o espaço como o copy real fará — quebras de linha, ritmo do parágrafo, hifenização.
• É visualmente neutro — sem frases reconhecíveis, sem humor, sem nada que desvie o foco.

Por isso "Conteúdo Aqui" repetido em caixas é pior do que Lorem Ipsum: produz quebras de linha artificiais que não refletem como o texto real vai fluir.

Modos de saída

Palavras — útil para testar larguras de campos e containers de labels.

Frases — útil para inputs de um parágrafo, meta descrições, corpos de cards.

Parágrafos — útil para layouts de artigos, templates de e-mail, páginas com múltiplas seções.

HTML — envolve a saída em tags <p> para colar diretamente em templates HTML. Evita o passo extra de envolver manualmente.

Variantes e quando usá-las

Lorem Ipsum clássico é o padrão universal. Use quando seu público é familiarizado com design e entende imediatamente que é texto de preenchimento.

Português (Brasil) — gerar preenchimento em português é importante quando seu produto tem o português como idioma principal. O português brasileiro é sistematicamente mais longo que o inglês para o mesmo conceito: substantivos, artigos e terminações verbais fazem que o comprimento médio das frases seja 15-25% maior. Projetar com preenchimento em inglês para uma UI em português é uma forma confiável de encontrar surpresas de layout na QA.

Espanhol — problema semelhante com o mesmo perfil de comprimento.

Hipster Ipsum — usa gíria contemporânea em inglês ("artisan," "craft beer," "normcore"). Útil em apresentações de wireframes para stakeholders que podem perguntar "mas o que essa página vai dizer mesmo?" — o conteúdo reconhecível mas absurdo sinaliza claramente que o copy está pendente.

Correspondência de comprimento: a melhor prática mais importante

O maior erro prático com texto de preenchimento é gerá-lo no idioma errado para o locale alvo:

| Conceito | Inglês | Português | |----------|--------|-----------| | "Settings" | 8 chars | "Configurações" — 14 chars | | Label de nav típico | ~6–10 chars | ~10–18 chars | | Meta descrição 160 chars | ~28–32 palavras | ~22–27 palavras |

Se você está projetando um produto multi-locale, gere preenchimento em cada idioma alvo e verifique que seus layouts se mantêm. Faça isso na etapa de wireframe, não após a UI ter sido entregue.

Quando NÃO usar Lorem Ipsum

Testes A/B para conversão. Texto de preenchimento em uma variante de teste produzirá dados de clique sem sentido. Copy real — mesmo que aproximado — é necessário para testes de conversão.

Revisões de acessibilidade. Auditorias de leitores de tela e testes de navegação por teclado devem usar conteúdo que se pareça com o copy de produção.

Revisões de estratégia de conteúdo. Quando um stakeholder avalia arquitetura de informação, preenchimento não lhe dá nada para reagir.

Deploys de produção. Lorem Ipsum chegou acidentalmente à produção em sites publicados, apps mobile e materiais impressos mais vezes do que qualquer um quer admitir.

SEO. Lorem Ipsum em uma página rastreada sinaliza aos mecanismos de busca que a página não tem conteúdo significativo.

Usando a biblioteca lorem-ipsum

import { LoremIpsum } from 'lorem-ipsum';

const lorem = new LoremIpsum({
  sentencesPerParagraph: { max: 8, min: 4 },
  wordsPerSentence: { max: 16, min: 4 },
});

console.log(lorem.generateWords(5));
console.log(lorem.generateSentences(3));
console.log(lorem.generateParagraphs(2));

Para um pool de palavras personalizado (preenchimento específico do domínio):

const lorem = new LoremIpsum({}, 'word', '\n', minhasTermos, minhasTermos);

Privacidade

Toda a geração é executada no lado do cliente. Nenhum dado é transmitido ao servidor.

Lorem Ipsum é latim de verdade?

Sim, parcialmente. Vem do tratado De finibus bonorum et malorum de Cícero (45 a.C.), especificamente a seção 1.10.32. As palavras foram embaralhadas por um tipógrafo no século XVI para produzir texto de amostra que parece linguagem natural. Algumas palavras são latim autêntico; outras são fragmentos truncados. Não tem significado gramatical — seu valor é puramente visual.

Por que não usar "Conteúdo Aqui" repetido como preenchimento?

Frases curtas repetidas produzem quebras de linha uniformes e artificiais que não refletem como o copy real vai fluir. Lorem Ipsum tem variação orgânica no comprimento das palavras que imita o ritmo natural da prosa. Isso importa ao avaliar quebra de linha, controle de viúvas e órfãos, comportamento de transbordamento de texto e espaçamento de parágrafos — tudo invisível com preenchimento uniforme.

Devo gerar o preenchimento no idioma real do meu app?

Sim, quando o idioma alvo difere do inglês. O português brasileiro é sistematicamente mais longo que o inglês para o mesmo significado: substantivos, artigos e terminações verbais fazem que as frases médias sejam 15-25% mais longas. Projetar com preenchimento em inglês para uma UI em português é uma causa conhecida de truncamento e transbordamento de layout que só aparece tarde na QA. Gere preenchimento em cada locale e verifique seus layouts.

O que é Hipster Ipsum?

Uma variante moderna que usa gíria contemporânea em inglês — "artisan," "selvage," "normcore," "craft beer." É intencionalmente reconhecível como preenchimento enquanto é absurdo. Útil em apresentações de wireframes para stakeholders que perguntam "mas o que essa página vai dizer?" — o conteúdo reconhecível mas sem sentido sinaliza claramente que o copy está pendente.

Pode-se usar Lorem Ipsum em produção?

Não. Lorem Ipsum chegou acidentalmente à produção muitas vezes — em sites publicados, apps mobile e materiais impressos. Nunca use preenchimento como valor padrão em um campo de CMS, formulário ou template de e-mail que possa chegar a usuários reais. Também evite em páginas rastreadas porque sinaliza conteúdo de baixa qualidade aos mecanismos de busca.

O que faz o modo de saída HTML?

O modo HTML envolve a saída em tags <p> para que você possa colar diretamente em templates HTML ou editores de texto rico sem adicionar markup manualmente. Evita o erro comum de colar texto simples em um contexto HTML e obter um bloco de texto sem formatação. Cada parágrafo se torna um elemento <p> separado.

Quantas palavras devo gerar para um card típico ou meta descrição?

O corpo de um card padrão (~3 linhas a 16px em um container de 320px) precisa de aproximadamente 20–30 palavras. Uma meta descrição (limitada a ~160 caracteres pelo Google) precisa de 25–35 palavras em inglês, menos em português ou espanhol onde as palavras tendem a ser mais longas. Uma página com extensão de artigo precisa de 300–800 palavras em 4–8 parágrafos.