Что за шрифт узнать онлайн: Распознать шрифт по картинке онлайн

Поиск шрифта по картинке – лучшие бесплатные онлайн сервисы. Лучшие способы определить шрифт по картинке онлайн — подробные инструкции и сервисы

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

И хотя лучшее — враг хорошего, сегодня мы пойдём ещё дальше. Ведь кому нужны целые сайты, когда есть расширения для браузеров?

Fontface Ninja

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

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

Расширение для идентификации шрифтов Fontface Ninja для Safari и Chrome вполне соответствует идее скрытного и эффективного наёмника. Работа с ним строится так: нажав на кнопку расширения, наведите курсор на интересующий шрифт — всплывающая подсказка будет содержать информацию о его названии, межстрочном интервале, размере. Если повезёт, тут же шрифт можно будет скачать.
Весьма любопытной может оказаться функция Mask: она позволяет скрывать графическое содержимое страницы, оставляя лишь текстовые блоки.

Type Sample

Ещё одно полезное расширение, но только для пользователей Chrome. Остальные могут приобщиться к прекрасному по старинке — воспользовавшись услугами закладок.

Принцип работы в данном случае аналогичен; особого внимания заслуживает, пожалуй, реализованная возможность «поиграться со шрифтами» в режиме реального времени. Всплывающая подсказка с информацией о гарнитуре — прошлый век, когда по нажатии на выделенный текстовый блок вы способны изменить размер шрифта, посмотреть на панграмму (англоязычную), ввести собственный пример текста и позволить себе иные вольности.

Расширение и для Chrome, и для Firefox, и для Яндекс.Браузера. Компенсируется такая всеядность предельно простым функционалом: нажал на кнопку, включив режим определения шрифтов, навёл на нужный и узнал кое-что новое.

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

Чем объяснить тот пиетет, который испытывают разработчики к пользователям Chrome, неизвестно, однако факт остаётся фактом: расширений для распознавания шрифта, поддерживаемых этим браузером, чуть больше.

Typ.io — идеальный вариант для максималистов, которые не приемлют лишних телодвижений. После установки расширения в нижнем углу браузера появится кнопка с букой «Т», нажатие на которую выводит названия всех идентифицированных на странице шрифтов в отдельном столбце. Чтобы узнать, где какой шрифт использовался, достаточно кликнуть на его название.

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

Исходный код страницы

Самый простой способ – исследовать код страницы. Глубокие познания в HTML и CSS для выполнения этой задачи не понадобятся, нужно лишь найти свойства «font-family ». Рассмотрим на примере Google Chrome:

Откройте страницу, на которой используется понравившийся шрифт. Щелкните правой кнопкой по тексту. Выберите пункт «Просмотреть код ».

Справа появится консоль с инструментами разработчика. Найдите в ней пункт «font family ».

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

Кстати, в других браузерах операция выполняется аналогично. Например, в Mozilla Firefox нужно щелкнуть по тексту правой кнопкой и выбрать пункт «Исследовать элемент».

Искомые данные отобразятся в окне справа, свойство называется также «font family ».

Сервисы и расширения

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

Зайдите на сайт fount.artequalswork.com . Там есть большая кнопка «Fount», которую нужно схватить и перетащить на панель закладок.

Важно! Чтобы отобразить панель закладок в Chrome, нажмите сочетание Ctrl+Shift+B .

Откройте страницу с понравившимся шрифтом. Нажмите на Fount на панели закладок. Курсор превратится в крестик. Наведите его на шрифт и щелкните левой кнопкой. Результат появится в правом верхнем углу.

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

Fontface Ninja для Safari и Chrome.

Type Sample для Chrome.

WhatFont для Chrome, Firefox, Яндекс.Браузера.

Typ.io для Chrome.

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

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

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

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

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

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

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

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

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

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

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

Достаточно часто на всевозможных сервисах вопросов и ответов люди задают один и тот же вопрос: «Как определить шрифт по картинке ».

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

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

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

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

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

В качестве примера давайте определим шрифт в логотипе моего сайта MuzRelax.ru. Я то знаю, какой шрифт там использован, а вот посмотрим сможет ли сервис WhatTheFont корректно его идентифицировать.

Кстати, тем, кто еще не посещал этот сайт, крайне рекомендую сделать это – получите настоящее удовольствие).

Я сделал скриншот лого и загрузил картинку в таком виде:

Как видите, фон шрифта даже не контрастный, хотя это тоже желательно условие (черное на белом либо белое на черном).

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

На финальном этапе сервис выдаст список шрифтов, которые выглядит схоже с тем шрифтом, который есть на картинке. В моем случае было предложено 4 варианта, самый первый из которых (Georgia) и есть тот тип шрифта, который я использовал в логотипе сайта MuzRelax.ru. Отличный результат!

К сожалению, WhatTheFont имеет несколько недостатков:

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

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

P.S. Не забудьте оставьте эту статью у себя в закладках и порекомендовать своим друзьям).

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

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

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

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

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

1. WhatFontIs,адрес — http://www.whatfontis.com/
   

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

2. What The Font , адрес http://www.myfonts.com/WhatTheFont/
   xdf

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

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

   Я добавила букву f, исправила S на i и дописала точку в свободное поле. Снова “Continue”.

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

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

3. Это были сервисы, которые определяют шрифт по картинке. Однако, есть сайты, где работает поиск шрифта по отдельным отличительным элементам.
   Identifont адрес http://www.identifont.com/index.html

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

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

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

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

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

