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

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

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

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

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

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

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

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

Если не можете выбрать оптимальную величину колонки самостоятельно, поставьте минимально возможную: до 8 слов.

Бывают такие случаи, что длина строки в колонке не поддается никакому «урезанию». Тогда можно пойти на хитрость, немного увеличив межстрочный интервал. Текст сразу начнет «дышать», и читатель с легкостью будет воспринимать смысл написанного.

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

Но не шрифтом единым жив текст…
… а еще и версткой. Так называется специальный код страницы, который позволяет пользователю видеть один и тот же материал одинаково через разные браузеры, а поисковикам ­— проще индексировать сайт. Чтобы сверстать веб-страницу, надо разбить дизайн на элементы, перевести их в формат HTML, а затем отформатировать. Можно использовать и дополнительные средства, например, таблицы стилей CSS.

Когда видам верстки придумывали названия, мудрить не стали. Так появилась резиновая верстка, при которой макет сайта растягивается в зависимости от заданных размеров окон (причем обязательно должна быть указана минимальная и максимальная ширина).

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

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

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

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

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

[16:21:25] Марина Замятина: Подумайте о тех, кто будет читать вас с мобильных устройств. Возможно, после этого вы не станете искусственно увеличивать шрифт или менять межстрочный интервал (на дисплее мобильного хорошо читаются мелкие шрифты, а интервалы изначально меньше, чем на компьютере).

И не забывайте проводить тестирование. Подойдет и простое A/B, где вы можете выбрать два оптимальных варианта и отправить на суд читателю. Но можно использовать и более точное, мультивариативное тестирование: страниц для исследования загружаем больше, трафика используем также больше, но зато и результат будет гораздо точнее.