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