4. Font Finder Firefox Add-On — дополнения для Firefox, которое определяет какой шрифт используется на сайте. Просто выделите слово на сайте, и дополнение определит шрифт и стиль CSS.
   Ссылка на дополнение https://addons.mozilla.org/en-US/firefox/addon/font-finder/
5. Bowfin Print Works — http://www.bowfinprintworks.com/SerifGuide/serifsearch.php

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

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

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

Легко определить, что классный текстовый шрифт с WhatFontIs

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

У этого инструмента много применений, и он очень удобен.

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

Мы можем выбрать локальный файл (размер файла не более 1,8 МБ), используя кнопку обзора. Мы также можем ввести прямой URL-адрес изображения в любом месте в Интернете. В качестве подсказки, чтобы найти местоположение изображения в Интернете, мы можем щелкнуть по нему правой кнопкой мыши и скопировать местоположение изображения. Затем вы можете вставить это в поле с надписью Или указать URL с изображением.

Вы можете увидеть, как имя файла появляется после просмотра его ниже:

Но в качестве теста я решил пойти за веб-логотипом MakeUseOf.com. Я нашел URL изображения и вставил его в поле, как вы можете видеть ниже:

Нам нужно будет сказать Whatfontis несколько писем, которые он видит. Мы увидим следующий экран:

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

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

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

А что если мне нужен бесплатный шрифт? В конце концов, мы все читатели MakeUseOf.com и любим бесплатные вещи, верно? Таким образом, есть возможность выбрать ниже, где мы вводим наш файл или URL, что позволяет нам выбирать между всеми шрифтами, коммерческими шрифтами или только бесплатными шрифтами.

После выбора только бесплатных шрифтов я получил намного лучший список, как вы можете видеть ниже. Некоторые из них не совпадают точно, но есть много хороших вариантов, таких как Berlin Email Semi bold Bold (вариант 3 ниже).

Вы можете нажать на название шрифта, чтобы загрузить его! Какой отличный инструмент!

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

, 2 бесплатных инструмента для создания шрифтов

, установка шрифтов на Windows, Mac и Linux

и 5 источников для загрузки бесплатных шрифтов

,

Как узнать какой шрифт используется. Определить шрифт по картинке онлайн. Приложения для смартфонов

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

Давайте попробуем на двух самых известных площадках определить шрифт с этой картинки:

WhatFontIs

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

Итак, чтобы воспользоваться WhatFontIs с целью найти шрифт по картинке, сохраните изображение с понравившимся начертанием или сделайте скриншот страницы и вырежьте нужный фрагмент. Проследите, чтобы картинка была в формате jpg, png или gif и не превышала 1,8 мб. Теперь следуйте инструкции.

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

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

WhatTheFont

Ещё один англоязычный сервис для определения шрифта по картинке. Пытаться отыскать здесь кириллические начертания – трата времени. В базе WhatTheFont их попросту нет.

Мобильное приложение WhatTheFont

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

