Roboto Condensed

Попробовать Roboto Condensed

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

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

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

О шрифте Roboto Condensed

Roboto Condensed — узкий гротеск, сжатая ветвь шрифта Roboto, который нарисовал Christian Robertson. На образце видны высокие сжатые буквы с прямыми боковыми сторонами в круглых формах, плоскими окончаниями штрихов и плотным интервалом, поэтому в строку помещается заметно больше знаков, чем в гротеске обычной ширины. В официальном описании родительский шрифт назван геометрическим, механическим по скелету, но смягчённым открытыми изгибами, а сжатое семейство предназначено для использования рядом с Roboto и Roboto Slab. Это вариативный шрифт с осью насыщенности от 100 до 900 и девятью именованными насыщенностями от Thin до Black, к каждой есть курсив: 18 начертаний. В 1 321 глифе поддерживаются латиница, расширенная латиница, вьетнамский, кириллица, расширенная кириллица и греческий. По описанию, в августе 2023 года семейство стало вариативным шрифтом.

Где уместен Roboto Condensed

Плотные подписи в интерфейсах

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

Таблицы и насыщенные данными макеты

В узкие колонки помещается больше знаков на ячейку, а ось насыщенности от 100 до 900 отделяет заголовки от значений без смены семейства.

Заголовки в узких колонках

ExtraBold 800 и Black 900 остаются компактными, поэтому длинный заголовок помещается на экране телефона или в одной газетной колонке.

Спутник для основного текста Roboto

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

Многоязычные вывески и формы

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

Глифы

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

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

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

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

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

Лицензия

Шрифты в пару к Roboto Condensed

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

Подключение Roboto Condensed на сайте

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

@font-face {
  font-family: "Roboto Condensed";
  src: url("/assets/fonts/RobotoCondensed-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("/assets/fonts/RobotoCondensed-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Roboto Condensed", sans-serif;
}

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

<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=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

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

Два вариативных файла

Прямое начертание и курсив — отдельные вариативные шрифты, в каждом только ось насыщенности от 100 до 900. Ширина фиксирована: оси ширины нет.

Нет политонического греческого

Греческий покрыт для современного письма, но подмножества Greek Extended среди наборов символов нет.

Вариативный с августа 2023 года

В описании отмечено, что семейство стало вариативным шрифтом в августе 2023 года; файлы здесь имеют версию 3.008.

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

Подборки с Roboto Condensed

• Шрифты для субтитров и подписей к видео

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

• Узкие шрифты для заголовков

  Узкие гротески и антиквы для акциденции, которые набирают высокие компактные заголовки в ограниченной ширине: от волосных до плотных.

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

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