Titillium Web

Попробовать Titillium Web

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

• ExtraLight 200Titillium Web ExtraLight ExtraLight Italic
• Light 300Titillium Web Light Light Italic
• Regular 400Titillium Web Regular Курсив
• SemiBold 600Titillium Web SemiBold SemiBold Italic
• Bold 700Titillium Web Bold Bold Italic
• Black 900Titillium Web Black

О шрифте Titillium Web

Titillium Web — гротеск с квадратными изгибами: у чаш «b», «d», «o» и «p» плоские стороны и тугие углы, что придаёт строкам технический, «сконструированный» ритм. Штрихи одинаковой толщины, буквы слегка узкие. Гарнитура началась как учебный проект на курсе шрифтового дизайна магистерской программы Campi Visivi по визуальному дизайну в Accademia di Belle Arti di Urbino, где работу продолжали около двенадцати студентов в год. В официальных титрах названы Luciano Perondi (дизайн и кураторство) и Diego Giusti (первый прототип). В семействе шесть насыщенностей — ExtraLight, Light, Regular, SemiBold, Bold и Black — в виде статических файлов; у Black курсива нет, у остальных пяти он есть. В каждом шрифте 410 глифов для латиницы и расширенной латиницы; лицензия — SIL Open Font License 1.1.

Где уместен Titillium Web

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

Квадратные формы букв сочетаются с блоками, кнопками и линиями сетки, а Regular и SemiBold дают два ясных уровня для подписей.

Бренды технологий и инженерии

Спрямлённые изгибы придают индустриальный тон заголовкам в Bold или Black.

Крупные светлые заголовки

ExtraLight 200 рисует тонкие ровные линии, которые не рассыпаются в акцидентных размерах.

Документация и статьи

У Regular и Light есть курсивы, поэтому выделение и цитаты не требуют искусственного наклона.

Государственные и институциональные сайты

Шесть насыщенностей одного семейства закрывают навигацию, основной текст и заголовки сайтов на языках с латиницей.

Глифы

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

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

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

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

Лицензия

Шрифты в пару к Titillium Web

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

Подключение Titillium Web на сайте

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

@font-face {
  font-family: "Titillium Web";
  src: url("/assets/fonts/TitilliumWeb-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("/assets/fonts/TitilliumWeb-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("/assets/fonts/TitilliumWeb-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("/assets/fonts/TitilliumWeb-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
/* …and 7 more files in the package, declared the same way */

body {
  font-family: "Titillium Web", sans-serif;
}

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

<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=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">

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

У Black нет курсива

В архиве одиннадцать шрифтов: шесть прямых насыщенностей и пять курсивов. Начертание Black 900 есть только прямое.

Нет Medium и ExtraBold

Насыщенности — 200, 300, 400, 600, 700 и 900; 500 и 800 в семейство не входят.

Статические шрифты

Titillium Web не вариативный шрифт. Каждая насыщенность — отдельный файл TTF.

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

Подборки с Titillium Web

• Квадратные гротески для технических и игровых интерфейсов

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

• Шрифты с поддержкой турецкого языка

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

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

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