В действительности способов, которые помогут определить шрифт онлайн, больше, чем два. Например, есть сервисы, которые вместо того, чтобы распознать шрифт по картинке, зададут вам тысячу и один вопрос о том, как выглядит искомое начертание (http://www.identifont.com/). Существуют и ресурсы, которые даже могут натренировать ваш глазомер так, что вы не хуже машины сможете распознавать множество шрифтов (http://ft.vremenno.net/en/). Однако WhatTheFont и WhatFontIs – пожалуй, самые удобные и популярные площадки для этой цели.

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

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

И хотя лучшее — враг хорошего, сегодня мы пойдём ещё дальше. Ведь кому нужны целые сайты, когда есть расширения для браузеров?

Fontface Ninja

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

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

Расширение для идентификации шрифтов Fontface Ninja для Safari и Chrome вполне соответствует идее скрытного и эффективного наёмника. Работа с ним строится так: нажав на кнопку расширения, наведите курсор на интересующий шрифт — всплывающая подсказка будет содержать информацию о его названии, межстрочном интервале, размере. Если повезёт, тут же шрифт можно будет скачать.
Весьма любопытной может оказаться функция Mask: она позволяет скрывать графическое содержимое страницы, оставляя лишь текстовые блоки.

Type Sample

Ещё одно полезное расширение, но только для пользователей Chrome. Остальные могут приобщиться к прекрасному по старинке — воспользовавшись услугами закладок.

Принцип работы в данном случае аналогичен; особого внимания заслуживает, пожалуй, реализованная возможность «поиграться со шрифтами» в режиме реального времени. Всплывающая подсказка с информацией о гарнитуре — прошлый век, когда по нажатии на выделенный текстовый блок вы способны изменить размер шрифта, посмотреть на панграмму (англоязычную), ввести собственный пример текста и позволить себе иные вольности.

Расширение и для Chrome, и для Firefox, и для Яндекс.Браузера. Компенсируется такая всеядность предельно простым функционалом: нажал на кнопку, включив режим определения шрифтов, навёл на нужный и узнал кое-что новое.

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

Чем объяснить тот пиетет, который испытывают разработчики к пользователям Chrome, неизвестно, однако факт остаётся фактом: расширений для распознавания шрифта, поддерживаемых этим браузером, чуть больше.

Typ.io — идеальный вариант для максималистов, которые не приемлют лишних телодвижений. После установки расширения в нижнем углу браузера появится кнопка с букой «Т», нажатие на которую выводит названия всех идентифицированных на странице шрифтов в отдельном столбце. Чтобы узнать, где какой шрифт использовался, достаточно кликнуть на его название.

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

Однако решить эту задачу не всегда просто – особенно, при наличии большого количества похожих друг на друга вариантов.

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

Специальные сервисы

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

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

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

What font is

Ресурс What font is позволяет опознать шрифты с картинки бесплатно и достаточно быстро, но работает только с латиницей.

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

Порядок действий для пользователя ресурса следующий:

• Открыть главную страницу сервиса.
• Загрузить на сайт изображение, щёлкнув по форме с надписью Upload image containing the font или вставив ссылку на картинку в Сети.

• Нажать на «Find a font».
• Выбрать, будет ли распознаваться изображение без изменений или при распознавании будет выполнено реверс цветов, а также установить определяемую область.

• Выбрать дополнительные настройки изображения (яркость, контрастность и угол поворота), с помощью которых сервису будет проще распознать тип шрифта, и нажать на «Use image».

• Расставить буквы в соответствующих формах, увеличивая шанс на распознавание, и нажать Continue.

• Выбрать подходящий вариант из появившегося на экране списка.

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

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

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

Важно: Для работы с изображением оно должно иметь размер не больше 1,8 МБ и формат JPEG, GIF или PNG. Также рекомендуется распознавать только одну строку за раз – если шрифтов несколько, выделяется часть картинки.

WhatTheFont

Ещё один способ распознать шрифты – перейти на сайт сервиса WhatTheFont и воспользоваться уже его помощью.

Благодаря стараниям сообщества My Fonts, ресурс получил огромную базу данных и является одним из самых удобных в использовании.

Вероятность правильно определить шрифт при его использовании – самая высокая среди подобных сервисов.

Действия пользователей должны быть следующие:

• Открыть страницу и загрузить изображение с текстом.

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

• Получить результаты поиска, среди которых обычно легко обнаружить необходимую информацию – так, в указанном примере заметен шрифт Arial Black, который не определился на сайте What font is.

Важно: Для распознавания требуется выполнение определённых условий: размеры картинки должны быть в пределах 360 х 275 пикс., формат – PNG или JPG. Также рекомендуется, чтобы высота каждого символа была не меньше 100 пикселей.

Identifont

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

В процессе такой проверки пользователь должен сравнивать характеристики распознаваемого шрифта с выдаваемыми вариантами.

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

Bowfin Printworks

На сайте Bowfin Printworks можно найти значительное количество данных, касающихся различных шрифтов, и идентифицировать тот, который находится на картинке.

Работать с сервисом удобнее, чем с Identifont, но времени придётся потратить больше по сравнению с WhatTheFont.

На сайте можно найти удобное руководство по самым популярным в дизайне вариантам шрифтов – таких как Serif, Sans Serif и Script.

Кроме того, есть возможность задавать вопросы владельцу сайта по поводу неопределённого набора символов.

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

TypeNavigator

Ресурс TypeNavigator предлагает собственный подход к поиску шрифтов.

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

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

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

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

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

Приложения для смартфонов

Список способов найти подходящий шрифт в режиме онлайн включает приложение, выпущенное сообществом MyFonts для смартфонов на Android или iOS.

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

А найденные шрифты можно приобрести в режиме онлайн на сайтах разработчиков.

Приложение предоставляет пользователю такое преимущество как определение шрифтов в режиме оффлайн.

Хотя вероятность распознавания будет выше при подключении к Интернету.

Однако, если доступа к Сети всё-таки нет, можно просто навести камеру смартфона на рекламный носитель или визитную карту, получив положительный результат через несколько секунд.

Расширения в браузере

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

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

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

Расширение Naptha работает в браузере Chrome, но можно попытаться установить его и на другой веб-обозреватель.

Среди других вариантов стоит отметить Fontface Ninja для Chrome, Firefox и Safari и Typesample для Хрома.

Есть собственные плагины и у популярных ресурсов – например, разработчики ресурса WhatTheFont создали дополнение Whatfont Tool для Хрома и Сафари, а у IdentiFont есть расширение с таким же названием.

Профильные сообщества

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

Для этого стоит обратиться на такие форумы или сообщества:

Получить информацию по шрифтам можно и на сообществах популярного ресурса Flickr – например, Typeface Identification или Fonts in Use.

Первая группа посвящена распознаванию наборов символов.

Второй форум содержит популярные варианты шрифтов, хотя определять их придётся самостоятельно.

Выводы

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

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

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

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

Вам понадобится

• Компьютер с подключением к сети Интернет.

Инструкция

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

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

Откройте любой графический редактор и вставьте изображение из буфера обмена. В качестве простейшего редактора возможно использовать MS Paint, который запускается из меню «Пуск» и раздела «Стандартных программ». В открытом окне редактора нажмите сочетание клавиш Ctrl + V, чтобы вставить продукт буфера обмена. Сохраните изображение в любой папке, например, на рабочем столе — для быстрого доступа.

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

На странице сервиса нажмите кнопку Upload a file, чтобы загрузить изображение с жесткого диска, в вашем случае это картинка на рабочем столе. А скопированный адрес изображения необходимо вставить в пустое поле Or specify a URL. Затем нажмите кнопку Continue.

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

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

Совет добавлен 29 апреля 2012 Совет 2: Как определить шрифт на сайте Точно подобранный шрифт способен подчеркнуть стиль сайта, придать ему уникальности, красиво разделить абзацы, основной текст, цитаты и второстепенную информацию. А также сделать сайт запоминающимся и подарить приятные эмоции посетителям.

Инструкция

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

Чтобы посмотреть шрифт в браузере Firefox, кликните по интересующему вас блоку текста правой кнопкой мышки и нажмите «Исследовать элемент». Нажмите кнопку «Стиль», расположенную в правом нижнем углу окна и в появившемся окне кликните «Свойства». Введите в строку поиска по свойствам – «font». Браузер отобразит все настройки текста заданного элемента. Среди них будет «font-family», указывающее название нужного шрифта. Также в остальных свойствах вы сможете определить стиль и толщину текста.

Аналогичная функция в Chrome называется «Просмотр кода элемента». Кликнув по нему, раскройте список «Computed Style», расположенный в правой части вкладки «Elements». Найдите в нем свойство «font-family», чтобы узнать название шрифта.

В браузере Opera эта функция называется «Проинспектировать элемент». Выберите его, переключитесь на вкладку «Документы» и кликните вкладку «Стили», находящуюся в правой части окна. Введите в поле «Фильтр» — «font». Раскройте список «Рассчитанный стиль», среди перечисленных свойств будет название шрифта.

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

Чтобы определить шрифт с помощью программы Word, вставьте в него содержимое буфера обмена с помощью правой кнопки мышки или комбинации клавиш «Ctrl+V», выбрав при вставке «Сохранять исходное форматирование». Вы также можете использовать комбинацию клавиш «Ctrl+Alt+V», указав в меню «Формат HTML».

Посмотрите на вкладке «Главная» отобразившийся шрифт. Этот способ легче, чем просмотр свойств CSS, но в некоторых случаях Word определяет шрифт неправильно. Будьте внимательны.

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

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

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

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

Online-сервисы

WhatTheFont

WhatTheFont — объективно лучший сервис для идентификации шрифтов по картинкам. Просто загружаете картинку с примером шрифта, указываете, правильно ли сервис распознал буквы, и жмете на большую зеленую кнопку. Вам выдается несколько наиболее похожих по начертанию шрифтов, среди которых можно найти 100% совпадение. Если определить шрифт все-таки не удалось, то вам предложат задать вопрос на специализированном форуме на этом же сайте. Сервис удобен еще и тем, что найденный шрифт можно сразу же купить.

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

IdentiFont

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

Whatfontis

What Font is — онлайн-сервис идентификации шрифта по картинкам. Во многом похож на WhatTheFont, но стоит добавить в закладки, на всякий случай.

Приложения и расширения для браузеров

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

FontFaceNinja

Бесспорный лидер на данный момент. FontFaceNinja дает возможность не только узнать название любого шрифта на сайте (не картинки), но и попробовать его написание здесь же на сайте, а также (внимание) скачать понравившийся шрифт! Конечно, авторы предупреждают, что шрифты скачиваются исключительно для ознакомления.

Помимо красоты и удобства этого расширения есть еще один приятный момент. В FontFaceNinja есть волшебная кнопка (маска), которая скрывает всю рекламу со страницы, позволяя наслаждаться исключительно шрифтами. Скачать расширение можно совершенно бесплатно. Работает с Chrome и Safari.

Whatfont tool

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

Fount

Отличный плагин для идентификации шрифтов на сайтах. Чтобы все заработало, сайт нужно добавить в закладки и нажать на него. Курсор примет форму крестика и при нажатии на шрифт будет появляться окошко с его названием, размером в пикселах, весом и стилем. Чтобы выключить — нажимаем еще раз. Работает с браузерами Safari, Chrome, Firefox, и IE8+.

Апгрейд личных навыков распознавания шрифтов

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

Font Trainer

Онлайн-игра-тест: устанавливаете параметры и угадываете где какой шрифт. Можно установить как латиницу, так и кириллицу.

The Font Game HD

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

Потренировались? Пора проверить свои знания!

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

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

Facebook

Twitter

Вконтакте

Google+

Программы

Семиступенчатый урок типографики для начинающих разработчиков электронного обучения

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

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

3. Поэкспериментируйте с размером шрифта.

Стандартный размер для чтения электронного текста — шрифт 12 pt; Конечно, для электронного обучения никогда не опускайтесь ниже 10. Однако на планшетах и ​​телефонах 14- и даже 16-пунктовый шрифт стал популярным шрифтом по умолчанию. Подумайте о своей целевой аудитории, о том, какие устройства они используют и насколько остро их видение.

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

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

4. Будьте последовательны.

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

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

Например, выберите комбинацию шрифтов, которые дополняют друг друга: Helvetica Neue и Garamond ( Вот еще 20 идеальных пар шрифтов ). Это позволит вам добиться некоторого разнообразия и визуального контраста, но при этом не станет слишком много.

5. Позвольте типографике вести учащихся.

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

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

6. Тщательно используйте интервалы.

Тело текста должно занимать 25-40% экрана с межстрочным интервалом, пропорциональным размеру текста. Главное, чего следует избегать — это плотный «кирпичик» текста, который быстро теряет взгляд.Не поддавайтесь желанию настроить поля, чтобы они поместились в большем количестве текста; если вы не можете сделать его более кратким, выберите более сжатый шрифт или уменьшите размер шрифта. Мелкий шрифт легче читать, чем тесный.

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

Исследования на самом деле обнаружили 20% -ное улучшение понимания благодаря эффективному использованию пробелов. Поэтому убедитесь, что вокруг текста достаточно места.

7. Создайте контраст.

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

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

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

Рекомендуемые ресурсы:

3 правила выбора шрифтов для онлайн-курса обучения

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

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

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

Правило №1: Выбирайте контрастные шрифты.

Как простое практическое правило, я ищу шрифты, которые контрастируют по весу или с засечками с сан-засечками.

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

Правило № 2: Используйте одно и то же семейство шрифтов.

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

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

Правило № 3: Избегайте одинаковых шрифтов.

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

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

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

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

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

Другой вариант — попрактиковаться в сочетании шрифтов в этой типографской игре на свидания.

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

Бесплатные ресурсы для электронного обучения

Какой шрифт легче всего читать?

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

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

Давайте начнем!

Что делает шрифт удобочитаемым?

Есть несколько факторов, которые влияют на то, насколько легко читать шрифт. Три основные проблемы:

• Засечки. Это небольшие штрихи или ножки, которые отходят от основных линий каждого символа в определенных шрифтах. В качестве примера вы можете сослаться на «элегантный» в нашем логотипе. Принято считать, что шрифты без засечек (шрифты без засечек, подобные тому, который вы сейчас читаете) легче читать на экранах. Однако, как вы увидите в нашем списке ниже, из этого правила есть некоторые исключения.
• Расстояние. В частности, кернинг, трекинг и интерлиньяж. Эти термины относятся к тому, насколько близки друг к другу отдельные символы, слова и строки в шрифте.Если интервал слишком мал, символы становятся трудно различимыми. Если он слишком растянут, может быть трудно соединить нужные буквы вместе, чтобы образовать слова.
• Размер шрифта. Какой размер текста может затруднить читаемый шрифт. Кроме того, некоторые шрифты лучше адаптируются к меньшим размерам, чем другие.

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

Кроме того, помните о цвете шрифта. Важно, чтобы текст и фон были достаточно контрастными, чтобы дальтоникам и пользователям с ослабленным зрением было легче разобрать слова. Однако также широко распространено мнение, что «перевернутый» шрифт (светлый текст на темном фоне) труднее читать всем.

Какой шрифт легче всего читать? (10 лучших вариантов)

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

Начнем со старых фаворитов.

1. Arial

Arial — стандартный шрифт для многих текстовых процессоров, таких как Microsoft Word и Google Docs.Это чистый современный шрифт без засечек, который отлично подходит для основного текста.

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

2. Helvetica

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

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

3. Грузия

Один из немногих шрифтов с засечками в нашем списке — Georgia. Этот шрифт выделяется своим стильным «старомодным» вкусом, который идеально подходит, если вы хотите привнести немного характера в дизайн своего сайта.

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

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

4. Merriweather

Еще один вариант для дизайнеров, которых не впечатляют шрифты без засечек — Merriweather. Этот шрифт Google имеет слегка сжатые буквы, которые оставляют много места между символами для удобочитаемости на экране.Он настолько хорошо выполняет свою работу, что давние пользователи WordPress будут помнить, что он использовался в предыдущих темах по умолчанию.

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

5. Монтсеррат

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

Если вам нравятся чистые линии Arial и Helvetica, но вы хотите, чтобы шрифт был немного более интригующим, стоит подумать о Montserrat. Он идеально подходит для блогов, которые хотят привнести немного больше индивидуальности, минимизируя нагрузку на глаза при долгом чтении.

6. Futura

Еще одна популярная альтернатива Helvetica — Futura, которая привносит в ваш текст острый, современный вид. Он продуман до мелочей и передает много эмоций без лишних излишеств.

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

7. Open Sans

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

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

8. Лато

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

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

9. Тиса

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

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

10. Зыбучие пески

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

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

Заключение

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

В этой статье мы рассмотрели десять самых простых для чтения шрифтов для веб-контента. Merriweather и Futura являются фаворитами для заголовков и заголовков, тогда как для основного текста может быть предпочтительнее более тонкий выбор, такой как Quicksand или Open Sans.

У вас есть вопросы по выбору читаемого шрифта для вашего сайта? Сообщите нам об этом в разделе комментариев ниже!

Изображение статьи предоставлено Oberon / Shutterstock.com

курс типографики онлайн | Learn Font Design

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

• Модуль 1: Основы шрифтового дизайна
• Модуль 2: Конструирование шрифтов
• Модуль 3: Создание рабочего шрифта
• Модуль 4: Advanced Fontmakin g

Обзор курса шрифтов

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

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

________________________________________________________________________________________________________________________________________________________________________________

Уэйн Томпсон

Уэйн — австралийский дизайнер шрифтов, наиболее известный благодаря ABCSans, которого ежедневно можно увидеть на миллионах экранов ABC по всей Австралии. Он получил степень магистра в области дизайна шрифтов в Университете Рединга, Великобритания, и в течение 17 лет работал дизайнером шрифтов и преподавал в университете. За последние несколько лет Уэйн разработал семейства шрифтов для Officeworks, News Ltd, V Energy и Breville , , но ему также нравится работать с более мелкими клиентами, такими как бутик-пивоварня, которая платит ему пивом.

________________________________________________________________________________________________________________________________________________________________________________

Как это работает

Вам просто нужно время, верно? Все заняты, поэтому вы сами выбираете время сеанса.Это дает вам возможность учиться, учитывая плотный график, работу и семейные обязанности. Нет никаких сроков, поэтому вы выбираете темп, в котором вы будете учиться. Принимайте столько, сколько хотите! Конечно, если вы один из тех, кому нужно дедлайнов, мы будем рады предоставить их … все для вас!

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

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

Итак, что в курсе?

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

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

Модуль 1 :: Основы шрифтового дизайна

Охваченные темы:
• История шрифтов и классификация
• Буквенная анатомия
• Контрастность штрихов
• Стили

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

Модуль 2 :: Конструирование шрифтов

Охваченные темы:
• Методы создания хороших векторных контуров
• Принципы удобочитаемости: пропорции, высота по оси x и отрицательное пространство
• Наборы символов и специальные символы

Модуль 3 :: Создание рабочего шрифта

Охваченные темы:
• Введение в программное обеспечение для создания шрифтов
• Интервал и кернинг
• Именование, установка и тестирование
• Технические аспекты

Модуль 4 :: Расширенный Создание шрифтов

Охваченные темы:
• Расширение вашего шрифта в профессиональную семью
• Advanced Opentype coding
• Цветные шрифты и вариативные шрифты

Чем это отличается от других курсов по дизайну шрифтов?
Темп выбираете вы.Вы выбираете уровень. Модули усложняются с течением времени, и вы выбираете, как далеко вы зайдете. И методика, которую вы изучите, уникальна и основана на 20-летнем коммерческом опыте!

Стоимость
850 долларов США + налог на товары и услуги за модуль.

Необходимые материалы
Бумага A3
Ширококонечный маркер (или маркер с долотом)
Карандаш
Ластик
Линейка
Компьютер (рекомендуется Mac)
Adobe Illustrator (рекомендуется)
Программное обеспечение Glyphs (доступны бесплатные альтернативы)

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

Билеты на покупку Ниже или Сделайте запрос

---

Типовой дизайн Часто задаваемые вопросы

Нужно ли мне создавать определенный шрифт?

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

Получу ли я квалификацию?

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

Это просто куча видео с Youtube?

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

Нужно ли мне программное обеспечение?

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

10 лучших шрифтов, удобных для детей (и где их найти)

Конкуренты шрифтов для детей

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

Вот мой список из 10 детских шрифтов:

1.Comic Sans MS

2. Sassoon Primary

3. Gill Sans Infant Std

4. Andika

5. Futura

6. KG Neatly 9000 7. Mulish

8. Дочь архитектора

9. National First Font

10. Muli

Что делает детский шрифт хорошим?

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

Дизайн шрифта

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

Доступность шрифта

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

Четкие и легкие для чтения шрифты

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

Ни один из этих шрифтов не является особенно трудным для чтения, но я бы сказал, что наиболее стилизованными являются Andika, Futura и Architect’s Daughter. Это не означает, что эти шрифты не подходят для детей — просто могут быть более простые варианты.

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

Лучший шрифт для детского почерка

Формирование букв, которым дети учатся в школе, не обязательно используется в большинстве шрифтов, и некоторые буквы, такие как a, y, f, g и t, часто могут выглядеть совершенно по-другому на компьютер по сравнению с тем, как мы их пишем, и даже правильное формирование буквы может быть выполнено разными способами в зависимости от дизайна.

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

Я заметил, что единственным шрифтом, в котором буква f опускается ниже базовой линии, был Sassoon Primary — хотя детей можно обучить обоим способам написания f, и поэтому это не дисквалифицирует другие шрифты и не означает, что Sassoon Primary является лучшим.

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

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

1. г. с полностью изогнутым хвостом — Sassoon Primary, Gill Sans Infant Std и National First Font

2. г. со слегка изогнутым хвостом — Muli, Mulish & Andika

3. г. с прямым хвостом — Architect’s Daughter, KG Neatly, Comic Sans MS & KG Neatly Printed

Шрифт с одноярусными строчными буквами a

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

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

Лучший дизайн шрифтов для детей

С точки зрения дизайна шрифтов, удобных для детей, единственное, что я заметил из приведенной выше таблицы, — это прямой хвост у четырех шрифтов, включая, что удивительно, Comic Sans MS! Прямой хвост на y делает шрифт менее удобным для детей, потому что детей учат писать y с изогнутым хвостом.

Таким образом, четыре шрифта с прямой буквой y (Architect’s Daughter, KG Neatly, Comic Sans MS и KG Neatly Printed) по-прежнему являются хорошими шрифтами, но не лучшими шрифтами для детей.

Таким образом, остается три шрифта из десяти, которые являются лучшими шрифтами для детей, потому что все буквы, включая «y», могут быть легко прочитаны детьми.

• Sassoon Primary

• Gill Sans Infant Std

• National First Font

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

Я проверил, какие из моих 10 удобных для детей шрифтов обычно предустановлены на устройствах, и явным победителем оказался Comic Sans MS . Вот таблица, показывающая, какие шрифты, удобные для детей, доступны автоматически и на каких типах устройств:

Как видите, только два шрифта из списка когда-либо предустановлены, поэтому, если вы не хотите добавлять или устанавливать Если у вас есть дополнительные шрифты, вы можете выбрать либо Comic Sans MS, либо, если у вас Mac, вы можете использовать Comic Sans MS или Futura .

Загрузите и установите шрифты, удобные для детей

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

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

Comic Sans MS

Sassoon Primary

Gill Sans Infant Std

Andika

Futura

KG

9000

Mulctly 906

National First Font

Muli

Добавить удобные для детей шрифты в Google Docs

Andika и Architect’s Daughter можно добавить в G Suite для использования в Google Docs, Slides и т. Д.

Чтобы добавить один из детских шрифтов в Google Docs:

1. Щелкните раскрывающийся список шрифтов (по умолчанию Arial)

2. Щелкните Дополнительные шрифты

3. Введите шрифт , который вы хотите использовать

4. Щелкните имя шрифта , чтобы добавить его

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

Extensis Fonts

Extensis Fonts — это надстройка для приложений G Suite, таких как Google Docs, которая позволяет использовать сотни дополнительных шрифтов в ваших документах.

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

Лучшими вариантами шрифтов Extensis для детей являются Mulish, Andika и Architect’s , Daughter .Также есть Comic Neue, , который является хорошей альтернативой Comic Sans MS, который вы также можете использовать в Google Docs или других документах G Suite через Extensis Fonts.

См. Также:

***

Надеюсь, эта страница оказалась для вас полезной! Вы можете ПОДПИСАТЬСЯ на ниже, чтобы получить больше полезных советов по онлайн-обучению в вашем почтовом ящике!

(PDF) Исследование с отслеживанием взгляда на то, как размер и тип шрифта влияют на чтение в Интернете.

Старшая группа

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

Чтобы проанализировать онлайн-чтение по родному языку, мы разделили

предметный пул на две группы: (1) испытуемые в возрасте от 30 лет указали

на английском как на родном языке (27 предметов) и (2) предметы из

своих 30 лет, говорящих на другом языке (34 предмета). Таблица 3

показывает ряд существенных различий между двумя группами

, при этом первая группа на английском языке читает быстрее, а повторная

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

1

st

английской первой группы на 23% выше, чем

неанглийской первой группы, значительная разница, F (1,59) =

10,85, p <0,002.) Эта разница в скорости может быть объяснена тем, что

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

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

