Lorem ipsum: как сгенерировать текст для макета сайта

Вы открываете макет нового сайта и видите странные латинские слова: «Lorem ipsum dolor sit amet, consectetur adipiscing elit». Это не ошибка переводчика и не древнеримская поэзия — это Lorem ipsum, стандартный текст-заполнитель, которым пользуются дизайнеры и верстальщики уже несколько десятилетий. Разберёмся, зачем он нужен и как его генерировать.

Зачем нужен Lorem ipsum

Когда вы делаете макет сайта или приложения, финального текста часто ещё нет. Копирайтер не написал статьи, маркетологи не утвердили слоганы, а макет показать нужно уже завтра. Можно заполнить блоки фразой «Здесь будет текст» или скопировать случайные абзацы из Википедии, но это плохие варианты.

Реальный текст отвлекает внимание. Клиент начинает обсуждать формулировки вместо композиции, придираться к орфографии вместо контраста. Lorem ipsum решает эту проблему: он выглядит как настоящий текст, но не несёт смысловой нагрузки. Глаз воспринимает его как параграф, но мозг не пытается читать.

Второй плюс — предсказуемая длина. Lorem ipsum распределён по словам примерно так же, как естественный язык: есть короткие и длинные слова, знаки препинания, заглавные буквы. Это даёт реалистичное представление о том, как будет выглядеть страница с реальным контентом.

Откуда взялся Lorem ipsum

Текст основан на трактате Цицерона «De finibus bonorum et malorum» («О пределах добра и зла»), написанном в 45 году до нашей эры. В оригинале отрывок звучит так: «Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit».

В 1500-х годах неизвестный печатник взял этот текст, перемешал слова и создал образец для демонстрации шрифтов. С тех пор Lorem ipsum прочно вошёл в типографское дело. В 1960-х годах его начали использовать для демонстрации шрифтов Letraset, а с развитием компьютерной вёрстки он стал стандартом индустрии.

Классический Lorem ipsum начинается с фразы: «Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua».

Когда использовать текст-заполнитель

В прототипах и вайрфреймах. На ранних этапах проектирования Lorem ipsum показывает структуру без привязки к контенту. Вы оцениваете визуальную иерархию, расстояния между блоками, читаемость шрифта.

В презентациях для клиентов. Когда нужно продемонстрировать дизайн-концепцию, а копирайтинг ещё не готов. Клиент видит общую картину, не цепляется за детали текста.

При тестировании вёрстки. Проверяете, как блоки ведут себя с текстом разной длины. Lorem ipsum помогает найти проблемы с переполнением, переносами, адаптивностью.

Не используйте Lorem ipsum:

• В финальной версии перед запуском (очевидно, но многие забывают)
• При A/B-тестировании реальных страниц
• В прототипах для юзабилити-тестирования — пользователям нужен осмысленный контент

Альтернативы Lorem ipsum

Русский псевдотекст. Для русскоязычных проектов латиница может исказить восприятие — кириллица занимает больше места. Существуют генераторы псевдорусского текста, имитирующие структуру языка без смысла: «Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты».

Тематические генераторы. Bacon Ipsum генерирует текст про мясо, Hipster Ipsum — про крафтовое пиво и винтажные велосипеды. Подходит для неформальных проектов, где можно добавить юмора.

Реальный контент-прототип. Самый правильный подход: используйте черновики текстов, даже неотредактированные. Это помогает выявить проблемы с длиной заголовков, количеством текста в блоках, логикой навигации.

Как генерировать Lorem ipsum

Большинство инструментов дизайна и вёрстки имеют встроенные генераторы. В Figma — плагин «Lorem Ipsum», в Adobe XD — команда в меню. Но иногда нужно сгенерировать текст отдельно.

Параметры генерации:

• Количество абзацев, предложений или слов
• Начинать ли с классической фразы «Lorem ipsum dolor sit amet»
• Добавлять ли HTML-теги для вёрстки
• Длина абзацев (фиксированная или случайная)

Пример использования в HTML:

<div class="article">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

Для JavaScript-фреймворков удобно хранить текст в переменных:

const loremShort = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
const loremLong = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.';

document.querySelector('.placeholder').textContent = loremShort;

Практические советы

Используйте разную длину текстов. Не копируйте один абзац во все блоки — в реальности тексты различаются. Один заголовок из двух слов, другой из шести. Один абзац короткий, другой на полэкрана.

Проверяйте граничные случаи. Что происходит, если заголовок не влезает в одну строку? Как карточка товара выглядит с длинным названием? Lorem ipsum должен помочь найти эти проблемы до того, как их найдёт реальный контент.

Согласуйте подход с командой. Если дизайнер использует Lorem ipsum, а копирайтер уже написал черновики, кто-то зря потратил время. Договоритесь, на каком этапе заменяете заполнитель реальным текстом.

Помните про локализацию. Если сайт будет на нескольких языках, проверьте макет с текстом на каждом. Немецкий длиннее английского на 30%, китайский компактнее на 50%. Lorem ipsum этого не покажет.

Инструменты для работы с текстом

Если вам нужно быстро сгенерировать Lorem ipsum или другие варианты текста-заполнителя, используйте специализированные генераторы. Они позволяют настроить количество абзацев, выбрать формат и даже сгенерировать псевдорусский текст для более реалистичных макетов.

Для работы с текстами в вёрстке пригодятся инструменты для подсчёта символов и слов — Счётчик символов поможет оценить объём контента, а Обратный порядок слов или Обратный порядок текста — проверить, как интерфейс работает с нестандартными данными.