Веб-дизайн на 95% состоит из типографии.
Ниже приведены несколько основных правил, которые необходимо соблюдать всем - не только веб дизайнерам, но и менеджерам контента.
- Исходный размер шрифта должен быть легко читаемым. Без увеличения. Без какого-либо кликания по кнопкам. Шрифт нужно масштабировать в соответствии с размером экрана. Имейте ввиду, что среднее расстояние от глаз до экрана при чтении с мобильных устройств составляет порядка 20-25 см, такое же, как при чтении обычных книг. В отличие от настольных дисплеев, когда это расстояние увеличивается до 55-70 см.
- Текст должен дышать. Хотя для мобильных устройств экранное пространство в большом дефиците, экономия в данном случае не приемлема. Избегайте этого соблазна. Оставляйте достаточно свободного пространства вокруг текста. Это понизит уровень стресса читателя и даст ему возможность сконцентрировать внимание на самом важном – на тексте. Выделите шрифтом, цветом те участки, которые Вы считаете наиболее важными.
- Сохраняйте пропорции колонок. Если для мобильных устройств Вы сохраняете разбивку текста на колонки, не забывайте, что ширина колонки должна быть пропорциональна размеру применяемого в ней шрифта. Выбор правильной ширины колонки влияет не только на дизайн и макет. Это влияет на удобство чтения и чёткость восприятия. Так же, как и на настольном дисплее, чересчур узкие колонки вынуждают глаза переходить по строкам слишком часто и, как результат, размывается смысл написанного. В конце концов, для телефона лучше оставить одну колонку. Обычно, для нормального восприятия, длина строки может составлять от 10 до 15 слов.
- Задайте высоту строк. Не заставляйте читать между строк. Если строки расположены слишком близко, зрение захватывает дополнительно ещё две строки – выше и ниже. В результате они сливаются в подсознании. По умолчанию, межстрочное расстояние в браузерах слишком маленькое. Поэтому, частью Вашей работы как дизайнера является необходимость установить оптимальное межстрочное расстояние, чтобы даже при уменьшении масштаба на мобильных устройствах текст оставался легко читаемым. Величины 1.4 (140%) обычно достаточно.
- Избегайте текст как изображение. Когда ваше изображение-текст масштабируется для экранов разной ширины, нет никакой гарантии, что этот текст останется читаемым.Если такой текст был изюминкой контента, это очень плохо, это убивает всякий смысл.
- Следите за цветовым контрастом. Избегайте диких сочетаний:
- светло-серый текст на светлом фоне
- “серебристый” текст на белом фоне
- серый текст на жёлтом фоне
- жёлтый цвет на красном фоне
- зелёный текст на красном фоне
- абсолютно чёрный текст на белом фоне
- белый текст на абсолютно чёрном фоне, и т.п.
Более детально с примерами кодирования можно ознакомиться в статье Sara Soueidan "Techniques for Responsive Typography".
И ещё: очень удобный сайт для определения совместимости применяемых стандартных шрифтов на различных устройствах (ОС) fontfamily.io.
После того, как текст оформлен, забудьте на время что Вы дизайнер и представьте, что Вы видите его впервые, глазами своего читателя.