, поэтому первые

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

.Эти результаты хорошо согласуются с предыдущим исследованием отслеживания ESL на глаз

[14]; для носителей английского языка, для которых английский язык не является родным,

, они также обнаружили увеличение продолжительности фиксации, снижение скорости,

, но никаких различий в регрессиях.

4. ОБСУЖДЕНИЕ

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

и типом шрифта, влияют на чтение в Интернете. Что касается размера шрифта, небольшое преимущество в скорости чтения

для более крупных шрифтов, хотя и незначительное

, вероятно, вызвано значительно более длительными фиксациями

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

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

при каждой фиксации? Этот эффект размера шрифта на продолжительность фиксации

согласуется с данными Тинкера [9], а также с недавними исследованиями айтрекинга

Йен и Радачем [15].

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

согласуется с утверждением Моррисона и Райнера о том, что длина саккады

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

он станет меньше (меньший диапазон восприятия), а Рейнер

утверждал, что он останется прежним (длина саккады масштабируется с размером символа

). В то время как длина саккады в Таблице 3 снизилась всего на 5%

с 10 до 14 пунктов, это происходит на фоне увеличения размера пикселя на 45%

, поэтому наши данные подтверждают интерпретацию Рейнера

.

Что касается дизайна, отсутствие значительной разницы в скорости

