Какой должна быть типографика в веб дизайне?
Рад приветствовать Вас! На связи Иван. Несмотря на то что в наше время немалую часть информации принято доносить при помощи наглядных картинок или интерактивных видео, текст все еще считается одним из главных способов передачи всей информации. Без длинных статей обойтись не сможет ни один ресурс.
Но зачастую их попросту не читают. И причина не в стиле автора или недостоверной информации, размешенной на странице. Просто немалое количество дизайнеров совершает одни и те же ошибки, из-за которых тексты на сайте становятся неприятны глазу. Сегодня я хотел бы рассказать вам о том, какой должна быть типографика в веб-дизайне, чтобы легко избежать такого исхода.
Предлагаю вам, посмотреть видео, в котором я наглядно показал
основные моменты по работе с текстом.
Типографская раскладка Ильи Бирмана находится здесь.
1. Нестилизованный текст
Одна из главных ошибок, которая часто встречается на сайтах новичков, ― этот попытка стандартизировать шрифт любой статьи. И если на бумаге в этой идее нет ничего такого, то на деле она портит абсолютно всю атмосферу. Вам бы понравился сайт, стилизованный под старую книгу, рассказы в которой были бы написаны с помощью Times New Roman. Или ресурс с серьезными новостями, использующий пресловутый Comics Sans? То-то и оно. Не забывайте о стиле.
2. Попытка «красивого» шрифта
Но при этом обязательно рассказывайте свое виденье заказчику, согласовывая его с мнением владельца ресурса. Во многих ТЗ уже есть список используемых начертаний, и их следует придерживаться. Ну а если подобных требований нет ― не стоит искать нужный вариант в обычном Ворде. Лучше воспользоваться аналогичным сервисом Гугла, предоставляющего список всех гарнитур, отображающихся в интернет-пространстве. Иные же могут превратиться в обычные кракозябры.
3. Излишняя вычурность
Также при попытке стилизации типографики важно не переборщить с ней. Старые рукописные книги были действительно красивыми, но читать их было попросту невозможным. Помните, что главная задача ресурса ― донести информацию, а не удивить своей красотой. Для последней цели человек скорее пойдет в художественную галерею. Поэтому в обязательном порядке тестируйте шрифт хотя бы при помощи тех самых знаменитых французских булок.
4. Неверное тестирование
В самом тестировании дизайнеры также допускают немалое количество ошибок. Так уж сложилось, что знаменитый текст с Loren считается универсальным заполнителем пустого места. Он используется в качестве шаблона при разработке любого макета, чтобы понять, насколько гармоничным ресурс выйдет в итоге. Но так поступать попросту нельзя! Почти каждый второй шрифт имеет разные начертания для латиницы и кириллицы.
5. Огромное количество шрифтов
Несмотря на то что современные стандарты предполагают смелые эксперименты, добавлять на сайт массу различных гарнитур все же не стоит. Это выглядит слишком аляповато и некрасиво. Самым оптимальным вариантом будет подобрать 2-3 нравящихся вам варианта, успешно их комбинируя. Такое решение также позволит делить ресурс на четкие блоки, удобные для восприятия. Это помогает очень быстро найти требуемую информацию.
6. Неопределенный размер
Раз и навсегда определитесь с размером шрифта для вашего сайта. Используйте его абсолютно везде, даже если речь идет о меню. Для некоторых блоков допустимо отступление в несколько пикселей, но злоупотреблять этим не стоит. Постарайтесь достичь требуемого единообразия, не сделав ресурс слишком скучным и унылым. Это довольно непросто, с задачей по-настоящему справляются единицы, но двигаться в эту сторону необходимо.
7. Слишком большие буквы
При этом для размера шрифта следует соблюдать уже давно установленный стандарт: 14 пт. Конечно, строго придерживаться этого показателя необязательно, но постарайтесь отступать только в пределах от 12 до 18. Значение ниже будет плохо читаться на больших мониторах, а значение выше создаст эффект слишком крупного текста. Как правило, такая информация воспринимается нашим мозгом не слишком серьезно.
8. Длинные строки
Обязательно выделяйте четкий размер для текстового блока. Растягиваемое пустое пространство лучше всего заполнить фоном, рекламой или дополнительными элементами, но никак не статьей. Практика показывает, что строки длиной более 600 пикселей читаются намного тяжелее. Создается эффект сложного, невероятно длинного и скучного текста, даже если его размер не превышает и двух тысяч символов.
9. Небольшой междустрочный интервал
Стремясь сэкономить свободное пространство, дизайнеры напрочь забывают о междустрочном интервале. Тем не менее, его отсутствие создает впечатление сплошной текстовой стены, даже если информация удобно разбита на логические абзацы. Поэтому запомните: это значение должно быть в полтора раза больше размера самого шрифта. Вы можете, как прикинуть на глаз, так и подсчитать, но постарайтесь придерживаться требуемого значения.
10. Единообразие в цветах
Помните, что текст также должен вписываться в общую цветовую палитру, как и картинка. Это действительно важно, поскольку разноцветная мешанина неприятна человеческому глазу. Выберите только один оттенок для статей и используйте его для основного текста. Не допускайте, чтобы на одной странице он был белым, а на другой ― зеленым. Узнать более подробно о том, как работать с цветом, вы можете в этом посте.
11. Выделение важных элементов
Тем не менее, цвет также может служить способом выделения. Но не злоупотребляйте этим. На хорошем и грамотном сайте оттенок отличается только у ссылок, чтобы их сразу можно было заметить на общем фоне. Для важной или дополнительной информации лучше использовать полужирное начертание или курсив. Не забывайте про такое форматирование, ведь подобная статья читается намного лучше.
12. Одинаковое выравнивание
Не злоупотребляйте выравниванием. Даже если вам кажется, что именно эта информация прекрасно будет смотреться по самому центру полотна, подумайте еще раз. Середина нужна для подзаголовков. Правая сторона ― для эпиграфов и прочей информации. Для всего остального лучше всего использовать только выравнивание по левому краю. Оно прекрасно воспринимается глазом, а также настраивает читателя на серьёзный лад.
13. Оригинальность и контраст
Но, несмотря ни на что, никогда в жизни не бойтесь экспериментировать. Текст ― это такой же графический элемент. Он способен испортить или поднять настроение, завершить цельную картину самого сайта или же окончательно разрушить ее. Поэтому пробуйте все, что вам приходит на ум. Будьте смелыми!
Это были основные правила по работе с текстом, придерживаясь которых, вы сможете сделать свои работы более привлекательными. Не забывайте их использовать и всё у вас получится.
До связи, Иван.