Что нужно знать о хорошей веб-типографике

Daniyar Kudaibergenov 2014 M01 6
2370
16
8
0

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

 

 

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

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

 

Пустое пространство

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

Вот несколько отличных примеров сайтов с грамотным использованием пространства

 

 

Иерархия

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

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

Отличный пример нам демонстрирует сайт leaderbe.com


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

Междустрочный интервал может быть важным камнем преткновения для хорошей схемы твоей типографики. Междустрочный интервал - это расстояние между строками в твоем тексте. Расположи строки на расстоянии друг от друга и это, как правило, сделает текст куда более читаемым и легко воспринимаемым глазом. Как показывает практика, междустрочный интервал должен быть примерно на 30-50% больше, чем размер твоего текста, хотя это значение может отличаться в зависимости от дизайна.

 

Масштабирование

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

Возьми на заметку, что у пользователей различные компьютеры и сайты отображаются по-разному, это относится и к типографике и к сайту в общем. Масштабирование может быть использовано кем угодно и большую часть времени, оно может быть даже случайным. Конечно, создание адаптивного дизайна, который реализуем в большинстве современных браузеров, это всего лишь один из доступных способов. К примеру, Mac OS X Lion представил красивую iOS-подобную pinch-to-zoom технологию, которая зуммирует страницу так. словно бы это была цельная картинка. Тип масштабирования необходимо учитывать а, также, и то, как текст будет выглядеть, когда будет просматриваться в пределах одного макета на гораздо более близком расстоянии.

 

Заключение

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

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

 

Перевод: Кудайбергенов Данияр

Источник: Soul Media Melbourne

Оцените пост

8

Комментарии

0
Хороший пост! К сожалению большинство веб-разработчиков относятся к типографике как к второстепенной задаче. Вот yvision например - яркий пример наплевательства на типографику.
0
Советую всем разработчикам почитать "Новую Типографику" и "Облик книги" Яна Чихольда. Можно скачать в свободном доступе, но лучше конечно же купить =)
0
скоро все будет хорошо, идет разработка новой версии с проработанной типографикой
0
Отлично! Будем ждать =)
0
сам ситал новую типографику, до облика книги еще не добрался, но наш дизайнер почти все книги по типографике прочитал, да и шарит сам хорошо, поэтому думаю, неплохо смотреться будет
Показать комментарии
Дальше