Тренажер по верстке текстов в веб-дизайне

Тестирование
Проверьте, насколько хорошо вы знаете базовые правила при работе с текстом в вебе
Начать тест
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
В варианте Б увеличенный трекинг. Трекинг — расстояние между знаками. При верстке текста трекинг лучше вообще не трогать, чтобы не изуродовать и не «поломать» шрифт. Грубая ошибка новичков веб-дизайнеров — разрядка строчных букв. Такой текст, как в этом примере, становится тяжелым для прочтения.
В этом варианте увеличенный трекинг. Трекинг — расстояние между знаками. При верстке текста трекинг лучше вообще не трогать, чтобы не изуродовать и не «поломать» шрифт. Грубая ошибка новичков веб-дизайнеров — разрядка строчных букв. Такой текст, как в этом примере, становится тяжелым для прочтения.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
Если в одну строку помещается только 1-2 слова, то контейнер для текста слишком узкий. Такой текст тяжелее прочесть, так как придется слишком часто переводить взгляд на новую строчку.
Если в одну строку помещается только 1-2 слова, то контейнер для текста слишком узкий. Такой текст тяжелее прочесть, так как придется слишком часто переводить взгляд на новую строчку.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
Выключку по центру использовать можно только там, где она уместна. Например, в заголовках или в небольшом тексте, не больше 4-5 строчек. В иных случаях лучше использовать выключку по левому краю.
Выключку по центру использовать можно только там, где она уместна. Например, в заголовках или в небольшом тексте, не больше 4-5 строчек. В иных случаях лучше использовать выключку по левому краю.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
Выделить более значимый текст можно не только с помощью размера, но и с помощью цвета. Например, заголовок сделать более насыщенным, а наборный текст тусклее. Но меру тоже нужно знать, ведь текст в любом случае должен остаться хорошо видимым. Если сомневаетесь на счет контрастности цвета текста и фона, воспользуйтесь любым онлайн анализатором контрастности цветов.
Выделить более значимый текст можно не только с помощью размера, но и с помощью цвета. Например, заголовок сделать более насыщенным, а наборный текст тусклее. Но меру тоже нужно знать, ведь текст в любом случае должен остаться хорошо видимым. Если сомневаетесь на счет контрастности цвета текста и фона, воспользуйтесь любым онлайн анализатором контрастности цветов.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
В варианте «А» явно переборщили с интерлиньяжем. Интерлиньяж — межстрочное расстояние и оптимальный показатель для наборного текста 120-160% от размера шрифта. Какой именно размер выбрать, смотрим по конкретной ситуации, все зависит от самого шрифта, его размера и ширины контейнера для текста.
В варианте «А» явно переборщили с интерлиньяжем. Интерлиньяж — межстрочное расстояние и оптимальный показатель для наборного текста 120-160% от размера шрифта. Какой именно размер выбрать, смотрим по конкретной ситуации, все зависит от самого шрифта, его размера и ширины контейнера для текста.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
Здесь вспоминаем правило внутреннего и внешнего: чем сильнее объекты связаны друг с другом, тем ближе они будут находиться. В варианте «А» рассмотрим заголовок и текст как две разные единицы. Вот только первый абзац находится ближе к заголовку, чем ко второму абзацу. Правило нарушено.
Здесь вспоминаем правило внутреннего и внешнего: чем сильнее объекты связаны друг с другом, тем ближе они будут находиться. В варианте «А» рассмотрим заголовок и текст как две разные единицы. Вот только первый абзац находится ближе к заголовку, чем ко второму абзацу. Правило нарушено.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
Текст в варианте «А» будет проще прочесть, так как тут есть воздух, строчки не прилипают друг другу. Что не скажешь о варианте «Б», где слишком маленький интерлиньяж, то есть межстрочное расстояние.
Текст в варианте «А» будет проще прочесть, так как тут есть воздух, строчки не прилипают друг другу. Что не скажешь о варианте «Б», где слишком маленький интерлиньяж, то есть межстрочное расстояние.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
Подходящие начертания для наборного текста Regular и Medium. В варианте «А» текст набран Bold-ом. Такое начертание подойдет для заголовков или для выделения чего-то важного в тексте, но точно не для всего текста.
Подходящие начертания для наборного текста Regular и Medium. В варианте «А» текст набран Bold-ом. Такое начертание подойдет для заголовков или для выделения чего-то важного в тексте, но точно не для всего текста.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
Подходящие начертания для наборного текста Regular и Medium. Тонкие начертания, такие как Light, Extra Light и тем более Thin будет проблематично прочесть, поэтому в наборном тексте их не используют.
Подходящие начертания для наборного текста Regular и Medium. Тонкие начертания, такие как Light, Extra Light и тем более Thin будет проблематично прочесть, поэтому в наборном тексте их не используют.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
Здесь мы затронули тему иерархии шрифтов: чем главнее текст, тем он больше. Заголовок самый большой, потом подзаголовок 2-го уровня, далее 3-го, наборный текст и еще меньше дополнительные подписи. И чтобы они не соперничали друг с другом, нужно чтобы между ними была хорошая разница. Заголовок 18 px, наборный текст 16 px — так себе разница, заголовок на фоне текста даже выделяться не будет. Наборный 16 px, заголовок 26 px — разница почти в 1,6 раза. Вот это хороший шаг между размерами шрифтов.
Здесь мы затронули тему иерархии шрифтов: чем главнее текст, тем он больше. Заголовок самый большой, потом подзаголовок 2-го уровня, далее 3-го, наборный текст и еще меньше дополнительные подписи. И чтобы они не соперничали друг с другом, нужно чтобы между ними была хорошая разница. Заголовок 18 px, наборный текст 16 px — так себе разница, заголовок на фоне текста даже выделяться не будет. Наборный 16 px, заголовок 26 px — разница почти в 1,6 раза. Вот это хороший шаг между размерами шрифтов.
Дальше
Проверить
Узнать результат
Выберете наиболее удачно подобранную шрифтовую пару
Тренажер вёрстки текста
В обоих примерах для заголовков и для наборного текста использовали разные шрифты: для заголовков антиквы, то есть с засечками, для наборного текста гротески. Посмотрим теперь на их совместимость, ведь у каждого шрифта свой характер и сочетать шрифты надо тоже уметь. В варианте «А» строгий и изящный Cormorant рядом с дружелюбным, заезженным, легким и детским Comic Sans MS. Не очень удачная шрифтовая пара. Второй вариант с универсальным Arial смотрится более выигрышным сочетанием.
В обоих примерах для заголовков и для наборного текста использовали разные шрифты: для заголовков антиквы, то есть с засечками, для наборного текста гротески. Посмотрим теперь на их совместимость, ведь у каждого шрифта свой характер и сочетать шрифты надо тоже уметь. В варианте «А» строгий и изящный Cormorant рядом с дружелюбным, заезженным, легким и детским Comic Sans MS. Не очень удачная шрифтовая пара. Второй вариант с универсальным Arial смотрится более выигрышным сочетанием.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
В очередной раз вспоминаем про трекинг — расстояние между знаками. В варианте «Б» его уменьшили, буквы все «приклеены» друг к другу, что затрудняет прочтение текста.
В очередной раз вспоминаем про трекинг — расстояние между знаками. В варианте «Б» его уменьшили, буквы все «приклеены» друг к другу, что затрудняет прочтение текста.
Дальше
Проверить
Узнать результат
Выберете наиболее удачно подобранный шрифт
Тренажер вёрстки текста
При верстке сайта такое навряд ли случится, но при работе в графическом редакторе запросто. Заметили, что цифры и символы подозрительно отличаются от текста в обоих вариантах? Такое случается, когда выбираешь из предложенных программой шрифтов, а он, оказывается, не поддерживает кириллицу. Поэтому символы и цифры написаны оригинальным шрифтом, а кириллические буквы программа автоматически заменяет на какой-нибудь стандартный шрифт.
При верстке сайта такое навряд ли случится, но при работе в графическом редакторе запросто. Заметили, что цифры и символы подозрительно отличаются от текста в обоих вариантах? Такое случается, когда выбираешь из предложенных программой шрифтов, а он, оказывается, не поддерживает кириллицу. Поэтому символы и цифры написаны оригинальным шрифтом, а кириллические буквы программа автоматически заменяет на какой-нибудь стандартный шрифт.
При верстке сайта такое навряд ли случится, но при работе в графическом редакторе запросто. Заметили что цифры и символы подозрительно отличаются от текста в обоих вариантах? Такое случается, когда выбираешь из предложенных программой шрифтов, а он, оказывается не поддерживает кириллицу. Поэтому символы и цифры написаны оригинальным шрифтом, а кириллические буквы программа автоматически заменяет на какой-нибудь стандартный шрифт.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
Вспоминаем правило внутреннего и внешнего: чем сильнее объекты связаны друг с другом, тем ближе они будут находиться. В варианте «А» рассмотрим заголовок и текст как две разные единицы. Вот только первый абзац находится ближе к заголовку, чем ко второму абзацу. Здесь правило нарушено. Причем расстояние от заголовка до текста хорошее, а вот второй абзац явно далеко убежал.
Вспоминаем правило внутреннего и внешнего: чем сильнее объекты связаны друг с другом, тем ближе они будут находиться. В примерах рассмотрим заголовок и текст как две разные единицы. Вот только первый абзац в варианте «А» находится ближе к заголовку, чем ко второму абзацу. Здесь правило нарушено. Причем расстояние от заголовка до текста хорошее, а вот второй абзац явно далеко убежал.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
Опять правило внутреннего и внешнего. В варианте «Б» межстрочный интервал у заголовка меньше, чем расстояние от заголовка то текста. Здесь правило нарушено.
Опять правило внутреннего и внешнего. В варианте «Б» межстрочный интервал у заголовка меньше, чем расстояние от заголовка то текста. Здесь правило нарушено.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
В полиграфии новый абзац начинается с красной строки, а в вебе — пробельной строкой.
В полиграфии новый абзац начинается с красной строки, а в вебе — пробельной строкой.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста и изображений
Тренажер вёрстки текста
Вспоминаем правило внутреннего и внешнего. На примерах мы видим заголовок и карточки. Карточки в свою очередь состоят из изображения и подписи. Вот только в примере «Б» карточка «распалась» и фото находится ближе к заголовку блока, чем к своей подписи. Правило нарушено.
Вспоминаем правило внутреннего и внешнего. На примерах мы видим заголовок и карточки. Карточки в свою очередь состоят из изображения и подписи. Вот только в примере «Б» карточка «распалась» и фото находится ближе к заголовку блока, чем к своей подписи. Правило нарушено.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант кнопки
Тренажер вёрстки текста
Проверяем контрастность цветов текста и фона кнопки. Вариант «Б» здесь явно проигрывает.
Проверяем контрастность цветов текста и фона кнопки. Вариант «Б» здесь явно проигрывает.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант выделения в тексте чего-то важного
Тренажер вёрстки текста
Выделить фразу в тексте можно с помощью курсива, более жирного начертания, но не с помощью подчеркивания. Подчеркивание в тексте в вебе — это всегда гиперссылка.
Выделить фразу в тексте можно с помощью курсива, более жирного начертания, но не с помощью подчеркивания. Подчеркивание в тексте в вебе — это всегда гиперссылка.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
Обратите внимание на обилие «висячих» предлогов в варианте «А». Их желательно так не оставлять и переносить на следующую строчку, чтобы они находились вместе со своим словом.
Обратите внимание на обилие «висячих» предлогов в варианте «А». Их желательно так не оставлять и переносить на следующую строчку, чтобы они находились вместе со своим словом.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант кнопки
Тренажер вёрстки текста
Даже если вы на сайте используйте акцидентные шрифты, не стоит их применять на кнопках. СТА-элементы (от «call to action», то есть «призыв к действию») — важная часть интерфейса и пользователи должны легко прочесть, что на них написано.
Даже если вы на сайте используйте акцидентные шрифты, не стоит их применять на кнопках. СТА-элементы (от «call to action», то есть «призыв к действию») — важная часть интерфейса и пользователи должны легко прочесть, что на них написано.
Дальше
Проверить
Узнать результат
Выберете наиболее удачный вариант вёрстки текста
Тренажер вёрстки текста
Хватит на меня орать! Текст, набранный Caps Lock подходит для заголовков, но никак ни для наборного текста.
Текст, набранный Caps Lock подходит для заголовков, но никак ни для наборного текста.
Дальше
Проверить
Узнать результат
Вы на правильном пути!
Пройти ещё раз
Вы на правильном пути!
Пройти ещё раз
Вы на правильном пути!
Пройти ещё раз
У вас замечательный результат!
Пройти ещё раз
В этом тесте встретятся вопросы по темам:
Подбор шрифтов
Выключка текста
Контрастность цветов
Интерлиньяж
Начертание шрифтов
Иерархия шрифтов

Статьи о веб-дизайне

    Давайте обсудим ваш проект:

    Запрещена в РФ
     crossed out
    Made on
    Tilda