Как найти нужный шрифт, не зная его названия

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

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

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

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

Часто используемые шрифты

Стандартные шрифты для сайта это:

• Times New Roman;
• Arial; Georgia;
• Impact;
• Trebuchet MS;
• Verdana и другие.

Они входят в группу безопасных. Рассмотрим их подробней:

Arial . Преимущество этого компактного шрифта в высоте букв.

Tahoma . Благодаря средне-широким буквам, идеально-подходящий для технических статей.

Trebuchet MS . Самый неподходящий для чтения. Даже при нормальном размере 12-14 px надо вглядываться в текст, что ведет к напряжению глаз.

Times New Roman . Самый распространенный и широко-используемый шрифт. Идеально подходит для чтения, но при размере 12 px выглядит мелким.

MS Sans Serif . Считается системным шрифтом Windows. На нем написаны все памятки и оповещения операционной системы.

Georgia . Очень похож на Times. Но в нём более широкие и резкие засечки и концы.

Comic Sans MS . Самый ненавидимый обществом. Отличается плавными округлыми очертаниями, небольшой кривоватостью букв, маленьким меж буквенным расстоянием.

Courier New . Похож на тот, которым раньше отпечатывали на пишущей машинке. Courier New выделяется четкими, хорошо читаемыми буквами, отличающимися небольшим сжатием . -Минус: ненасыщенный цвет.

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

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

Итак, так какой шрифт лучше всего использовать на сайте? По последним опросам среди пользователей интернета, оптимальным вариантом является сделать заголовок с помощью Verdana, а основной текст - Times New Roman. Но не исключен вариант, при котором можно весь текст сделать именно Verdana.

Бывает, шрифт не отображается на компьютере. В таком случае следует прописать не один шрифт, а несколько.

Например, Verdana, Impact, Trebuchet MS. Тогда браузер после неудачной попытки использования Verdana попытается использовать Impact, а затем Trebuchet. В случае не отображения всех заданных шрифтов, система обозначит свой - по умолчанию. Таким образом, можно легко и просто оформить сайт на свой вкус, сделать его ярким и необычным. Главное - предотвратить проблемы при отображении на компьютерах посетителей ресурса.

Нововведение от Яндекс. Размер имеет значение!

Вслед за мобильным алгоритмом «Владивосток », Яндекс сделал фактором ранжирования размер шрифта . Теперь размер текста на мобильном сайте имеет значение и его стандарт 12 см. PX (или больше). Проверить шрифт на «мобилопригодность» можно в Яндекс.Вебмастере.

Эта новость вызвала негативную критику у создателей сайтов. Ведь, например, ресурсам, сделанным с использованием flash- технологии, для того, чтобы нормально отображаться на экранах мобильных устройств, придется создавать специальное приложение. А это отнимет много времени и денег.

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

Интересно! Разные виды шрифтов обладают неодинаковым размером. Если вы хотите сделать его больше, не обязательно изменять его пиксельный размер. Можно поэкспериментировать с выбором других шрифтов. Например, если поставить размеры Times New Roman и Tahoma - 12 px - выглядеть они будут по-разному. Последний, визуально будет смотреться больше.

Сейчас я вас научу плохому.

Допустим, есть картинка

и нужно найти шрифт, которым сделана надпись, или подобрать похожий по стилю и характеру.

Поиск по картинкам

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

https://www.google.ru/imghp?hl=ru

Исходную картинку загружаем через форму или кидаем на страницу поиска перестаскиванием.

Порой Яндекс отрабатывает лучше Гугла.

https://yandex.ru/images/

Польза от поисковых систем следующая.

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

Кто знает, это дело такое. Шансы малы, но не настолько, чтобы их игнорировать. Тем более в безвыходной ситуации.

«Что за шрифт» на MyFonts.som

Идем на Майфонтс в раздел, где работает специально обученный робот.

http://www.myfonts.com/WhatTheFont/

Мы роботу картинку, он нам - шрифты. Ну или ничего.

Но не спешите отправить ему картинку без проверки и доработки. Учтите, что:
– Робот не понимает кириллицу. Перед загрузкой удалите с картинки все символы, которых нет в латинице. Кириллические символы, совпадающие с латинскими можно оставить.
– У робота плохое зрение. Иногда он путает буквы с нестандартными формами. Поэтому иногда лучше кормить его по одной букве. Стоит найти самую характерную и начать с нее.

После загрузки скорректируйте распознанные символы, введя в ячейки под картинками правильные символы.

Если буква или знак (например, восклицательный) развалилась на две ячейки, перетащите одну картинку на другую и соберите букву назад.

Жмем Continue.

Робот постарается найти оригинал шрифта и предложит подходящие теги для дальнейшего самостоятельного поиска.

