Zilla Slab

Попробовать Zilla Slab

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

• Light 300Zilla Slab Light Light Italic
• Regular 400Zilla Slab Regular Курсив
• Medium 500Zilla Slab Medium Medium Italic
• SemiBold 600Zilla Slab SemiBold SemiBold Italic
• Bold 700Zilla Slab Bold Bold Italic

О шрифте Zilla Slab

Zilla Slab — семейство брусковых шрифтов, созданное как основная гарнитура Mozilla, где им набраны вордмарк, заголовки и другие дизайнерские материалы. Typotheque нарисовала его на основе одного из прежних брусковых шрифтов словолитни, проект возглавляет Mozilla; в уведомлении об авторских правах указан The Mozilla Foundation. У букв плоские прямоугольные засечки, штрихи почти одинаковой толщины и круглые гладкие чаши, «a» двухэтажная. На образце несколько цифр, среди них 3, 4, 5, 7 и 9, опускаются ниже базовой линии. В семействе пять насыщенностей: Light 300, Regular 400, Medium 500, SemiBold 600 и Bold 700, и у каждой есть курсив, который в официальных заметках назван настоящим курсивом; 10 начертаний поставляются в статических файлах. В шрифтах 976 глифов в наборах символов латиницы и расширенной латиницы, распространяются они по лицензии SIL Open Font License 1.1.

Где уместен Zilla Slab

Заголовки и вордмарки

Mozilla набирает собственный вордмарк и заголовки шрифтом Zilla Slab; SemiBold и Bold придают плоским засечкам достаточную массу для крупных заголовков.

Статьи и длинные страницы

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

Иерархия внутри одного семейства

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

Цитаты и подписи курсивом

У каждой из пяти насыщенностей свой нарисованный курсив, поэтому цитату можно набрать в Light Italic или Bold Italic, а не только в обычной насыщенности.

Сайты на нескольких европейских языках

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

Глифы

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

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

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

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

Лицензия

Шрифты в пару к Zilla Slab

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

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

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

@font-face {
  font-family: "Zilla Slab";
  src: url("/assets/fonts/ZillaSlab-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/assets/fonts/ZillaSlab-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/assets/fonts/ZillaSlab-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/assets/fonts/ZillaSlab-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* …and 6 more files in the package, declared the same way */

body {
  font-family: "Zilla Slab", serif;
}

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

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

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

Статические файлы, вариативной версии нет

В пакете 10 отдельных файлов TTF, по одному на начертание. У Zilla Slab нет вариативных осей, поэтому выбрать можно только пять именованных насыщенностей.

Диапазон — от 300 до 700

Light — самое светлое начертание, Bold — самое жирное; тоньше 300 и жирнее 700 в семействе ничего нет.

Цифры уходят ниже строки

На образце цифры по умолчанию не одной высоты: 3, 4, 5, 7 и 9 опускаются ниже базовой линии.

Автор шрифта и правообладатель различаются

В таблице name шрифта Typotheque указана как дизайнер и производитель, а авторские права принадлежат The Mozilla Foundation.

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

Подборки с Zilla Slab

• Брусковые шрифты

  Семейства с брусковыми засечками: от геометричных и машинописных рисунков до крепких текстовых шрифтов с курсивом.

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

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

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

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