Hubot Sans

Попробовать Hubot Sans

Насыщенности и начертания

• ExtraLight 200Hubot Sans ExtraLight ExtraLight Italic
• Light 300Hubot Sans Light Light Italic
• Regular 400Hubot Sans Regular Курсив
• Medium 500Hubot Sans Medium Medium Italic
• SemiBold 600Hubot Sans SemiBold SemiBold Italic
• Bold 700Hubot Sans Bold Bold Italic
• ExtraBold 800Hubot Sans ExtraBold ExtraBold Italic
• Black 900Hubot Sans Black Black Italic

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

О шрифте Hubot Sans

Hubot Sans — семейство гротесков, построенное на двух вариативных осях: насыщенности, от 200 до 900, и ширины, от 75 до 125. При ширине по умолчанию на образце видны широкие открытые буквы с ровными штрихами, одноэтажная «a», прописная «I» с верхней и нижней засечками и ноль с чертой посередине — детали, которые отличают друг от друга похожие знаки. Восемь именованных насыщенностей идут от ExtraLight до Black, у каждой есть курсив, всего 16 начертаний; прямое начертание и курсив поставляются отдельными вариативными файлами. 736 глифов покрывают латиницу, расширенную латиницу и вьетнамский. В шрифте производителем указан GitHub, Inc. Сведения об авторах в разных источниках различаются: в каталоге перечислены Tobias Bjerrome Ahlin, GitHub, Degarism Studio и Sebastian Carewe, а в таблице name — Deni Anggara. Лицензия — SIL Open Font License 1.1.

Где уместен Hubot Sans

Фирменный стиль для продуктов разработчиков

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

Адаптивные заголовки

Ось ширины от 75 до 125 позволяет сузить заголовок для телефона и расширить для десктопной вёрстки.

Панели управления и экраны настроек

Восемь насыщенностей с курсивом дают подписи, значения, подсказки и выделение в одном семействе.

Идентификаторы и номера версий в тексте

Различные формы «I», «1» и «0» уменьшают риск ошибиться при чтении кодов, не переходя на моноширинный шрифт.

Интерфейсы на вьетнамском

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

Глифы

Поддержка языков

В семействе есть основные буквы, которыми пишут на этих языках:

• Английский
• Французский
• Немецкий
• Испанский
• Португальский
• Итальянский
• Нидерландский
• Шведский
• Норвежский
• Датский
• Финский
• Исландский
• Каталанский
• Турецкий
• Польский
• Чешский
• Словацкий
• Венгерский
• Румынский
• Хорватский
• Словенский
• Литовский
• Латышский
• Эстонский
• Вьетнамский

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

Лицензия

Шрифты в пару к Hubot Sans

Пары подобраны по простым правилам: контрастная классификация и достаточно насыщенностей для основного текста. Это отправная точка, а не окончательный выбор.

Подключение Hubot Sans на сайте

Скачайте семейство, разместите файлы на своём сайте и подключите их в CSS. Не ссылайтесь на файлы с trendhub.net: здесь лежат урезанные файлы для превью, и их адреса меняются.

@font-face {
  font-family: "Hubot Sans";
  src: url("/assets/fonts/HubotSans-Italic-VariableFont_wdth%2Cwght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hubot Sans";
  src: url("/assets/fonts/HubotSans-VariableFont_wdth%2Cwght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Hubot Sans", sans-serif;
}

Или подключите шрифт из официального источника. Google Fonts отдаёт Hubot Sans с такой разметкой:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hubot+Sans:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">

Что важно знать

Две оси

Насыщенность идёт от 200 до 900, ширина — от 75 до 125. В CSS ширину задают свойством font-stretch или осью wdth.

Отдельные файлы для прямого начертания и курсива

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

Нет насыщенности Thin

Самая светлая именованная насыщенность — ExtraLight 200; ось не доходит до 100.

Сведения об авторах в источниках различаются

В каталоге и в таблице name шрифта названы разные дизайнеры; в поле производителя указан GitHub, Inc.

Вопросы и ответы

Похожие шрифты

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