Веб-дизайн на 95% состоит из типографии.

Ниже приведены несколько основных правил, которые необходимо соблюдать всем - не только веб дизайнерам, но и менеджерам контента.

  1. Исходный размер шрифта должен быть легко читаемым. Без увеличения. Без какого-либо кликания по кнопкам. Шрифт нужно масштабировать в соответствии с размером экрана. Имейте ввиду, что среднее расстояние от глаз до экрана  при чтении с мобильных устройств составляет порядка 20-25 см, такое же, как при чтении обычных книг. В отличие от настольных дисплеев, когда это расстояние увеличивается до 55-70 см.
  2. Текст должен дышать. Хотя для мобильных устройств экранное пространство в большом дефиците, экономия в данном случае не приемлема. Избегайте этого соблазна. Оставляйте достаточно свободного пространства вокруг текста. Это понизит уровень стресса читателя и даст ему возможность сконцентрировать  внимание на самом важном – на тексте. Выделите шрифтом, цветом те участки, которые Вы считаете наиболее важными.
  3. Сохраняйте пропорции колонок. Если для мобильных устройств Вы сохраняете разбивку текста на колонки, не забывайте, что ширина колонки должна быть пропорциональна размеру применяемого в ней шрифта. Выбор правильной ширины колонки влияет не только на дизайн и макет. Это влияет на удобство чтения и чёткость восприятия. Так же, как и на настольном дисплее, чересчур узкие колонки вынуждают глаза переходить по строкам слишком часто и, как результат, размывается смысл написанного. В конце концов, для телефона лучше оставить одну колонку. Обычно, для нормального восприятия, длина строки может составлять от 10 до 15 слов.
  4. Задайте высоту строк. Не заставляйте читать между строк. Если строки расположены слишком близко, зрение захватывает дополнительно ещё две строки – выше и ниже. В результате они сливаются в подсознании. По умолчанию, межстрочное расстояние в браузерах слишком маленькое. Поэтому, частью Вашей работы как дизайнера является необходимость установить оптимальное межстрочное расстояние, чтобы даже при уменьшении масштаба на мобильных устройствах текст оставался легко читаемым. Величины 1.4 (140%) обычно достаточно.
  5. Избегайте текст как изображение. Когда ваше изображение-текст масштабируется для экранов разной ширины, нет никакой гарантии, что этот текст останется читаемым.Если такой текст был изюминкой контента, это очень плохо, это убивает всякий смысл.
  6. Следите за цветовым контрастом. Избегайте диких сочетаний:
    • светло-серый текст на светлом фоне
    • “серебристый” текст на белом фоне
    • серый текст на жёлтом фоне
    • жёлтый цвет на красном фоне
    • зелёный текст на красном фоне
    • абсолютно чёрный текст на белом фоне
    • белый текст на абсолютно чёрном фоне, и т.п.

Более детально с примерами кодирования можно ознакомиться в статье Sara Soueidan "Techniques for Responsive Typography".

И ещё: очень удобный сайт для определения совместимости применяемых стандартных шрифтов на различных устройствах (ОС) fontfamily.io.

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