FlowingDev

What's the deal with Lorem Ipsum? The history and theory of placeholder text

Learn the surprising history and purpose of Lorem Ipsum, the classic placeholder text used by designers and developers to visualize content layouts.

Try the tool: Lorem Ipsum Generator

In one sentence

Lorem Ipsum is meaningless, Latin-like placeholder text used to fill content areas in a design, allowing stakeholders to focus on the layout and visual hierarchy without getting distracted by readable content.

The problem it solves

Picture this: you're a designer crafting a brilliant new website layout. You've got boxes for headlines, paragraphs, and image captions. But what do you put in them?

You could write "Headline goes here" and "Content for this paragraph will be provided later." But that has two problems. First, it doesn't look like real text. "Headline goes here" is two words; a real headline might be five or ten. A block of text repeating "content here" over and over creates a weird, distracting pattern that doesn't reflect the natural texture of a real paragraph. Second, and more insidiously, if you use actual, readable English like "Our company was founded in 1998 with a mission to...", your client or boss will inevitably start reading it. Instead of judging your beautiful design, they'll say, "Wait, we were founded in 1999," and you'll get sucked into a conversation about copy, not composition.

The core problem is separating the evaluation of form from the evaluation of content.

Enter Lorem Ipsum. Its origin story is cooler than you'd think. It's not just random gibberish. The standard text is a scrambled and modified excerpt from a classical Latin text, "De finibus bonorum et malorum" ("On the ends of good and evil"), written by the Roman statesman Cicero in 45 BC.

The practice of using it as filler text dates back to at least the 1500s, when an unknown printer is thought to have scrambled a galley of type to make a type specimen book. But its modern fame comes from the 1960s. A company called Letraset sold dry-transfer sheets of letters for graphic designers, and they popularized Lorem Ipsum passages on these sheets. When desktop publishing software like Aldus PageMaker arrived in the 1980s, it included a built-in Lorem Ipsum generator, cementing its place in the digital designer's toolkit forever.

It works because it looks like a plausible European language. It has varied word lengths, capital letters, and punctuation, creating a realistic "color" or "texture" on the page. Because it's indecipherable, it forces the viewer's brain to stop trying to read and instead focus on the things that matter in a design review: Is the font legible? Is the line spacing correct? Does the layout feel balanced? Is the headline prominent enough? It keeps the conversation where it needs to be.

How it works under the hood

You might think a Lorem Ipsum generator is just a text file that gets copied and pasted. While the simplest versions are exactly that, a good generator is a bit more clever, employing simple algorithms to create more natural-looking and variable text blocks.

The Source Text: Cicero's Legacy

The process begins with a source text. The classic Lorem ipsum dolor sit amet... is a mangled version of a passage from Cicero. The original passage starts:

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

Which translates to:

...nor is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain...

As you can see, the first word of the placeholder, Lorem, is a piece of dolorem. The words are real Latin, but they're chopped up, rearranged, and sprinkled with some nonsense words, making the entire passage grammatically incorrect and meaningless—which is the entire point.

A generator's "dictionary" is a big list of these Latin and Latin-esque words.

Original Cicero Scrambled Lorem Ipsum
dolorem ipsum Lorem ipsum dolor
quia dolor sit quia dolor sit
amet, consectetur amet, consectetur
adipisci velit adipiscing elit

The Generation Algorithm

A configurable generator doesn't just spit out the same 100-word block every time. It builds paragraphs from scratch using a simple set of rules.

  1. Sentence Generation: To create a single sentence, the algorithm randomly picks a number of words (say, between 8 and 20) from its word list. It joins them with spaces, capitalizes the first word, and adds a period. To make it fancier, it might randomly insert commas after a few words.

  2. Paragraph Generation: To create a paragraph, the algorithm simply calls the sentence generator a random number of times (say, between 3 and 7) and joins the resulting sentences.

  3. Configurable Output: When you ask for "5 paragraphs," the tool simply runs the paragraph generation loop five times. Some generators offer more control, like specifying word or character counts, which just involves running the word-picking loop until the target count is met.

Here’s a tiny JavaScript-like pseudo-code example of the core logic:

// The dictionary of words
const LOREM_WORDS = ["lorem", "ipsum", "dolor", "sit", "amet", "consectetur", ...];

// Generates one sentence of a variable length
function generateSentence(minWords = 8, maxWords = 20) {
  const wordCount = Math.floor(Math.random() * (maxWords - minWords + 1)) + minWords;
  let words = [];
  for (let i = 0; i < wordCount; i++) {
    const randomIndex = Math.floor(Math.random() * LOREM_WORDS.length);
    words.push(LOREM_WORDS[randomIndex]);
  }
  let sentence = words.join(" ");
  // Capitalize first letter and add a period
  return sentence.charAt(0).toUpperCase() + sentence.slice(1) + ".";
}

// Generates one paragraph of a variable number of sentences
function generateParagraph(minSentences = 3, maxSentences = 7) {
  const sentenceCount = Math.floor(Math.random() * (maxSentences - minSentences + 1)) + minSentences;
  let sentences = [];
  for (let i = 0; i < sentenceCount; i++) {
    sentences.push(generateSentence());
  }
  return sentences.join(" ");
}

