26 правил цифровой типографики для начинающих

Искусство владения типографикой несомненно должно быть одним из самых базовых навыков, которыми нужно владеть каждому дизайнеру. В конце концов, эта вещь может сделать дизайн лучше или разрушить его.

Есть много прекрасных книг, написанных авторами с куда большим опытом в мелочах, касающихся типографики. Подобный массив знаний может напугать начинающего дизайнера или среднего пользователя ПК, который хочет делать свои документы читаемыми и организованными.

Эта статья — отличное начало вашего дизайнерского пути. Здесь собраны основные правила для новичков. 26 базовых принципов и советов об управлении текстами в цифровой сфере. Такое небольшое типографическое пособие для начинающих.

____

ВЫБОР ПРАВИЛЬНОГО ШРИФТА

____

1. НЕ ИСПОЛЬЗУЙТЕ ПРИЧУДЛИВЫЕ ШРИФТЫ

Если у вас недостаточно опыта и знаний, не используйте причудливые шрифты вообще. Будьте проще.

____

2. ШРИФТ TRAJAN PRO И НЕ ПРИЧУДЛИВЫЙ, И НЕ СТАРЫЙ

1*QLfpbPAVkBqaCUO_idfO_A

Просто нужно правильно им пользоваться. А пока запомните, что это отличный классический и элегантный шрифт. Только он не очень подходит для больших объёмов текста.

____

3. ЗАБУДЬТЕ О COMIC SANS

И притворитесь, будто вы никогда его не видели.

____

4. ИЗБЕГАНИЕ ШРИФТОВ ПО УМОЛЧАНИЮ — ЭТО ПОЛНЫЙ БРЕД

1*D-Iq1wHxN7dC3YEwCm1d9A

Серьёзно. Если кто-то думает, что стандартные шрифты скучны, то он невежда. Всё дело в том, как вы распорядитесь этим шрифтом. Вот что определяет его внешний вид. Times New Roman может смотреться просто отлично. Вам нужно только сделать так, чтобы это увидели и другие люди.

Пусть лучше ваш текст будет скучен, чем некрасив или нечитаем.

____

СОЧЕТАНИЕ ШРИФТОВ

____

5. НЕ СМЕШИВАЙТЕ БОЛЬШЕ, ЧЕМ ДВА ШРИФТА

1*NE0uJOMDgEmS8Khnpn969A

Всё выглядит непоследовательно. Мы можем различить абзацы, только потому что в строках больше 66 знаков.

Для меня это главное правило. Я (почти) всегда стараюсь брать максимум 2 семейства шрифтов. Вы же не хотите получить кашу и полнейшее безобразие, верно?

____

6. СОЧЕТАЙТЕ ТОЛЬКО КОНТРАСТИРУЮЩИЕ ШРИФТЫ

1*lpw0CNATsIlG0hrbj81OCA

Первый абзац выглядит лучше, не так ли? Мы можем различить абзац, только потому что в строках больше 66 знаков.

Sans Serif + Serif: рукописный шрифт в паре с современным. Сохраняйте контраст. Два похожих шрифта рядом смотрятся неряшливо.

____

7. НО УБЕДИТЕСЬ, ЧТОБЫ ВЫСОТА СТРОЧНЫХ ЗНАКОВ БЫЛА СХОЖЕЙ

Высота строчных знаков (x-height) — это высота строчных букв, измеряемая от линии шрифта. При подборе начертаний выбирайте их с похожей высотой. Это поможет вам держать градацию серого последовательной. Также текст будет легче читать, поскольку визуальная линия, по которой будет идти ваш взгляд, останется постоянной.

____

НАСТРОЙКА ТЕКСТА

____

8. РАЗМЕР ТЕКСТА — КЕГЛЬ

Кегль текста в абзацах на сайтах устанавливайте минимум на 13px. Я больше всего люблю 14-18px. Размер текста получается не слишком большим, и текст удобно читать.

____

9. ВЫБИРАЙТЕ ВЕРНУЮ ДЛИНУ СТРОКИ

Уделяйте внимание строке, которая получается в два раза длиннее самого текста. Следите, чтобы длина строки варьировалась от 45 до 75 знаков. Считается, что 66 знаков — это идеальная длина, но ей трудно придерживаться на адаптивных сайтах. Просто смотрите за тем, чтобы строка была не слишком длинной и не слишком короткой.

____

10. ПОДБИРАЙТЕ МЕЖСТРОЧНЫЙ ПРОБЕЛ, ПОДХОДЯЩИЙ КЕГЛЮ

1*OHZP53FCEq5TCI1jMldlkA