Поиск по ключевым словам на MyFonts.som

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

Наше изображение выполнено как бы фломастером (brush pen). Еще тут подойдут слова типа «каллиграфия» (calligraphic), «от руки» (handwritten) и т.д. Здесь можно воспользоваться тегами, которые предложил робот.

Можно искать термины по-отдельности или объединять их и комбинировать в одном запросе.

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

Жмем кнопку Search и просматриваем результаты, попутно отмечая для себя подходящие варианты на замену.

На Майфонтсе много вариантов на замену исходному шрифту.

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

Скриним.

Растр

В Фотошопе скрин превращаем в смарт-объект. В смарт-объекте накладываем на него Gradient Map от нужного цвета к белому.

В макете выставляем смарт-объекту режим наложения слоев, например, Multiply .

Для большинства случаев с белым фоном этого достаточно.

Кому этого мало, можете удалить из скрина белый цвет. Color Range…, тыкаете пипеткой в белый фон

получаете выделение по цвету, инвертируете выделение,

сглаживаете его пару раз на пиксель-другой, чтобы граница контура не была такой рваной,

и скрываете все белое под маску

В основном документе уже делаете со смарт-объектом все, что душе угодно, почти как с векторным шейпом.

При уменьшении смарт-объекта неровности контура станут менее заметны. Поэтому лучше скринить с запасом, а потом уже уменьшать до нужного размера.

Вектор

Если нужен вектор, то делаем трассировку в Иллюстраторе.

Открываем скрин из PNG-файла:

На панели Image Trace ставим Mode: Black and White, галочку Preview и аккуратно крутим Threshold и настройки в Advanced:

Получив приемлемый результат, делаем надписи Expand

и получаем вектор на все случаи жизни:

Бесплатные шрифты

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

За бесплатными шрифтами идем во Вконтакте, в группу «

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

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

Вот краткий список аспектов, которые мы последовательно рассмотрим в нашем пособии:

* Как намечать цели
* Сколько шрифтов выбирать для работы
* Покупать или не покупать
* Каков характер вашего контента?
* Как составлять удачные шрифтовые пары
* Пары шрифтов 1-го типа: Гармония
* Пары шрифтов 2-го типа: Контраст
* Пары шрифтов 3-го типа: Несовместимость

Как намечать цели

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

Сколько шрифтов выбирать для работы

Из скольких шрифтов вы будете составлять вашу типографскую палитру, полностью зависит от вас, только не теряйте из виду намеченный к достижению ориентир. Шрифты подобны людям - у каждого свой норов. И, опять же, подобно людям, шрифты порой между собой не ладят. Представьте, будто ваши шрифты - гости за свадебным столом; одного балагура там обычно вполне достаточно, а сразу несколько бравых удальцов вместе могут даже испортить праздник, как в одной из серий шоу Big Brother.

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

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

Множество бесплатных сервисов открывают нам доступ к ресурсам для внедрения с помощью @font-face: , но не спешите отказываться от рассмотрения и платных вариантов, если проект того стоит. Цена лицензии на использование материалов в пределах одного домена может варьироваться, но порой и раскошелиться бывает выгодно.

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

Сравните между собой эти два схожих шрифта...

В случае с Museo кернинг выполнен превосходно. А в случае с Quicksand - не столь безукоризненно (посмотрите на "o" и "i", например), хотя видно, что попытка была, но в онлайн-текстах наскоро выполненный кернинг не слишком-то и заметен. Есть инструменты, например, позволяющие вам выполнять кернинг посимвольно, но для обработки больших массивов текста они едва ли годятся.

Вы можете сказать: "Подумаешь, велика разница!", но ведь в мелочах бес-то и прячется. Моя бабуля так говорит.

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

Общественная польза . Поддерживая отрасль материально, вы способствуете её развитию. Шрифтовики повышают своё мастерство, зарабатывая на жизнь честным трудом. Мы, в любом случае, учитываем собственные расходы, выставляя заказчику проекта счёт.

Каков характер вашего контента?

При выборе шрифтов важно учитывать характер материала, с которым вы работаете. Это почти полностью сплошной текстовый массив? Много ли там заголовков и подзаголовков? А может, это журнальная страница со вводными вступлениями и врезками-цитатами? Работая с целой группой шрифтов, используйте их строго по назначению, не путайте "роли"; если подзаголовок уже набран вами одним шрифтом, то и для остальных подзаголовков применяйте этот же шрифт. Пусть будет видно, для чего предназначен каждый из них.

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

Как составлять удачные шрифтовые пары

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

Давайте проанализируем каждый из удачных вариантов.

Пары шрифтов 1-го типа: Гармония

