26 правил цифровой типографики
Искусство владения типографикой несомненно должно быть одним из самых базовых навыков, которыми нужно владеть каждому дизайнеру. В конце концов, эта вещь может сделать дизайн лучше или разрушить его.
Есть много прекрасных книг, написанных авторами с куда большим опытом в мелочах, касающихся типографики. Подобный массив знаний может напугать начинающего дизайнера или среднего пользователя ПК, который хочет делать свои документы читаемыми и организованными.
ВЫБОР ПРАВИЛЬНОГО ШРИФТА
____
- НЕ ИСПОЛЬЗУЙТЕ ПРИЧУДЛИВЫЕ ШРИФТЫ
Если у вас недостаточно опыта и знаний, не используйте причудливые шрифты вообще. Будьте проще.
____
2. ШРИФТ TRAJAN PRO И НЕ ПРИЧУДЛИВЫЙ, И НЕ СТАРЫЙ
Просто нужно правильно им пользоваться. А пока запомните, что это отличный классический и элегантный шрифт. Только он не очень подходит для больших объёмов текста.
____
3. ЗАБУДЬТЕ О COMIC SANS
И притворитесь, будто вы никогда его не видели.
____
4. ИЗБЕГАНИЕ ШРИФТОВ ПО УМОЛЧАНИЮ — ЭТО ПОЛНЫЙ БРЕД
Серьёзно. Если кто-то думает, что стандартные шрифты скучны, то он невежда. Всё дело в том, как вы распорядитесь этим шрифтом. Вот что определяет его внешний вид. Times New Roman может смотреться просто отлично. Вам нужно только сделать так, чтобы это увидели и другие люди.
Пусть лучше ваш текст будет скучен, чем некрасив или нечитаем.
____
СОЧЕТАНИЕ ШРИФТОВ
____
5. НЕ СМЕШИВАЙТЕ БОЛЬШЕ, ЧЕМ ДВА ШРИФТА
Для меня это главное правило. Я (почти) всегда стараюсь брать максимум 2 семейства шрифтов. Вы же не хотите получить кашу и полнейшее безобразие, верно?
____
6. СОЧЕТАЙТЕ ТОЛЬКО КОНТРАСТИРУЮЩИЕ ШРИФТЫ
Sans Serif + Serif: рукописный шрифт в паре с современным. Сохраняйте контраст. Два похожих шрифта рядом смотрятся неряшливо.
____
7. НО УБЕДИТЕСЬ, ЧТОБЫ ВЫСОТА СТРОЧНЫХ ЗНАКОВ БЫЛА СХОЖЕЙ
Высота строчных знаков (x-height) — это высота строчных букв, измеряемая от линии шрифта. При подборе начертаний выбирайте их с похожей высотой. Это поможет вам держать градацию серого последовательной. Также текст будет легче читать, поскольку визуальная линия, по которой будет идти ваш взгляд, останется постоянной.
____
НАСТРОЙКА ТЕКСТА
____
8. РАЗМЕР ТЕКСТА — КЕГЛЬ
Кегль текста в абзацах на сайтах устанавливайте минимум на 13px. Я больше всего люблю 14-18px. Размер текста получается не слишком большим, и текст удобно читать.
____
9. ВЫБИРАЙТЕ ВЕРНУЮ ДЛИНУ СТРОКИ
Уделяйте внимание строке, которая получается в два раза длиннее самого текста. Следите, чтобы длина строки варьировалась от 45 до 75 знаков. Считается, что 66 знаков — это идеальная длина, но ей трудно придерживаться на адаптивных сайтах. Просто смотрите за тем, чтобы строка была не слишком длинной и не слишком короткой.
____
10. ПОДБИРАЙТЕ МЕЖСТРОЧНЫЙ ПРОБЕЛ, ПОДХОДЯЩИЙ КЕГЛЮ
Чтобы достичь баланса в блоке текста, воздух между строками должен быть примерно 150% от высоты строчных. Ещё проще — установить высоту строки, как 125% кегля.
____
АБЗАЦЫ
____
11. ВЫРАВНИВАНИЕ ПО ЛЕВОМУ КРАЮ
Да. Если вы не уверены, как правильно выставлять пользовательские межсловные пробелы — не ставьте выключку. Просто выровняйте всё по левому краю. Рваный правый край — это хорошо. Намного легче читать, когда глазам есть, за что зацепиться в конце строки. Вы можете попробовать выключку по центру, если в строке больше 60 знаков. Но не забывайте включать переносы, а вручную проверяйте, чтобы всё смотрелось хорошо. Вы же не хотите целое нашествие переносов.
____
12. ИЗБЕГАЙТЕ ПЕРЕНОСОВ
Если во время выключки переносы нужны, то во всех остальных случаях отказывайтесь от них. Попробуйте использовать разрыв строки или узкую разрядку. Если переносов слишком много — подумайте над размером формата набора и кеглем текста. Полностью отключите переносы перед выравниванием текста по левому краю.
____
13. ОБОЙДИТЕСЬ БЕЗ ОТСТУПОВ
Не делайте отступ перед первой строкой, если абзацу предшествует заголовок или подзаголовок. Если вы дополнительно увеличиваете межстрочный пробел между абзацами — не выравнивайте их. Это смотрится коряво. С другой стороны, если вы дополнительно не добавляете этот межстрочный пробел — выровняйте текст по левому краю. Достаточно отступа высотой, эквивалентной высоте строки.
____
14. ПОДПИСИ
Если вам нужен узкий текст, подумайте над тем, чтобы использовать уплотнённое начертание выбранного шрифта. Помимо того, что так текст будет выглядеть лучше, вы сможете уместить в строке больше букв, и текст будет легче читаться.
____
15. ВИСЯЩИЕ ЗНАКИ ПУНКТУАЦИИ
Ставьте знаки пунктуации вне ширины столбца. Это всегда выглядит изящно. Если возможно, пробуйте это делать так, чтобы край абзаца выглядел острым.
____
16. ВДОВЫ И СИРОТЫ
Вдова — это слово-одиночка или очень короткая строка текста в конце абзаца. Сирота — это вдова, которая получается в верхней строке следующего столбца или страницы. Избегайте их всеми силами. Попробуйте сужать разрядку или разрыв строки, задумайтесь над кеглем шрифта, только не позволяйте появляться им в тексте.
____
17. НЕ ПЕРЕУСЕРДСТВУЙТЕ С МЕЖСЛОВНЫМ ПРОБЕЛОМ
Shift+enter требуется только для того, чтобы начинать новую строку. Нажимайте кнопку «enter» для начала нового абзаца. Всё просто.
____
СЛОВА
____
18. KЁРНИНГ
Если вы неопытный дизайнер или ваш глаз ещё не так зорко примечает мелкие детали, просто не пользуйтесь кёрнингом вручную вообще.
____
19. ТРЕКИНГ
Помните: когда увеличиваете кегль шрифта, разрядка между буквами тоже увеличивается. Устанавливая большие заголовки, желательно пропорционально уменьшать трекинг шрифта.
____
20. АКЦЕНТЫ В ТЕКСТЕ
Господи, есть куча изящных способов выделить какую-либо информацию. Но не используйте прописные. Пока вы новичок, вы не сможете пользоваться ими правильно. Просто попробуйте жирную версию начертания.
____
21. НЕ ДЕЛАЙТЕ РАЗРЯДКУ В СТРОЧНЫХ
Причина проста: разрядка в прописных мешает читаемости.
____
22. СТАВЬТЕ РАЗРЯДКУ В ПРОПИСНЫХ
Ставьте бОльшую разрядку между прописными. Читаемость всегда улучшается благодаря большему пространству между прописными. Значение в 10% отлично подойдёт.
____
23. НЕ НАБИРАЙТЕ ТЕКСТ КАПИТЕЛЕМ
Не набирайте капителем текст, длиннее одной строки.
____
24. ОБОЙДИТЕСЬ БЕЗ МАЛЫХ ПРОПИСНЫХ
Если выбранный вами шрифт не поддерживает малые прописные, забудьте о них.
____
БУКВЫ
____
25. НЕ МЕНЯЙТЕ ШИРИНУ БУКВ
Просто не надо. Пожалуйста.
____
ЦИФРЫ
____
26. ПИШИТЕ ЦИФРЫ БУКВАМИ
В целом: пишите цифры буквами. Это элегантно. Только не применяйте это правило к математическим штукам типа уравнений и процентов.
Спасибо за внимание.
Том — старший веб-дизайнер в GOG.com и фрилансовый продукт-дизайнер и арт-директор в Pixology.