Чтобы достичь баланса в блоке текста, воздух между строками должен быть примерно 150% от высоты строчных. Ещё проще — установить высоту строки, как 125% кегля.

____

АБЗАЦЫ

____

11. ВЫРАВНИВАНИЕ ПО ЛЕВОМУ КРАЮ

1*rWWsefD8_s3QzYtblOuQbQ

Да. Если вы не уверены, как правильно выставлять пользовательские межсловные пробелы — не ставьте выключку. Просто выровняйте всё по левому краю. Рваный правый край — это хорошо. Намного легче читать, когда глазам есть, за что зацепиться в конце строки. Вы можете попробовать выключку по центру, если в строке больше 60 знаков. Но не забывайте включать переносы, а вручную проверяйте, чтобы всё смотрелось хорошо. Вы же не хотите целое нашествие переносов.

____

12. ИЗБЕГАЙТЕ ПЕРЕНОСОВ

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

____

13. ОБОЙДИТЕСЬ БЕЗ ОТСТУПОВ

1*SkmLlxrdM5DaWPYcLtQlWw

Не делайте отступ перед первой строкой, если абзацу предшествует заголовок или подзаголовок. Если вы дополнительно увеличиваете межстрочный пробел между абзацами — не выравнивайте их. Это смотрится коряво. С другой стороны, если вы дополнительно не добавляете этот межстрочный пробел — выровняйте текст по левому краю. Достаточно отступа высотой, эквивалентной высоте строки.

____

14. ПОДПИСИ

1*O5HjMwrDsB8U6XXYo8R64g

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

____

15. ВИСЯЩИЕ ЗНАКИ ПУНКТУАЦИИ

Ставьте знаки пунктуации вне ширины столбца. Это всегда выглядит изящно. Если возможно, пробуйте это делать так, чтобы край абзаца выглядел острым.

____

16. ВДОВЫ И СИРОТЫ

1*F0UXcsO0DcK67jb3g2YU7w

Widow — вдова. по англ.

Вдова — это слово-одиночка или очень короткая строка текста в конце абзаца. Сирота — это вдова, которая получается в верхней строке следующего столбца или страницы. Избегайте их всеми силами. Попробуйте сужать разрядку или разрыв строки, задумайтесь над кеглем шрифта, только не позволяйте появляться им в тексте.

____

17. НЕ ПЕРЕУСЕРДСТВУЙТЕ С МЕЖСЛОВНЫМ ПРОБЕЛОМ

Shift+enter требуется только для того, чтобы начинать новую строку. Нажимайте кнопку «enter» для начала нового абзаца. Всё просто.

____

СЛОВА

____

18. KЁРНИНГ

Если вы неопытный дизайнер или ваш глаз ещё не так зорко примечает мелкие детали, просто не пользуйтесь кёрнингом вручную вообще.

____

19. ТРЕКИНГ

Помните: когда увеличиваете кегль шрифта, разрядка между буквами тоже увеличивается. Устанавливая большие заголовки, желательно пропорционально уменьшать трекинг шрифта.

____

20. АКЦЕНТЫ В ТЕКСТЕ

1*MmKhjNX_ypQsUwhzaWONAQ

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

____

21. НЕ ДЕЛАЙТЕ РАЗРЯДКУ В СТРОЧНЫХ

1*tnzmaW6qdPfFjV6Jk5nZuw

Этот текст нечитаем…

Причина проста: разрядка в прописных мешает читаемости.

____

22. СТАВЬТЕ РАЗРЯДКУ В ПРОПИСНЫХ

Ставьте бОльшую разрядку между прописными. Читаемость всегда улучшается благодаря большему пространству между прописными. Значение в 10% отлично подойдёт.

____

23. НЕ НАБИРАЙТЕ ТЕКСТ КАПИТЕЛЕМ

Не набирайте капителем текст, длиннее одной строки.

____

24. ОБОЙДИТЕСЬ БЕЗ МАЛЫХ ПРОПИСНЫХ

Если выбранный вами шрифт не поддерживает малые прописные, забудьте о них.

____

БУКВЫ

____

25. НЕ МЕНЯЙТЕ ШИРИНУ БУКВ

1*FRyFMenmoLyXAiLw7c6J1Q

Выглядит нехорошо.

Просто не надо. Пожалуйста.

____

ЦИФРЫ

____

26. ПИШИТЕ ЦИФРЫ БУКВАМИ

В целом: пишите цифры буквами. Это элегантно. Только не применяйте это правило к математическим штукам типа уравнений и процентов.

Спасибо за внимание.

 

Автор — Tom Koszyk       Перевод — Deadsign

 

Add a comment

*