Тест по типографике для веб-дизайнеров
[ создаем проекты, где важен смысл ]
Тест по типографике для веб-дизайнеров (15 вопросов)
ТЕСТ ПО ТИПОГРАФИКЕ
Типографика — это не про «красивые шрифты». Это про иерархию, ритм, читаемость и решения, которые либо работают, либо нет.
Тест проверяет базовые принципы — от межстрочных интервалов до сочетания гарнитур. Подойдёт и тем, кто только входит в профессию, и тем, кто хочет себя проверить.
Тест проверяет базовые принципы — от межстрочных интервалов до сочетания гарнитур. Подойдёт и тем, кто только входит в профессию, и тем, кто хочет себя проверить.
1. Выберите удачный вариант:
Оптимальный межстрочный для основного текста — 1.4−1.6 от размера шрифта. Строки не слипаются, глаз легко переходит на следующую — читать комфортно.
Слишком тесный межстрочный делает текст монолитным. Строки визуально сливаются, читатель устаёт быстрее — даже если не осознаёт почему.
2. Выберите удачный вариант:
Без затемнения светлые участки фото делают текст нечитаемым. Красивая фотография не должна побеждать читаемость.
Тёмный оверлей создаёт достаточный контраст между фоном и текстом. Правило простое: если текст приходится «искать» на фоне — контраста недостаточно.
3. Выберите удачный вариант:
H2 крупнее H3 — сразу понятно, что главный раздел, а что подраздел. Пользователь сканирует страницу по заголовкам и мгновенно ориентируется в структуре.
Когда H2 и H3 одного размера, иерархия исчезает. Непонятно, что важнее — приходится читать всё подряд, чтобы разобраться в структуре.
4. Выберите удачный вариант:
Боковые отступы дают тексту воздух и делают блок аккуратным. Текст не конкурирует с краями — читать комфортно.
Без отступов текст прилипает к границам блока. Визуально это выглядит небрежно и создаёт ощущение тесноты — даже если межстрочный нормальный.
5. Выберите удачный вариант:
Избыточный трекинг разрушает слово — буквы воспринимаются отдельно, глаз вынужден собирать их в слово вместо того, чтобы читать. Заголовок теряет выразительность и читаемость.
Нормальный трекинг сохраняет слово как единицу — заголовок читается быстро и уверенно. Небольшое расширение допустимо, но буквы не должны «разлетаться».
6. Выберите удачный вариант:
Мелкий текст заставляет напрягаться и приближаться к экрану. Даже если содержание интересное — некомфортный размер шрифта отталкивает от чтения.
Оптимальный размер основного текста для веба — 15−17px. Читается без напряжения, глаза не устают даже при длительном чтении.
7. Выберите удачный вариант:
Засечный шрифт в основном тексте на экране читается хуже — засечки при небольшом размере начинают «шуметь» и снижают комфорт чтения. Для заголовков он уместен, для длинных абзацев — нет.
Гротескные шрифты (без засечек) лучше читаются на экране в небольших размерах — буквы чёткие, строки не сливаются. Засечный шрифт хорошо работает в заголовках, но в основном тексте на экране быстро утомляет.
8. Выберите удачный вариант:
Слишком большой межстрочный в заголовке разрывает фразу на части. Строки визуально отваливаются друг от друга — заголовок теряет целостность и выглядит как два отдельных куска текста.
В заголовках межстрочный должен быть плотнее, чем в основном тексте — около 1.1−1.2. Строки держатся вместе, заголовок воспринимается как единая фраза.
9. Выберите удачный вариант:
Светлый текст на светло-сером фоне — недостаточный контраст. Глаз вынужден напрягаться, чтобы различить буквы. По стандартам доступности такое сочетание не проходит минимальный порог.
Тёмный фон со светлым текстом даёт чёткий контраст — читать комфортно. Главное правило: текст должен уверенно отделяться от фона, без усилий со стороны читателя.
10. Выберите удачный вариант:
Жирное начертание в заголовке создаёт контраст с обычным текстом — иерархия считывается сразу. Основной текст остаётся лёгким и не давит.
Когда и заголовок, и весь текст жирные — контраст исчезает. Акцента нет, страница визуально перегружена, читать тяжело.
11. Выберите удачный вариант:
Маленькие отступы между блоками смешивают содержимое в единую массу. Непонятно, к какому заголовку относится текст — приходится читать внимательно, чтобы разобраться в структуре.
Достаточный отступ между блоками разделяет контент на логические части. Сразу понятно, где заканчивается один раздел и начинается следующий — структура страницы считывается без усилий.
12. Выберите удачный вариант:
Верхний регистр в заголовке — допустимый приём для акцента и стиля. Основной текст остаётся обычным — читается естественно и без усилий.
Основной текст, набранный заглавными буквами, резко снижает читаемость. Мозг распознаёт слова по их форме — у обычных букв она разнообразная, у заглавных все слова одинаковой высоты и сливаются в монотонную полосу.
13. Выберите удачный вариант:
Заметная разница в размере между заголовком и основным текстом сразу даёт понять, что важнее. Пользователь сканирует страницу по заголовкам — и быстро находит нужный раздел.
Когда заголовок лишь немного крупнее текста, он не выполняет свою роль. Взгляд не цепляется за него как за ориентир — структура страницы не читается с первого взгляда.
14. Выберите удачный вариант:
Одно слово на последней строке абзаца — это висячая строка. Визуально абзац выглядит незавершённым и неряшливым, хотя текст полный. В профессиональной вёрстке это считается ошибкой.
Абзац без висячей строки выглядит завершённым и аккуратным. Одно из признаков внимательной работы с текстом — когда последняя строка не состоит из одного одинокого слова.
15. Выберите удачный вариант:
Яркий насыщенный паттерн без затемнения конкурирует с текстом — буквы теряются в фоне. Чем активнее текстура, тем сильнее нужно её приглушать под текстом.
Тёмный оверлей приглушает активный фон и создаёт достаточный контраст для текста. Фон остаётся декоративным, но больше не мешает читать.
Если у вас есть какие-то вопросы
В нашей студии вы можете пройти индивидуальное или групповое обучение по веб-дизайну, где мы подберем программу под ваши задачи. Также скоро у нас запустятся онлайн-курсы разной сложности: для новичков, желающих освоить базовые навыки, и для опытных дизайнеров, стремящихся совершенствоваться.
