DEV Community

Snappy Tools
Snappy Tools

Posted on

Lorem Ipsum: The Designer's Complete Reference (Lengths, Formats, Tool Shortcuts)

Lorem ipsum is the most-used placeholder text in design and development — but most people only know the basics. This reference covers the questions that come up when you're actually building something: how long is a paragraph, which format should you use, how do you get it into your design tool quickly.

Lorem Ipsum Length Reference

How long is lorem ipsum actually? Here's a quick table for the most common use cases:

Mode Count Approx Words Approx Characters Best For
Words 5–10 5–10 30–70 Button labels, nav items
Words 20–30 20–30 130–200 Subheadings, captions
Sentences 1 12–18 80–120 Tooltips, bylines
Sentences 3 35–55 230–360 Card descriptions
Paragraphs 1 50–80 330–520 Single content block
Paragraphs 3 150–240 975–1,560 Article excerpt, about section
Paragraphs 5 250–400 1,625–2,600 Full article body
Paragraphs 10 500–800 3,250–5,200 Long-form page test

Output Format — When to Use Each

Different workflows need different output formats. Here's when each format is useful:

Plain text — Paste anywhere. Use for Google Docs, Notion, email clients, and any editor that strips HTML.

HTML <p> tags — Copy directly into an HTML file or CMS editor. Use when building templates, testing WordPress themes, or writing raw HTML.

Markdown — Paragraphs separated by blank lines. Use in .md files, documentation, README files, or any Markdown-aware editor.

JSON array — An array of strings, one item per paragraph or sentence. Use in code, API mock responses, or test fixtures: faker.lorem.paragraphs(3) is the standard approach, but when you just need a quick paste, JSON from a generator is faster.

Design Tool Shortcuts

Tool Method
Figma Plugins menu → search "Lorem ipsum" (Community plugin)
Adobe XD Right-click text layer → Edit → Paste Lorem Ipsum
Sketch Edit menu → Insert Lorem Ipsum
InDesign Draw text frame → Type → Fill with Placeholder Text
WordPress (Gutenberg) Type /lorem in a new block, press Enter
VS Code (HTML) Type lorem and press Tab (Emmet shortcut)
Canva No built-in — paste from a generator

Programmatic Generation

If you're building tests or populating databases, generate lorem ipsum in code:

JavaScript (Node.js):

const { LoremIpsum } = require('lorem-ipsum');
const lorem = new LoremIpsum();
lorem.generateParagraphs(3); // returns a string
Enter fullscreen mode Exit fullscreen mode

Faker.js (frontend or Node.js):

import { faker } from '@faker-js/faker';
faker.lorem.paragraphs(3); // returns 3 paragraphs
faker.lorem.sentence();    // returns one sentence
faker.lorem.words(10);     // returns 10 words
Enter fullscreen mode Exit fullscreen mode

Python:

import lorem
lorem.paragraph()   # one paragraph
lorem.sentence()    # one sentence
lorem.text()        # multiple paragraphs
Enter fullscreen mode Exit fullscreen mode

Should You Use Lorem Ipsum or Real Content?

Use lorem ipsum for:

  • Low-fidelity wireframes evaluating layout and spacing
  • Typography testing (does the font look right at this size?)
  • Component testing where content isn't ready yet

Switch to real content for:

  • Stakeholder reviews — lorem ipsum distracts reviewers
  • Hero sections and CTAs — word count matters
  • Any design decision that depends on content length

Quick Generation

For one-off placeholder text in any format, a browser-based lorem ipsum generator that outputs plain text, HTML, Markdown, or JSON is the fastest path — no npm install, no Python env, no plugin to install in Figma. Generate, copy, paste.

The key advantage over a static lorem ipsum string you paste from memory: good generators randomise on each copy, so multiple paste operations in the same mockup produce visually distinct text blocks instead of walls of identical repetitive paragraphs.

Top comments (0)