Бесплатные шрифты

Шпаргалка по типографике в вебе

Finegan Wonder·19 Nov 2020

Шрифты

Использование более 3-х шрифтов делает ваш макет неудобочитаемым и дешевым. В идеале, нужно использовать 1 шрифт для заголовков и 1 для текстовых блоков (либо разные начертания одного шрифта). Подбирайте схожие по начертанию шрифты, чтобы они не сильно контрастировали друг с другом.

Минимальный размер шрифта для текстовых блоков 14px, все что меньше — сложно читается. Заголовки должны быть крупными, чтобы они привлекали внимание и вызывали интерес.

Рис 1. Неправильно подобранные шрифты
Рис 1. Неправильно подобранные шрифты
Рис 2. Правильно подобранные шрифты
Рис 2. Правильно подобранные шрифты

Длина строки

Оптимальная длина строки в блоке текста для десктопной версии 45-65 символов, для мобильной 30-40. Слишком длинные и короткие строки нагружают глаза и отбивают желание читать.

Рис 3. Слишком длинные и коротки строки
Рис 3. Слишком длинные и коротки строки
Рис 4. Оптимальная длина строки
Рис 4. Оптимальная длина строки

Выравнивание

Выравнивание всегда по левому краю, исключения — текстовые блоки длиной менее 4-х строк и заголовки.

Рис 5. Примеры неправильного выравнивания
Рис 5. Примеры неправильного выравнивания
Рис 6. Пример правильного выравнивания
Рис 6. Пример правильного выравнивания

Межстрочное расстояние

Межстрочное расстояние расстояние очень сильно влияет на дизайн и восприятие вашего макета. Чтобы текстовые блоки были удобочитаемым и не теснились, межстрочное расстояние должно быть не менее 130% от размера шрифта.

Рис 7. Плохое межстрочное расстояние
Рис 7. Плохое межстрочное расстояние
Рис 8. Хорошее межстрочное расстояние
Рис 8. Хорошее межстрочное расстояние

Цветовой контраст

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

Рис 9. Слабый контраст
Рис 9. Слабый контраст
Рис 10. Хороший контраст
Рис 10. Хороший контраст

Акциденция

Для акцента на каких-либо частях текста используйте жирное или курсивное начертание. Подчеркивание используем для ссылок.

Рис 11. Неправильная акциденция
Рис 11. Неправильная акциденция
Рис 12. Правильная акциденция
Рис 12. Правильная акциденция

Трекинг

Трекинг — равномерное изменение расстояния между буквами. Используйте увеличенный трекинг для текста, набранного заглавными буквами, чтобы дать ему воздуха и повысить читаемость. Не увеличивайте трекинг для строчных букв. (В некоторых случаях можно увеличить на 5-10)

Рис 13. Плохой трекинг
Рис 13. Плохой трекинг
Рис 14. Хороший трекинг
Рис 14. Хороший трекинг

Запрещенные приемы

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

Рис 15. Запрещенные приемы
Рис 15. Запрещенные приемы

В блоге у DocDocDesign вы сможете найти хорошо структурированные карточки по общим правилам типографики.

Источник

1091 views·92 shares
1091 views