Zalando Sans

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

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

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

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

О шрифте Zalando Sans

Zalando Sans — семейство гротесков в простой манере. В образце видны ровные штрихи, двухэтажная «a», одноэтажная «g», прямые окончания штрихов в «c», «e» и «s» и прямые наклонные кавычки; никаких украшений. Отличие у шрифта техническое: в двух вариативных файлах, прямом и курсивном, есть и ось насыщенности от 200 до 900, и ось ширины от 75 до 125, поэтому семейство можно набрать уже или шире обычного, не меняя шрифт. Названы восемь насыщенностей, от ExtraLight до Black, у каждой есть курсив, всего 16 начертаний. 606 глифов покрывают латиницу, расширенную латиницу и вьетнамский. В каталоге указаны Jakob Ekelund, KH Type и Zalando, а в таблице name самого шрифта — Kurppa Hosk, KH Type и Jakob Ekelund. Шрифт опубликован под SIL Open Font License 1.1.

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

Интерфейсы с ограниченным местом

Если сдвинуть ось ширины к 75, длинные подписи поместятся в кнопки, вкладки и заголовки таблиц без уменьшения кегля.

Заголовки, которые подстраиваются под макет

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

Чтение длинных текстов

Regular 400 с курсивом подходит для абзацев и выделений; Medium и SemiBold дают подзаголовки без второго семейства.

Фирменные системы

Восемь насыщенностей от ExtraLight до Black, все с курсивом, охватывают всё: от мелкого шрифта до заголовков кампаний.

Продукты на вьетнамском

Подмножество для вьетнамского есть и в прямом, и в курсивном файле.

Глифы

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

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

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

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

Лицензия

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

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

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

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

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

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

Или подключите шрифт из официального источника. Google Fonts отдаёт Zalando 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=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">

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

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

В одном вариативном файле прямое начертание, в другом курсив. В обоих есть насыщенность (200–900) и ширина (75–125); ширина по умолчанию — 100.

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

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

Только вариативные файлы

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

Зарезервированное имя шрифта

В уведомлении о лицензии имя Zalando зарезервировано за оригинальными шрифтами.

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

Подборки с Zalando Sans

• Гротески

  Гротески и неогротески: простые, крепкие, чуть неровные рабочие шрифты для брендинга, изданий и интерфейсов.

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

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

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

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