Типографика в онлайн-текстах

Успех текстов на сайте зависит не только от их смысла, но и от оформления. Чтобы читали контент, нужно правильно выбрать оптимальный размер, структуру и шрифт. И если первые две составляющие можно привести в порядок интуитивно, то со шрифтами не все так просто. Поэтому сегодня мы детально остановимся на особенностях веб-типографики. Перед тем, как приступить к выбору наиболее подходящего шрифта, задумайтесь о содержании ваших текстов. Именно под него вы будете выбирать размер и формы букв, цифр и прочих знаков. Цель типографики — улучшить восприятие текста потенциальным читателем.

Аксиомы типографики, или Правила, которые лучше не нарушать

1. Удобство чтения прежде всего!

Используйте шрифты, которые легко читаются и приятны для визуального восприятия. Исключением из этого правила могут стать написания названий брендов или начертания логотипов. Но и тут стоит знать меру.

2. Выбирайте оптимальный размер шрифта

Высота шрифта — кегль — должна быть умеренной. Основной текст будет хорошо читаться с кеглем 10-14. В некоторых случаях можно искусственно увеличить размеры, например, для пожилых людей с дальнозоркостью.

3. Буквы должны иметь высокую различимость

Именно поэтому для основного текста совершенно не подходят декоративные шрифты, целью которых является создание художественного образа, а не удобство чтения. Как, например, шрифт Шалтай, выпущенный несколько лет назад и подходящий исключительно для печатной продукции, да и то в умеренных количествах.

4. Цвет — важная составляющая типографики

Существует несколько версий оптимального цветового решения в выборе фона и шрифта. Кто-то утверждает, что приятнее всего глазу сочетание светло-желтого фона и темно-серого шрифта (на мониторе компьютера или ноутбука), а кто-то предлагает в качестве идеального фона черный, а шрифта — зеленый или желто-зеленый (эта рекомендация для электронных книг). Но по-прежнему главный параметр в выборе пары фон-шрифт — контрастность. А дальше уже на ваш вкус. Например, такое сочетание лучше не использовать:

5. Нужна ли шрифту засечка?

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

6. Сколько видов шрифтов уживется на странице?

По итогам исследований, редкий текст выдерживает сочетание более двух шрифтов. Разумется, вы можете провести опыты на своих текстах, а можете просто прислушаться к мнению тех, кто неоднократно проводил этот эксперимент.

Технические особенности верстки

Современным стандартом предусмотрена кодировка UTF-8: она применяется во всех файлах HTML, CSS, JS. Тип текущего документа, или DOCTYPE, при верстке следует выбирать строго HTML для корректного отображения страницы. Не забывайте и про кроссбраузерность ресурса, синхронизирующую данные в Google Chrome, Internet Explorer (последней версии), Firefox, Opera, Safari.

Назвать страницу сверстанной невозможно без ее валидности — кода, доступного для всех поисковых систем, обладающего чёткой структурой и обеспечивающего верное отображение во всех распространенных браузерах и стандартных разрешениях выше 1024: 1024x768, 1280x1024, 1680x1050 и 1920x1080. При добавлении или убавлении текста правильно сверстанная страница не тянется, не теряет внешнего вида и не «разваливается».

Советы начинающим верстальщикам

Структурируйте сайт при помощи заголовков H1 и H2 — позвольте поисковым системам правильно воспринимать информацию. Кроме того, этим вы сделаете тексты комфортнее для пользователей.

Помните про шрифты всегда. Прописывайте альтернативные варианты, чтобы текст корректно отображался во всех браузерах. Следите за возможными багами: они могут появляться при увеличении читателем размера шрифта.