Центральную роль в веб-дизайне играет типографика, и это неудивительно, ведь 95% интернет среды состоит из текста. При прочтении статей шрифт создает определенное настроение и атмосферу.
Существуют основные аспекты веб-типографики, и они помогут вам определиться с выбором оформления текста на вашем сайте.
Семейство шрифтов
Это так называемая гарнитура шрифта. Гарнитура — это шрифт или несколько шрифтов, схожие по начертанию. Так, один шрифт бывает обычным, курсивным и полужирным.
Гарнитуры бывают двух видов: с засечками (брусковый тип) и без засечек (гротески). Первые имеют простой вид, а вторые более официальный.
Пока посетитель сайта читает текст, его глаза устают и привыкают к шрифту, если всё набрано шрифтами разной гарнитуры. Именно поэтому достаточно использовать один-два шрифта, изменяя размер, начертание и цвета.
Но иногда возможно использование нескольких шрифтов. Например тогда, когда нужно получить сходство с определенной эпохой, или разделить тексты нескольких типов, а так же личных эстетических целей.
Гарнитуры бывают двух видов: с засечками (брусковый тип) и без засечек (гротески). Первые имеют простой вид, а вторые более официальный.
Пока посетитель сайта читает текст, его глаза устают и привыкают к шрифту, если всё набрано шрифтами разной гарнитуры. Именно поэтому достаточно использовать один-два шрифта, изменяя размер, начертание и цвета.
Но иногда возможно использование нескольких шрифтов. Например тогда, когда нужно получить сходство с определенной эпохой, или разделить тексты нескольких типов, а так же личных эстетических целей.
Сочетание шрифтов с засечками и без
Лучше всего для оформления основного текста подходит шрифт без засечек, т. к. на дисплеях различных устройств иногда возникает проблема сглаживания и неровности засечек.
Цвет шрифта
Выразительность тексту конечно же придает цвет. Большое внимание привлекают яркие цветные заголовки.
Теплые цвета делаю текст визуально большим по размер, в отличии от холодных оттенков. Для небольших элементов отлично подойдут яркие цвета. Боковые колонки выделяют при помощи цвета, который на четверть светлее основного цвета текста.
Лучшим решение будет выбрать два основных цвета для текста страницы.
Теплые цвета делаю текст визуально большим по размер, в отличии от холодных оттенков. Для небольших элементов отлично подойдут яркие цвета. Боковые колонки выделяют при помощи цвета, который на четверть светлее основного цвета текста.
Лучшим решение будет выбрать два основных цвета для текста страницы.
Размер шрифта
В браузере стандартный размер шрифта равен 16px, а размер заголовка обычно в 2 раза больше. Тут действует такое правило, что чем важнее элемент, тем он крупнее.
Задавая размер шрифта, нужно не забывать, что его размер должен изменяться в зависимости от разрешения экрана.
Задавая размер шрифта, нужно не забывать, что его размер должен изменяться в зависимости от разрешения экрана.
Выравнивание текста
В веб-типографике обычно используется выравнивание по левой стороне, так при CCS выравнивание текста при ширине невозможно и образует некрасивые промежутки между словами.
Межсимвольный интервал
От того, какой интервал между букв, зависит то, насколько удобно читать текст. Чем крупнее шрифт — тем ближе должны быть буквы друг к другу, и наоборот.
Межстрочный интервал
Оптимальное расстояние между строками — в 1.4 — 1.6 раза больше размера шрифта. Между заголовком и абзацем так же не должно быть большого расстояния.
Длина строки
В одной стоке, для удобного чтения, должно помещаться 7-10 слов. Чем шире строка, тем больше межстрочный интервал.
Начертание текста
Изменяя начертание шрифта, можно создавать привлекательную типографику. Так, курсив придаст написанному торжественности, жирный увеличенный текст — выделит нужное вам содержимое.
🔟 Визуализация и структуризация
Структура веб-страницы состоит из следующих объектов:
- — Логотип
- — Заголовки
- — Заголовки второго плана
- — Основной текст
- — Навигация
- — Гипертекстовые ссылки
- — Боковые панели
- — Подписи рисунков и таблиц.
Каждый пункт из этого списка — как фундамент у дома.
Особенное внимание нужно уделять ссылкам, они должны легко выделяться из окружающего их текста.
Инструментов, помогающих выделить текст визуально тоже много:
Особенное внимание нужно уделять ссылкам, они должны легко выделяться из окружающего их текста.
Инструментов, помогающих выделить текст визуально тоже много:
- — капитель (когда строчные знаки выглядят как уменьшенные заглавные);
- — курсив;
- — полужирное/жирное начертание;
- — цвет;
- — размер;
- — изменение положения знаков на полосе текста;
- — выделение символов при помощи рамок, указателей, иконок.
Но не стоит забывать, что излишнее оформление затрудняет прочтение, и если начать делать сайт своими силами, то можно попасть впросак, поэтому доверьте эту задачу специалистам, то есть нам.
