heart Created with Sketch. test
UI-дизайн

20 бесплатных шрифтов для цифр и чисел заточенных на визуализацию данных

Перед вами не очередной сет шрифтов и сочетаний. Здесь отборная подборка из 20 шрифтов, которые показали себя в боевых проектах.
Иллюстрация Haao: https://dribbble.com/shots/6710179-My-nickname-Haao

Вы читаете перевод статьи “Finding the Best Free Fonts for Numbers”. Над переводом работали: Анастасия Свеженцева, Ольга Жолудова.

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

Принципы подбора шрифтов у нас в агентстве

1. Равные по высоте и ширине

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

Сверху: Libre Baskerville; снизу: Merriweather

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

Слева: Lato; справа: Work Sans

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

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

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

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

Например, символы «$» и «%».

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

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

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

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

Сами шрифты Arvo, Geo и Advent Pro прекрасны, но именно в этих граничных случаях в них есть небольшие изъяны. А может эти шрифты просто не заточены на визуализацию данных.

Руководство по подбору шрифтов в Google Fonts

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

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

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

1. Droid Serif

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

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

2. Crimson Text

Размер строк с Semibold and bold немного уменьшен, иначе они были бы слишком длинными

Crimson Text – это то, что нужно для шрифтов с засечками в стиле Garamond. Перед вами популярный шрифт с засечками, с символами равными по ширине, и равными по высоте. 

3. Old Standard TT

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

4. Kameron

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

5. Copse

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

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

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

1. Open Sans

У этого шрифта больше вариантов font weight, чем показано на этом изображении

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

2. Lato

Тоже популярный рубленый шрифт. Lato отличается по стилю от Open Sans, так как у него пониже контраст и есть черточка в основании цифры «1», но также универсален.

3. Roboto Condensed

У этого шрифта больше вариантов font weight, чем показано на этом изображении

Если вам приглянулся Oswald за его силу, компактность, то попробуйте Roboto Condensed. Roboto Condensed – лучшая табличная альтернатива, которую мы нашли.

4. Titillium Web

У этого шрифта больше вариантов font weight, чем показано на этом изображении

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

5. Varela Round

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

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

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

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

1. Graduate

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

2. Changa One

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

3. Special Elite

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

4. Stardos Stencil

Трафаретный шрифт для печати на оберточной бумаге. А еще он хорош для хипстерских решений.

5. Iceland

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

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

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

1. Montserrat

Без Montserrat список будет явно не полный. У него изящные цифры.

2. Poppins

У этого шрифта больше вариантов font weight, чем показано на этом изображении

У Poppins классный дизайн цифр. Ну да, цифра «9» немного нескладная, но в целом это отличный шрифт, у которого больше вариантов font-weight, чем у Montserrat.

3. Bitter

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

4. Ultra

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

5. Fjalla One

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

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