для разных размеров шрифта может соблазнить дизайнера использовать меньший шрифт

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

, реакция

на мелкий шрифт размером 10 пунктов была довольно негативной. Это

, особенно верно, поскольку айтрекер ограничивает приближение объекта

к монитору. Мы полагаем, что сочетание

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

Что касается типа шрифта, то наше исследование с засечками и без засечек не дало

существенных различий в показателях отслеживания взгляда или удержания.

Было 7,9% преимущество в скорости прохода 1

st

для шрифта с засечками,

, но разница была незначительной.

Апостериорный анализ, сравнивающий возрастные группы испытуемых, не обнаружил

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

обычно используется более старая популяционная выборка

(70 лет), чем наша выборка (50 лет), что, вероятно, объясняет это различие.Постфактум-анализ первых

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

. Это различие может быть объяснено

значительно более длинными фиксациями и более короткими саккадами у

английских субъектов, для которых английский язык не является родным.

5. ССЫЛКИ

[1] Тинкер М. Разборчивость печати. Государственный университет штата Айова

Press, Эймс, Айова (1963)

[2] Патерсон Д.Г., Тинкер М.А. Исследования типографской печати

Факторы, влияющие на скорость чтения: II.Размер шрифта.

Журнал прикладной психологии, 13: 2 (1929), 120-130.

[3] Легге, Г.Е., Пелли, Д.Г., Рубин, Г.С., Шлеске, М.М.

Психофизика чтения: I. Нормальное зрение, зрение

Research, 25: 2 (1985), 239-252.

[4] Бернард, М., Лида, Б., Райли, С., Хаклер, Т., Янцен, К.

Сравнение популярных онлайн-шрифтов: какой размер и

Тип

лучше всего? Новости юзабилити, 4.1, (2002)

[5] Патерсон Д.Г., Тинкер М.A. Исследования типографских

факторов, влияющих на скорость чтения: X. Стиль шрифта

Лицо. Journal of Applied Psychology, 16: 6 (1932), 605-

613.

[6] Боярски, Д., Нойвирт, К., Форлицци, Дж., Регли, С.Х.

Исследование шрифтов, предназначенных для отображения на экране. Proc. ЧИ

1998. 87-94.

[7] Райнер К. и Поллацек А. Психология чтения.

Lawrence Erlbaum Associates, Хиллсдейл, Нью-Джерси (1989)

[8] Патерсон, Д.Г., Тинкер, М.А. Влияние типографики

на диапазон восприятия при чтении. Американский журнал

психологии, 60 (1947), 388-396.

[9] Тинкер, М.А., Патерсон, Д.Г. Влияние типографских вариаций

на движение глаз при чтении. Журнал

Образовательные исследования, 49 (1955), 171-184.

[10] Моррисон, Р.Э., Рейнер, К. Размер саккады при чтении

зависит от пространства символов, а не от угла обзора.

Восприятие и психофизика, 30: 4 (1981), 395-396.

[11] Беймер Д. и Рассел Д. WebGazeAnalyzer: система

для сбора и анализа поведения чтения в Интернете

Использование Eye Gaze. В CHI 2005 Extended Abstracts. 1913-

1916.

[12] Беймер, Д., Рассел, Д., Ортон, П. Широкий и узкий

Абзацы: анализ отслеживания взгляда. В Interact 2005.

741-752.

[13] Кемпер, С. и Макдауд, Дж. Движение глаз молодых

и пожилых людей при чтении с отвлечением.

Психология и старение, 21: 1 (2006), 32-39.

[14] Oller, J.W. Оценка компетентности в ESL: чтение.

TESOL Quarterly, 6: 4 (1972), 313-323.

[15] Yen, M.-H. и Радах, Р. Саккад и бинокль

, координация при чтении: Влияние расстояния просмотра и размера шрифта

, В 14-й Европейской конференции по движениям глаз

(2007)

[16] Дарроч, И., Гудман, Дж. , Брюстер, Южная Каролина, и Грей, PD

