место в рейтинге
  • 45299
  • 193
  • 26
Нравится блог?
Подписывайтесь!

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

 

 

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

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

 

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

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

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

 

 

Иерархия

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

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

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


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

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

 

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

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

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

 

Заключение

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

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

 

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

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

Daniyar Kudaibergenov sh1vAAA
СЕО в студии Ризн. Мы нацелены стать лучшими на территории СНГ в брендинге и диджитал, в этом помогает наш профессионализм, канбан и прогрессивное мышление.
6 января 2014, 21:02
2142

Loading...

Комментарии

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

Оставьте свой комментарий

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

Также можно нажать Ctrl+Enter

Популярные посты

Исламская ипотека в Казахстане: в этом году выйдет на розничный рынок

Исламская ипотека в Казахстане: в этом году выйдет на розничный рынок

Многие клиенты, вздыхая о харамном ссудном проценте местных банков, сокрушались по поводу отсутствия у нас халяльного кредитования. Поддержка исламского банкинга на уровне МФЦА есть...
DanaJarlygapova
24 марта 2017 / 18:28
  • 21697
  • 63
Рианна за $2 млн. Очередные понты от «ЭКСПО-2017»

Рианна за $2 млн. Очередные понты от «ЭКСПО-2017»

Концерт Рианны всё-таки состоится летом в рамках культурно-зрелищных и спортивных мероприятий ЭКСПО-2017. Рианна крута, с этим никто не спорит. Но соберёт ли «Астана Арена» 30 тысяч зрителей при...
openqazaqstan
вчера / 14:29
  • 17236
  • 15
КТЖ подарило iPhone мошеннику за краденную фотографию

КТЖ подарило iPhone мошеннику за краденную фотографию

Украл в супермаркете — отправился в полицию. Украл фотографию — выиграл новенький iPhone 7 от КТЖ. Вот такая нехитрая получается история. Огромное спасибо Тамерлану Жумабекову, который обратил моё...
andche
сегодня / 0:06
  • 8773
  • 18
Компания LG Electronics открыла предзаказ на новый флагман LG G6

Компания LG Electronics открыла предзаказ на новый флагман LG G6

LG Electronics объявляет о начале предварительного заказа онлайн на новый смартфон LG G6. Оформить предзаказ можно на сайтах магазинов электроники до 16 апреля 2017 года.
LG Electronics
24 марта 2017 / 14:20
  • 5236
  • 0
Страну, где так строят дороги, победить невозможно!

Страну, где так строят дороги, победить невозможно!

Шестиминутный ролик про строительство автомобильной дороги в США - это как острый нож в пузо нашим чиновникам. Они же подавятся бешбармаком, увидев его! Похлеще любого пропагандистского фильма...
Timur_Tregulov
24 марта 2017 / 11:26
  • 5002
  • 41
Это вам не Дисней. Реальный прототип «Красавицы и Чудовища»

Это вам не Дисней. Реальный прототип «Красавицы и Чудовища»

Многие уверенны на 100%, что сказка «Красавица и Чудовище» - это интересная выдумка ее создателей. Однако, действия, происходящие в мультфильме и фильме, имели место в истории, и у главных героев...
Naomi_K
24 марта 2017 / 18:42
  • 5043
  • 36
Семь причин почему вам надо перестать откладывать переезд за границу

Семь причин почему вам надо перестать откладывать переезд за границу

Вы думаете о переезде за границу, но постоянно откладываете дату, потому что вас беспокоит тысяча мелочей, которые могут пойти не так? У меня есть семь причин, почему пора перестать мотать нервы...
Lesch
24 марта 2017 / 17:50
  • 3996
  • 14
Почему наши парни выглядят как агашки? Хочется им сообщить, что мода на пафос прошла

Почему наши парни выглядят как агашки? Хочется им сообщить, что мода на пафос прошла

Когда уже люди смогут самоутверждаться за счет своего интеллекта, энергии, познаний и настоящей красоты, а не за счет авторитетного вида и не менее авторитетного дяди?
Bookenova_smartass
28 марта 2017 / 18:28
  • 3860
  • 90
Гонения на «Свидетелей Иеговы». Кому это выгодно?

Гонения на «Свидетелей Иеговы». Кому это выгодно?

Я не "Свидетель Иеговы". Мне приходилось защищать в судах и кришнаитов и коммунистов, хотя я и не разделяю их убеждений. Я защищаю свободу совести. Сегодня "Свидетели Иеговы", завтра,- каждый из вас.
nasreddin
25 марта 2017 / 17:18
  • 4175
  • 49