Когда говорят, что два шрифта гармонируют между собой, имеется в виду наличие неких общих для них обоих черт. Сходство может прослеживаться в том, как выполнен кернинг, в их пропорциях, в одинаковой высоте "плоских" прописных букв. Взгляните на примеры, которые приводит Керри Скотт Дженкинс (Kerry Scott Jenkins), и вы заметите явное следование общим пропорциям.

Один из способов составления гармоничного сочетания шрифтов - подбор их пары из одного семейства. Кому же ладить, как не родственникам?! В любом случае, семейство Droid - разработка Стива Мэтисона (Steve Matteson) для устройств на базе Android от Google - включает различные по толщине штриха и начертанию модификации, как с засечками, так и без. Пожалуй, они немного простоваты, зато вместе смотрятся отличной парой. Один из них подойдёт для набора им заголовков, другой - для основного текста.

В любой комбинации выглядят отменно.

Чётко очерченные, современные, к тому же (отвечая вашим ожиданиям), рассчитаны специально на использование в веб-среде и на портативных устройствах - вытянуты по икс-высоте.

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

"Полым" называется шрифт с гарнитурой, символы которой насквозь прочерчены по линиям контура белым. – fonts.com"

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

Взгляните на этот образчик шрифта с брусковыми засечками; одним ударом семерых.

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

Среди шрифтов встречаются такие красавцы, что делать на них ставку можно почти без опаски. Например, Buttermilk; воплощение пышности, изысканности и нарядности. Он в любой компании будет смотреться шикарно (разве что вы нарочно попытаетесь его кем-нибудь затмить)! В нашем примере его "дама" - Georgia:

Можно поставить его и с Aller, столь же изящным шрифтом без засечек:

А этот пример был задуман мной для иллюстрации дисгармоничного сочетания данного шрифта – уж слишком яркая "личность" рядом с ним оказалась. Но знаете, что? Я обойдусь без отрицательного примера, ведь они вместе здорово смотрятся! Наверное, лучше не загадывать заранее...

Пары шрифтов 3-го типа: Несовместимость

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

Но почему же они не сочетаются? Разве не к прочному единству нужно стремиться через контраст?

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

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

Но толщина штриха и размер их одинаковы, и эти причудливые бородки в основании контура символов тоже.

И конфигурирован готический шрифт слегка наклонно в противоположность вертикальному строению прямого:

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

Совет напоследок

Сейчас, открыв каталог шрифтов Web Font от Google, вы найдёте там готовые рекомендации по подбору для каждого из них парных вариантов. Неплохо.

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

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

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

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

Вы можете вместе со мной пройтись по сервисам, а для тестирования использовать мою картинку. Возможно, что вы придете к другим выводам.

Вот эта надпись:

Первый сервис, с помощью которого мы будет определять шрифт –

Нажмите на кнопку “Browse” для выбора картинки с текстом. Далее вам предстоит выбрать один пункт и даух:

The background color is lighter than the characters color – означает, что цвет фона светлее цвета букв и символов,
The background color is dark, please invert colors – светлый текст на темном фоне.

Теперь нажмите на кнопку “Continue” для продолжения.

В новом окне вам предстоит идентифицировать буквы – введите каждую букву в соответствующую для нее поле.

Снова кнопка “Continue” и перед нами список наиболее похожих шрифтов. Кстати, сервис правильно определил шрифт. Первый вариант – правильный.

Оценка сервиса – 5 баллов.

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

После выбора картинки с текстом нажмите “Continue”. Приятно, что сервис частично сам идентифицирует символы и лишь сомнительные вам придется ввести вручную.

И этот сервис отлично справился с заданием, правильно угадав шрифт. Единственный недостаток сайта What The Font это меньшее количество шрифтов по сравнению с WhatFontIs.

Оценка сервиса – 5 баллов.

Это были сервисы, которые определяют шрифт по картинке. Однако, есть сайты, где работает поиск шрифта по отдельным отличительным элементам.

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

Примеры вопросов, на которые вам предстоит ответить:

Есть ли у шрифта засечки,
название: просто введите название шрифта или его часть,
похожие шрифты – введите название похожих шрифтов, на тот который вы ищите,
дизайнер шрифта. Если известен дизайнер, или издетель шрифта, то вы можете включить его в поиск.

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

Мне не удалось с помощью этого сервиса найти нужный шрифт. Тест на пройден.

4. Font Finder Firefox Add-On – дополнения для Firefox, которое определяет какой шрифт используется на сайте. Просто выделите слово на сайте, и дополнение определит шрифт и стиль CSS.
Ссылка на дополнение https://addons.mozilla.org/en-US/firefox/addon/font-finder/

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

