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

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

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

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

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

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

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

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

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

Существует множество различных размеров экранов. И нужно обеспечить легко читаемость текста на самых маленьких и самых больших экранах. Например, с помощью font size HTML .

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

Есть несколько способов сделать это:

1. Установка адаптивной темы / шаблона;
2. Использование адаптивного дизайна / медиа-запросов (CSS );
3. Разработка разных версий сайта.

1. Приобретение адаптивной темы или шаблона

2. Использование медиа-запросов / адаптивного дизайна

Если у вас есть опыт работы с CSS , и вы не боитесь изучить, как управлять тем, чтобы текст легко читался на любых размерах экранов.

Как работает font-size

Style font size HTML объявляется в файле CSS . Если размер шрифта не объявлен, браузер будет использовать значение по умолчанию, которое обычно составляет 16px.

В коде CSS установка значения font-size выглядит следующим образом:

p{font-size:120%;}

Для размера шрифта можно использовать различные единицы измерения: пиксели (px ), пункты (pt ), em и проценты (% ).

Если речь идет о выборе шрифта и адаптивном дизайне, Google рекомендует следующее:

• Используйте базовый размер шрифта — 16 пикселей в CSS . Настраивайте другие размеры по мере необходимости с помощью свойств шрифта;
• Чтобы определить типографический масштаб, используйте размеры относительно базового;
• Для текста должно задаваться вертикальное пространство между символами. Общая рекомендация состоит в том, чтобы использовать высоту строки в 1.2 em , которая по умолчанию применяется браузерами;
• Используйте ограниченное количество шрифтов и типографских масштабов.

Используйте базовый размер шрифта CSS в 16 пикселей

В этой рекомендации говорится, что размер шрифта для страницы должен объявляться явным образом — 16 px . Это значит, что нужно использовать значение HTML CSS font size , которое устанавливает размер шрифта в 16 пикселей для всей станицы. Обычно это делается через элемент «body » или «html «.

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

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

На приведенном выше изображении font size HTML для H1 объявлен как «250% «. Текст H1 будет в два с половиной раза крупнее, чем базовый в 16px . Это и есть «относительный размер «. Благодаря этому везде, где мы объявляем размер шрифта, он всегда будет устанавливаться в несколько раз больше, меньше или того же размера, что и базовый шрифта:

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

Для текста должно задаваться вертикальное пространство между символами, и, возможно, для каждого шрифта его нужно будет корректировать:

Еще одним важным аспектом читаемости шрифта является пространство между строками текста. В CSS это свойство называется «line-height «.

Google рекомендует использовать высоту строки 1.2 , которая по умолчанию используется в браузерах. Это означает, что расстояние между строками текста будет в 1,2 раза превышать style font size HTML .

Для этого нужно объявить высоту строки в CSS :

p{font-size:120%;line-height:1.2;}

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

Задав высоту строки (как минимум ) в 1,2 , мы способствуем тому, что текст будет легко читать даже на таких маленьких экранах.

Проблемы со списками ссылок

Чтобы решить эту проблему, попробуйте:

ul{line-height:200%;}

Увеличив высоту строки, мы гарантируем, что для ссылок в списке будет достаточно пространства. Вам нужно будет задать значение, подходящее для сайта, и изменить его на «200% «.

Используйте ограниченное количество шрифтов и типографских масштабов

Слишком много шрифтов и объявлений font size HTML может привести к тому, что макет страницы станет чрезмерно сложным. Такие старицы могут читаться на стационарном мониторе, но на небольшом экране они точно будут трудно читаемы. Помните, что «маленький » текст будет еще меньше при просмотре на мобильном устройстве.

Как сделать шрифт читаемым на любом устройстве

Размер текста управляется медиа-запросами, которые объявляются для различных размеров экранов. Можно сказать, что для мобильных устройств задается один размер текста, а для стационарных компьютеров — другой.

Рассмотрим пример медиа-запроса, с помощью которого задается размер шрифта.

html{font-size:100%;} @media(min-width:60em){html{font-size: 100%}}

У нас есть один и тот же размер шрифта, объявленный для больших и маленьких экранов. Размер шрифта составляет «100% «. Так как мы объявили базовый font size HTML в 16 пикселей, это означает, что он будет использоваться на стационарных ПК и на небольших мобильных устройствах. Этот размер всегда будет выглядеть аккуратно и легко читаться:

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

В подобной ситуации нужно будет изменить медиа-запрос. В первом примере style font size HTML был одинаковым (100% ) для стационарных компьютеров и мобильных устройств.

Рассмотрим медиа-запрос, который будет задавать меньший, более плотный текст для ПК, но более читаемый для небольших экранов.

html{font-size:110%;} @media(min-width:60em){html{font-size: 90%}}

Этот код определяет, что текст должен иметь размер шрифта 90% от размера по умолчанию для стационарных компьютеров. Но на мобильных устройствах размер будет 110%:

Это означает, что текст будет легко читаемым на экранах разных размеров.

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

Наиболее простая – взгляните на исходный код той страницы, которая «приглянулась». Безусловно, для нахождения нужного кода среди множества других, нужно хоть немного разбираться в HTML-кодах.

Предлагаю воспользоваться редактором текстов Microsoft Word пакета Office. Для этого сохраните конкретную веб-страницу, чтобы открыть ее потом в редакторе. Шрифт определится таким, каким он есть в оригинале.

Еще проще воспользоваться сервисом Whatfont . Для этого перетащите кнопку в закладки вашего браузера. Щелкните на вкладке того шрифта, который интересен, предварительно наведя курсор на нем. По каждому шрифту предусмотрена подсказка в виде краткой информации (при вызове контекстного меню можно получить более развернутую информацию).

В арсенале помощников имеются плагины под различные браузеры, определяющие шрифт на открытых интернет-страницах. Для браузера Google Chrome – это плагин Csscan , а под Mozilla FireFox – Firebug . Все, что нужно, так это скачать необходимый плагин для своего браузера.

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

Кстати, подборку шрифтов могут обеспечить сайты Identifont, ITC Fonts и Fonts.com. Это целая система целенаправленного подбора шрифтов онлайн, Единственный минус таких ресурсов состоит в том, что они англоязычные. Однако, если поднапрячься, то можно разобраться во всем.

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

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

Вышеперечисленные основные способы позволяют идентифицировать практически любой шрифт на веб-сайте.

Обычно шрифт устанавливается с помощью тега (например, ………<.font>). Вероятно, этот способ скоро выйдет из употребления, так как в последних версиях HTML, соответствующих стандартам, тег отсутствует, его рекомендуется заменять CSS.

Основные проблемы, возникающие при использовании тега , заключаются в следующем:

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

2. Менять свойства шрифта нужно в каждом теге, что очень не удобно.

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

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

Алгоритм:

1. Введите font-size и поставьте двоеточие:

2. Укажите размер шрифта одним из следующих способов:

В единицах длины – измеряется в пунктах;

Используя абсолютное выражение, например xx-small, x-small, small, medium, large, x-large, xx-large;

Smaller и larger описывает размер по отношению к размеру родительского элемента;

В процентах, определяющих размер шрифта пропорционально размеру шрифта родительского элемента (например 75%).

Пиксели и пункты:

Аббревиатура pt обозначает пункт. Это один из способов указания размеров шрифта. Обычно используется шрифт 12pt, который удобен для большинства читателей. Лучше измерять шрифт в пикселях (px ).Пиксели не всегда надежны, но результат их использования более точен.

Между пикселями и пунктами не существует однозначного соответствия, но можно считать, что 12px примерно совпадает с 12pt.

Пример 2