All for Joomla All for Webmasters
Web - Мастер

Особенности типографики для web-дизайна

Особенности типографики для web-дизайна

Проблемы web типографики

С появлением возможности для включения в веб страницу шрифта используя синтаксис @font-face появилась проблема лицензионного использования шрифтов. Да, наверняка многие, если не все кто это прочтёт — усмехнутся и подумают «Какая же это проблема? Благодать одна…». Но для людей, которые зарабатывают созданием шрифтов — это действительно является первоочередным вопросом. Благо в интернете много отличных шрифтов распространяемых на свободных началах и при достаточном упорстве можно найти подходящий вам шрифт на ресурсах предоставляющих @font-face (например Google Web Font или typekit).

Также, часть шрифтов, которые распространяются через @font-face, мягко говоря, не предназначены для использования в качестве основных шрифтов на странице в силу их трудной воспринимаемости и различимости. Самое плохое, что может случится — это хлынет поток дизайнов от людей весьма отдалённо знакомых с типографикой. Но будем надеяться на лучшее.

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

Практически повсеместно используемые системные шрифты, Georgia, Verdana и Arial практически всегда ассоциируются с веб-дизайном. Из-за ограниченности выбора безопасных шрифтов, люди сосредоточились не на внешней стороне (красивости и прочая ерунда), а на удобочитаемости. Но несмотря на это, неверно используя и эти, проверенные временем шрифты, можно испортить дизайн. К сожалению в веб-дизайне нет таких точных и чётких правил как в полиграфии. Но все же не стоит отклонятся от разумных правил: контрастность шрифта должна быть достаточной для того что бы можно было сразу различить текст, не мельчите и прочее. Иначе это приведёт типографической катастрофе, если можно так сказать.

Муки выбора

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

Сейчас для прочтения длинного текста, написанного готическим шрифтом, который считался «читаемым» несколько веков назад, придётся потратить на порядок больше времени, по сравнению с использованием современных шрифтов из семейств Serif или Sans Serif, вне независимости от того, где находится текст: на листе или на мониторе.

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

Перечислим методы и характеристики, которые необходимо знать при работе с типографикой для web.

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

Контраст

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

Индивидуальность

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

Лучшие шрифты по обыкновению обладают индивидуальностью, которая, однако не отвлекает пользователя от процесса чтения и от содержания. Шрифты, которые обладают слишком яркой индивидуальностью, лучше использовать для выделений, поскольку в больших блоках текста они достаточно трудно читаются.

Высота

При уменьшении кегля текста немного увеличенная х-высота и контраст могут иметь очень большое значение. Правила подбора шрифтов использующиеся для полиграфии можно использовать и для экрана, однако из-за различия между текстом на мониторе и на печатном носителе, этих правил следует придерживаться ещё строже. Увеличенная х-высота и насыщенность литеры могут нам сделать текст более удобочитаемым даже при малых размерах шрифта. Например, Verdana и Georgia, популярные web шрифты, имею увеличенную x-высоту и увеличенный меж-знаковый интервал, в следствии чего текст написанный малым кеглем остаётся чётким и читаемым.

Смысл и суть сообщений

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

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

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

С засечками или без?

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

Одним распространённых способов достижения баланса и контраста в типографике является комбинирование шрифтов семейств С засечками (Serif) и без них (Sans Serif). Эта простая и легко подбираемая комбинация выглядит очень гармонично, при условии верного выбора шрифтов.

Нижеследующее не является правилом, но опытным путём было показано, что в большинстве случаев шрифты одного и того же дизайнера хорошо сочетаются вместе. Как в случае с изобразительным искусством в картинах одного и того же художника можно найти характерные особенности и «увидеть руку», так и в двух шрифтах одного дизайнера прослеживается его рука.

Комбинирование более одного выделительного или рукописного шрифта — идея практически всегда обречённая на провал. Хоть в каждом правиле есть исключения, но эти шрифты очень индивидуальны, так что одного бывает вполне достаточно. Использование второго может очень сильно исказить посыл текста.

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

И наоборот, два очень разных шрифта могут создать новое значение или интересное противопоставление. Комбинация шрифта, например, Baskerville, со шрифтом Futura, может очень интересно выразить идею противопоставления старого новому.

Эксперементируйте со стилями

В семействах наподобие Proxima Nova от Марка Саймонсона (Mark Simonson) шрифты имеют несколько типов интенсивности, что увеличивает наши типографические возможности.

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

В библиотеку!

Многие шрифты так или иначе связаны с какими-либо культурными периодами или субкультурами. Смотря над чем работает дизайнер, принадлежность шрифта, выбранного для дизайна, к той или культуре может быть как преимуществом, так и недостатком. При выборе шрифта всегда лучше выяснить где, когда и для чего он был создан. Иногда шрифт может «выглядеть» так как необходимо дизайнеру, однако вызывать неправильные ассоциации. К примеру, шрифт Trajan  используют в эпопеях, триллерах, романтических, комедийных и других фильмах, хотя это римский шрифт, которому уже около 1900 лет. Готические шрифты долгое время были и являются атрибутом тяжёлых металлистов и всего, что должно выглядеть «пугающим» и «темным». Понимание культурной принадлежности шрифтов помогает избежать неверных ассоциаций и недопонимания.

Доверяйте свой интуиции

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

Постовой: Если у вас есть сайт с тиц 10, то вы наверняка хотите узнать сколько можно на нем заработать.

Похожие материалы

1 Комментарий

  • Reply
    admin
    10.03.2017 at 11:48

    Круто

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