10 полезных советов о том, как улучшить типографику вашего сайта

12

16720
07-09-2017

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

1. Шрифт
Выбор шрифта — один из самых важных моментов в типографике. Шрифт должен соответствовать содержанию текста и быть уместным. Также лучше всего выбирать хорошо читаемый и четкий шрифт. Для заголовков можно использовать и декоративные шрифты, но для основного текста лучше всего остановится на Helvetica, Arial или Times Roman.
10 полезных советов о том, как улучшить типографику вашего сайта

2. Размер
Следующий пункт, на который стоит обратить внимание — это размер шрифта. Как правило, размер шрифта варьируется между 12 и 16 пикселями для основного текста. Также следует учесть, что пользователи могут смотреть сайт и с мобильных устройств, а значит текст должен быть разборчивым и в зависимости от разрешения экрана.
10 полезных советов о том, как улучшить типографику вашего сайта

3. Иерархия
В зависимости от размера шрифта для основного текста на сайте, можно установить иерархию размеров для различных частей текста и соблюдать эту иерархию на всех страницах сайта. Например, основной размер текста 14 пискселей, а следующие размеры будут 16, 18, 21, 24, 36, 48, 60, 72 для других блоков с текстом и крупных заголовков.
10 полезных советов о том, как улучшить типографику вашего сайта

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

5. Длина строки
Если длина строки будет слишком короткой — текст становится беcсвязным, а если слишком длинным — то трудно читаемым. Обычно длина строки варьируется между 40 и 80 символами. Оптимально это где-то около 65 символов.
10 полезных советов о том, как улучшить типографику вашего сайта

6. Межстрочное расстояние
Этот параметр является важным компонентов, влияющим на читаемость текста и общую эстетику сайта. Выбор размера межстрочного расстояния зависит от используемого шрифта, его размера и стиля, длины строки. Обычно размер межстрочного расстояния на 2-5 пунктов больше, чем размер шрифта.
10 полезных советов о том, как улучшить типографику вашего сайта

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

8. Цвет и контраст
Цветовой акцент в тексте может сделать весь дизайн чрезвычайно привлекательным. Однако, для больших кусков текста лучше остановиться на традиционном сочетании темного цвета для шрифта и светлого для страницы. Эксперименты с темным фоном и светлым текстом, скорее, уместны для заголовков и подзаголовков.
10 полезных советов о том, как улучшить типографику вашего сайта

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

10. Нарушайте правила
Ну и традиционный совет для всех подобных рубрик — нарушайте правила. Дизайнеры, конечно, должны знать основные правила эффективной типографики, но они в то же время должны быть и достаточно смелы, чтобы экспериментировать и нарушать их. Ведь именно так рождаются инновационные и необычные сайты.
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 Можно скачать бесплатно

ОтветитьОтветить

@Владимир:
Спасибо за ссылку! 🙂

ОтветитьОтветить

Иногда рисую постеры для одного клуба и в том году задумалась, а какие шрифты на самом деле бесплатные и при этом легальные, а какие нужно покупать? В рунете не смогла найти какой-то конкретики. Например ТаймНьюРуман или Гельветика вроде самые часто использованные шрифты, а они для коммерческой деятельности (рисование постеров, веб.дизайн, …) доступны или их нужно покупать? Нашла на английском языке ответ на эту тему, но там написано каким-то юридическим языком. Может кто знает?

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!

64 queries in 0,183 seconds.