Saira

Попробовать Saira

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

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

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

О шрифте Saira

Saira — система шрифтов без засечек, в которой кривые нарисованы как скруглённые прямоугольники: у чаш букв o, d и p прямые стороны, а окончания штрихов срезаны плоско. Это семейство обычной ширины в системе. По официальному описанию, в 2020 году его пересобрали как вариативный шрифт с двумя осями — насыщенностью от 100 до 900 и шириной от 50 до 125, — так что один файл охватывает и узкие настройки, и расширенные, шире значения по умолчанию, равного 100. В прямом начертании и в курсиве по девять именованных насыщенностей, от Thin до Black, итого 18 начертаний. В шрифтах 893 глифа в наборах латиницы, расширенной латиницы и вьетнамского. Saira нарисовал Hector Gatti, а разработала команда Omnibus-Type. Шрифты распространяются под SIL Open Font License 1.1.

Где уместен Saira

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

Ось ширины от 50 до 125 позволяет сужать заголовок на телефоне и расширять на экране компьютера, не меняя семейства.

Интерфейсы продуктов

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

Брендинг в технологиях и автоспорте

Кривые с плоскими сторонами в начертании Black в расширенной ширине придают вордмарку инженерный, механический характер.

Выделения в сплошном тексте

Курсив есть во всех насыщенностях от Thin до Black, поэтому подписи и абзацы можно выделять в рамках одного семейства.

Многоязычные страницы продуктов

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

Глифы

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

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

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

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

Лицензия

Шрифты в пару к Saira

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

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

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

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

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

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

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

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

По умолчанию — Thin

Ось насыщенности по умолчанию равна 100. Программы, которые игнорируют именованные экземпляры, показывают Thin, поэтому задавайте насыщенность явно, например font-weight: 400.

Две оси в двух файлах

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

Ширина 100 — обычная

Значения ниже 100 сужают буквы до 50, а выше 100 расширяют их до 125.

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

Подборки с Saira

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

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

• Вариативные шрифты с осью ширины

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

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

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