В данной статье мы подробно остановимся на особенностях интернет-типографики. Перед тем, как вы приступите к выбору наиболее подходящего шрифта для текстового контента страницы, сначала обратите пристальное внимание на его содержание. Именно оно должно обуславливать ваш выбор размера и формы букв, цифр и остальных графических знаков на странице. Ведь целью типографики является улучшение восприятия потенциальным покупателем текстового контента, что в свою очередь благотворно влияет на рост конверсии страницы и продвижение сайта в целом.
Основные аксиомы типографики
- Удобство чтения – главный критерий при выборе шрифтов. Старайтесь использовать только те шрифты, которые будут легко читаться и являться приятными для визуального восприятия. Исключением из правила может являться написание названия бренда или начертание логотипа.
- Используйте оптимальный размер шрифтов. Выбирайте умеренную высоту шрифта (кегля). Например, для основного текста оптимально подойдет шрифт с кеглем 10-14.
- Выбирайте шрифт, чьи буквы имеют высокую различимость. В связи с этим, для основного текста абсолютно не подойдут декоративные шрифты, т.к. их цель – создание художественного образа, а не удобочитаемость. Например, шрифт Шалтай, который был выпущен всего несколько лет назад и подходит для использования в умеренных количествах и в основном только для печатной продукции.
- Используйте оптимальные цветовые решения в выборе шрифта и фона для него. Например, некоторые специалисты в области типографики утверждают, что на мониторе компьютера или ноутбука глазу приятнее всего сочетание темно-серого шрифта и светло-желтого фона, а другие предлагают в качестве рекомендации для электронных книг зеленый или желто-зеленый шрифт на черном фоне. Но есть один общий параметр для всех в выборе пары фон-шрифт – это контрастность. А дальше уже дело вкуса. Например, такое сочетание шрифта и фона лучше не использовать:
- Не используйте шрифты с засечками. Они только будут лишний раз отвлекать глаза пользователей, заставляя их «спотыкаться» на словах без видимых на то причин. Шрифты с засечками лучше оставить для бумажных носителей, где они будут гораздо уместнее и полезнее.
- Не используйте в тексте на одной странице сочетание более двух шрифтов.
- Не растягивайте текст по ширине страницы – лучше используйте колонки. На размер колонки обычно влияют разные обстоятельства, но если вы не можете определить оптимальную величину колонки, то поставьте минимально возможную – до 8 слов.
- Используйте в заголовках текста принцип «матрешки», согласно которому: главный заголовок должен быть самым большим, подзаголовки – поменьше, а основной текст написан стандартным кеглем. Важные слова в тексте можно выделить полужирным шрифтом, но и тут главное не переусердствовать, ведь долгое чтение такого текста является утомительным для зрения.
Верстка страницы
Верстка – специальный код страницы, благодаря которому пользователи видят одинаково через разные браузеры один и тот же материал, а поисковым системам становится проще индексировать сайт. Для верстки веб-страницы необходимо разбить дизайн на элементы, затем перевести их в HTML формат и отформатировать. При этом также можно применять такие дополнительные средства, как таблицы стилей CSS.
Существует несколько видов верстки. Например, резиновая верстка, которая растягивает макет сайта в зависимости от заданных размеров окон (обязательно указывается их минимальная и максимальная ширина).
Противоположный ей вид верстки – нерезиновая верстка, которая строго задает ширину страницы и не позволяет её менять. Существует также адаптивная верстка, которая взяла лучшие черты уже упомянутых версток: в этом случае макет сайта может растягиваться пропорционально размеру окна браузера, но некоторые его блоки могут быть строго зафиксированы и не тянуться.
Назвать страницу сайта сверстанной невозможно, пока у нее нет валидности – это код, который доступен для всех поисковых систем. Он обеспечивает чёткую структуру и верное отображение страниц сайта во всех существующих браузерах и стандартных разрешениях. Правильно сверстанная страница, например, при убавлении или добавлении текста не растянется, не потеряет внешнего вида и не «развалится».