Меню

Вид шрифта область применения изображение таблица



Как выбрать шрифт Инструкция арт-директора «Медузы» Сергея Сурганова

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

1. Разберитесь в видах шрифтов

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

Антиква — это шрифт с засечками, а гротеск — без засечек. (Засечки это такие маленькие черточки на кончиках букв).

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

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

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

Если вы пользуетесь Windows, среди антикв хорошим выбором будет Georgia (такой шрифт используется на сайте The New York Times) или Garamond (классическая антиква, которая идет в комплекте с Microsoft Office). На Mac OS тоже есть Georgia, а также прекрасные Iowan Old Style (один из шрифтов в читалке iBooks), Charter (который хорошо подходит для печати в маленьком размере) и PT Serif (его можно бесплатно скачать для Windows).

3. Используйте шрифт без засечек для коротких текстов

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

Для пользователей Windows можно порекомендовать стандартные Verdana, Tahoma и Segoe UI (и, пожалуйста, никакого Arial и Calibri!). У пользователей Mac OS к уже упомянутым Verdana и Tahoma также добавляются Helvetica Neue и Helvetica (про этот шрифт даже сняли целый фильм ). А вот отличный San Francisco, новый фирменный шрифт Apple, который используется во всех интерфейсах, упаковке и с недавних пор на официальном сайте, почему-то недоступен для использования внутри системы по умолчанию, поэтому его приходится скачивать и устанавливать отдельно .

4. Скачивайте бесплатные шрифты

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

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

Большой выбор бесплатных кириллических шрифтов в Google Fonts fonts.google.com

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

5. Купите шрифт, если хотите чего-то большего

Самый богатый выбор шрифтов у тех, кто готов за них платить. Наиболее популярный интернет-магазин шрифтов — это MyFonts , в котором одних только кириллических шрифтов можно найти почти две тысячи штук. Также можно посоветовать посетить сайты словолитен (так называются компании, которые делают шрифты): Parachute , Colophon , Radim Pesko , Commerical Type , Grilli Type . Среди российских компаний можно отметить: «Паратайп» , Студию Лебедева , Letterhead , Type Today и Brownfox .

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

Фрагмент промосайта шрифта GT America gt-america.com

Обычно одно начертание шрифта стоит около 3000 рублей (бывает и дешевле, и дороже). И да, за жирное или курсивное начертание придется заплатить столько же, сколько и за обычное. К счастью, часто можно сэкономить, купив всю шрифтовую семью разом — оптом дешевле.

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

6. Учитывайте контекст применения шрифта

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

Проект по переделке известных логотипов с использованием Comic Sans comicsansproject.tumblr.com

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

7. Помните, что не все зависит от выбора шрифта

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

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

Источник

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

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

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

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

Характеристики шрифтов

Шрифтов существует огромное множество. Все их объединяет наличие шести основных характеристик:

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

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

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

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

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

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

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

Классификация шрифтов

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

Все варианты, отличающиеся от стандартного, в базовой текстовой печати используются редко. А вот в рекламе они нашли широкое применение. Шрифты с оригинальной графикой уместны на афишах, листовках, буклетах, пригласительных билетах, в рекламных изданиях и т. п. Номенклатура шрифтов давно вышла за рамки ГОСТ 3489.1-71, 3489.38-72. Определяется она, по сути, возможностями издательского программного обеспечения.

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

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

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

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

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

Читайте также:  Как составлять концептуальную таблицу

В типографиях повсеместно используется 4 категории шрифтов:

  • Титульные (кегель 16-48).
  • Выделительные (кегель 6-12).
  • Текстовые (кегель 6-12).
  • Плакатно-афишные (кегель больше 48 пунктов).

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

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

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

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

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

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

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

Популярные шрифты для полиграфии и веб-дизайна

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

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

Первым популярным в типографиях и веб-пространстве семейством является Serif. Его характерные черты – засечки и штриховой выступ в верхней части символа. Также шрифты данного семейства отличаются плавностью перехода при изменении толщины линий. Times New Roman, Georgia, Courier New и египетский стилизованный Clarendon – классика жанра, которая популярна и знакома не только web-дизайнерам и работникам типографий.

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

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

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

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

В семействе Sans serif представлены традиционные рубленые шрифты. Они не имеют засечек, и плавность линий – это точно не про них. В журналах, газетах, на листовках, календарях, в буклетах тексты нередко печатаются с помощью Comic Sans, Tahoma, Verdana, Arial. Преимущества шрифтов очевидны. Текст выглядит современно, стильно, отлично воспринимается.

В веб-дизайне также часто используется семейство рукописных шрифтов. Имитация почерка человека – известный прием для повышения лояльности пользователя к представленной на сайте информации. Рукописные шрифты рекомендованы для коротких сообщений. Используются чаще всего Anfisa Grotesk, Calligraph, Rosamunda One, Annabelle, Andantino script.

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

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

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

Остальные шрифты относят к семейству декоративных. Их удел – заголовки, логотипы и пр. Неплохо зарекомендовали себя на этом участке работы Open Sans, Academy, Taurus, PT Sans.

Шрифты для вывесок и табличек

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

Самым влиятельным шрифтом в графическом дизайне признан Helvetica. Существует множество версий: латинская, еврейская, хинди, японская, греческая. В логотипах, на вывесках, в наружной рекламе Helvetica используется ведущими мировыми брендами, такими как Energizer, BMW, Microsoft, Toyota, Nestle, Motorola.

Futura – еще один достаточно популярный шрифт, основанный на строгой геометрии. Ему немногим меньше сотни лет. Но «шрифт будущего» не сдает позиций. Он является лучшим подтверждением, что все гениальное – просто.

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

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

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

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

