10 полезных советов о том, как улучшить типографику вашего сайта
12
1672007-09-2017
Здесь представлены очень полезные базовые советы и рекомендации о том, как сделать типографику вашего сайта более эффективной и привлекательной. На что надо обратить внимание, чтобы страница с текстом выглядела эстетически правильно и логически законченно. А само чтение содержимого было максимально удобным для пользователя. Все советы достаточно просты и общеизвестны. Скорее, дело в том, что им иногда не уделяют должного внимания из-за своей кажущейся очевидности. Но именно такие нюансы, как например, межстрочное расстояние или неправильное выравнивание могут свести на нет все усилия дизайнера. Поэтому, во избежание ненужных ошибок в типографике, знакомимся и усваиваем теорию.
1. Шрифт
Выбор шрифта — один из самых важных моментов в типографике. Шрифт должен соответствовать содержанию текста и быть уместным. Также лучше всего выбирать хорошо читаемый и четкий шрифт. Для заголовков можно использовать и декоративные шрифты, но для основного текста лучше всего остановится на Helvetica, Arial или Times Roman.
2. Размер
Следующий пункт, на который стоит обратить внимание — это размер шрифта. Как правило, размер шрифта варьируется между 12 и 16 пикселями для основного текста. Также следует учесть, что пользователи могут смотреть сайт и с мобильных устройств, а значит текст должен быть разборчивым и в зависимости от разрешения экрана.
3. Иерархия
В зависимости от размера шрифта для основного текста на сайте, можно установить иерархию размеров для различных частей текста и соблюдать эту иерархию на всех страницах сайта. Например, основной размер текста 14 пискселей, а следующие размеры будут 16, 18, 21, 24, 36, 48, 60, 72 для других блоков с текстом и крупных заголовков.
4. Акцент
Иногда бывает необходимо выделить слово или фразу в тексте, чтобы акцентировать на ней внимание. Сделать это можно с помощью курсива, выделения жирным, подчеркиванием, изменением размера шрифта, различными цветами. После того, как стиль выбран, его следует придерживаться на всех страницах сайта.
5. Длина строки
Если длина строки будет слишком короткой — текст становится беcсвязным, а если слишком длинным — то трудно читаемым. Обычно длина строки варьируется между 40 и 80 символами. Оптимально это где-то около 65 символов.
6. Межстрочное расстояние
Этот параметр является важным компонентов, влияющим на читаемость текста и общую эстетику сайта. Выбор размера межстрочного расстояния зависит от используемого шрифта, его размера и стиля, длины строки. Обычно размер межстрочного расстояния на 2-5 пунктов больше, чем размер шрифта.
7. Выравнивание
Хорошее выравнивание текста способствует общему приятному впечатлению от сайта. Содержание сайта следует аккуратно разложить согласно логике восприятия текста и визуальному балансу. Страница должна быть разделена на системы столбцов, строк, меню, заголовков, боковые и нижние колонтитулы.
8. Цвет и контраст
Цветовой акцент в тексте может сделать весь дизайн чрезвычайно привлекательным. Однако, для больших кусков текста лучше остановиться на традиционном сочетании темного цвета для шрифта и светлого для страницы. Эксперименты с темным фоном и светлым текстом, скорее, уместны для заголовков и подзаголовков.
9. Свободное пространство
Свободное пространство между отдельными элементами в дизайне страницы позволяет дышать всему содержимому сайта. К слову, конструкция сайта с небольшим количеством элементов и обилием свободного пространства между ними смотрится более привлекательно, чем страницы, забитые содержимым под завязку.
10. Нарушайте правила
Ну и традиционный совет для всех подобных рубрик — нарушайте правила. Дизайнеры, конечно, должны знать основные правила эффективной типографики, но они в то же время должны быть и достаточно смелы, чтобы экспериментировать и нарушать их. Ведь именно так рождаются инновационные и необычные сайты.
Источник: Spyrestudios
Комментариев 12 комментариев
Обожаю последний пункт))) 😀
Супер.
Для того чтобы уметь нарушать(последний пункт), нужно знать как должно быть правильно(1-9 пункт).
Спасибо за статью.
@Vadim
@Oleg Mykhailenko
Ага, я смотрю вас больше всего порадовал последний пункт. Но как сказал Slon1024, нужно знать как должно быть правильно 🙂
@Slon1024
Правильные вещи говорите ))
Конечно! @Slon1024 прав безусловно. На 100% прав. Без понимания/знания правил нарушать вроде как и нечего ) Но, снова и снова повторяюсь — даже для 10 пункта должна быть разумная мера.
@Vadim
Это точно!
Хорошая статья.
У меня возможно глупый вопрос, ответ не могу найти уже довольно долго. Шрифт Helvetica — это семейство шрифтов, или это конкретный шрифт. Я думаю что это шрифты типа калибри, тахома и т.д но не уверен. На компьютере нет Helvetica, и никаких упоминаний о ней ))) Помогите разобраться.
И еще вопрос, если это шрифт и у меня его нет на компьютере, наверно я не один такой ))) так стоит ли его вообще использовать ?
@Владимир:
Спасибо!
По поводу гельветики я думаю так… Это конкретный шрифт без засечек. Как тот же калибри или тахома. А к семейству его относят потому, что есть такие его разновидности как болд или италик, а также варианты для кириллицы, латиницы итд. Поэтому семейство…
Но вот почему в дефолтовой комплектации шрифтов нет гельветики — для меня тоже загадка. Возможно тут завязано на авторские права… Хотя точно не знаю.
На счет использования… Я вот опасаюсь использовать, хотя шрифт действительно хороший. Но в свободном доступе я гельветику не видела. В основном предлагают купить ))
@Наташа Клевер:
Спасибо за полноценный ответ) А то много где встречал упоминаний про Хельветику и было не понятно почему это её на компе нет :))
З,Ы Отличный блог, один из лучших которые я видел на тему дизайна, много интересных и оригинальных статей. Не заметил как пару часов просидел тут =D
Если кому надо я нашел Хельветику ;)))
http://www.azfonts.ru/load_font/helr45w.html Можно скачать бесплатно
@Владимир:
Спасибо за ссылку! 🙂
Иногда рисую постеры для одного клуба и в том году задумалась, а какие шрифты на самом деле бесплатные и при этом легальные, а какие нужно покупать? В рунете не смогла найти какой-то конкретики. Например ТаймНьюРуман или Гельветика вроде самые часто использованные шрифты, а они для коммерческой деятельности (рисование постеров, веб.дизайн, …) доступны или их нужно покупать? Нашла на английском языке ответ на эту тему, но там написано каким-то юридическим языком. Может кто знает?
И добавить даже нечего. Все очень точно.
Последний пункт особенно порадовал. Всегда есть немного места для «легкого безумства» и экспериментов )