How to use placeholder text

Lorem ipsum is the universal placeholder text of the web — scrambled Latin that lets designers sketch layout without readers getting distracted by the content. Used badly, it ships to production, confuses stakeholders, and makes mockups misleading. Used well, it accelerates design iteration and keeps critique focused on structure. This guide covers why lorem ipsum exists (dating back to the 1500s), when to use it versus real content, modern alternatives (realistic fake content, domain-specific placeholder, AI-generated), and the edge cases where placeholder text can burn you.

Why placeholder text exists

A mockup with real content invites critique of the content, not the layout. “Do we say ‘our mission’ or ‘our purpose’?” takes over the meeting when you meant to discuss whether the hero button should be bigger.

Scrambled text (lorem ipsum) looks plausibly like prose — same rough word lengths, sentence rhythm, paragraph density — but is unreadable. This lets viewers evaluate typography, hierarchy, and whitespace without getting distracted by meaning.

The canonical text comes from a scrambled version of Cicero’s “de Finibus Bonorum et Malorum” (45 BC). The scramble started in the 1500s when a typesetter jumbled the text to make a sample page. It stuck.

When lorem ipsum is the right choice

Early-stage wireframes and mockups. Block-out layouts where the content isn’t yet written. The goal is to evaluate shape, rhythm, flow.

Typography tests. Font pairings, size scales, line length, leading. Real content can over-emphasize or distract.

Density studies. Long-form article templates, documentation layouts, marketing pages with varying content block sizes.

Demo templates. Theme authors shipping themes for WordPress, Ghost, or Framer need plausible-looking placeholder for screenshots and demos.

When real content (or realistic fake content) is better

Validating content length assumptions. Lorem ipsum lets you pretend headlines are always 6 words. Real content reveals they’re 3-18. Design with the range, not the ideal.

Stakeholder reviews past early-stage. Execs who see lorem ipsum may not trust the design, or may argue about decisions that depend on copy. Realistic content avoids this.

User testing. Participants can’t judge the product with placeholder copy. Always use realistic content.

Component libraries and design systems.Realistic samples make the library actually usable (real button labels, real nav items).

Form designs. Field placeholders should be real hints (“name@company.com”), not lorem ipsum. Lorem ipsum in a real input field is a UX bug waiting to ship.

Lorem ipsum variants

Beyond the classic Latin:

Bacon ipsum: butcher jargon (brisket, pork belly, short ribs). Humorous placeholder for food-adjacent sites.

Hipster ipsum: vinyl, artisanal, mustache. Lifestyle brands sometimes use it.

Corporate ipsum: synergize, leverage, value-add. Startup / B2B satire.

Cupcake ipsum, pirate ipsum, Trump ipsum, etc:endless variants for humor. Use with caution — clients may not share the joke, and leftover pirate ipsum on a corporate site is embarrassing.

Rule: novelty ipsum works for internal concepts; stick to classic lorem ipsum or realistic placeholder for anything shared outside the design team.

Modern alternative: realistic fake content

Faker.js / faker-js: JavaScript library that generates realistic fake names, addresses, companies, product descriptions. Drop-in for mockups and prototypes.

JSON Placeholder: API returning fake posts, users, comments — like lorem ipsum but shaped like real data. Good for API wiring before the real backend exists.

Unsplash / Pexels: real images in placeholder slots. Shift mockups from “obviously fake” to “plausibly real.”

AI-generated sample content: Claude, ChatGPT, or similar produce realistic placeholder that fits your domain. “Write five fake SaaS product descriptions, 2-3 sentences each” is faster than scripting Faker rules.

Placeholder in different contexts

Figma / Sketch / design tools: built-in lorem ipsum plugins. Generate paragraphs, headlines, variable lengths. Use during wireframing.

Code / HTML prototypes: keep placeholder identifiable as placeholder. Use <!-- LOREM -->comments or a marker string. Scan for these before shipping.

CMS templates: consider whether lorem ipsum would ship if the client doesn’t fill a field. Default to “coming soon” or hide empty content blocks.

Email templates: lorem ipsum often escapes into production emails. Scan sent folders for “lorem” regularly.

Placeholder-as-feature: skeleton screens

Modern apps replace lorem ipsum loading states with skeleton screens — gray blocks in the shape of the eventual content. Visual placeholder without the “fake text” problem.

Skeleton screens reduce perceived loading time by 10-20% in user studies. They communicate “the UI is loading” without the weirdness of lorem ipsum.

Accessibility and lorem ipsum

Screen readers read lorem ipsum out as if it were real text. Demos and prototypes shared with users who rely on assistive tech need realistic content, not lorem ipsum.

Alt text on placeholder images should be real alt text (or alt="" for decorative), not “Lorem ipsum image.”

Common mistakes

Shipping lorem ipsum to production. The classic. Happens constantly. Add “lorem ipsum” to your pre-launch checklist.

Using lorem ipsum in SEO content. Google won’t rank pages with lorem ipsum, and the page quality signals take a hit.

Unrealistic text lengths. Using 1,500 words of lorem ipsum in a field that will hold a 50-word bio leads to layout decisions that break with real content.

Placeholder in form labels instead of hints.Form placeholder should show format (“ MM/DD/YYYY”) or an example (“name@company.com”), not lorem ipsum.

Forgetting to translate placeholder.International sites sometimes ship with English lorem ipsum in non-English layouts — looks especially wrong.

Run the numbers

Generate placeholder text instantly with the lorem ipsum generator. Pair with the word counter to size your placeholder to realistic content length, and the reading time estimator to check whether the placeholder length matches the final article’s expected reading time.