С помощью данного сервиса также не удалось определить шрифт.

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

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

СКОЛЬКО ШРИФТОВ НУЖНО ИСПОЛЬЗОВАТЬ В ДИЗАЙНЕ?

На этот вопрос нет конкретного ответа – однако в большинстве случаев можно обойтись одним шрифтом. Главное, чтобы у этого шрифта было несколько начертаний, как минимум Regular, Bold и курсив. Этого вполне достаточно для создания текстовой иерархии. Кроме того, использование одного шрифта избавляет дизайнера от мучительного подбора шрифтовой пары. Однако единый шрифт делает дизайн несколько скучным, что иногда неприемлемо.

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

Как правило, для того, чтобы выделить заголовки, используется шрифт, который является персонализированным (personality) и придает тексту индивидуальность. Второй шрифт применяется для обычного текста и очень важно, чтобы этот шрифт был читаемым. Эти шрифты должны хорошо сочетаться между собой, так как малейший диссонанс ухудшит восприятие контента. Заголовки должны быть заметными, но не кричащими – ведь задача заголовка состоит в том, чтобы подготовить читателя к просмотру следующего отрывка текста.

КАК ВЫБРАТЬ ОСНОВНОЙ ШРИФТ

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

При выборе шрифта для основного текста прежде всего нужно обращать внимание на его читаемость. Лучше всего не пытаться изобретать велосипед и использовать «испытанные» шрифты, которые хорошо смотрелись в предыдущих проектах. У каждого дизайнера всегда есть в запасе несколько проверенных вариантов – вот эти шрифты и нужно использовать в первую очередь. Если говорить о шрифтах Google, то оптимальным выбором будут Droid Sans, Noto Serif и Cabin .

КАК ВЫБРАТЬ ШРИФТ ДЛЯ ЗАГОЛОВКОВ

А вот тут многих дизайнеров, особенно новичков, поджидает засада. Выбрать personality-шрифт не так-то и просто. Если для основного текста можно не особо напрягаясь выбрать какую-нибудь тахому или вердану, то со шрифтом для заголовков такой номер не пройдет. Personality-шрифт должен быть особенным, но при этом не слишком броским. Он должен привлекать внимание, но лишь настолько, чтобы это не мешало чтению. Каждому шрифту присущи характерные особенности – говоря простым языком, некоторые шрифты бывают строгими, другие плавными, третьи – резкими и т.д. И если personality-шрифт подобран удачно и его вид гармонично сочетается с основным шрифтом, то это означает, что дизайнер полностью справился с поставленной задачей.

В данном примере использовано сочетание шрифтов FiraSans и Merriweather .

ВАРИАНТ 1: БЕЗОПАСНЫЙ ВЫБОР

Многие шрифты созданы в двух вариантах – без засечек и с засечками. Например, шрифты Scala Sans и Scala Serif, Meta и Meta Serif, Droid Sans и Droid Serif. Данные шрифты можно безо всяких опасений использовать в паре, так как форма букв в сансах и серифах практически идентична, но при этом они достаточно хорошо контрастируют между собой. Тем дизайнерам, которые не до конца уверены в своем умении правильно подбирать шрифты, лучше всего использовать этот способ, так как он наиболее безопасный.

Сочетание шрифтов DroidSans и DroidSerif

ВАРИАНТ 2: ИГРА НА КОНТРАСТЕ

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

К примеру, шрифт Noto Serif отличается плавными очертаниями букв, он легкий и хорошо читается. При этом он очень выразительный и, если это слово можно применить к шрифту, доброжелательный. Какой шрифт лучше всего подобрать к нему в пару? Лучше всего взять шрифт без засечек и с похожими характеристиками. То есть, персоналити-шрифт должен иметь похожие пропорции, а его очертания должны перекликаться с очертаниями основного шрифта. В паре с Noto Serif будет очень хорошо смотреться Questa Sans – он достаточно выразительный и современный и хорошо контрастирует со шрифтом с засечками.

Сочетание шрифтов Noto Serif и Questa Sans

ВАРИАНТ 3: УСИЛЕНИЕ КОНТРАСТА

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

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

Шрифт Cabin – простой, броский и читаемый. Легким его не назовешь, он весь такой «квадратный» и динамичный, однако при этом он прекрасно подходит для набора основного текста. Его можно использовать в случаях, когда нужно усилить подачу информации и привлечь внимание читателя. В качестве контрастирующего шрифта можно выбрать шрифт с засечками, например, Buenard. Данный шрифт более традиционный, консервативный и несколько холодный. При этом он отлично смотрится в паре с Cabin, своим спокойствием оттеняя его динамичность.

Сочетание шрифтов Cabin и Buenard

ВЫВОД

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

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