Еще одним топовым шрифтом указанного семейства является Franklin Gothic. Ему нет равных в рекламных кампаниях. Этот шрифт лидирует на баннерах и билбордах. Он нередко используется для объемных букв. Эффектен Franklin Gothic в светящихся вывесках. Большое количество версий шрифта позволяет экспериментировать с графическим дизайном.

Из семейства брусковых шрифтов особенно популярен в рекламе Rockwell. Этот представитель Slab serif известен с XIX столетия. Он претерпел изменения, стал современным и удобным для размещения надписей на вывесках и табличках.

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

Программы для шрифтов

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

Быстрое, удобное проектирование и управление шрифтами обеспечивают графические редакторы. Один из наиболее популярных – CorelDRAW. Программа проста, интерфейс интуитивно понятен, есть выбор инструментов (перо, безье и т. п.) для работы с рублеными и простыми декоративными буквами.

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

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

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

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

Профессионально работать со шрифтами позволяет и FontCreator. Редактор активно используют создатели гарнитур для скорочтения. Он удобен, если проект содержит сплошной текст. Редактор можно использовать вместе с Adobe Illustrator, в котором разрабатываются чертежи букв. Генерация шрифта осуществляется в FontCreator.

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

Планируете создавать новые дизайнерские шрифты? Используйте, например, FontLab Studio. В платной версии программы можно полностью реализовать свой творческий потенциал. Для тестирования подойдет и демоверсия. Единственный минус – она не позволяет сгенерировать алфавит в .ttf.

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

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

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

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

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

Источник

Типы шрифтов

Выяснение различных типов шрифтов может привести к путанице. Может показаться, что есть множество различных типов шрифтов, но ключевые из них: serif, sans-serif, script, monospace и display (плюс несколько подкатегорий).

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

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

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

  • С Засечками (serif)
  • Без засечек (sans-serif)
  • Рукописные (script)
  • Моноширинные (monospace)
  • Экранные (display)

С засечками (Serif)

Определяющая особенность: расширения в конце штрихов символов

Основное применение: печать

Классические примеры: Bodoni, Caslon, Trajan, Eames Century Modern

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

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

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

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

Шрифты с засечками в римских надписях

Шрифты с засечками имеют свои корни в римских надписях

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

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

Шрифт с засечками Rockwell

Не все засечки кажутся классическими — монотипия Rockwell одновременно сильна и несентиментальна

Наряду с X-высотой, пропорциями, контрастностью (толщиной вертикальных и горизонтальных штрихов), засечки предлагают типографам фантастический способ придать своим творениям. характер. Рапиро-тонкие засечки Bodoni, особенность которых нравится многим дизайнерам. Засечки Copperplate являются острыми, короткими и отличительными, в то время как Rockwell – это архетипическая засечка плита, в которой очень мало контраста между толщиной засечек и основными штрихами.

Помимо Bodoni, классика включает в себя шрифт 18-го века Caslon; Trajan, который берет вдохновение непосредственно от римских буквенных сокращений; и Eames Century Modern для дизайна 20-го века — информированное чувство.

Хотите научиться рисовать? Онлайн школы рисования.

Без засечек (Sans-serif)

Определяющая особенность: никаких расширений в конце буквенных штрихов

Основное применение: экранный тип

Классические примеры: Helvetica, Gotham, Akzidenz Grotesk, Futura

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

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

Шрифт Sans-Serif Futura

Sans-Serif Futura сегодня является шрифтом Dolce & Gabbana, Calvin Klein и Absolut Vodka

На самом деле политика — актуальная тема в разработке шрифтов без засечек. Первые из них, такие как Akzidenz Grotesk, были разработаны в конце 19-го века с рациональной целью создания четких вывесок и разборчивых заголовков. Это может показаться не революционным, но идея улучшения читабельности наряду с грамотностью была идеалом утопических и социалистических движений по всей Европе.

Читайте также:  Как быстрее выучить таблицу умножения для 3 класса

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

Шрифт Johnston

Sans-serif Johnston полон гениальных штрихов

Реннер и позже Ян Чичольд полагали, что чистые, эффективные шрифты могут быть разработаны с использованием основных строительных блоков геометрии – кругов, треугольников и квадратов. Гуманистические типографы, такие как Эдвард Джонстон, смягчили этот подход, введя вариацию ширины и признав, что, например, О не обязательно должна быть совершенным кругом и может быть более читаемым и эффективным, как более узкий овал.

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

Рукописные (Script)

Определяющая особенность: подражание почерку или каллиграфии

Основное применение: Различный

Примеры: Shelley, Bickham

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

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

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

Шрифт Bellissima для этикеток и свадебных приглашений

Легкая и воздушная Bellissima — это фаворит для роскошных этикеток и свадебных приглашений

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

Старомодный готический шрифт Osgard Pro

Многие старомодные готические шрифты (такие как Osgard Pro) имитируют каллиграфические надписи

При поиске скриптовых шрифтов дизайнеры обычно ищут уникальный внешний вид. Ни один рукописный шрифт не имеет профиль Times New Roman или DIN, например.

Однако Shelley и Bickham входят в число классических и оба очень элегантны. Bellissima светла и воздушна, и была хитом для студии Sudtipos. Для более мужественных надписей попробуйте Christopher Hand или Black Jack.

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

Источник

Анатомия тысячи шрифтов

Даже годы спустя после выхода фильма 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 предоставляет ещё ширину, х-высоту, вес, классификацию, контраст, заглавные буквы и рекомендации.

Источник

Adblock
detector