Найти тему
Марат Достарбеков

7 правил типографики или как привести текст на сайте в порядок

Оглавление

90% контента на сайте — текст. От типографики во многом зависит, как оценит вашу работу заказчик и конечные пользователи. Вот 7 правил, которые помогут сделать текст удобным для чтения и красивым для восприятия.

Для примера я возьму небольшой отрывок из книги Майка Монтейро «Дизайн — это работа»:

-2

Длина строки: 50–80 символов

Проводя глазами по тексту читатель должен легко находить начало следующей строки. Такой текст проглатывать легче. Оптимальная длина: 50–80 символов.

-3

В абзаце не больше 8 строк

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

Вот так:

-4

Выравнивание по левому краю

Текст выровненный по левому краю читать легче, сравните сами.

-5

Контрастные заголовки

Заголовки придают тексту структурированный вид и облегчают чтение.

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

-6

Для простоты понимания мы используем одну гарнитуру. Меняться будут только начертания и размер.

Междустрочный интервал и отступы

Слипшиеся строки трудно читать: человек устает, отвлекается и в итоге уходит с сайта так и не дочитав. Но если сделать высоту строки примерно в полтора раза больше шрифта — текст читать станет легче. Используйте множитель от 1,2 до 1,6.

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

-7

Важные мелочи

«Висячие» предлоги

Не оставляйте в конце строки союзы и предлоги длина которых меньше или равна 3 буквам.

-8

Пунктуация

Различной пунктуации очень много. Важно запомнить хотя бы основные правила:

  • Используйте кавычки «ёлочки». Если внутри кавычек нужны еще одни — можно использовать „лапки“;
  • Дефис не отбивается пробелами и является частью слова (что-то, кто-нибудь);
  • Тире отбивается пробелами и является пунктуацией (сказано — сделано).
-9

Хорошо тему пунктуации раскрыта в Рекомендациями по оформлению текста от РИА Новости. Также попробуйте «Типограф» Артемия Лебедева.

Что в итоге

Из не читаемого полотна получился приятный, легкий текст.

Было

-10

Стало

-11

Закрепите правила на практике

У нас получился короткий чек-лист из 7 пунктов по оформлению текста:

  • Длина строки не больше 80 символов;
  • Разбить текст на абзацы по 5–8 строк;
  • Выравнивать текст по левому краю;
  • Проставлять заголовки;
  • Междустрочный интервал примерно в полтора раза больше размера текста;
  • Не допускать «висячих» предлогов в конце строки;
  • Использовать правильную пунктуацию: кавычки, тире, дефисы.

Для практики возьмите другую цитату из той же книги или любой другой текст. Пройдите по чек-листу, чтобы в итоге получился приятный и легкий для чтения текст. Ссылки на свои работы скидывайте в комментариях. Я разберу ваши ошибки и дам обратную связь. Удачи!

Цитата для практики:

Чем осторожнее вы будете, вступая в отношения с клиентом, чем больше внимания вы уделите деталям и расстановке всех точек над i, тем больше вероятность того, что вы завершите проект, успешно выполнив качественную работу, и построите прочные отношения. А это приведет к новым проектам и рекомендациям в ближайшие годы. Дизайнер, который не представляет клиенту свою работу, – не дизайнер. Презентация работы, ее обоснование, ответы на вопросы и обратная связь – все это инструменты работы дизайнера. Если вы сидите за столом, пока кто-то другой представляет работу, вы не можете жаловаться на обратную связь. Провал будет вашей виной.Самый большой миф в области дизайна – то, что хороший дизайн продает себя сам. (А второй – то, что Copperplate действительно является шрифтом.) Дизайн способен говорить сам за себя не больше, чем тамале способна сама снять с себя кукурузные листья. Вы представляете решение проблемы бизнеса и отстаиваете его перед клиентом.