DEV Community

zhihu wu
zhihu wu

Posted on Originally published at codetoolbox.pro

Your Placeholder Text Is Lying to You: 4 Layout Bugs Lorem Ipsum Hides

Every mockup I reviewed this year used lorem ipsum. Several of those layouts broke in production - not because the design was bad, but because the placeholder text was too friendly.

Here is what lorem ipsum optimizes for, and what it quietly hides.

1. It has no long, unbreakable strings

Lorem ipsum words are short, lowercase, and separated by spaces. Real content contains things the browser cannot hyphenate: a 90-character signed URL, an address like firstname.lastname@international-partners.example.com, an API token, a German compound noun. Those are what overflow a flex row - flex: 1 will not shrink below the content's min-content width unless you also set min-width: 0 (or overflow-wrap: anywhere). You will never see that bug in a lorem ipsum mock. Paste one long token into your design before you call it done.

2. It never expands

German text runs roughly 30% longer than English, Finnish invents longer compounds, and CJK wraps between any two characters instead of at spaces. A button label that fits at 320px in English can overflow in two languages. Test with the longest realistic translation - or at minimum add 30% to every label and re-check the tight rows.

3. It hides truncation and empty states

Lorem ipsum paragraphs are all the same length, so list rows never collapse, cards never hit their one-line truncation, and -webkit-line-clamp never gets exercised. Real data puts a one-word title and a 300-word title in the same list. Feed the layout a deliberately awkward set of strings - empty string, a single character, one 200-character sentence - and look at each row again.

4. It hides the labels

Placeholder copy tends to be descriptive nouns. Real UI copy is verbs and consequences: "Delete workspace", not "Workspace deletion". If a screen only reads correctly with lorem ipsum in it, the placeholder is doing layout work that the layout should be doing.

When lorem ipsum is the right call

Before the copy exists at all - early explorations where you are deciding spacing, hierarchy, and density. Once the layout is settled, swap in realistic strings. When I need filler fast I use a lorem ipsum generator: it runs entirely in the browser (nothing uploaded, no signup), you choose the paragraph and sentence counts, and the output pastes straight into test fixtures.

The rule I keep coming back to: if your placeholder text would pass a type checker, it is not testing anything.

Top comments (0)