Типографика: процесс выбора шрифта. Как подобрать сочетающиеся шрифты – несколько полезных советов

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

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

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

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

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

Нажмите на кнопку “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/

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

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

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

Итак, Вы просматриваете Ваш любимый ресурс и находите на нем сайт, использующий которые Вам нравится. Вы тоже хотите такой шрифт (и чем быстрее, тем лучше!)… и что же нужно сделать, чтобы узнать название этого шрифта? Звучит знакомо? Да, мы все бывали в подобных ситуациях.

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

Cервис создан одним из крупнейших поставщиков шрифтов (myfonts.com, — прим.перев). Это ресурс №1 в Вашем списке идентификаторов шрифтов. Просто загрузите картинку со шрифтом, который нужно идентифицировать, на сервер WTF (делаете скриншот и вырезаете слово с понравившимся шрифтом, — прим.перев) или вставьте ссылку на изображение шрифта в специальную строку. Система покажет Вам в результатах различные варианты шрифтов.

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

Identifont

P.S. От себя лично и читателей Дизайн Мании хочется поблагодарить проект МногоЛого за эту подборку действительно полезных в работе сервисов. Оригинал статьи находится на сайте Webdesign Deport . Подчас именно от шрифтов в дизайне сайта многое зависит. Чаще всего используются, конечно, стандартные наработки, но с развитием интернета, HTML5, сервисов шрифтов постепенно дизайнеры обращают внимание и на другие возможности оформления текстов.

P.P.S. Хотите стать радиоведущим? Всегда мечтали работать на радио? — тогда курсы радиоведущих в киеве то, что вам нужно, узнаете и получите весь необходимый объем знаний.
Если вас всегда привлекал необычный цвет глаз, то можно использовать цветные контактные линзы которые доступны для заказа в интернет магазине ЛинзМастер.

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

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

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

* Как намечать цели
* Сколько шрифтов выбирать для работы
* Покупать или не покупать
* Каков характер вашего контента?
* Как составлять удачные шрифтовые пары
* Пары шрифтов 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, вы найдёте там готовые рекомендации по подбору для каждого из них парных вариантов. Неплохо.

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

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

Работая с текстом, часто задаем себе вопрос «как найти или определить шрифт по заданной картинке?» . Например, вы нашли какой-либо PSD файл, а в нем был встроен некий красивый шрифт с тестовой записью. Понятное дело, нам нужно эту запись отредактировать, но только фотошоп пишет уведомление, что такой шрифт не установлен в общей библиотеке и в случае изменения текста он будет потерян. Но нам нужен именно этот шрифт, так как он идеально вписывается в общую концепцию этого PSD файла. Тут-то и задаемся вопросом: где найти шрифт ? Кстати, рекомендую ознакомиться с основными принципами и возможностями . Уверен, вы найдете много полезного и нового для себя.

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

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

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

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

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

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

Открываете сервис.

Сначала определите каким способом вы хотите воспользоваться.

1. Нажав на кнопку Browse, выберите нужную картинку. Мой пример:

2. Укажите url-адрес к этой картинке, в случае, если она находится у вас не на компьютере, а где-то висит на просторах интернета.

Затем кликаем на Continue.

Примечание

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

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

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

Еще ниже имеется три регулятора, влияющие на поисковую выдачу.

1. Display only free fonts or free alternative fonts . Галочка здесь означает, что поисковая выдача будет содержать только бесплатные аналоги.

2. Display only commercial fonts or commercial alternative fonts — здесь наоборот — только платные аналоги.

3. Display all fonts — отобразятся сразу все возможные шрифты.

Выбрав нужную галочку, жмите на Continue.

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

Как видите, подходящий для меня вариант отображен самым первым под названием «SummerCrushes» . Я кстати поставил галочку, чтобы мне предлагали только бесплатные аналоги. Поэтому я могу с легкостью нажать на «Click here to download the font» , чтобы скачать шрифт который я определял по картинке.

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

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!

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

Поможет решить данную проблему достаточно простым и оригинальным способом. Вы загружаете (со своего компьютера или указав ссылку) картинку или логотип, на которых содержится текст, а сайт выдаёт список шрифтов. Для загрузки подходят файлы размером не более 360 x 275 пикселей и следующих форматов: GIF, JPEG, TIFF, BMP. Иногда может потребоваться ввести соответствующие символы, изображенные на картинке, поскольку система не всегда способна сама их точно опознать.

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

После загрузки изображения анализатор распознает символы.

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

Есть один недостаток - нет поддержки кириллических шрифтов.

Есть еще один замечательный онлайн сервис по распознанию шрифтов - (What Font is)

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

На сервисе Whatfontis есть 3 пути узнать что за шрифт:

Путь 1

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

По окончанию в самом конце страницы, будет три варианта поиска:

• Display only free fonts or free alternative fonts
  (Отобразить только бесплатные шрифты или альтернативные бесплатные)
• Display only commercial fonts or commercial alternative fonts
  (Отобразить только платные шрифты или альтернативные коммерческие)
• Display all fonts
  (Отобразить все шрифты)

Путь 2
Можно не загружать свою картинку содержащую текст с искомым шрифтом, а указать веб адрес картинки со шрифтом.

Путь 3
Поиск по имени. Можно ввести название шрифта и искать его аналоги.