Тест типографики

Заголовок первым в контенте

Абзац сразу после первого заголовка.

Прямой порядок без текста

h1 первым

h2 следом

h3 следом

Обратный порядок без текста

h3 первым

h2 следом

h1 следом

Прямой порядок с абзацами

h1 с абзацем

Короткий абзац после h1.

h2 с абзацем

Короткий абзац после h2.

h3 с абзацем

Короткий абзац после h3.

Обратный порядок с абзацами

h3 с абзацем

Короткий абзац после h3.

h2 с абзацем

Короткий абзац после h2.

h1 с абзацем

Короткий абзац после h1.

h4 выключен и выводится абзацем

Абзацы

Одна строка.

Две строки: короткий абзац, который чуть-чуть длиннее одной строки, чтобы перенестись на вторую строку при ширине колонки.

Очень длинный абзац, который занимает много строк и нужен, чтобы проверить, что ритм межстрочного интервала держится от первой до последней строки, а inline-элементы вроде жирного, курсива, inline code и ссылки не раздвигают строки. Очень длинный абзац, который занимает много строк и нужен, чтобы проверить, что ритм межстрочного интервала держится от первой до последней строки, а inline-элементы вроде жирного, курсива, inline code и ссылки не раздвигают строки. Очень длинный абзац, который занимает много строк и нужен, чтобы проверить, что ритм межстрочного интервала держится от первой до последней строки, а inline-элементы вроде жирного, курсива, inline code и ссылки не раздвигают строки. Очень длинный абзац, который занимает много строк и нужен, чтобы проверить, что ритм межстрочного интервала держится от первой до последней строки, а inline-элементы вроде жирного, курсива, inline code и ссылки не раздвигают строки.

Длинное слово без пробелов: Нейрокомпьютерноинтерфейсоэлектроэнцефалографическийпрограммноаппаратныйкомплексразработкиинтерфейсов и ещё Pneumonoultramicroscopicsilicovolcanoconiosis.

URL без пробелов: https://example.com/very/long/path/that/never/breaks/and/keeps/going/forever/and/ever/index.html?utm_source=portfolio&utm_medium=case&utm_campaign=typography-test-stand

Смесь кириллицы и latin: Figma, Framer, Principle и «кавычки-ёлочки», цифры 0123456789, дроби 1/2 и 3/4, 40% удобнее, размер 15/24 px, дата 2026–2027, длинное тире — вот так, и дефис-минус - вот так, многоточие… и эмодзи 🚀✨🙂 прямо в строке, потом ещё 👩‍💻 и флаг 🇧🇾 для проверки высоты строки.

Двойные пробелы внутри строки и конец с жёстким переносом
вторая строка после переноса.

Блок за блоком и перенос внутри блока

Первый блок: обычный абзац.

Второй блок, первая строка после пустой строки.

Вторая строка того же блока.

Третий блок: обычный абзац.

Четвёртый блок, первая строка после одиночного перевода строки. Вторая строка того же блока.

Пятый блок: обычный абзац.

Inline-элементы

Обычный текст, жирный, курсив, жирный курсив, зачёркнутый, inline code, ссылка, ссылка с кодом и жирный с кодом и ссылкой подряд, чтобы строка не росла.

Очень длинный inline-code-без-пробелов-который-может-вылезти-за-колонку-если-не-перенести-его-правильно-через-overflow-wrap в середине строки.

Списки

• Пункт в одну строку
• Пункт, который переносится на несколько строк, потому что он достаточно длинный, чтобы не поместиться в ширину колонки и показать межстрочный интервал внутри пункта
• Пункт с жирным и кодом
  • Вложенный пункт
  • Вложенный пункт подлиннее, который тоже переносится на вторую строку внутри колонки
    • Третий уровень
• Последний пункт

1. Нумерованный первый
2. Нумерованный второй, достаточно длинный, чтобы перенестись на следующую строку и проверить отступ номера
   1. Вложенный нумерованный
   2. Ещё один
3. Нумерованный третий

• Пункт с абзацами внутри
  Второй абзац внутри пункта.
  Третий абзац внутри пункта подлиннее, чтобы он перенёсся на несколько строк и показал ритм внутри свободного списка.
• Следующий пункт свободного списка

Абзац сразу после списка.

Цитаты и код

Цитата в одну строку.

Цитата подлиннее, которая переносится на несколько строк, чтобы проверить отступы внутри цитаты и расстояние до соседних блоков.

Второй абзац цитаты.

Абзац между цитатой и блоком кода.

const rhythm = 8;
const body = { size: 15, line: 24 };
function optical(gap: number, b: number, t: number) {
  return gap - b - t; // margin = просвет минус поля бокса
}

Блок кода подряд с блоком кода:

.case h3 { font-weight: 400; }

Блок без языка и с очень длинной строкой, которая должна прокручиваться по горизонтали, а не ломать колонку: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Таблицы

Абзац после таблицы.

Изображения

Абзац после картинки.

Абзац перед картинкой.

Абзац после второй картинки.

Две картинки в сетке:

Абзац после двух картинок.

Подпись к изображению курсивом

Разделители

Абзац перед разделителем.

Абзац после разделителя.

Заголовок после разделителя

Последний абзац перед последним заголовком.

Последний заголовок без текста