You are designing a website mockup, but the final content has not been written yet. Rather than leaving empty zones, designers have used placeholder text for decades: Lorem Ipsum. This guide covers its origin, its uses in design, a method for dosing it component by component, and how to integrate it cleanly in HTML without any nasty surprises before you go live.
What is Lorem Ipsum?
Lorem Ipsum is placeholder text, also called filler text or a placeholder. It looks like Latin, but it carries no real meaning. Its only purpose is to simulate the presence of content in a mockup, without tempting the reader to actually read it. That is precisely the point: the eye perceives the shape, rhythm, and density of the text, but not the substance.
The best-known passage starts with "Lorem ipsum dolor sit amet, consectetur adipiscing elit." You will find it in almost every design tool, from a Figma mockup to a WordPress site template, along with email templates and presentation layouts.
Placeholder text, dummy text, or lipsum?
These three expressions all refer to the same thing. "Lipsum" is simply the shorthand for "Lorem Ipsum" used by designers. You will also come across "dummy text" or "fictional content": whatever the name, the goal is to fill a zone without adding any meaning.
Where does this text come from?
Contrary to a common belief, Lorem Ipsum is not entirely made up. It derives from a text by Cicero, "De finibus bonorum et malorum" (On the Ends of Goods and Evils), written in 45 BC. The word "dolorem" appears in it, and it is from this passage about pain and pleasure that the placeholder text was extracted, then scrambled and distorted until it meant nothing at all.
Its modern use dates back to the 1960s. A maker of Letraset transfer lettering sheets popularized it for its demonstration boards. Then, in the 1980s, the desktop publishing software Aldus PageMaker built it in as default text, which cemented Lorem Ipsum in the habits of graphic designers. Today it is a shared reflex across every web profession.
Good placeholder text should never be read: it should be looked at. If it draws attention, it has failed.
Why use it in your mockups?
The goal of a mockup is to validate a visual structure before investing in final copywriting and integration. Placeholder text plays a precise role here: judging the layout without being distracted by the meaning of the words. For a small or mid-sized business, it is also a way to move forward on design while the real content is still being written, without stalling the project.
- Stay focused on design: the client looks at the blocks, columns, and typography, not the quality of the prose.
- Test real density: a short heading and a long paragraph do not fill the same surface area. Placeholder text reveals overflows and gaps.
- Simulate different formats: heading, standfirst, paragraph, list, caption, button. Each zone gets a credible length.
- Avoid the "blank page" effect: a client validates a mockup that looks like a real page more easily than a gray skeleton.
- Decouple design and copywriting: two people can work in parallel instead of waiting on each other.
A concrete SMB example
Take a tradesperson redesigning the showcase site for their business. The copywriter has not yet delivered the "Services" and "About" pages, but the owner already wants to see the homepage. By filling the blocks with calibrated placeholder text, the agency shows them a credible page, discusses colors and layout, then swaps out the Lorem Ipsum as soon as the real content arrives. The project was never on hold. This is the logic described in our checklist for building a high-performing website.
The permanent Lorem Ipsum trap
Placeholder text must disappear before you go live. Every year, sites ship to production with Lorem Ipsum still visible on a forgotten page. Plan a final proofread and a search for the word "lorem" across the whole project before publishing.
Dosing placeholder text by component
Not every zone on a page calls for the same amount of text. Using an identical block everywhere gives a misleading mockup: the cards look perfect, the headings fit on one line, and the day the real content arrives, everything overflows. Here are realistic benchmarks to set your lengths zone by zone.
| Component | Recommended length | Purpose |
|---|---|---|
| Main heading (H1) | 5 to 10 words | Check line wrapping |
| Standfirst / intro | 1 to 2 sentences | Test the visual hierarchy |
| Content paragraph | 3 to 5 sentences | Judge column width and line spacing |
| Card / thumbnail | 1 to 2 sentences | Check height alignment |
| Button / link | 2 to 4 words | Avoid labels that overflow |
| Navigation menu | 1 to 2 words per item | Check the switch to the mobile menu |
These benchmarks are not absolute rules, but a starting point. The idea is to bring each zone closer to its likely real length. The more your placeholder text matches the future content, the fewer surprises you will have during integration.
Plan for the worst case
Generate a short version AND a long version of each zone. A mockup that holds up with long text will hold up with realistic text. The reverse is not guaranteed. In particular, test overly long headings and endless product names.
A step-by-step method for filling a mockup
- 1List the page components: heading, standfirst, paragraphs, cards, buttons, captions.
- 2Assign each one a target length based on the table above.
- 3Generate the placeholder text in the format you want (number of words, sentences, or paragraphs).
- 4Paste it into each zone, then step back to judge the overall balance.
- 5Duplicate the page with a "long text" version to check how it holds up in case of overflow.
- 6Note the zones to watch for the day the real content is plugged in.
Integrating Lorem Ipsum in HTML
On the integration side, placeholder text goes into the tags exactly like the final content. The key is to structure it semantically right from the mockup: headings, paragraphs, and lists must use the correct tags. Clean markup makes integration easier, improves your website's accessibility, and lays solid foundations for SEO.
Clean markup from the start
- 1Place headings in `<h1>`, `<h2>`, `<h3>` according to the real hierarchy, never based on visual size.
- 2Put each text block in a `<p>`, not in a string of `<br>` tags.
- 3Use `<ul>` or `<ol>` for lists, even when filled with placeholder text.
- 4Reserve short labels for `<button>` and `<a>` to test hover states.
The Emmet trick in your editor
Most code editors (VS Code in particular) include Emmet. Type `p>lorem20` then confirm with the Tab key: you instantly get a paragraph of 20 words of placeholder text. With `lorem50` you generate 50 words, and with `ul>li*5>lorem10` a list of five items. It is the fastest way to fill an HTML structure without leaving the editor.
For larger volumes or precise control (number of paragraphs, whether or not to include the classic opening sentence), an online generator remains the most flexible option. You choose the exact number of blocks you want, then paste them into your mockup or CMS. And if you then need to check that your real text meets a given length, the tool to count the words and characters in a text takes over.
Generate your placeholder text in one click
Choose the number of paragraphs, sentences, or words, then copy the result straight into your mockups and HTML pages.
Common mistakes to avoid
Placeholder text is simple to use, but a few clumsy habits come up often and can cost time, or even harm your site. Here they are, along with the matching best practice.
- Filling every zone with the same length: the mockup looks deceptively balanced. Vary it by component.
- Forgetting to remove the placeholder text: a published page with Lorem Ipsum on it looks amateurish. Search for the word "lorem" before going live.
- Leaving placeholder text indexable: search engines can read it and judge it worthless. Never publish a public page of placeholder text.
- Neglecting edge cases: prices, email addresses, phone numbers, very long words. Add them by hand to test real overflows.
- Confusing mockup with final content: placeholder text validates a form, not a message. Copywriting remains a full stage in its own right.
A reflex that saves time
Add "search for the word lorem" to your go-live checklist, just like checking links or images. This few-second check avoids the nasty surprise of placeholder text left behind on the homepage.
The limits to know about
Lorem Ipsum is an excellent layout tool, but it has blind spots you need to anticipate so you do not get caught out when plugging in the real content.
- It hides the real keywords: a well-crafted marketing hook has neither the length nor the rhythm of a block of Latin. Validate sensitive zones with text close to the final version.
- It skews SEO: never leave placeholder text indexed; it adds no value and can hurt your search rankings.
- It erases edge cases: very long words, numbers, prices, email addresses. Add them manually to test real overflows.
- It is not multilingual: for a French site, Latin placeholder text reflects neither the accents nor the average length of French words.
A French alternative
There are French placeholder text variants (sometimes called "faux texte" or "French lipsum") that better respect word length and accents. Useful when the mockup has to convince a French-speaking client and the render must be as close as possible to the final site.
Placeholder text or real content: which to choose?
Placeholder text is ideal during the design phase, when only the structure matters. As soon as you validate the layout, it is better to switch to real content, even provisional, especially for strategic pages like the homepage or service pages. That is when your site's organic search performance is decided: real text, well structured and written for your visitors, always beats a block of Latin left frozen too long in the mockup.
| Situation | Placeholder text | Real content |
|---|---|---|
| Validating a layout | Recommended | Not necessary |
| Testing lengths and overflows | Recommended | Useful for real cases |
| Presenting a final page to the client | Avoid | Essential |
| Going live | Forbidden | Mandatory |
Frequently asked questions
How do I generate Lorem Ipsum placeholder text quickly?
Two methods coexist. In a code editor like VS Code, type `lorem20` then Tab to instantly get 20 words. For finer control over the number of paragraphs or sentences, a dedicated online generator is more flexible: you copy the exact volume you want and paste it into your mockup.
Does Lorem Ipsum mean anything?
No, it has no real meaning. It derives from a text by Cicero written in 45 BC, but the words were scrambled and distorted so they mean nothing. That is precisely the point: so the eye looks at the shape without being tempted to read the substance.
Why should you not leave Lorem Ipsum on a live site?
Visible placeholder text looks amateurish to visitors and adds no value for SEO. Search engines can index it and treat it as empty content. Before any go-live, search for the word "lorem" across the whole project.
What length of placeholder text should I use in a mockup?
It depends on the component. Count 5 to 10 words for a heading, one to two sentences for a standfirst or card, three to five sentences for a paragraph, and only two to four words for a button. The ideal is to generate a short version and a long version to test how the layout holds up.
Is there placeholder text in French?
Yes, French variants better reproduce word length and the presence of accents. They are useful when the mockup has to look credible to a French-speaking client, because Latin placeholder text does not faithfully reflect how a future French text will render.
In summary
Lorem Ipsum is placeholder text inherited from Cicero and popularized by desktop publishing, whose only role is to fill a mockup without distracting the eye. Used well, it helps you validate a layout, test the density of each component, structure your HTML from the start, and keep a project moving even when the content is not ready. But keep its limits in mind: dose the lengths by zone, anticipate edge cases, and above all, remove all placeholder text before going live.
At TC Automation, we design sites where the structure is thought through before the content, so the move from mockup to final site happens without surprises. Clean placeholder text today means faster integration tomorrow. If you are preparing to redesign or build your site and want to save time on these steps, let's talk about your project.
