Work Sans

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

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

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

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

О шрифте Work Sans

Work Sans — шрифт без засечек, за образец которого взяты ранние гротески. На образце видны черты семейства: двухэтажные «a» и «g», широкие открытые строчные, «G» со шпорой и слегка неровная ширина знаков, из-за которой шрифт не выглядит геометрическим. Проект ведёт Wei Huang, австралийский дизайнер шрифтов. Средние насыщенности оптимизированы для текста на экране примерно от 14 до 48 пикселей, а крайние рассчитаны на акциденцию; детали упрощены с учётом разрешения экранов, а диакритические знаки нарисованы крупнее, чем в печатных шрифтах. В семействе девять насыщенностей от Thin до Black с курсивами — 18 начертаний на оси насыщенности от 100 до 900; вариативным оно стало в феврале 2020 года. В 1 338 глифах — латиница, расширенная латиница и вьетнамский; лицензия — SIL Open Font License 1.1.

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

Интерфейсы и основной текст в вебе

Regular и соседние насыщенности настроены на текст от 14 до 48 пикселей — размеры большинства веб-текстов и подписей в интерфейсах.

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

Thin 100 и Black 900 нарисованы для крупных размеров: в одном семействе есть и волосяной, и очень жирный заголовок.

Фирменный стиль цифровых продуктов

Восемнадцать именованных экземпляров из двух файлов закрывают логотип, маркетинговые страницы и экраны продукта.

Тексты с большим числом диакритических знаков

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

Презентации и отчёты

Открытые формы гротеска хорошо читаются на проекторе и в экспортированных PDF.

Глифы

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

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

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

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

Лицензия

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

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

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

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

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

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

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

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

Thin очень тонкий

В обновлении 2015 года Thin 100 приведён в соответствие с прежним начертанием Hairline, заодно скорректированы ExtraLight и Light.

Нарисован для экранов

Формы и диакритика упрощены с учётом разрешения экранов; в официальных заметках на странице проекта упомянута отдельная версия для настольных приложений.

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

В прямом начертании и в курсиве есть ось насыщенности от 100 до 900.

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

Подборки с Work Sans

• Чёткие гротески для интерфейсов приложений

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

• Шрифты для презентаций и слайдов

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

• Гротески

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

• Семейства шрифтов с девятью насыщенностями и курсивом

  Полные семейства от Thin до Black с курсивом для каждой насыщенности: восемнадцать начертаний для цельной типографской системы.

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

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