// Generate 3 paragraphs
for (let p = 0; p < 3; p++) {
  console.log(generateParagraph());
}

This simple structure is all it takes to produce endless, unique-looking blocks of placeholder text on demand.

Real-world stories

The Over-Eager Client

A freelance designer, Maria, was building a website for a new artisanal bakery. She mocked up a gorgeous homepage, using Lorem Ipsum for the "Our Story" and product description sections. Proud of her work, she sent a link to the client for design approval, explaining in her email that the text was just a placeholder. The client, busy running his bakery, skimmed the email and clicked the link. An hour later, Maria got a frantic email: "The design is nice, but the website is in Latin! We don't sell 'dolor sit amet'! Please fix the text immediately." Maria spent the next 20 minutes on the phone calming him down and re-explaining the purpose of placeholder text.

Lesson: Never assume a non-technical stakeholder knows what Lorem Ipsum is. Proactively explain that it's a tool to help them focus on the visual design, and that the real words will come later.

The Case of the Unbreakable Word

A front-end developer, Sam, was building a responsive card component for a news app. The card had a title, an image, and a short snippet of text. It needed to look good on a phone, which meant the text column was quite narrow. Sam dropped in a few sentences of Lorem Ipsum, and it looked perfect. The text wrapped beautifully, the spacing was on point, and he shipped the component. Weeks later, the app pulled in a real article from a German science journal with the word Rechtschreibreform. The word was longer than the entire width of the card. It didn't break, and instead overflowed its container, completely destroying the layout.

Lesson: Lorem Ipsum uses short, Latin-based words. It's great for checking general flow but terrible for stress-testing layouts. Always test your UI with realistic worst-case content, like long words, short headlines, or text in different languages.

The Production Site Mishap

A junior developer, Chloe, was tasked with adding a new promotional banner to a live e-commerce site. It was a rush job, requested at 4 PM on a Friday. She coded the banner, styled it, and dropped in some Lorem Ipsum to check the alignment. In her haste to deploy before the weekend, she committed her code and pushed it to production. For the next three hours, the company's homepage featured a prominent banner that read: "Check out our new spring collection! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Lesson: Placeholder text is radioactive—it must never reach production. Implement checks in your deployment process, like a simple script that searches for "lorem ipsum" in your codebase and fails the build if it's found. This is a cheap and effective safety net against embarrassing mistakes.

Common mistakes and traps

  • Forgetting to replace it. This is the cardinal sin. A site going live with Lorem Ipsum looks unprofessional and broken. Use pre-deployment scripts or a manual checklist to hunt it down and eradicate it.
  • Letting it confuse the client. If you don't explain what it is, clients will get confused and think something is wrong. An upfront explanation saves everyone time and anxiety.
  • Assuming it represents real content length. A line of "Lorem ipsum dolor sit amet..." is not a real headline. A generated paragraph is not the same length as a real user bio. Design with flexibility in mind, because real content is unpredictable.
  • Ignoring internationalization (i18n). Lorem Ipsum's character set and word structure are Latin-based. It won't reveal how your design handles the wider characters of Chinese (中文), the long compound words of German, or the right-to-left flow of Arabic (عربى).
  • Using it for UX testing. It's designed to be ignored. If you're testing whether a user can follow instructions or understand a call to action, you must use realistic, meaningful text. Using Lorem Ipsum for user-facing instructions is like handing someone a map with no labels.

Why it belongs on your radar

As a developer, designer, or even a project manager, Lorem Ipsum is a fundamental part of the digital creation process. You should think of it whenever you're in a situation where structure needs to be built before content is finalized.

  • Frontend & UI Development: When you're building a React component, a CSS grid layout, or a simple HTML page, you need to see how text flows. Lorem Ipsum is your go-to for filling those p tags and divs so you can get the styling right without waiting for the copywriters.
  • UI/UX Design & Wireframing: In Figma, Sketch, or Adobe XD, using placeholder text ensures that feedback sessions stay focused on layout, hierarchy, and user flow, rather than devolving into copy-editing sessions.
  • Database Seeding: When building an app, you need test data. A script that generates 1,000 fake users can use Lorem Ipsum to populate their "biography" fields, making your development environment feel much more realistic than a database full of NULL or empty strings.
  • Print & Graphic Design: The original use case is still alive and well. When designing a brochure, magazine, or book cover, typographers use it to evaluate font choices, pairings, leading (line-height), and kerning (letter-spacing).

Go deeper

  • Wikipedia: Lorem Ipsum — The definitive, well-sourced overview of the history, origin, and purpose of Lorem Ipsum.
  • Cicero's "De finibus bonorum et malorum" — Read the original Latin text (with an English translation) from which Lorem Ipsum was born. The relevant passage is in Book 1, sections 1.9.32-33.
  • Lipsum.com — One of the oldest Lorem Ipsum generators on the web, with a good explanation of the history and common misconceptions.
  • "Designing with Real Content" by A List Apart — An excellent article that discusses the limitations of Lorem Ipsum and advocates for using realistic content as early as possible in the design process.

Theory done. Time to get your hands dirty — 100% in your browser.

Try the tool: Lorem Ipsum Generator