Во время проектирования дизайна сайта смешивание и подбор пары-тройки шрифтов может стать, наверное, самой болезненной частью работы веб-дизайнера. Никто не оспаривает аксиому о том, что идеально подобранные шрифты и хорошая типографика приводят к появлению красивого и читабельного текста и начертания шрифта, который впоследствии можно уже использовать в любом проекте. Его становится проще модифицировать, деформировать, изменять, дополнять.
Но создать подборку с нуля, обычно, не так просто. Что же следует учесть при смешивании шрифтов? Разумеется, универсального ответа нет, нет и такого: «это – хорошо, а вон то – плохо». Но существуют некоторые детали, тонкости, на которые необходимо обращать внимание, которые рекомендуется помнить веб-дизайнерам. Например, это х-высота (высота строчных букв), контрастность, фигурность, наклон и даже общее настроение (о нем мы уже рассказывали в прошлый раз).
В этом материале мы решили подробнее рассмотреть вопросы, связанные именно с деталями шрифтов, которые важны и которые влияют на то, почему одна пара шрифтов смотрится визуально красиво, а другая создает форменное безобразие.
В начале было…
Одними из основных ключей, что позволяют успешно сочетать шрифты друг с другом, являются, казалось бы, самые несовместимые вещи, дисперсия (отклонение от нормы) и сравнение. Например, подбирая наиболее различающиеся шрифты, вы можете подобрать пару, шрифты которой будут соответствовать друг другу и создавать прекрасное визуальное сочетание.
Еще один ключ – количество шрифтов на проект. Это правило всегда есть и будет простым – шрифтов нужно мало. Не стоит выбирать пять-семь штук. Получится «каша» и безобразность на холсте. Начинайте всегда с двух семейств шрифтов, этого бывает достаточно. Обычно.
Но чтобы при этом найти отклонение (дисперсию) потребуется всего ничего – контраст. Он получается при смешивании разный категорий шрифтов, разных по размеру, весу, а также стоит обращать внимание на высоту, фигурность и наклон. Выглядит, конечно, все это безумно сложно, но на деле оно таково только вначале.
Для примера посмотрите на то, как подбирает шрифты студия castirondesign, а также soireequinzeminutes, .thelonelypixel, bucketlistly, table-wow, nejm. Каждый из них не имеет преимущественно более двух шрифтов, но при этом каждый шрифт отличается от другого, хотя визуально в первые секунды просмотра сайта этого и не ощущается. Таким образом, и проявляет себя дисперсия и сравнение, а также контраст.
Контраст не красок, но букв
Контраст в типографике создается несколькими разными способами, и все они используются веб-дизайнерами на одинаковом уровне и при одинаковой частотности. Например, можно отдельные части текста выделять цветом, а можно подбирать шрифты из разных категорий, разного веса или размера, наклона и начертания.
Чаще всего, конечно, можно видеть сочетание шрифта с засечками и без. При этом основной текст создается обычным шрифтом, а засечками «оформляют» заголовки. Но также очень часто дизайнеры попросту обожают использовать выделение с помощью курсивного или каллиграфического написания. Это больше бросается в глаза, становится более заметным, но и безвкусицы не присутствует.
Это удобно и применимо в среде веб-дизайна. Если посмотреть на полиграфию и работу с логотипами, то все в корне наоборот. Шрифты с засечками применяют чаще для основного написания, а без засечек – для заголовков и названий.
Несмотря на то, как обычно сочетаются шрифты, сочетание засечки-нет засечек попросту удобно читать (lockedowndesign). Удобно и всё тут!
Для примера посмотрите сочетания и проявления контраста на cellierdeschartreux, crane, bloc, analyticaprojects. При этом обратите внимание, что там, где контраст был достигнут попросту выбором жирного начертания для осинового шрифта, этот контраст практически неуловим и незаметен, а общая масса текста все равно сливается (в некоторых примерах). Причиной тому может служить малое отличие жирного стиля от обычного, что приводит к визуальному сливанию.
Между тем шрифты семейства Sans serif очень хорошо сочетаются с иными стилями. И некоторые сайты отлично работают, сочетая разное начертание и стилистику. Почему? Потому что создается читабельность визуальная. Все понятно, четко, можно быстро пробежаться глазами и понять где, что и о чем. Сам по себе Sans serif очень прост в начертании. Но если вдруг вам захотелось использовать сложный тип шрифта, то лучше приметь либо для арт-стиля веб-дизайна, либо на одной или паре слов. Весь прочий контент лучше будет смотреться с обычным и простым начертанием шрифта.
Контраст может создаваться также и с помощью размера. Для такого варианта придется задуматься над тем, какие размеры шрифтов используются во всем дизайн-макете. Для упрощения удобнее сначала выбрать размер для основного контента, а затем резко увеличить на пару пунктов размер шрифта для окружающего текста. И при этом помнить, что большой шрифт отражает самую важную информацию, создавая, тем самым, иерархию для проекта. Именно поэтому подбирать похожие шрифты попросту «запретно». Все будет сливаться, смешиваться. Типографика будет неприемлемой.
Более толстые, тяжелые шрифты с толстыми штрихами, засечками всегда выглядят визуально больше и массивнее. Поэтому их удобно использовать для контраста с более тонким начертанием, обычным стилем, и неважно курсивный он или нет, цветной или однотонный. Наверное, это один из самых простых ключей к сочетаемости шрифтовых пар. Нагляднее это видно на jonykrau, over, forestia, curlythemes, storiesforgood.
Также веб-дизайнеры достаточно часто используют и цветовой контраст в типографике. И хотя многие проекты отлично сочетают черное и белое, некоторые цвета все же добавляют акцента и органически вписываются в целостность.
Загадочность х-высоты
Х-высота – расстояние от базовой линии до верхней части строчной буквы «х» в данном конкретном семействе шрифтов. Интерес представляет тот факт, что у каждого семейства эта высота разная. Но существуют подобия, поэтому при смешивании таких подобных друг другу шрифтов по х-высоте, создается ощущение гармонии, баланса, красоты.
Но можно и немного «обмануть» шрифты с одинаковыми х-высотами. Для этого совсем немного изменяют размер точки так, чтобы шрифты выглядели одинаково. При этом будет четко видно, что по начертанию они разные. Маленькая хитрость, но удобная для тех веб-дизайнов, где в одном блоке текста используют разные шрифты, но при этом они выравниваются друг с другом. Примеры можно увидеть на domainedirect и cellierdeschartreux.
Начертание и формы
Общие по виду шрифты с похожими характеристиками всегда стремятся к парному соединению и визуально всегда хорошо сочетаются. Рассмотрим более подробно вопросы общей формы, ширины начертания, стили засечек и наклон букв. Для примера воспользуемся проектами hatshop, authenticstyle, jhna, dixonandmoe.
Насколько похожи кегли, размер и общая форма букв? Похожи или не похожи? Буквы имеют средний или стиль regular (обычный), но рядом всегда есть супер-жирные, низкие по высоте, высокие, тонкие или тесно размещенные буквы на противоположном конце сочетания.
Овальность и внутрибуквенный просвет – хорошие возможности сравнения, поскольку в хорошо различимых шрифтах эти характеристики проявляются в одинаковых формах и размерах независимо от стиля или категории шрифта.
Ширина штрихов также представляет интерес. На практике попробуйте сочетать шрифты с одинаковой шириной штриха или шрифты с одинаковой степенью дисперсии ширины штриха, то есть – разными. То же самое можно сказать и о стилях с засечками. Они бывают толстые или тонкие, наклонные или плоские, простые или сложные.
И, конечно, смотрите на наклон букв. Не стоит смешивать шрифты с разным наклоном, например, в противоположные стороны. Некоторые дизайнеры пытаются это использовать, но наклоны, как правило, используют очень маленький угол. Для удобства всегда смотрите на наклон буквы «о».
Настроение шрифта
Стиль шрифта может быть нейтральным или передавать четкое настроение или ощущение. Именно поэтому при смешивании стилей можно добиться именно того результата, который ожидается. Настроение типографики позволяет, своего рода, устанавливать связь с создаваемым проектом, так как именно она, в большей степени, ответственная за то, смогут ли посетители понять контент, удастся ли им его почувствовать, пережить какие-то эмоции. Таким образом, создается своего рода многосторонняя связь между тем, что вы делаете, для кого и кем сами являетесь. Мы уже много говорили о настроении, но добавим вот что:
Посмотрите на примеры и обратите внимание на то, какие типы шрифтов сочетаются и какое настроение создают: dodgeandburn, peaktwo, botanistofficial, andchange, victoryadvisors.
Поэтому для удобства сочетания шрифтов всегда стоит придерживаться философии Hoefler & Frere-Jones: «пусть одна вещь всегда постоянна, а другая всегда меняется».
Что еще почитать
Наверное, именно это некоторые читатели посчитают наиболее «вкусненьким»… НО.
Существует два очень занятных материла о 19 комбинациях шрифтов и о 484 возможных сочетаниях шрифтов, которые имеют собственный код (значение). Так, например, пару Times New Roman + Helvetica можно использовать «на свое усмотрение – 1», пара Times New Roman + Century имеет значение «3 – подумайте еще раз стоит ли оно того», а пара Times New Roman + Garamond является «неконсервативным выбором – 2», то есть, чем-то неординарным, не общепринятым.
Материалы, действительно, интересные и не будут лишними ни веб-дизайнерам, ни для тех, кто занимается логотипами или просто для общего ознакомления.
Выводы
Когда дело доходит до того, что именно работает в вашем проекте или нет, всегда стоит уделить внимание типографике и особенно комбинированию шрифтов. Если вам до последнего момента кажется, что чего-то не достаточно в целом, или, наоборот, всё выглядит до безобразия идеальным – все равно попробуйте найти дополнительные сочетания шрифтов. Весь секрет комбинирования шрифтов в том, чтобы то ощущение, то настроение, которое создается благодаря их сочетанию, работало на проект, на бренд, на целевую аудиторию.
Попробуйте зрительно представить, если бы на примерах, что мы привели выше, были бы использованы другие сочетания шрифтов. Что получилось бы? Было бы также интересно изучать сайты, просто смотреть на них?