Шпаргалка по типографике в вебе
Шрифты
Использование более 3-х шрифтов делает ваш макет неудобочитаемым и дешевым. В идеале, нужно использовать 1 шрифт для заголовков и 1 для текстовых блоков (либо разные начертания одного шрифта). Подбирайте схожие по начертанию шрифты, чтобы они не сильно контрастировали друг с другом.
Минимальный размер шрифта для текстовых блоков 14px, все что меньше — сложно читается. Заголовки должны быть крупными, чтобы они привлекали внимание и вызывали интерес.
Длина строки
Оптимальная длина строки в блоке текста для десктопной версии 45-65 символов, для мобильной 30-40. Слишком длинные и короткие строки нагружают глаза и отбивают желание читать.
Выравнивание
Выравнивание всегда по левому краю, исключения — текстовые блоки длиной менее 4-х строк и заголовки.
Межстрочное расстояние
Межстрочное расстояние расстояние очень сильно влияет на дизайн и восприятие вашего макета. Чтобы текстовые блоки были удобочитаемым и не теснились, межстрочное расстояние должно быть не менее 130% от размера шрифта.
Цветовой контраст
Текст должен быть легкоразличимым и контрастным по отношению к фону. Не используйте светлый текст на светлом фоне и темный на темном.
Акциденция
Для акцента на каких-либо частях текста используйте жирное или курсивное начертание. Подчеркивание используем для ссылок.
Трекинг
Трекинг — равномерное изменение расстояния между буквами. Используйте увеличенный трекинг для текста, набранного заглавными буквами, чтобы дать ему воздуха и повысить читаемость. Не увеличивайте трекинг для строчных букв. (В некоторых случаях можно увеличить на 5-10)
Запрещенные приемы
Не сжимайте шрифты по вертикали или горизонтали. Не используйте технические начертания. (начертания, которые не предусмотрены автором шрифта и делаются искусственно)
В блоге у DocDocDesign вы сможете найти хорошо структурированные карточки по общим правилам типографики.