Служебная страница. Показывает, как тема wpz отрисовывает блоки ядра. Дизайна здесь нет намеренно: всё, что видно, — это поведение темы по умолчанию.

Заголовок первого уровня

h1 — самый крупный уровень. На обычных страницах его занимает заголовок записи, в тексте он почти не нужен.

Заголовок второго уровня

h2 — основной разделитель длинного текста. Им размечают главы.

Заголовок третьего уровня

h3 — подраздел внутри главы.

Заголовок четвёртого уровня

h4 — мелкий подзаголовок, часто уже одного размера с текстом.

Заголовок пятого уровня

h5 — редкий уровень, нужен в документации и таблицах характеристик.

Заголовок шестого уровня

h6 — самый мелкий. Если он понадобился, скорее всего структура текста слишком глубокая.

Обычный текст

Основной текст набран тем размером, который тема считает базовым. Межстрочный интервал задан в файле style.css и равен 1.6 — этого хватает, чтобы длинный абзац читался без напряжения. Строки выключены влево, правый край остаётся рваным. Так сделано намеренно: выключка по ширине в вебе рвёт строки дырами между словами.

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

Здесь собрано полужирное начертание, затем курсив, затем обычная ссылка внутри строки и наконец ~~зачёркнутый текст~~. По этой строке видно, различаются ли начертания вариативного шрифта и заметна ли ссылка среди обычного текста.

Списки

Маркированный список, первый пункт.
Второй пункт, подлиннее: нужен, чтобы увидеть, как переносится строка внутри пункта и куда встаёт вторая строка относительно маркера.
Третий пункт.

Нумерованный список, первый пункт.
Второй пункт.
Третий пункт, тоже с переносом строки, чтобы проверить выравнивание текста под номером.

Цитата

Хорошая типографика незаметна. Её замечают только тогда, когда она сделана плохо: когда строки слипаются, заголовок висит оторванным от своего текста, а ссылку невозможно отличить от обычного слова.
Правило, проверяемое этой страницей

Таблица

Элемент	Где задаётся	Значение
Ширина текста	theme.json, layout	1060px
Широкие блоки	theme.json, layout	1200px
Межстрочный интервал	style.css, раздел 2	1.6
Шрифт всего сайта	theme.json, styles	Montserrat

Кнопки

Обычная кнопка

Вторичная кнопка

Изображение

Серый прямоугольник с надписью wpz — заглушка для проверки блока изображения — Подпись к изображению. По ней проверяют размер и цвет мелкого текста под картинкой.

Две колонки

Левая колонка. Текста здесь ровно столько, чтобы получилось несколько строк и стало видно, как ведёт себя вёрстка при переносе.

Правая колонка. На узком экране колонки складываются одна под другую — это поведение ядра, отдельно его настраивать не нужно.

Три колонки

Первая из трёх. Проверяем, что зазор между колонками одинаковый.

Вторая из трёх. Текст разной длины покажет, выравниваются ли колонки по верху.

Третья из трёх. Текст здесь такой же длины, как в соседних, — иначе короткая колонка выглядит смещённой, хотя ширина у всех одна.

Группы с фоном

Группа с фоном цвета surface. Это светло-серая подложка из палитры темы — ей выделяют карточки, врезки и блоки примечаний. Текст внутри остаётся основного цвета.

Тёмная секция во всю ширину

Фон цвета contrast, текст цвета inverse, всё по центру. Фон уходит в края экрана, а текст остаётся внутри колонки — так работает useRootPaddingAwareAlignments.

Эта группа тоже во всю ширину, но раскладка у неё «поток», а не «с ограничением». Разница видна сразу: текст растягивается на весь экран и не собирается в колонку по центру. Так делают полосы с таблицами и широкими схемами, которым тесно в 1060 пикселях.

Код

// Сменить шрифт всего сайта — одна строка в theme.json
"styles": {
    "typography": {
        "fontFamily": "var:preset|font-family|main"
    }
}

Проверка типографики wpz