Я уверен, что у любого дизайнера был такой момент, когда он видел где-то какой-то шрифт, который так мог бы пригодится в проекте, но… что за шрифт?.. Ответ на этот вопрос затаился в глубине Вашего сознания, либо в глубине Вашего «незнания» (что разумеется простительно).
В этой статье мы рассмотрим несколько ресурсов, которые могут помочь вам в идентификации понравившегося шрифта.
Конечно, нельзя рассчитывать, что эти источники дадут вам 100 процентную уверенность в том что вы найдете нужный шрифт, но что помогут, так это точно.
Graphic Design Blog полезный ресурс, но может помочь лишь в том случае, если вы знаете имя дизайнера или студию, создавшего шрифт. Список студий и дизайнеров весьма обширный и поиск шрифта в разы упрощается. Но, что делать, если вы видите шрифт в первый раз?
Шаг 2: После загрузки картинки, проверьте, что What The Font правильно определил глифы, и лишь после этого жмите «поиск».
Вкратце, ГЛИФ - это графический образ знака. Один знак может соответствовать нескольким глифам; строчная «а», капительная «а» и альтернативный вариант строчной «а» с росчерком являются одним и тем же знаком, но в то же время это три разных глифа (графемы).
С другой стороны, один глиф также может соответствовать комбинации нескольких знаков, например лигатура «ffi», являясь единой графемой, соответствует последовательности трех знаков: f, f и i. Т.о. для программы проверки орфографии слово suffix будет состоять из 6 знаков, а графический процессор выдаст на экран 4 глифа.
Сначала я загрузил эту картинку:
Отличное сообщество, огромное количество ресурсов, блогов, новостей связных с типографской культурой. Есть даже typography Wiki.
Работая с текстом, часто задаем себе вопрос «как найти или определить шрифт по заданной картинке?» . Например, вы нашли какой-либо 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 . Спасибо!
Итак, Вы просматриваете Ваш любимый ресурс и находите на нем сайт, использующий которые Вам нравится. Вы тоже хотите такой шрифт (и чем быстрее, тем лучше!)… и что же нужно сделать, чтобы узнать название этого шрифта? Звучит знакомо? Да, мы все бывали в подобных ситуациях.
Самый простой вариант – просто написать веб-мастеру этого сайта и спросить название шрифта, а также где его можно взять. Ответ может прийти не сразу, к тому же, не все веб-мастера отвечают на такие письма. Поэтому я решил составить список бесплатных он-лайн ресурсов для ускорения процесса идентификации шрифта.
Cервис создан одним из крупнейших поставщиков шрифтов (myfonts.com, — прим.перев). Это ресурс №1 в Вашем списке идентификаторов шрифтов. Просто загрузите картинку со шрифтом, который нужно идентифицировать, на сервер WTF (делаете скриншот и вырезаете слово с понравившимся шрифтом, — прим.перев) или вставьте ссылку на изображение шрифта в специальную строку. Система покажет Вам в результатах различные варианты шрифтов.
Если система не сможет распознать шрифт, Вам будет предложено перейти на Font Forum , где Вы можете запостить картинку со шрифтом и подождать ответа от экспертов относительно того, что это может быть за шрифт. Я использовал оба варианта, и это обычно решало большую часть моих вопросов, касающихся шрифтов
Identifont
P.S. От себя лично и читателей Дизайн Мании хочется поблагодарить проект МногоЛого за эту подборку действительно полезных в работе сервисов. Оригинал статьи находится на сайте Webdesign Deport . Подчас именно от шрифтов в дизайне сайта многое зависит. Чаще всего используются, конечно, стандартные наработки, но с развитием интернета, HTML5, сервисов шрифтов постепенно дизайнеры обращают внимание и на другие возможности оформления текстов.
P.P.S. Хотите стать радиоведущим? Всегда мечтали работать на радио? — тогда курсы радиоведущих в киеве то, что вам нужно, узнаете и получите весь необходимый объем знаний.
Если вас всегда привлекал необычный цвет глаз, то можно использовать цветные контактные линзы которые доступны для заказа в интернет магазине ЛинзМастер.
Как часто вы задаётесь вопросом «какой шрифт лучше использовать для сайта ?», многие на это не обращают внимания, а зря!
Каждому начинающему веб-мастеру хочется как-то выделить свой сайт, чтобы он отличался от бесчисленного множества ресурсов, сделанных по шаблону.
Одним из способов считается отбор шрифтов для сайта, диапазон выбора которых не так велик. Задача веб-мастера сделать процесс чтения информации максимально комфортным. Но использование нескольких шрифтов может отпугнуть пользователя. А применение одного сделает ресурс однообразным и серым. Многие пытаются установить уникальный шрифт на страницу, но забывают о том, что он может не отобразиться у пользователя в компьютере. Ведь он не встраивается в веб-страницу.
Поэтому, если у человека на компьютере не установлен тот или иной шрифт, отображаться он у него не будет. Во избежание проблемы следует выбирать доступные, так называемые стандартные шрифты для сайта , некоторые из которых рассмотрим ниже.
Часто используемые шрифты
Стандартные шрифты для сайта это:
- 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 - выглядеть они будут по-разному. Последний, визуально будет смотреться больше.
Подобрать шрифты таким образом, чтобы они идеально сочетались между собой – задача не из простых. Как это ни удивительно, но многие веб-дизайнеры имеют достаточно смутное понимание о том, как подбирать шрифтовые пары, какие шрифты лучше всего использовать для заголовков и подзаголовков, когда стоит использовать курсив и так далее. Между тем правильный выбор шрифта может придать сайту индивидуальность – и не обязательно использовать для этого экзотические гарнитуры. Даже самые распространенные шрифты при правильном подборе могут смотреться очень красиво.
СКОЛЬКО ШРИФТОВ НУЖНО ИСПОЛЬЗОВАТЬ В ДИЗАЙНЕ?
На этот вопрос нет конкретного ответа – однако в большинстве случаев можно обойтись одним шрифтом. Главное, чтобы у этого шрифта было несколько начертаний, как минимум 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
ВЫВОД
В сущности, нет строгих правил, определяющих выбор шрифта. В основном все рекомендации сводятся к тому, что в проектах лучше использовать гармоничные и читаемые шрифты. Лучше не пускаться в авантюры и проявить сдержанность – в данном случае это только улучшит дизайн.
Но на самом деле, совершенно не важно, какие шрифты будут использованы – главное это конечный результат. Иногда бывает даже лучше, когда дизайнер рискнет и поэкспериментирует с сочетанием различных шрифтов – иногда такие эксперименты приводят к удивительным открытиям.
