как узнать размер шрифта на бумаге
Как определить шрифт на картинке, изображении (в т.ч. распознавание русского шрифта)
Здравствуйте.
В офисной работе иногда нужно написать какой-нибудь текст таким же шрифтом, который был использован в документе. Хорошо, если он есть в электронном варианте, а если только в бумажном? Вот иногда и приходится определять шрифт по скану (картинке).
Впрочем, причины узнать шрифт могут быть и другие: вы увидели красивую надпись и хотите создать что-то подобное; вам нужно исправить (подправить) какую-то подпись под картинкой (так, чтобы она не выделялась среди другого текста) и т.д.
В общем, как бы там ни было, в этой статье предложу несколько вариантов как это можно сделать. Сразу отмечу, что если на изображении запечатлен какой-то уникальный шрифт (который нигде ранее не использовался, т.е. дизайнер его создал самостоятельно) — то найти его не удастся (хотя, скорее всего, вы сможете подобрать что-то похожее).
Ладно, ближе к теме.
Если у вас есть только картинка на бумаге (распечатанный документ), то для начала работы вам необходимо перевести ее в электронную версию (отсканировать). Сделать сейчас это можно с помощью обычного смартфона на Андроид.
Распознавание шрифта на картинке
Вариант 1: с помощью ABBY Fine Reader
Если кто-то не слышал о такой программе как ABBY Fine Reader — то кратко скажу, что она предназначена для распознавания текста с картинок, PDF-файлов, сканов и пр. (т.е. на входе — у вас обычный графический файл; на выходе — программа выдает вам текст, который можно перенести в Word).
Так вот, Fine Reader по умолчанию при распознавании текста не меняет шрифт! То есть, при процессе распознавании шрифт текста будет выбран тот, который запечатлен у вас на графическом файле (фото, картинке и пр.).
Покажу на примере, как это работает.
1) Установку и запуск программы я опускаю (они стандартны и никаких сложностей возникнуть не должно). Далее нужно нажать по меню «Файл/Открыть PDF или изображение» и указать картинку/фото, на котором находится нужный текст.
Открыть PDF или изображение
В общем, когда программа закончит свою работу — останется только кликнуть в нужный участок полученного текста, и вы увидите его шрифт. В качестве примера ниже я загрузил скриншот странички своего сайта, Fine Reader выдал шрифт Georgia (правильно!).
Шрифт Georgia (Скриншот ABBY Fine Reader)
Проверка, что Georgia
В качестве еще одного примера взял фото разворота книги «Война и Мир». Используемый шрифт — Times New Roman.
Times New Roman — скриншот из ABBY Fine Reader
Удобно? Вполне! Я думаю, что этот способ — один из наиболее эффективных (особенно, если речь касается русскоязычного текста).
Примечание: если на распознаваемом фото/картинке будет использоваться редкий шрифт (которого нет в вашей системе) — Fine Reader подберет автоматически наиболее похожий из тех, что есть.
Вариант 2: с помощью онлайн сервисов
Онлайн-сервисы удобны прежде всего тем, что вы сразу же можете приступить к работе (ничего не устанавливая и не настраивая). С другой стороны, их функциональность и эффективность — достаточно низкая (по крайней мере, для работы с ними нужно иметь куда качественнее изображение, чем для того же Fine Reader).
Впрочем, есть и преимущество: они могут определить шрифт даже в том случае, если у вас его нет на ПК. Ниже привожу несколько ссылок:
Работа с вышеприведенными сервисами строится либо в ручном варианте (когда вы сами подбираете шрифт, сравнивая его с оригиналом), либо в авто-варианте (когда сервис по схожести подберет вам коллекцию шрифтов).
Рассмотрю работу в одном из сервисов — myfonts.com (он первый в моем мини- списке). После перехода на сайт — вам нужно загрузить изображение и выбрать область текста на нем (см. шаг 1 и 2 на скриншоте ниже).
Загрузка картинки и выбор текстовой области
Далее перед вами появится список шрифтов: из него можете выбрать тот, который наиболее похож на ваш (обычно, первый в списке тот, что нужен).
Ну и чем Impact MT отличается от Impact. (результаты работы)
Отмечу, что англоязычные сервисы не очень хорошо работают с русским текстом (часто вместо конкретного шрифта подбираются какие-то крякозабры).
Примечание : также обратите внимание, что платные шрифты (которые вам будут предлагать купить на различных сервисах) часто почти не отличаются от бесплатных, тех, что уже установлены в вашей системе.
Основы типографики. Часть 3
Как измерять размер шрифта
Измерение шрифта — это сложная задача, потому что кегль шрифта не всегда соответствует реальному размеру. 100-пунктовый шрифт, к примеру, никогда не имеет высоту точно 100 пунктов. Более того, размер 100-пунктового шрифта зачастую разнится от знака к знаку.
Поэтому есть высота х. Это высота обыкновенной буквы нижнего регистра. Шрифты с большой высотой х выглядят крупнее, чем шрифты с маленькой высотой, даже если их размеры в пунктах совпадают.
Как вы видите, при использовании шрифта на арену выходит целый ряд переменных. Однако, освоив основные шрифтовые характеристики и их влияние на «читабельность», вы сможете анализировать шрифт более профессионально.
1. Чтобы вычислить размер шрифта (кегль), измерьте расстояние между верхним выносным элементом и нижним выносным элементом. Здесь общая высота 57 пункта, хотя на самом деле это 60-пунктовый курсив семьи Times.
2. Засечка. Поперечный элемент на конце буквы.
3. Верхний выносной элемент. Часть буквы, выступающая вверх за пределы тела шрифта.
4. Высота х. Высота обычного знака нижнего регистра («х»).
5. Базовая линия. Невидимая линия, на которой сидят знаки.
6. Нижний выносной элемент. Часть буквы, выступающая вниз за пределы тела шрифта.
Большинство текстовых редакторов позволяют регулировать шрифт горизонтально и вертикально.
Как определить шрифт по картинке?
Задавайте, а мы ответим на него в блоге.
Если вам понравился шрифт на сайте или баннере, его можно найти и использовать. Популярные Arial или Times New Roman угадать можно, например, по отсутствию или присутствию засечек. Более редкие и незнакомые надписи можно распознать онлайн: по картинке или скриншоту. Рассказываю, как это сделать.
Идеального инструмента, чтобы определить шрифт по картинке онлайн, не существует. Но кое-какие хитрости все же есть. Я протестировала онлайн-сервисы для распознавания и свела результаты их работы в таблицу. В любом из них схожи требования к загружаемым изображениям:
Если все условия соблюдены, сервис выдаст похожий шрифт и даже предложит варианты для бесплатного использования.
Чтобы определить шрифт, подготовьте исходное изображение: сохраните картинку или скриншот на компьютер. Дальше алгоритм работы всех сервисов похожий:
Теперь разберу 5 онлайн-сервисов, которые распознают шрифт онлайн.
WhatTheFont
Онлайн-платформа по распознаванию латинских букв по картинке. Также есть база для подбора, которая регулярно обновляется.
Язык сервиса. Английский.
Возможности. Скачать или купить шрифт.
Не требуется регистрация
Быстрый поиск по базе более 130 тыс., в том числе платным
Есть приложение для распознавания шрифта на смартфонах (можно просканировать с фотографии) и расширение для Chrome
Не распознает кириллицу
Найденные по скриншоту шрифты предлагает купить, даже если есть бесплатный аналог
Font Identifier
Англоязычный сервис работает с кириллицей и латиницей. Распознает шрифт по каждой букве, поэтому результаты сканирования глубокие. На сайте представлены также семейства, отсортированные по языку, тегам, категориям.
Язык сервиса. Английский.
Возможности. Скачать или купить шрифт здесь же или на сайте партнеров, отредактировать изображение.
Не требуется регистрация
Можно поделится результатами сканирования в соцсетях
Распознает шрифты на десяти языках, в том числе на русском, украинском, белорусском
В базе присутствуют платные и бесплатные варианты шрифтов
Много рекламы внутри платформы
Fontspring
Сервис включает множество шрифтов для коммерческого использования, но обычно внутри семейства можно найти 1-2 начертания, чтобы скачать бесплатно. Есть своя библиотека для поиска.
Язык сервиса. Английский.
Возможности. Купить шрифт, отредактировать изображение.
Не требуется регистрация
Есть редактор для обрезки и поворота загруженных изображений
Можно сканировать изображение по ссылке
Плохо работает с кириллицей
В основном представлен платными вариантами
IdentiFont
В отличие от других сервисов программа предлагает найти шрифт по наводящим вопросам, символу, имени дизайнера, части названия или по внешним признакам.
Язык сервиса. Английский.
Возможности. Поиск по символу, имени дизайнера, наводящим вопросам, по части названия и по внешним признакам.
Не требуется регистрация
Постоянно пополняется база
Можно найти шрифт по названию, дизайнеру или наводящим вопросам
Нельзя определить по картинке
Whatfontis
Сервис подойдет, чтобы найти максимально похожий к оригиналу шрифт, да ещё и бесплатный. Для этого присутствует фильтры поиска по цене.
Язык сервиса. Английский.
Возможности. Скачать или купить, отредактировать загруженное изображение.
Можно сохранить результат сканирования (понадобится регистрация)
Если изображение не подходит, платформа поможет отредактировать его онлайн
Можно искать похожие варианты по фильтру «только бесплатные»
Работает только с латиницей
Не более 10 символов на исходной картинке
Преимущества сервиса доступны только по подписке, например, поиск только бесплатных семейств по картинке
Как сервисы справились с тестовыми картинками
Латиница. Чтобы проверить возможности сервисов я взяла латинские шрифты Lobster и Permanent Marker на разных фонах.
| WhatTheFont | Font Identifier | Fontspring | Whatfontis |
| Lobster на белом фоне (латиница) | ⛔️ |
Определен неверно, предложил платные аналоги
Определен неверно, предложил бесплатные и платные аналоги
Верно распознал
Верно распознал
Определен неверно, предложил платные аналоги
Определен неверно, предложил бесплатные и платные аналоги
Верно распознал
Верно распознал
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно
Кирилица. Для проверки кириллицы взяла SportsWorld и Lobster на разных фонах.
| WhatTheFont | Font Identifier | Fontspring | Whatfontis |
| Lobster на белом фоне (кириллица) | ⛔️ |
Определен неверно, предложил бесплатные и платные аналоги
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил бесплатные и платные аналоги
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил платные аналоги
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил платные аналоги
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил платные аналоги
Определен неверно, предложил бесплатные и платные аналоги
Определен неверно, предложил бесплатные и платные аналоги
Онлайн-сервисы Font Identifier и Whatfontis подходят для частых поисков шрифтов по картинке, в том числе бесплатно. WhatTheFont идеален для определения платных шрифтов и их аналогов, а также неплохо работает с плохо считываемым текстом. Fontspring не определил верно ни один шрифт, зато предложил несколько похожих вариантов для скачивания и покупки. Кириллицу распознали Font Identifier и Whatfontis.
Почему шрифт может не распознаваться
Иногда сервис отказывается распознавать шрифт по картинке. Что в этом случае можно сделать:
Также можно поискать шрифт вручную на форумах или задать вопрос там же: форум MyFonts, группа Type&Typography в Facebook, форум Fontmassive, форум Ruldtp.
Единицы измерения шрифта или «Как сделать шрифт нужного размера?»
Начиная знакомство с таинством создания цифровых шрифтов, важно разобраться с матчастью. В буквальном смысле слова. Для плодотворной работы шрифтовой дизайнер должен понимать, как измеряются шрифты и в каких единицах.
Физика и лирика
Когда–то давным–давно буквы отливались на металических или деревянных брусках, и их размеры были довольно статичными. Высота литерной площадки называлась кеглем, а измеряли ее в пунктах (в СНГ 1 пункт равен 0,376 мм).
В современной полиграфии померить буквы после их печати можно при помощи полиграфической линейки. Она распечатывается на прозрачной пленке, прикладывается к готовому изделию и служит для измерения размера шрифта, толщины обводки, угла наклона растра и других метрик.
Тут тебе и сантиметры, и дюймы и все те же пункты.
Однако, когда дело касается цифровой среды, на арену выходят виртуальные величины измерения.
Размер шрифта в векторе
Как правило, цифровые шрифты являются векторными, и все их метрики задаются в некоторых условных единицах, не имеющих размерности.
Конкретная система измерения в данном случае не нужна и не важна, поскольку векторный формат представления данных подразумевает свободное масштабирование и легкий перенос данных из одной системы в другую.
При этом в векторном представлении все же присутствует точка отсчета и мера, а точнее соразмерность отдельных элементов друг другу.
Для связи безразмерного мира векторных знаков с миром реальным, в котором шрифт используется и измеряется в пикселях, сантиметрах или других осязаемых величинах, существует специальный параметр «UPM шрифта».
UPM (Units Per Em) — это количество условных единиц на кегельную (литерную) площадку.
В данном случае кегельная площадка тоже условная. Потому что этот объект, перебравшись из физического мира в цифровой, утратил свои реальные габариты бруска и стал эдакой оговоренной эталонной единицей измерения для расчетов других параметров. Мы в виртуальной среде, поэтому для простоты можете представлять себе кегельную площадку как некий абстрактный безразмерный прямоугольник, на котором располагается глиф шрифта.
Другими словами, UPM — это плотность тех самых единиц, в которых измеряются различные метрики векторного шрифта: размеры глифов, их полуапрошей, отступов для кернинговых пар и другие.
Здесь можно провести аналогию с разрешением монитора и физическими пикселями, из которых он состоит. Чем больше у.е. вмещается в наш прямоугольник, тем выше наша степень свободы, выше «доступное разрешение».
Будьте осторожны, изменяя значение UPM с 1000 на какое-то другое. Ходят слухи, что не все компьютерные программы корректно работают со шрифтами, у которых значение этого параметра отличается от стандартного.
Прямо на процесс создания или хранения векторных шрифтов параметр UPM не влияет. Он становится важен только тогда, когда шрифт попадает в конкретную систему координат.
Например, в окно тестирования/предпросмотра шрифта или в Фотошоп.
Размер шрифта в Фотошопе
О, как обманчивы могут быть привычные вещи! Многие дизайнеры и простые обыватели годами работают в Фотошопе, но так никогда и не задумывались, а как измеряется шрифт в этой программе.
Чтобы понять, что происходит с векторными метриками шрифта в Фотошопе, давайте разберемся, а что же означают пиксели в параметре «размер шрифта»?
Когда вы выбираете размер шрифта, например, в «16 px», на самом деле вы устанавливаете это значение для параметра PPM.
PPM (Pixels Per Em) — это количество пикселей на кегельную площадку.
Другими словами, это плотность все той же условной кегельной площадки, но в пикселях.
То есть, ни одна из вертикальных метрик шрифта не станет при этом равной 16 пикселям! Ни высота строчных, ни высота прописных, ни расстояние между верхними и нижними выносными элементами.
Так что же в действительности изменяет параметр «размер шрифта»? Вы уже догадались? Молодцы, совершенно верно.
Коэффициент масштабирования
Изменяя «размер шрифта» в Фотошопе, мы, ни много ни мало, изменяем коэффициент масштабирования при переносе условных единиц из безразмерного мира векторов в мир размерных пикселей. Он служит «мостиком» при переходе условных векторных метрик в пиксели.
Происходит это следующим образом.
Как вы уже поняли, величины UPM и PPM связаны между собой элементом «M», общим множителем — неопределенным размером условной кегельной площадкой. Отсюда получаем простую формулу:
Используя эту формулу, условные единицы, которыми мы оперировали в векторном редакторе шрифта, можно выразить в пикселях. И наоборот.
Аналогичные преобразования можно провести для сантиметров, пунктов и любых других единиц измерения, которые используются в предметной области применения шрифта.
Живой пример
В процессе создания шрифта «5 копеек» (FE 5Cent), было важно добиться абсолютной четкости линий при «размере шрифта» (PPM) в 5 пикселей в Фотошопе или в любой другой программе.
Это требование предполагало точное попадание в пиксель — размеры и метрики в итоговом рендеринге должны были ровняться целому числу пикселей. А именно, исходя из минимально возможных значений, толщина линий при заданном PPM должна быть ровна одному пикселю.
Значение UPM для шрифта предполагалось стандартное, в 1000 единиц.
UPM шрифта = 1000 у.е.
Задача: Найти количество Х у.е. для рендеринга в 1 пиксель.
X у.е. в 1 пикселе = UPM / PPM = 1000 / 5 = 200.
Таким образом все линии, отступы и даже кернинг в шрифте были сделаны со значениями, кратными 200 у.е.
Вывод о пользе
Понимая значение метрик PPM и UPM, а также формулу зависимости между ними, можно с требуемой точностью управлять метриками при разработке цифрового шрифта.
— Ребята! Подписывайтесь, жмите сердечки и делитесь ссылкой с коллегами, если хотите еще публикаций про создание шрифтов.
И почитайте перевод хрестоматийной статьи о самом популярном шрифтовом редакторе в мире: