Шрифт стандартный – Безопасные шрифты. Verdana, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS. Верстальщику о шрифтах.

Содержание

Шрифты, общие для всех (актуальных) версий Windows, и их Mac-эквиваленты / Habr

Введение

В данном списке перечислены шрифты, общие для всех актуальных на данный момент операционных систем Windows (фактически начиная с Windows 98), и их эквиваленты в Mac OS. Такие шрифты иногда называют «безопасными шрифтами для браузеров» (browser safe fonts). Это небольшой справочник, которым я пользуюсь, когда делаю Web-страницы и думаю, что он будет полезен и Вам.

Если Вы новичок в web-дизайне, то может быть думаете что-нибудь типа: «Почему это я должен ограничиваться таким небольшим набором шрифтов? У меня есть огромная коллекция прекрасных шрифтов!» Дело в том, что браузер посетителя может отобразить только те шрифты, которые установлены в его операционной системе (прим. переводчика: в настоящее время уже есть возможность применять фактически любые шрифты при оформлении страниц используя CSS 3 и его новое свойство @font-face; правда, поддерживают эту функцию пока ещё далеко не все браузеры), а это означает, что каждый посетитель Вашей страницы должен быть обладателем выбранных Вами шрифтов. Поэтому Вы должны использовать только те шрифты, которые есть в каждой операционной системе. К счастью, в
CSS
есть свойство @font-family, облегчающее эту задачу.

Также Вам может быть интересен список шрифтов, включённых в каждую версию Windows.

Список

Значение @font-family Windows Mac Семейство
Arial, Helvetica, sans-serif Arial Arial, Helvetica sans-serif
"Arial Black", Gadget, sans-serif Arial Black Arial Black, Gadget sans-serif
"Comic Sans MS", cursive Comic Sans MS Comic Sans MS5 cursive
"Courier New", Courier, monospace Courier New Courier New, Courier6 monospace
Georgia, serif Georgia1 Georgia serif
Impact,Charcoal, sans-serif Impact
Impact5, Charcoal6
sans-serif
"Lucida Console", Monaco, monospace Lucida Console Monaco5 monospace
"Lucida Sans Unicode", "Lucida Grande", sans-serif Lucida Sans Unicode Lucida Grande sans-serif
"Palatino Linotype", "Book Antiqua", Palatino, serif Palatino Linotype, Book Antiqua3 Palatino6 serif
Tahoma, Geneva, sans-serif Tahoma Geneva sans-serif
"Times New Roman", Times, serif Times New Roman Times serif
"Trebuchet MS", Helvetica, sans-serif Trebuchet MS1 Helvetica sans-serif
Verdana, Geneva, sans-serif Verdana Verdana, Geneva sans-serif
Symbol Symbol
2
Symbol2 -
Webdings Webdings2 Webdings2 -
Wingdings, "Zapf Dingbats" Wingdings2 Zapf Dingbats2 -
"MS Sans Serif", Geneva, sans-serif MS Sans Serif4 Geneva sans-serif
"MS Serif", "New York", serif MS Serif4 New York6 serif

1 Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE (да и вообще поставляются со многими приложениями от Microsoft), поэтому они установлены на многих компьютерах с ОС Windows 98.

2 Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings — в Safari).

3 Шрифт Book Antiqua практически идентичен Palatino Linotype; Palatino Linotype поставляется с Windows 2000/XP, а Book Antiqua — с Windows 98.

