И до сих пор многие веб-дизайнеры подбирают шрифты к проектам методом «угадай-ка» или обычным перебором шрифтов. Но при этом, в конечном счете, основными остаются те, что продолжают относиться к одному из четырех шрифтовых семейств: Slab, Serif, Script, Sans. Сколько лет, сколько изысканий в теории типографики, сколько размышлений и различных доказательств и опровержений, а эти четыре типа шрифтов, буквально, «кочуют» из проекта в проект. Почему?! Как они сочетаются? Да, в чем же их секрет-то?
Вопросы узнаваемы и порой возникают даже у профессиональных дизайнеров, поскольку человеку свойственно иногда хотеть и искать чего-то новенького и интересного. В итоге, после нескольких дней «прогулки» по разным сайтам и ресурсам, они используют все те же шрифты, что и всегда.
А клиенты при этом удивляются: «Почему шрифтик такой обычный и скучный. Используйте какой-нибудь с завитками или ломанный, вы же дизайнер». Разумеется, хотя бы маломальское знание о шрифтах и основах типографики поможет дизайнеру объяснить заказчику причину своего выбора, и это большой плюс. Более того, у дизайнера появляется и мотивирующий бонус к выбору именно стандартных шрифтов.
Вот сегодня мы и хотим подробно обратиться к теме именно этих основных шрифтовых семейств, разобрать работы веб-мастеров и обратить внимание на нюансы использования и сочетания шрифтовых пар.
Serif
Шрифты Serif или с засечками – самые известные и широко распространенные в веб-дизайне. Стиль, более известный по печатной продукции (книги, газеты), используется в веб-дизайне для оформления заголовков, слоганов, описаний и даже для небольших текстовых блоков.
Да, было время, когда дизайнеры старались избегать этих шрифтов для интернет-проектов, поскольку полагали, что читать такой шрифт сложно и неудобно, словно бы «глаза режет». Спустя годы, после долгих изысканий на эту тему и развитию технологий, такое положение вещей изменилось. Появились экраны высокой четкости, увеличилось разрешение, изменились передача цветов и технологии экранного сглаживания (оно касается не только графики в видеоиграх). Соответственно, все это способствовало тому, что засечки стали полностью отображаться на экранах, пользователи смогли их замечать, понимать и… воспринимать.
Но популярность serif-семейства значительно меньше, чем у Sans. Точнее говоря, шрифты с засечками всегда сочетаются со шрифтами без засечек, которыми создается основная масса текста на сайте. Иными словами, serif удобен для оформления, украшательства, небольшого текстового блока (1-2 предложения), но не для всего сайта. Хотя иногда дизайнерам удается подобрать настройки так, чтобы его было удобно читать.
Также следует помнить одну интересную вещь: шрифты с засечками подразделяются по типу этих самых засечек на старые, новые и переходные. Так, например, старый тип засечки имеет более овальную форму. Современные засечки имеют очень тонкие штрихи по ширине и длине. Переходные типы шрифтов сочетают в себе все особенности засечек и как раз они-то и используются в веб-дизайне чаще всего.
Особенности Serif
- Подходят для основного текста и небольших надписей.
- Если стиль веб-дизайна современный, то много засечек на странице будет смотреться «не в тему», вычурно. В таком варианте допускается малое их количество.
- В качестве пары подходит простой шрифт без засечек.
- Используя базу Google Fonts, лучшими вариантами являются: Merriweather, Playfair Display
Что же до использования в веб-дизайне, то стоит обратить внимание на formandfunctionagency, isadoradigitalagency, thejtsite, harvardlawreview. На каждом из них шрифт с засечками используется в сочетании с простым шрифтом, а также и в разном количестве. Например, harvardlawreview полностью набирают все статьи таким шрифтом, и даже заголовок. Кроме того нижние ссылки, оформление кнопок и надписей тоже создано со шрифтом с засечками, но для удобства восприятия и чтения были изменены жирность, наклон, кегль, высота и размер штриха. В то же время в варианте isadoradigitalagency основной текст набран простым шрифтом, но Serif дополняет и украшает собой дизайн в целом, придает некий шарм и элегантность строгому и скучному на первый взгляд сайту.
Sans Serif
Шрифты типа Sans Serif не имеют засечек совсем, а буквы выглядят простыми, но как раз таки не скучными, как может показаться некоторым. В стилях без засечек буквы используются разными по толщине, по высоте, по жирности. А сочетая все эти варианты, можно получить весьма интересный текстовой набор, который будет гораздо более удобен и легок для чтения, чем при одном варианте набора.
В веб-дизайне Sans Serif популярен ввиду своей простоты и универсальности. Как пример, шрифт Helvetica. Как часто мы можем видеть его на том или ином сайте, но какие при этом начертания его разные, и дизайны сайтов тоже совершенно непохожие друг на друга.
Особенности Sans Serif
- Отлично подходит для основного контента и оформления надписей, заголовков и пр.
- Тонкие варианты написания букв трудно прочитать, поэтому их в веб-дизайне использовать не рекомендуется.
- Сочетаться в паре может с любым по начертанию шрифтом, в чем и состоит его универсальность.
- Используя базу Google Fonts, популярны варианты шрифтов: Open Sans, Roboto.
Если рассматривать сайты с простыми шрифтами семейства Sans Serif, то это lstore, craftedny, aviana, copiaincolla, destinationsaintcamille, brentondaltonphotography, globalmusicrights. Как видно, все разные по масштабности, тематике и дизайну, проекты включают в себя совершенно разные шрифты по названию (стилю начертания), но одного семейства – строгого и простого Sans Serif. Где-то сочетание происходит со шрифтами с засечками, а где-то дизайнеры использовали только одно семейство, но разные шрифты. Иными словами, пару подобрали в пределах одного стиля.
Script
Шрифты семейства Script встречаются редко, а когда встречаются, то присутствуют в качестве оформления. Им пишут названия, некоторые заголовки, используют в логотипах. Но его нет в основном контенте, его нет в сопутствующих элементах (кнопках, ссылках, меню). Таким образом, он появляется в одном-двух местах в дизайне и не более. Причина тому банальна. Его совершенно по-разному визуально воспринимают люди, а многим так и вовсе читать сложно.
Отличить Script можно по стилю начертания: кривые, наклонные буквы, соединяющиеся между собой наклонной линией. В результате чего создается имитация рукописного текста или курсивного шрифта. Многие веб-дизайнеры используют Script тогда, когда нужно создать именно «рукописный контент», но при этом еще и сделать таким, чтобы его было проще читать.
Также существует и стереотипность восприятия, что рукописный шрифт обладает некой женственностью и потому только на сайтах для женщин его уместно использовать. О стереотипности мы уже рассказывали отдельно, поэтому сейчас останавливаться не будем. Отметим лишь то, что точно также можно провести аналогию и к жирному, толстому и массивному начертанию букв, которое может относиться к мужской направленности. Но, так или иначе, все эти мысли и заблуждения зависят только от окружения текстового блока и данных шрифтов. От самой тематики, цветности, стиля дизайна, количества анимации и прочего, и прочего.
Самая главное у Script – это читаемость. Шрифты семейства сложно зрительно воспринимать при беглом чтении и ознакомлении. А если речь идет о малых по размеру буквах, находящихся в небольшом блоке, то и тем более.
Особенности Script
- Используйте для двух-трех слов, обычно названия, короткого слогана.
- Не стоит набирать такими шрифтами большие «простыни» текста.
- В паре сочетается только со шрифтами без засечек. Если использовать с засечками, то типографика в целом будет ужасной, читать будет сложно, непонятно, посетителю придется задумываться над тем, что же именно написано. Да и сама скорость чтения упадет значительно.
- Самыми известными шрифтами считаются: Lobster, Pacifico.
Если посмотреть на строгий licornpublishing, насыщенный контентом разным thomsonsafaris, информационный brouwerijmartens, необычный kazuma-kurata, то можно заметить, насколько минимально использован был рукописный шрифт. Исключительно только для того, чтобы акцентировать внимание посетителей на заголовки. Или, как в случае с брендом пива, создать стилистическое оформление для интро-видео. Всё, и не более.
В тоже время мы не можем не остановить внимание на проекте llvsportsclub, про который некоторые скажут: «Здесь тоже упрощенный Script». Но в действительности нет. Это не более чем имитация, путем использования шрифта Bell Italic, который, если его рассмотреть, базируется на обычном Serif, то есть с засечками. Такой вариант, конечно, полностью не заменяет Script, но подходит для тех же вариантов использования и смотрится ничем не хуже.
Slab
Последний основной тип начертания шрифта – брусковый или плиточный Slab. В общем и целом, нужно отметить, что тип шрифтов весьма интересный и используется достаточно часто. Даже одно время Slab существовал, как подвид шрифтов с засечками. Теперь же подвид плиточных шрифтов относится практически к любому типу, где буквы имеют малый вес и выглядят невероятно тонкими.
Но вот жирные и большие буквы, и тяжелые шрифты используются почти всегда в веб-дизайне в тех местах, где должен быть яркий и массивный заголовок. Такие надписи словно бы кричат пользователю: «Вот он я, здесь, открой меня и прочитай!»
Кроме веб-дизайна его можно видеть в различной рекламе, но все также в коротких и четких сообщениях. Им уже не пишут длинные предложения и тем более не набирают блоки текста. Исключительно для оформления заголовков и надписей. И причина тому: возможная трудность читаемости таких плиточных шрифтов. Отличным вариантов применения бывают небольшие однобуквенные логотипы, приложения или рассыпающиеся надписи.
Удобен Slab также и тем, что большие, весовые буквы можно использовать как угодно. Например, создавать множественные художественные эффекты, покрывать буквы текстурами, свечениями, создавать заголовки в стиле ретро и газет, окрашивать в градиенты, украшать небольшими картиночками-иконками и прочее, и прочее. При этом сами буквы шрифтов Slab остаются читабельными, но лучше их другими текстовками не окружать.
Особенности Slab
- Отлично передает текст и позволяет произвести художественное украшение
- При малом размере буквы почти невозможно прочитать и визуально воспринять.
- Сочетаться в паре может либо со шрифтами с засечками, либо без, но не с рукописными шрифтами. Выглядеть такое сочетание будет безвкусным.
- Основными популярными шрифтами являются: Graduate, Kelly Slab, Roboto Slab, Rammetto One
Применяют его не слишком часто, но увидеть можно на recruityourcrew, happierlivingtoshiba, medxl, preferredvaletparking, .base54, ketosports, brother, bridgerbeef. В отдельных случаях использовался более ломанный (моноширинный) стиль начертания, где-то более художественный, но во всех случаях общая современная стилистика была сохранена. То есть надписи выполнены плоскими, без эффекта 3D, теней и прочего. Хотя, как мы говорили ранее, объемность для типографики используется, когда требуется создать глубину на странице, объем. Например, как на biooilitalia, yslnights, madebyfew, friluftsland. Иными словами, художества в типографике создаются и используются, другое дело в каком количестве и как именно. Но это уже отдельная тема.
Выводы
Самые большие ошибки, допускаемые веб-дизайнерами и даже профессионалами – использование более двух шрифтов на проект или использование похожих друг на друга шрифтов. Выше мы приводили пример проекта, где шрифт семейства Sans Serif имел разные стили. Но надо заметить, что все эти стили были разными, они только отдалённо напоминали основной шрифт. «Каша» и однородность не ощущались в том дизайне.
Но поскольку не всегда можно так подобрать шрифты, то самой простой является шрифтовая пара разных категорий из четырёх существующих. Да, есть еще моноширинные, есть экранные, но и они отчасти являются подвидами обычного шрифта без засечек. Старайтесь выбирать те шрифты, где много настроек и попробуйте для каждого из них (шрифта) настроить только что-то одно. Тогда вариантов написания будет много, использовать такие варианты на сайте можно в большем количестве, но зато самих шрифтов будет два. При этом визуально смотреться будет гораздо приятнее и читать удобнее.
Также следует обращать внимание на шрифты с похожими формами букв и наклонностью. Помните, мы уже рассказывали об этом и приводили примеры того, как выглядит надпись с разнонаклонными буквами. И разумеется, эксперименты. Без них сложно создать действительно красивую и удобную типографику. Можно идти по проторенной тропе и все свои дизайны создавать «под копирку». Но рано или поздно это станет неинтересно заказчикам, что будут смотреть ваше портфолио и осознавать, что все вы делаете однотипным.
Каждый проект, сайт имеет свое настроение, каждая тематика привлекает разных по характеру людей. Шрифты способны задать тон сайту, изменить настроение людей и вдохновить их на покупки, посещения, чтения и прочее, и прочее.