Дизайн цифр: Дизайн шрифта для цифр от одного до нуля

Содержание

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

Вы читаете перевод статьи “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 для чисел. Надеюсь, эта статья вам зашла!

PNGTREE

Праздник середины осени лунный пирог выпечка еда десерт реальный эффект
живая музыка вектор арт клипарт
свернуть древнюю бумагу
день астмы красные легкие
Июньский парад
милое такси
золотой металлический бордюр вектор и роскошные тайские узоры вместе с черными золотыми волновыми полосами
дизайн этикетки трески
день учителя яблоко несколько объектов мультипликация
розовые желтые тычинки
фитнес флаер
глубокий плоский значок вектор
Духи Желтое Стерео
Всемирный день перелетных птиц милый 3d мультфильм
Клубнично красный реалистичный и вкусный вектор
День перелетных птиц Темно зеленая мультяшная птица
День благодарения День отца в винтажном стиле Зеленый плакат
отклоненный штамп вектор
здание школы золотая осень
Сирия развевается значок флага на белом фоне вектор
Цветы празднования водного фестиваля Сонгкран
этот вектор идеально подходит для вашего следующего дизайн проекта
волнистая линия абстрактный вектор с цветом радуги
эстетический фиолетовый исламский баннер или текстовое поле вектор
картина желтые и белые ромашки
3d светло желтый и белый мультфильм автомобильная стереосистема
овальные марки оригинальная галочка гранж оттиск psd
macbook pro макет прозрачный клипарт
Значок линии ассигнований вектор
призрачное креативное украшение
Йеменский флаг с металлической подставкой
исламский узор для ид мубарак
Рождественский колокольчик из сосны
аль муксит
торт шоколадный малиновый мультик
детский абрис
значок линии обслуживания вектор
креативный дизайн логотипа фотографии вектор
Значок линии диетолога вектор
денежный мешок иллюстрации шаржа
мед мультфильм желтый вкусный
Шоколадный сгущенный молочный узор
глобальный мир планета земля на концепции офисного стола ноутбука
с днем рождения с лентой и воздушным шаром вектор
зеленый лист
Шаблон поста в социальных сетях Ид Мубарак
абстрактные голубые волны вектор
миндальное печенье
Рамадан Карим исламская каллиграфия вектор
Минимальный привлекательный квадратный дизайн с золотой каймой

Numbers Дизайн дизайнов, тем, шаблонов и загружаемых графических элементов на Dribbble

Посмотреть 4
Посмотреть 8
Посмотреть номера
Номера
Посмотреть 82
Посмотреть 4
Посмотреть тюльпаны
Тюльпаны
Просмотр номеров часов
Цифры часов
Просмотреть иллюстрацию изометрического числа 1990 года
1990 Иллюстрация изометрического номера
Просмотр 36 Days of Type 2021: 1–9
36 дней типа 2021: 1–9
Просмотр 36 дней шрифта ~ Числа
36 дней ввода ~ Числа
View Letters & Numbers — 36 Days of Type Challenge
Буквы и цифры — 36 дней набора текста
Посмотреть 35
Посмотреть 56789
Посмотреть шрифт «Carta»
Шрифт «Carta»
Вид [P] 0 → 1
[П] 0 → 1
Посмотреть 43
Вид [P] 0 → 1
[П] 0 → 1
Посмотреть WRLDE 26′
WRLDE 26′
Просмотр 36 дней типа: 1
36 дней Тип: 1
View Exploration — Работающее приложение (дополнительные экраны)

Исследование — работающее приложение (дополнительные экраны)
Посмотреть 245
Посмотреть часть 3: 36 дней Type 2021
Часть 3: 36 дней типа 2021
Посмотреть Один О Один
Один О Один
Посмотреть 75

Зарегистрируйтесь, чтобы продолжить или войдите в систему

Загрузка еще…