4 Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут плохо выглядеть с некоторыми размерами (они предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

5 Эти шрифты работают в Safari только в стандартном начертании, но не работают при выделении жирным или курсивом. Comic Sans MS также работает жирным, но не курсивом. Другие Mac-браузеры, кажется, нормально эмулируют отсутствующие у шрифтов свойства самостоятельно (спасибо Christian Fecteau за подсказку).

6 Эти шрифты установливаются в Mac только при Classic-инсталляции

Скриншоты

  • Mac OS X 10.4.8, Firefox 2.0, ClearType включён (за скриншот спасибо Juris Vecvanags)
  • Mac OS X 10.4.4, Firefox 1.5, ClearType включён (за скриншот спасибо Eric Zavesky)
  • Mac OS X 10.4.11, Safari 3.0.4, ClearType включён (за скриншот спасибо Nolan Gladius)
  • Mac OS X 10.4.4, Safari 2.0.3, ClearType включён (за скриншот спасибо Eric Zavesky)
  • Windows Vista, Internet Explorer 7, ClearType включён (за скриншот спасибо Michiel Bijl)
  • Windows Vista, Firefox 2.0, ClearType включён (за скриншот спасибо Michiel Bijl)
  • Windows XP, Internet Explorer 6, ClearType включён
  • Windows XP, Firefox 1.0.7, ClearType включён
  • Windows XP, Internet Explorer 6, Сглаживание шрифтов включено
  • Windows XP, Firefox 1.0.7, Сглаживание шрифтов включено
  • Windows 2000, Internet Explorer 6, Сглаживание шрифтов включено
  • Windows 2000, Firefox 1.0.7, Сглаживание шрифтов включено
  • Linux (Ubuntu 7.04 + Gnome), Firefox 2.0 (за скриншот спасибо Juris Vecvanags)
Несколько примеров из скриншотов (по одному на каждую операционную систему)

Mac OS X 10.4.8, Firefox 2.0, ClearType включён

Windows Vista, Internet Explorer 7, ClearType включён

Windows XP, Internet Explorer 6, ClearType включён

Windows 2000, Internet Explorer 6, Сглажмвание шрифтов включёно

Linux (Ubuntu 7.04 + Gnome), Firefox 2.0

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

CSS: Стандартные (безопасные) шрифты

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

Основой для определения "безопасных" шрифтов послужили шрифты наиболее распространённой операционной системы - Windows, которые кроме того используются в других ОС:

Шрифты с засечками - serif

font-family Пример
Georgia, serif

Это заголовок

Это абзац

"Palatino Linotype", "Book Antiqua", Palatino, serif

Это заголовок

Это абзац

"Times New Roman", Times, serif

Это заголовок

Это абзац

Шрифты без засечек - Sans-Serif

font-family Пример
Arial, Helvetica, sans-serif

Это заголовок

Это абзац

"Arial Black", Gadget, sans-serif

Это заголовок

Это абзац

"Comic Sans MS", cursive, sans-serif

Это заголовок

Это абзац

Impact, Charcoal, sans-serif

Это заголовок

Это абзац

"Lucida Sans Unicode", "Lucida Grande", sans-serif

Это заголовок

Это абзац

Tahoma, Geneva, sans-serif

Это заголовок

Это абзац

"Trebuchet MS", Helvetica, sans-serif

Это заголовок

Это абзац

Verdana, Geneva, sans-serif

Это заголовок

Это абзац

Моноширинные шрифты - Monospace

font-family Пример
"Courier New", Courier, monospace

Это заголовок

Это абзац

"Lucida Console", Monaco, monospace

Это заголовок

Это абзац

С этой темой смотрят:

Стандартные шрифты Windows — Разработчик на Битрикс и Django

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

Шрифт Семейство Windows Office Образец шрифта
(текст)
Arial sans‑serif 3.1, 95, NТ 3.5 97 Образец шрифта
Arial Black sans‑serif 95, 2000 97 Образец шрифта
Arial Narrow sans‑serif 4.3 Образец шрифта
Arial Unicode MS sans‑serif 2000 Образец шрифта
Book Antiqua serif 98 4.3 Образец шрифта
Bookman Old Style serif 4.3 Образец шрифта
Calibri sans‑serif Vista 2007 Образец шрифта
Cambria serif Vista 2007 Образец шрифта
Candara sans‑serif Vista 2007 Образец шрифта
Century serif 2000 Образец шрифта
Century Gothic sans‑serif 95 4.3 Образец шрифта
Comic Sans MS cursive 95, 2000 97 Образец шрифта
Consolas monospace Vista 2007 Образец шрифта
Constantia serif Vista 2007 Образец шрифта
Corbel sans‑serif Vista 2007 Образец шрифта
Courier New monospace 3.1, 95, NT 3.5 97 Образец шрифта
Franklin Gothic Medium sans‑serif XP 97 Образец шрифта
Garamond serif 97 Образец шрифта
Georgia serif 95, 2000 97 Образец шрифта
Impact sans‑serif 95, 2000 4.3 Образец шрифта
Lucida Console monospace 95, NT 3.5 Образец шрифта
Lucida Sans Unicode sans‑serif 95, NT 3.5 Образец шрифта
Microsoft Sans Serif sans‑serif 2000 Образец шрифта
Mistral cursive 97 Образец шрифта
Monotype Corsiva cursive 4.3 Образец шрифта
Palatino Linotype serif 2000 2003 Образец шрифта
Segoe Print cursive Vista 2007 Образец шрифта
Segoe Script cursive Vista 2007 Образец шрифта
Segoe UI sans‑serif Vista 2007 Образец шрифта
Sylfaen serif XP Образец шрифта
Tahoma sans‑serif 98, 2000 97 Образец шрифта
Times New Roman serif 3.1, 95, NT 3.5 97 Образец шрифта
Trebuchet MS
sans‑serif 95, 2000 97 Образец шрифта
Verdana sans‑serif 95, 2000 97 Образец шрифта

Стандартные шрифты

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

Краткая инструкция:

  1. Скачайте шрифты по ссылке
  2. Скачайте ключ реестра (если файл не начнет качаться, кликните правой кнопкой по черному экрану и нажмите «сохранить как»).
  3. Разархивируйте архив со шрифтами, и скопируйте шрифты в папку C:/windows/fonts
  4. Запустите скачанный файл fonts.reg
  5. Перезагрузите компьютер.

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

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

Компания Microsoft всегда заботилась о качестве используемых шрифтов в своей операционной системе и в программном обеспечении.  Начиная с Windows 98, в список стандартных шрифтов входили десятки лучших, и самых современных на тот момент гарнитур. К разработке новых начертаний привлекались самые известные и талантливые студии со всего мира. Помимо новых разработок, в стандартный набор входили и неоспоримые легенды типографики, например, Arial и Times New Roman.

Новые версии операционной системы не перестают радовать качественными новинками в области разработки шрифтов. Например, в Windows 8 и 10, появился шрифт Segoe UI, специально разработанный для Microsoft студией Monotype. В изначальном виде он имел название Segoe, и был разработан Monotype в 2000 году, для коммерческого распространения. После того как шрифт перешел во владение Microsoft, он модернизировался специально под web, отсюда и приставка UI(user interface).

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

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

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

Список стандартных шрифтов Windows

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

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

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

Название шрифтаWin95WinNTWin98Win2000WinMeWinXP
Abadi MT Condensed Light°°+°°°
Arial++++++
Arial Alternative Regular°°°°+°
Arial Alternative Symbol°°°°+°
Arial Black°°++++
Arial Bold++++++
Arial Bold Italic++++++
Arial Italic++++++
Book Antiqua°°+°°°
Calisto MT+
Century Gothic°°+°°°
Century Gothic Bold°°+°°°
Century Gothic Bold Italic°°+°°°
Century Gothic Italic°°+°°°
Comic Sans MS°°+++°
Comic Sans MS Bold°°++++
Copperplate Gothic Bold°°+°°°
Copperplate Gothic Light°°+°°°
Courier++++++
Courier New++++++
Courier New Bold++++++
Courier New Bold Italic++++++
Courier New Italic++++++
Estrangelo Edessa°°°°°+
Franklin Gothic Medium°°°°°+
Franklin Gothic Medium Italic°°°°+°
Gautami°°°°°+
Georgia°°°+°+
Georgia Bold°°°+°+
Georgia Bold Italic°°°+°+
Georgia Italic°°°+°+
Georgia Italic Impact°°°°°+
Impact°°+++°
Latha°°°°°+
Lucida Console°+++++
Lucida Handwriting Italic°°+°°°
Lucida Sans Italic°°+°°°
Lucida Sans Unicode°°++°+
Marlett°°+°+°
Matisse ITC°°+°°°
Modern++++°°
Modern MS Sans Serif°°°°°+
MS Sans Serif++++++
MS Serif+++++°
Mv Boli°°°°°+
News Gothic MT°°+°°°
News Gothic MT Bold°°+°°°
News Gothic MT Italic°°+°°°
OCR A E+tended°°+°°°
Palatino Linotype°°°+°+
Palatino Linotype Bold°°°+°+
Palatino Linotype Bold Italic°°+°+°
Palatino Linotype Italic°°°+°+
Roman°+°+°+
Script°+°+°+
Small Fonts°+°+°+
Smallfonts+°+°+°
Symbol++++++
Tahoma°°++++
Tahoma Bold°°++++
Tempus Sans ITC°°++°°
Times New Roman++++++
Times New Roman Bold++++++
Times New Roman Bold Italic++++++
Times New Roman Italic++++++
Trebuchet°°°°+°
Trebuchet Bold°°°°+°
Trebuchet Bold Italic°°°°+°
Trebuchet Italic°°°°+°
Trebuchet MS°°°+°+
Trebuchet MS Bold°°°+°+
Trebuchet MS Bold Italic°°°+°+
Trebuchet MS Italic°°°+°+
Tunga°°°°°+
Verdana°°++++
Verdana Bold°°++++
Verdana Bold Italic°°++++
Verdana Italic°°++++
Webdings°°++++
Westminster°°+°++
Wingdings++°+°+
WST_Czech°°°°°+
WST_Engl°°°°°+
WST_Fren°°°°°+
WST_Germ°°°°°+
WST_Ital°°°°°+
WST_Span°°°°°+
WST_Swedм°°°°°+

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

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

Безопасные шрифты: Arial, Courier, Courier New, MS Sans Serif, MS Serif, Symbol, Times New Roman.

Существуют шрифты, которые не входят в поставку Windows ранних версий, однако почти обязательно присутствуют в системе (устанавливаются с дополнительным программным обеспечением, например, Microsoft Office). Безопасные шрифты: Arial, Courier, Courier New, MS Sans Serif, MS Serif, Symbol, Times New Roman.

Почти безопасные шрифты: Comic Sans MS, Tahoma, Trebuchet MS, Verdana.

Официальные списки шрифтов, поставляемых с разными версиями Windows:

Из «Справочника Дизайнера» © 2006 BaDeVlad

Анатомия тысячи шрифтов / NIX corporate blog / Habr

Перевод статьи The anatomy of a thousand typefaces.

Даже годы спустя после выхода фильма Avatar остаётся кое-что, с чем не может справиться даже Райан Гослинг — использование шрифта Papyrus в логотипе фильма. В пародии, снятой Saturday Night Live, дизайнер шрифтов открывает меню, перебирает шрифты и случайным образом выбирает Papyrus.


Главная проблема выбора шрифтов — одновременно слишком много и слишком мало вариантов.

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

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

Горький привкус меню выбора шрифтов


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

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


Меню выбора шрифтов из видеоролика “Papyrus”. Ограниченный выбор, всевозможные стили, но далеко не лучшие шрифты из всех возможных.

Систематический подход к поиску шрифтов


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

1. Классификация


Существует сложная система классификации шрифтов. Простейшее деление на категории: шрифты с засечками (serif), гротески (sans-serif), моноширинные (monospaced), рукописные (script) и шрифты для дисплеев (display). Обычно эти категории используются в качестве фильтров на разных шрифтовых сайтах:

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

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

2. Отобранные списки


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

Подобные списки есть также на Typekit, TypeWolf и FontsInUse. Это замечательная идея, и можно порекомендовать всем начать составлять собственные списки шрифтов, с которыми вы уже работали или видели. В будущем эти наработки вам очень пригодятся.

3. Анатомия


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

Например, книга “The Anatomy of Type” Стивена Коулза. В ней собрана информация о 100 хорошо проработанных гарнитурах. Для описания качества шрифтов Стивен использует такие термины, как высота строчных литер (х-height, х-высота), ширина, вес, ball terminal, форма засечек и многие другие.


“The Anatomy of Type“ — графическое руководство Стивена Коулза по 100 гарнитурам. Замечательная книга для изучения истории и особенностей дизайна популярных гарнитур.

Но здесь описаны лишь 100 шрифтов, а как быть с остальными? Что насчёт установленных на ваших компьютерах? А используемых в сети? Какие у них х-высоты, ширины, веса и контрасты? Как это можно узнать?

Внутри шрифтового файла: нехватка метаданных


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


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

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


Сравнение Panose-данных для шрифтов Roboto и Fira Sans, оба доступны на Google Fonts. Для Fira Sans указано много информации, а для Roboto — мало. Эти метаданные не получится использовать для сравнения шрифтов.

DIY: Анализируем шрифты с помощью opentype.js


Давайте проанализируем шрифтовые файлы и придумаем, как автоматически извлекать нужную информацию. Файлы имеют разные форматы, но почти всегда можно найти версии в TTF (TrueType Font).

В файлах формата OTF (OpenType) можно найти информацию о дополнительных свойствах, например, лигатурах. В файлах WOFF (Web Open Font Format) есть дополнительные метаданные, а шрифты хранятся в сжатом виде.

Благодаря opentype.js можно анализировать шрифтовые файлы прямо в браузере с помощью JavaScript. Opentype.js предоставляет доступ к векторной информации всех наборных знаков, входящих в файл, а также к основным метрикам и таблицам метаданных.

База данных характеристик шрифтов


Ниже мы рассмотрим, как можно измерить контраст, х-высоту, ширину и вес всех шрифтов из библиотеки Google Fonts. Те же методы можно применить и к другим шрифтовым библиотекам, например, Typekit или шрифтам на вашем компьютере.

Контраст


Контраст описывает соотношение тонких и толстых штрихов символа. Есть шрифты с низким контрастом, например, брусковые, или многие гротески, созданные для интерфейсов, например, Roboto или San Francisco. А есть шрифты с высоким контрастом, например, Bodoni или Didot. Для измерения контраста мы можем посмотреть на контуры буквы «о» и сравнить самое большое и самое маленькое расстояние между внутренним и внешним контуром.


Контраст шрифта можно измерить в самой толстой и самой тонкой части буквы «о».

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

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

х-высота


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


х-высоту можно измерить с помощью информации, предоставленной opentype.js.

opentype.js для каждого символа предоставляет параметр yMax.

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

Чтобы полученные значения можно было использовать для сравнения (в одних шрифтах используется 1000 юнитов на Em (типографская единица измерения), в других 2048), необходимо нормализовать их и сопоставить с диапазоном от 0 до 1.

Ширина / Пропорция


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

Ещё можно вычислять среднюю ширину символа на основе эталонного слова вроде “Hamburgefontsiv”. Это неплохой вариант, но всё равно понадобится делать нормализацию с учётом общего дизайна и высоты шрифта.

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

Вес


Для измерения веса можно вывести на HTML-странице строчную «о», залить её чёрным, а фон — белым. Затем вычислить отношение чёрных и белых пикселей. У рукописного или очень тонкого шрифта это значение будет совсем маленьким, а у тяжёлого, громоздкого шрифта отношение будет большим. Результаты вполне удовлетворительные, но их можно ещё больше улучшить, измеряя полную ширину символов.

Расстояние


Если у всех символов шрифта одинаковая ширина, такой шрифт называют моноширинным (monospaced). Важно отметить, что для определения ширины нам не обязательно смотреть на сами символы. Даже в моноширинном шрифте символ точки визуально занимает меньше места, чем «м». Поэтому нужно учитывать свойство advanceWidth, описывающее невидимые поля вокруг символа. Удивительно, но Google Fonts использует термин monospaced в качестве определения стиля, а не технического свойства. Шрифты вроде Lekton или Libre Barcode вообще не отнесены к моноширинным, хотя технически они ими являются.

Схожесть


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


Парсер анализирует каждый шрифт, рисует невидимые SVG и фоновые элементы, проводит измерения и сохраняет данные в JSON-файл.

Демо


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

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

Датасет

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


Открытия


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

Изгои
При выборе крайних значений обычно «вылезают» очень странные шрифты. Как правило, они относятся к категории экранных шрифтов.

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

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

«Форкнутые» шрифты
Есть шрифты, которые называются по-разному, но выглядят совершенно одинаково. Некоторые из них являются форками с расширенным набором символов для поддержки разных языков, например, Alegreya & Sahitya.

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

Итоги


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

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

Возможности

Что можно сделать с этим датасетом:
  • Найти запасные шрифты аналогичной ширины или стиля.
  • На основе х-высоты автоматически настроить размеры шрифтов и высоты строк.
  • Найти комбинации шрифтов, опираясь на их сходства или различия.
  • Создать собственное меню выбора шрифтов для дизайнера постера фильма Avatar.

Приложение


Дополнительные материалы


Panose Classification Metrics Guide
Руководство 1991 года, подробно описывающее, как измерять отдельные символы, чтобы получать подходящие для сравнения метрики. К сожалению, эти измерения надо делать вручную, что потребует много времени.

Taking The Robots To Design School, Part 1 by Jon Gold
В мае 2016 Джон Голд (Jon Gold) написал о своём подходе к анализу шрифтов. Он затронул такие темы, как дизайн на основе правил (rule based design), ИИ и соответствие датасетов инструментам дизайнеров.

Google Fonts Tools
Набор open source-инструментов для анализа шрифтов на сайте Google Fonts. Например, для определения угла наклона шрифта.

Font Bakery
Это набор Python-инструментов для проверки TrueType-файлов и файлов метаданных для шрифтов с Google Fonts.

Почему просто не использовать данные из сервисов веб-шрифтов?
Все подобные сервисы — например, Typekit, Google Fonts, Fontstand, Fontshop, MyFonts и так далее — имеют собственные наборы фильтров с разной степенью настройки. API этих сервисов по каждому шрифту предоставляют разный объём информации.

Например, для шрифта Roboto от веб API Google Fonts можно получить категорию «гротеск» и варианты шрифта. https://gist.github.com/getflourish/d79836b0bebb6b44f76389b623fd7dc1

API Typekit предоставляет ещё ширину, х-высоту, вес, классификацию, контраст, заглавные буквы и рекомендации.

https://gist.github.com/getflourish

Семейство шрифтов — Википедия

Материал из Википедии — свободной энциклопедии

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

.text { font-family: times, serif; font-size:14pt; font-style:italic; }
<p>
Пример текста, отформатированного с помощью класса в таблице CSS.
</p>

<p>
Пример текста, отформатированного с помощью встроенного в тег CSS-кода.
</p>

<p><i><font face="times, serif" size="3">
Пример текста, отформатированного с помощью устаревшего HTML-элемента font.
</font></i></p>

В CSS font family (или face в HTML) состоит из набора связанных шрифтов, сгруппированных в семейства. Например, семейство Times включает в себя различные размеры шрифта, стили (такие как роман и курсивом) и жирность (нормальный и жирный шрифт). Браузер может использовать только шрифты, установленные на компьютер, что иногда приводит к искажению оформления. Поэтому разработчики HTML-кода могут перечислять несколько шрифтов в порядке значимости. Как показано выше, список шрифтов разделяется запятыми. Чтобы избежать неожиданных результатов, желательно в конце списка указывать одно из общих семейств шрифтов, доступное с помощью HTML и CSS на всех компьютерах по умолчанию. Если ни один из перечисленных шрифтов не будет доступен браузеру, то он применит свой шрифт по умолчанию, автоматически. В разных браузерах это разный шрифт, но в большинстве современных браузеров пользователь может самостоятельно изменить настройки шрифта, используемого по умолчанию. Это можно сделать на свой вкус или по причине ограничений здоровья или возможностей пользователя (например, можно увеличить размер шрифта при слабом зрении).

Следующие семейства шрифтов по умолчанию доступны через HTML и CSS на любой машине[1]:

Семейство Пример отображения (зависит от браузера)
serif The quick brown fox jumps over the lazy dog. 0123456789
sans-serif The quick brown fox jumps over the lazy dog. 0123456789
cursive The quick brown fox jumps over the lazy dog. 0123456789
fantasy The quick brown fox jumps over the lazy dog. 0123456789
monospace The quick brown fox jumps over the lazy dog. 0123456789

Под Windows API эти семейства определяются как Roman, Swiss, Script, Decorative и Modern, соответственно.

Вместо семейства шрифтов можно использовать именованный шрифт (например, Хэйсэй Mincho W9), но результат зависит от шрифтов, установленных на компьютере пользователя. Имена шрифтов должны быть заключены в кавычки, если они содержат пробелы. Внешний вид будет зависеть от браузера и шрифтов, установленных в системе[1]. Например, Internet Explorer от Microsoft по умолчанию всегда отображает Times New Roman как шрифт с засечками, а Helvetica и Arial без засечек.

Шрифт Пример (зависит от установленных шрифтов)
Antiqua The quick brown fox jumps over the lazy dog. 0123456789
Arial The quick brown fox jumps over the lazy dog. 0123456789
Avqest The quick brown fox jumps over the lazy dog. 0123456789
Blackletter The quick brown fox jumps over the lazy dog. 0123456789
Calibri The quick brown fox jumps over the lazy dog. 0123456789
Comic Sans The quick brown fox jumps over the lazy dog. 0123456789
Courier The quick brown fox jumps over the lazy dog. 0123456789
Decorative The quick brown fox jumps over the lazy dog. 0123456789
Fraktur The quick brown fox jumps over the lazy dog. 0123456789
Frosty The quick brown fox jumps over the lazy dog. 0123456789
Garamond The quick brown fox jumps over the lazy dog. 0123456789
Georgia The quick brown fox jumps over the lazy dog. 0123456789
Helvetica The quick brown fox jumps over the lazy dog. 0123456789
Impact The quick brown fox jumps over the lazy dog. 0123456789
Minion The quick brown fox jumps over the lazy dog. 0123456789
Modern The quick brown fox jumps over the lazy dog. 0123456789
Monospace The quick brown fox jumps over the lazy dog. 0123456789
Palatino The quick brown fox jumps over the lazy dog. 0123456789
Roman The quick brown fox jumps over the lazy dog. 0123456789
Script The quick brown fox jumps over the lazy dog. 0123456789
Swiss The quick brown fox jumps over the lazy dog. 0123456789
Times New Roman The quick brown fox jumps over the lazy dog. 0123456789
Verdana The quick brown fox jumps over the lazy dog. 0123456789

Отправить ответ

avatar
  Подписаться  
Уведомление о