Лучшие шрифты для цифр

Перевод материала типографа Джонатана Хофлера о том, как делать презентации, аннотации, отчёты и другие официальные документы понятными и приятными для чтения.

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

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

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

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

Стратегии для маленьких шрифтов

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

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

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

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

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

Работаем со списками

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

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

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

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

Выше представлены два списка ингредиентов в шрифте Gotham: слева допустимый Gotham Condensed, а справа гораздо более привлекательный Gotham Narrow. Совет: для максимальной разборчивости шрифта следует использовать широкий шрифт не только в основном тексте, но и в дополнительном шрифте ScreenSmart.

Работа с комплектом знаков

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

С такими символами, как *, † и ‡ пользователи еще разберутся, а вот с их повторением вроде **, †† и ‡‡ — или §, || и # в зависимости от того, к чему вы привыкли в своей компании, будет уже сложнее. Если в тексте больше трёх сносок, лучше придерживайтесь всем понятного нумерованного списка в верхнем индексе.

Супериндексы включены в каждый шрифт H&Co, у которого есть версия Pro, а также они есть в Gotham, Ringside и Inkwell. Совет: в тексте отмечайте сноски с помощью супериндексов, которые возвышаются над прописными буквами. Но в самих сносках лучше пользоваться числителем, потому что он расположен ниже. Так связь нумерации с текстом сноски лучше видна, и пункты сносок чётче визуально отделены друг от друга.

Цифры, цифры, цифры

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

У табличных цифр есть и вторая важная характеристика: их ширина не изменяется в зависимости от насыщенности шрифта. В обычном шрифте всё устроено не так: там чем больше насыщенность, тем шире символы.

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

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

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

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

Креативный выбор

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

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

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

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

В нашей коллекции Numbers есть шрифты Indicia, Claimcheck, Revenue и Greenback, в которых цифры имеют одну ширину, то же самое с интересными цифрами в любой насыщенности в шрифте Inkwell Blackletter.

Индивидуальные рекламно-информационные материалы бренда

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

Шрифты Office — это адаптация часто используемых шрифтов от H&Co, специально созданная для использования их в таких бизнес-решениях, как Word, Excel и PowerPoint. Это те же самые семейства шрифтов, чьи ScreenSmart версии хорошо использовать для мелкого текста и чьи профессиональные комплекты знаков подходят даже для самых сложных данных.

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

А ещё эти шрифты выгружаются в формат TrueType для максимальной совместимости даже с самыми старыми операционными системами.

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

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

Хотя в наши дни в блогах написано бесчисленное множество публикаций и списков рекомендаций по шрифтам, не так просто найти лучшие шрифты для чисел. Для вас не так много рекомендаций, если вы не можете себе позволить FF DIN или Numbers от H&CO.

Наши принципы

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

1. Равновысокие и табличные цифры

Первое правило при выборе правильного цифрового шрифта – убедиться, что он содержит равновысокие (lining) и табличные (tabular) цифры.

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

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

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

2. Подходящие цифровые символы

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

Например, символы «$» и «%» могут вас удивить, если вы не проверите их заранее:

Мы всегда проверяем символы «%» и «$», поэтому наша строка тестирования выглядит так: $ 123 456 789,00%. Добавьте другие символы, если они нужны для вашего набора данных.

3. Проверьте дизайн каждой цифры

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

Вот несколько примеров запутанных цифр со странным дизайном:

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

Рекомендации по шрифтам Google

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

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

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

1. Dro >

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

Если вам доводилось использовать PT Sans или Source Sans Pro, PT Serif и Source Serif Pro – это два других универсальных шрифта с засечками, имеющих хороший дизайн цифр.

2. Crimson Text

Crimson Text – это то, что нужно для шрифтов с засечками в стиле Garamond. Это широко используемый шрифт с засечками, имеющий, как равновысокие, так и табличные цифры. Они прекрасно вписываются в этот стиль.

3. Old Standard TT

Если вы ищете классический, элегантный стиль, Old Standard TT – то, что нужно. С двойной вертикальной линией на знаке доллара и красивой волнистой линией в цифрах «2» и «7» он, безусловно, вызывает ощущение олдскула.

4. Kameron

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

5. Copse

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

Рубленые (гротесковые) шрифты

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

1. Open Sans

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

2. Lato

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

3. Roboto Condensed

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

4. Titillium Web

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

5. Varela Round

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

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

Экранные шрифты

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

1. Graduate

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

2. Changa One

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

3. Special Elite

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

4. Stardos Stencil

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

5. Iceland

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

Пропорциональные шрифты

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

1. Montserrat

Список рекомендаций по шрифтам от Google не будет полным без Montserrat. Он имеет изящные цифры. (Эх, если бы они были табличными!)

2. Poppins

Еще один широко используемый рубленый шрифт Poppins также имеет великолепный дизайн цифр. Цифра «9» немного нескладная, но в целом это отличный шрифт, у которого больше вариантов веса, чем у Montserrat.

3. Bitter

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

4. Ultra

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

5. Fjalla One

Мы много думали над тем, стоит ли нам включать в наш список Oswald, потому что многие используют его в качестве сжатого жирного цифрового шрифта и, возможно, как бесплатную альтернативу FF Din. Тем не менее, время от времени знак доллара и цифра «4» в шрифте Oswald выглядят противоречиво. Поэтому мы представляем Fjalla One, как альтернативу с более сбалансированными цифрами.

Дополнительные ресурсы

• Равновысокие цифрыот com
• Пропорциональные vs. табличные цифрыот Fonts.com
• Выбирая шрифты для ежегодных отчетовот H&CO.
• Мои 5 любимых цифровых шрифтовот Mary Lester
• Какой у вас любимый шрифт для отображения чисел?на Designer News

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

Чтобы узнать больше о наших процессах проектирования и разработки, пожалуйста, подпишитесь на нашу рассылку: Graphiq Inc.

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Николай Геллар

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

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

Все цифры чуть ниже подписаны используемыми шрифтами.

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

font-family: Arial, Helvetica, sans-serif;

font-family: Tahoma, Geneva, sans-serif;

font-family: Verdana, Geneva, sans-serif;

font-family: ‘Trebuchet MS’, Helvetica, sans-serif;

font-family: Impact, Charcoal, sans-serif;

font-family: ‘Arial Black’, Gadget, sans-serif;

font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;

font-family: ‘MS Sans Serif’, Geneva, sans-serif;

font-family: ‘Century Gothic’, Futura, sans-serif;

font-family: ‘Copperplate Gothic Light’, Copperplate, sans-serif;

font-family: ‘Gill Sans MT’, ‘Gill Sans’, sans-serif;

font-family: ‘Times New Roman’, Times, serif;

font-family: Georgia, serif;

font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;

font-family: Garamond, ‘Apple Garamond’, serif;

font-family: ‘MS Serif’, ‘New York’, serif;

font-family: ‘Courier New’, Courier, monospace;

font-family: ‘Lucida Console’, Monaco, monospace;

font-family: ‘Comic Sans MS’, cursive;

Выше показаны цифры различными шрифтами – стандартными и популярными. Помимо шрифтов показаны шрифты по умолчанию из семейств шрифтов.

Посмотрите также на одни и те же знаки, начертанные разными стандартными шрифтами Знаки стандартными шрифтами

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