Влияние возраста и размера шрифта на чтение текста на портативных компьютерах

, In Interact 2005, 253-266.

Исследование с отслеживанием взгляда, как размер и тип шрифта влияют на чтение в Интернете

18

Лучшие ресурсы по типографике на 2021 год · Typewolf

---

Покупка и размещение шрифтов

Adobe Fonts →

Ранее известная как Typekit, вся коллекция Adobe Fonts включена во все планы Creative Cloud. Все доступно как для настольных компьютеров, так и для Интернета (с неограниченным количеством просмотров страниц). Ознакомьтесь со списком моих любимых шрифтов, доступных в Adobe Fonts.

MyFonts →

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

FontShop →

Еще один огромный выбор шрифтов. Принадлежит Monotype, материнской компании MyFonts.

Fonts.com →

Еще одна собственность Monotype с большим выбором шрифтов.

Fontspring →

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

Cloud.typography →

Служба веб-шрифтов Hoefler & Co. От 99 долларов в год с выбором из пяти семейств шрифтов.

Тип Сеть →

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

Подставка →

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

шрифтов Google →

Бесплатная служба Google по размещению шрифтов.Доступны отличные варианты, такие как Work Sans и Space Mono.

---

Типографские блоги

Типографика →

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

Я люблю типографику →

Блог обо всем, что связано с типографикой, существует с 2007 года.

Поклонение типу →

Блог журнала 8 Faces, курируемый Джейми Кларком и Эллиотом Джеем Стоксом.

Блог FontShop →

Блог

FontShop, в котором представлены рекомендации по шрифтам, методы оформления и вдохновение.

---

Типографские форумы

Тип Ящики →

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

Типографика.Гуру →

Еще одно онлайн-сообщество типографов — включает в себя последние новости и активную доску идентификации шрифтов.

---

Типографское вдохновение

Typewolf →

Типографское вдохновение для современной сети.

используемых шрифтов →

Архив шрифтов, используемых в реальном мире.

Grain Edit →

Блог, посвященный классическим дизайнерским работам 1950-1970-х годов, а также современным дизайнерам, вдохновленным тем периодом времени.

Дилин →

Вдохновение для дизайна упаковки.

Невероятные типы →

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

Typeverything →

Вдохновение для надписей.

Друзья типа →

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

Архив обложек →

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

---

Идентификация шрифта

WhatTheFont →

Загрузите изображение, и оно волшебным образом сообщит вам название шрифта — работает на удивление хорошо.

Сопоставитель шрифтов →

Новый инструмент идентификации шрифтов

Font Squirrel — отличается приятным и плавным интерфейсом, однако библиотека шрифтов, из которой он извлекается, несколько ограничена.

Fontface Ninja →

Расширение браузера, доступное для Chrome, Safari и Firefox, которое позволяет идентифицировать, пробовать, покупать и добавлять шрифты в закладки на веб-странице.

Типовой образец

→

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

Идентификатор →

Определите шрифт, ответив на ряд вопросов.

---

Ручные инструменты

FontReach →

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

Шпаргалка по типографике

→

Собственное подробное руководство

Typewolf по использованию правильных типографских символов, включая правильное грамматическое использование.

Тип ядра →

Попрактикуйтесь в кернинге и сравните себя с экспертами.

Тип соединения →

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

Wordmark.it →

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

Тип Зебра →

Еще один хороший инструмент для предварительного просмотра всех шрифтов в вашей системе.

---

Типографские книги

См. Полный список моих любимых книг по типографии.

Элементы типографского стиля →

Если вы читали только одну книгу о типографике, прочтите эту.

в веб-типографике →

Книга Джейсона Санта-Марии о том, как применить принципы классической типографики в Интернете.

Анатомия шрифта: графическое руководство по 100 гарнитурам →

Книга

Стивена Коулза поможет вам лучше определять шрифты.

Мыслить типом: Критическое руководство для дизайнеров, писателей, редакторов и студентов →

Превосходное введение Эллен Луптон в типографику.

Прекратить красть овец и узнать, как работает шрифт →

Классическая книга Эрика Шпикерманна по типографике — недавно дополненная новой информацией по типографике в Интернете.

Дизайн с использованием шрифта: Основное руководство по типографике →

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

Визуальная история шрифта →

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

Как партнер Amazon я зарабатываю на соответствующих покупках.

---

Организации

Клуб типографских директоров →

Международная организация, созданная для поддержки передового опыта в типографике.

ATypI →

Association Typographique Internationale — международная организация, занимающаяся типографикой.

Общество любителей типографики →

Международная некоммерческая организация, занимающаяся типографикой и ее поклонниками.

No related posts.