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

В варианте Б увеличенный трекинг. Трекинг — расстояние между знаками. При верстке текста трекинг лучше вообще не трогать, чтобы не изуродовать и не «поломать» шрифт. Грубая ошибка новичков веб-дизайнеров — разрядка строчных букв. Такой текст, как в этом примере, становится тяжелым для прочтения.

В этом варианте увеличенный трекинг. Трекинг — расстояние между знаками. При верстке текста трекинг лучше вообще не трогать, чтобы не изуродовать и не «поломать» шрифт. Грубая ошибка новичков веб-дизайнеров — разрядка строчных букв. Такой текст, как в этом примере, становится тяжелым для прочтения.

Если в одну строку помещается только 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 подходит для заголовков, но никак ни для наборного текста.