Так что же такое Lorem Ipsum? Это блок намеренно бессмысленной, перемешанной псевдолатыни, который дизайнеры вставляют в макет до того, как появятся настоящие слова. Он заполняет пространство текстоподобным текстом, чтобы рецензенты оценивали типографику, отступы и структуру, а не втягивались в чтение и правку. Читается как нечто неопределённое, и в этом смысл. Нужен блок прямо сейчас? Генератор Lorem Ipsum создаёт его в браузере одним кликом.
Но «что это такое» — лишь начало. Дальше речь о том, откуда на самом деле взялся текст (реальный отрывок из Цицерона (Cicero) 45 года до н. э.), почему он работает лучше, чем «asdf asdf», как сгенерировать его почти где угодно — в редакторе кода, в Word, через faker-библиотеку, в Figma и даже в чистом CSS, — какие есть альтернативы и о какой ловушке умалчивает большинство статей: Lorem Ipsum незаметно обманывает вас, как только вашему макету приходится работать с языком за пределами западноевропейских.
Что такое Lorem Ipsum?
Lorem Ipsum — это текст-заполнитель: перемешанные, бессмысленные латиноподобные слова, которыми заполняют дизайн до того, как написан настоящий контент. Это не та бессмыслица, которую набирают, лишь бы заполнить поле. У него намеренная, естественная на вид форма — разная длина слов, варьирующаяся длина предложений, случайные запятые, — поэтому абзац такого текста переносится по строкам и набирается во многом так же, как настоящая проза. В этом и ценность: глаз видит правдоподобный текстовый блок и оценивает макет, а не смысл.
Строка, которую все узнают, — это каноническое начало: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Многие считают, что это настоящая латынь, но не совсем. Первое слово выдаёт всё с головой: латинского слова lorem не существует. Это хвост от dolorem («боль») с отрезанным начальным слогом. То есть первое слово самого знаменитого текста-заполнителя в мире — обломок более длинного слова о страдании. Вот и всё значение lorem ipsum: испорченная латынь, намеренно сломанная, чтобы никто не принял её за контент.
Эта намеренная сломанность важна. Если бы заполнитель читался как настоящий, связный язык, рецензенты начали бы его читать, потом править, и обзор дизайна превратился бы в обзор текста. Lorem Ipsum держится в удачной середине: достаточно структурирован, чтобы вести себя на странице как проза, и достаточно бессмыслен, чтобы никому не захотелось его читать.
Откуда взялся Lorem Ipsum?
История происхождения lorem ipsum конкретнее, чем принято думать, а короткая версия, гуляющая по сети («это просто случайная латынь»), неверна. Текст восходит к реальному классическому источнику, был искажён, а затем на двух волнах дизайнерских технологий разошёлся повсюду.
«De Finibus» Цицерона (45 год до н. э.)
Источник — De Finibus Bonorum et Malorum («О пределах добра и зла»), труд по моральной философии, который Цицерон написал в 45 году до н. э. Разделы 1.10.32 и 1.10.33 рассуждают об удовольствии и боли, и один отрывок начинается словами Neque porro quisquam est qui dolorem ipsum quia dolor sit amet… («Нет никого, кто любил бы саму боль за то, что она боль…»). Сократите dolorem до lorem, перемешайте следующие слова, что-то выбросьте, что-то добавьте — и получится тот самый заполнитель. Знаменитое начало — это искажение реального предложения о том, почему никто не стремится к боли ради неё самой.
То есть Lorem Ipsum — не выдуманная бессмыслица. Это философский текст возрастом две тысячи лет, у которого аккуратно удалили смысл.
Letraset и 1960-е
Латинские отрывки не становятся отраслевым стандартом сами по себе. Скачок произошёл в 1960-х благодаря Letraset — компании, выпускавшей листы для сухого переноса букв, то самое «притираемое» наборное письмо, которым графические дизайнеры пользовались до цифрового шрифта. Letraset печатала отрывки Lorem Ipsum на своих листах и в образцах продукции, и у работающих дизайнеров появился готовый запас нейтрального заполнителя. К этому тексту тянулись, когда нужны были слова, которые ещё не были словами.
PageMaker и настольные издательские системы (1980-е)
Второй волной стало программное обеспечение. В 1980-х компания Aldus выпустила PageMaker — приложение, по сути создавшее настольные издательские системы, — и встроила в него Lorem Ipsum как образец текста. Заполнитель перешёл с печатных листов-образцов на экран и в рабочий процесс каждого, кто верстал страницу на компьютере. Оттуда он попал в приложения для вёрстки, веб-шаблоны и современные инструменты дизайна. Сегодня InDesign, Figma и прочие вставляют Lorem Ipsum в рамку одной командой, и эта цепочка тянется прямиком к римлянину, рассуждавшему о боли.
Зачем дизайнеры и разработчики используют текст-заполнитель
Аргумент в пользу текста-заполнителя сводится к одной идее: отделить задачу дизайна от задачи контента, чтобы решать их по очереди. Когда вы определяете ширину колонки, длину строки, интерлиньяж и то, где текст карточки переносится на третью строку, настоящий текст отвлекает. Рецензент читает заголовок, не соглашается с формулировкой — и вот вы уже спорите о фразе вместо сетки.
Так почему дизайнеры используют именно Lorem Ipsum, а не любой заполнитель? Потому что важна его статистическая форма. У слов реалистичное распределение длин, а предложения варьируются так же, как настоящие. Значит, абзац Lorem Ipsum переносится по строкам и набирает реалистичное число строк. Макет, который вы утверждаете с Lorem внутри, близок к тому, что вы получите с настоящим текстом такой же длины.
Сравните это с ленивыми альтернативами. Наберите text text text text — и каждое слово одной длины, поэтому переносы строк ложатся в однообразный, фальшивый узор, скрывающий то, как потечёт настоящий текст. Набейте asdfasdf jkl;jkl; — и получите неестественные очертания букв и никаких границ слов. И то и другое искажает то, что вы пытаетесь оценить. Lorem Ipsum выглядит как язык, не будучи языком, и это ровно то свойство, которое вам нужно.
Есть и социальная польза. Lorem Ipsum — узнаваемый сигнал. Когда клиент или коллега видит Lorem ipsum dolor sit amet, он читает это как «намеренный заполнитель, настоящий текст ещё впереди», не паникует, что страница сломана, и не начинает вычитывать перемешанную латынь. На обзоре это общее понимание стоит многого.
Как сгенерировать Lorem Ipsum где угодно
Большинство статей на эту тему останавливаются на «скопируйте с сайта». Это недооценивает, в скольких местах генерация Lorem Ipsum реально применима. Вот набор вариантов — от вкладки браузера до сборочного скрипта.
Онлайн-генератор
Самый быстрый путь с максимумом контроля — специализированный веб-инструмент. Генератор Lorem Ipsum открывается с тремя абзацами, уже готовыми в поле, так что заполнитель можно скопировать в тот же миг, когда загрузится страница. Дальше выбираете единицу — абзацы, предложения, слова, элементы списка или точное число байт, — задаёте количество и формат вывода: обычный текст, HTML с обёртками <p> и <ul><li>, Markdown или массив JSON. Единица «байт» здесь выделяется: заполните ровно 280 байт для поля твита или 255 для столбца varchar(255), обрезав до последнего символа.
В вашем редакторе: VS Code и Emmet
Если вы пишете HTML, генератор у вас уже встроен. Emmet — поставляется вместе с VS Code и доступен в большинстве редакторов — разворачивает аббревиатуру lorem в заполнитель, когда вы нажимаете Tab внутри HTML-файла. Добавьте число, чтобы задать количество слов:
lorem
<!-- разворачивается примерно в 30 слов Lorem Ipsum -->
lorem30
<!-- ровно 30 слов -->
p*3>lorem20
<!-- три элемента <p>, в каждом по 20 слов Lorem Ipsum -->Последний приём стоит запомнить: комбинируйте lorem с умножением и вложенностью Emmet — и получаете полностью размеченный заполнитель, не отрывая рук от клавиатуры. IDE от JetBrains (WebStorm, IntelliJ) идут с той же поддержкой Emmet, так что аббревиатуры работают и там.
В Microsoft Word
В Word есть скрытый генератор, появившийся раньше веба. Наберите это на пустой строке и нажмите Enter:
=lorem()Это вставит несколько абзацев Lorem Ipsum. Количеством можно управлять двумя аргументами — абзацы и предложения на абзац:
=lorem(3,5)Это создаёт 3 абзаца по 5 предложений каждый. Если нужен настоящий, читаемый английский заполнитель (реальный текст справки Word, а не латынь), используйте =rand() и =rand(3,5) точно так же. Удобно, когда что-то демонстрируешь нетехнической аудитории, которую латынь только запутает.
В коде: faker.js
Когда заполнитель нужен внутри программы — для наполнения базы данных, создания тестовых фикстур, имитации API, — faker-библиотека лучше копипасты. Современный поддерживаемый пакет здесь — @faker-js/faker:
import { faker } from '@faker-js/faker';
// Одно предложение, один абзац, три абзаца
const sentence = faker.lorem.sentence();
const paragraph = faker.lorem.paragraph();
const article = faker.lorem.paragraphs(3);
// Воспроизводимый вывод: сначала задайте seed генератора
faker.seed(42);
const fixed = faker.lorem.paragraphs(3); // одинаковый текст при каждом запускеДля тестов важен именно seed. faker.seed(42) делает вывод детерминированным, так что снапшот-тест не упадёт случайно только из-за того, что заполнитель изменился между запусками. А поскольку faker создаёт ещё и имена, адреса электронной почты, адреса и структурированные записи, можно наполнить реалистичную фикстуру и сразу записать её на диск. Если вы сохраняете эту фикстуру как JSON, пропустите её через Форматировщик JSON, чтобы зафиксированный в репозитории файл читался в diff-ах.
В инструментах дизайна: Figma и InDesign
Дизайнерам редко нужна отдельная вкладка. В Figma плагин «Lorem ipsum» (и Content Reel) по команде заполняет выбранный текстовый слой текстом-заполнителем. В InDesign выделите текстовую рамку и выберите Type → Fill with Placeholder Text, чтобы влить Lorem Ipsum во всю историю, — удобно для оценки многоколоночного гранки до того, как поступит рукопись.
В CSS
Для чисто визуального прототипирования можно вставить заполнитель через генерируемое содержимое, не меняя разметку:
.skeleton::after {
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
}Используйте это умеренно. Содержимое, заданное в CSS, не является настоящим текстом документа, программы чтения с экрана обрабатывают его непоследовательно, и о нём легко забыть. Для одноразового прототипа или эксперимента со стилями оно годится, но в настоящем шаблоне контент-заполнитель им не заменить.
Варианты и альтернативы Lorem Ipsum
Классический Lorem Ipsum — это вариант по умолчанию, но не единственный, а иногда и неправильный. Альтернативы lorem ipsum делятся на три группы, каждая под свою задачу.
Тематический Ipsum (Bacon, Hipster, Cat)
Тематические генераторы заменяют латынь шуточными словарями: Bacon Ipsum («bacon ipsum dolor amet ribeye…»), Hipster Ipsum, Cat Ipsum и десятки других. Полезны они в одной ситуации — на неформальном внутреннем обзоре, где узнаваемый, слегка забавный заполнитель удерживает внимание команды и сигналит «это точно не финал». Риск противоположен сильной стороне Lorem: тематический заполнитель читаем, поэтому люди начинают его читать, а в работе с клиентом он может показаться несерьёзным. Берите его для настроения, а не для решений по макету.
Фейкеры реальных данных (faker, Mockaroo)
Когда заполнителю нужна структура, а не проза, обратитесь к фейкеру реальных данных. Lorem Ipsum даёт блоки фальшивого текста; такие инструменты, как @faker-js/faker и Mockaroo, дают фальшивые записи — имена, адреса электронной почты, цены, даты, адреса, — по форме совпадающие с вашей настоящей моделью данных. Для наполнения базы данных, создания макета API или заполнения пользовательской таблицы в прототипе структурированные фейковые данные намного честнее десяти одинаковых абзацев латыни. Строка пользователя с правдоподобным именем и почтой расскажет о вашем макете больше, чем Lorem ipsum dolor.
Дизайн от контента
Самая острая критика Lorem Ipsum исходит из лагеря «сначала контент», и к ней стоит отнестись серьёзно. Аргумент таков: у настоящего контента есть длина, тон, граничные случаи и неудобные истины, которые текст-заполнитель сглаживает. Таблица цен выглядит аккуратно с тремя опрятными блурбами Lorem и разваливается, когда настоящее описание одного тарифа оказывается втрое длиннее остальных. Карточка профиля, построенная вокруг Lorem ipsum dolor sit amet, ломается, когда у настоящего пользователя имя из 40 символов и нет биографии. Дизайн с реалистичным — а в идеале настоящим — контентом выявляет такое рано, пока исправить дёшево. Практический вывод не «никогда не используйте Lorem», а «используйте Lorem, чтобы вчерне набросать структуру, а затем проверьте на прочность настоящим контентом, прежде чем фиксировать».
Ловушка i18n с заполнителем
Вот та часть, которую большинство гидов пропускают, и именно она вероятнее всего вас подведёт. Lorem Ipsum — это латынь. Длина её слов, частота букв и интервалы приближают западноевропейские языки — английский, французский, испанский и их родню. Как только вашему макету приходится отрисовывать язык за пределами этой семьи, Lorem Ipsum перестаёт предсказывать реальность и начинает вас обманывать.
Чаще всего отказ происходит в трёх случаях:
- CJK-письменности (китайская, японская, корейская). В этих языках часто нет пробелов между словами, правила переноса строк совершенно иные, а каждый иероглиф занимает примерно квадратную ячейку фиксированной ширины. Колонка, сбалансированная под Lorem Ipsum, может переноситься совсем иначе — и с другим числом строк, — когда её заполняют китайским. Плотность символов в строке на латынь не похожа.
- RTL-письменности (арабская, иврит). Они читаются справа налево, и это переворачивает всё направление чтения, выравнивание и положение элементов управления интерфейса. О том, корректно ли зеркалится ваш макет, Lorem Ipsum не подаст ни малейшего сигнала. Тестировать нужно настоящим RTL-текстом-образцом.
- Немецкий и другие языки, богатые композитами. Немецкий строит длинные сложные существительные (Geschwindigkeitsbegrenzung, Rechtsschutzversicherung), которые переносятся не так, как аккуратные слова Lorem из 5–8 букв. Узкая колонка, где Lorem Ipsum помещается удобно, может переполниться или дать уродливые переносы, как только в неё попадёт настоящее немецкое слово.
Решение простое: не доверяйте Lorem Ipsum проверку локализованного макета. Заполните каждую локаль текстом-образцом на том самом языке и проверьте переносы, число строк и выравнивание элементов управления по-настоящему. Когда вы подгоняете слот под реальное ограничение — мета-описание, твит, SMS, — держитесь фактического бюджета символов; наш гид по лимитам символов на разных платформах раскладывает цифры по полочкам, а Счётчик слов позволяет убедиться, что образец укладывается в диапазон, прежде чем строить вокруг него дизайн.
Здесь же кусается различие между байтами и символами, что ведёт прямиком к разделу об ошибках.
Частые ошибки и когда НЕ нужно использовать Lorem Ipsum
Lorem Ipsum — инструмент разработки, а не материал для отгрузки. Большинство проблем возникает оттого, что об этой грани забывают. Вот от чего стоит подстраховаться.
Отгрузка в продакшен. Это главное. Живая, индексируемая страница, где всё ещё остался Lorem Ipsum, не имеет настоящего контента для ранжирования, выглядит сломанной для любого посетителя, который её найдёт, и может быть помечена как тонкая или незавершённая. Намеренно это почти никогда не происходит — это staging-шаблон, ушедший в прод, забытый футер, дефолт CMS, который никто не заменил. Защита механическая: перед каждым деплоем ищите по всему проекту (без учёта регистра) lorem ipsum и убеждайтесь, что совпадений ноль. Поставьте это в предзапусковый чек-лист рядом с проверкой битых ссылок.
Забытая доступность. Программа чтения с экрана не пропускает Lorem Ipsum — она зачитывает перемешанную латынь вслух, слово за словом, тому, кто ею пользуется. На демо это сбивает с толку, а в продакшене заполнитель становится по-настоящему враждебным. Если вы показываете работу человеку, который пользуется вспомогательными технологиями, настоящий или тематический-но-читаемый заполнитель добрее стены латыни.
Несоответствие объёма слоту. Заполнить однострочный заголовок тремя абзацами или тело длинной статьи одним предложением — значит тестировать макет на неправильной длине. На вид всё нормально, но ломается, когда приходит настоящий контент. Подгоняйте единицу и объём под то, что слот реально вместит, — шесть слов для заголовка, а не шестьдесят.
Предположение, что байты всегда равны символам. Классический Lorem Ipsum — чистый ASCII, поэтому один символ равен ровно одному байту, и легко поверить, что это универсальное правило. Это не так. Подставьте букву с диакритикой, эмодзи или любую нелатинскую письменность — и один символ может занять два, три или четыре байта. Байтовый столбец varchar(255), который удобно вмещает 255 ASCII-символов Lorem, переполняется, когда настоящий пользователь набирает 255 символов café 北京 😀. Тестируйте байтовые лимиты тем набором символов, который поле будет реально хранить, — гид по лимитам символов на разных платформах подробно разбирает, где именно это людей подводит. (Та же путаница байтов и символов всплывает при очистке идентификаторов; гид по соглашениям об именовании охватывает смежную тему для ключей и slug-ов.)
Отношение к сгенерированному тексту как к сохранённому ресурсу. Большинство генераторов ничего не хранят — обновите страницу, и вывод пропал. Если конкретный блок понадобится снова, скопируйте или скачайте его. Для повторяемых тестовых фикстур сохраните вывод в формате JSON в репозиторий, чтобы заполнитель был под контролем версий рядом с зависящими от него тестами, а не генерировался заново (и по-другому) при каждом запуске.
Часто задаваемые вопросы
Что означает Lorem Ipsum?
Lorem Ipsum намеренно не означает ничего — это перемешанная, испорченная латынь без связного смысла. Она восходит к отрывку Цицерона о боли и удовольствии, но слова обрезали, переставили и изменили, пока они не перестали складываться в читаемую латынь. Первое слово, lorem, — обломок dolorem («боль») с удалённым начальным слогом.
Lorem Ipsum — это настоящая латынь?
Нет. Он основан на настоящей латыни — отрывке из De Finibus Bonorum et Malorum Цицерона, — но намеренно искажён. Слова усечены, переставлены, выброшены и придуманы, поэтому он читается как бессмыслица с латинским привкусом, а не как переводимый текст. Само слово Lorem не является настоящим латинским словом.
Откуда взялся Lorem Ipsum?
Lorem Ipsum происходит из текста Цицерона 45 года до н. э. De Finibus Bonorum et Malorum. В дизайн он попал через компанию Letraset, которая печатала его на листах для сухого переноса букв в 1960-х, и стал общеупотребимым в 1980-х, когда Aldus встроила его как образец текста в PageMaker, первое приложение для настольных издательских систем.
Почему дизайнеры используют Lorem Ipsum вместо настоящего текста?
Дизайнеры используют Lorem Ipsum, чтобы рецензенты оценивали макет, типографику и отступы, а не читали и правили текст. Реалистичная длина его слов и предложений заставляет его переноситься и разбиваться как настоящая проза, в отличие от text text text или asdf, и при этом он остаётся достаточно бессмысленным, чтобы никому не захотелось его читать.
Как сгенерировать Lorem Ipsum в VS Code или Word?
В VS Code наберите Emmet-аббревиатуру lorem (или lorem30 для точного числа слов) в HTML-файле и нажмите Tab. В Word наберите =lorem() на пустой строке и нажмите Enter или =lorem(3,5) для 3 абзацев по 5 предложений каждый. И то и другое работает офлайн без плагинов.
Какие есть лучшие альтернативы Lorem Ipsum?
Основные альтернативы — это тематические генераторы (Bacon, Hipster, Cat Ipsum) для неформальных обзоров, фейкеры реальных данных вроде @faker-js/faker или Mockaroo, когда вам нужны структурированные фейковые записи вместо прозы, и сам настоящий контент, когда вы хотите проверить на прочность, как ведут себя в макете реальная длина и тон.
Плохо ли для SEO оставлять Lorem Ipsum на живой странице?
Да. Живая, индексируемая страница, полная Lorem Ipsum, не имеет настоящего контента для ранжирования и может быть сочтена тонкой или незавершённой, расходуя краулинговый бюджет и сбивая посетителей с толку. Прямого штрафа за саму латынь нет, но и результатов такая страница не даст. Ищите по проекту lorem ipsum перед каждым деплоем.
Работает ли Lorem Ipsum для неанглийских или CJK-макетов?
Не надёжно. Lorem Ipsum приближает только западноевропейские языки. CJK-письменности переносятся и расставляют интервалы совсем иначе, RTL-языки вроде арабского переворачивают всё направление, а немецкие композиты переполняют узкие колонки. Проверяйте локализованные макеты настоящим текстом-образцом на целевом языке, а не Lorem.
Подведём итог
Lorem Ipsum — это отрывок Цицерона возрастом две тысячи лет с вырезанным смыслом, который сохранили живым Letraset и PageMaker, а теперь он встроен в каждый инструмент дизайна, к которому вы прикасаетесь. Своё место он заслужил тем, что выглядит как язык, не будучи языком: для оценки макета годится, а как отгрузочный контент бесполезен. Берите его, чтобы вчерне набросать структуру, генерируйте там, где вам случилось работать, а затем заменяйте настоящим, корректным для локали контентом, прежде чем что-то уйдёт в продакшен. А когда блок нужен прямо сейчас, Генератор Lorem Ipsum уже держит один наготове.