Source Serif 4

Попробовать Source Serif 4

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

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

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

О шрифте Source Serif 4

Source Serif 4 — семейство антиквы переходного стиля, созданное в пару к Source Sans: пропорции букв и серость набора у них совпадают. В официальных заметках сказано, что она свободно основана на работах гравёра-пунсониста XVIII века Pierre Simon Fournier и сохраняет некоторые его причуды, например засечку у основания «b» и среднюю засечку у «w», упрощая формы для цифровой среды. Шрифт нарисовал Frank Grießhammer, консультировал по рисунку Robert Slimbach. Семейство вариативное, с двумя осями: насыщенность от 200 до 900 и оптический размер от 8 до 60, по умолчанию 20. Восемь именованных насыщенностей, от ExtraLight до Black, выходят в прямом начертании и курсиве, всего 16 начертаний. В шрифтах 1 463 глифа, покрыты латиница, расширенная латиница, вьетнамский, кириллица и греческий.

Где уместен Source Serif 4

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

Рисунок рассчитан на длинные тексты на бумаге и на экране, а ось оптического размера утолщает тонкие детали в мелком кегле.

Заголовки из того же семейства

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

Системы из антиквы и гротеска

Пропорции, согласованные с Source Sans, позволяют чередовать их в основном тексте и подписях без скачка в размере и цвете.

Академическая и книжная типографика

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

Новостные и журнальные сайты

Начертания от SemiBold до Black набирают заголовки статей над основным текстом Regular.

Глифы

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

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

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

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

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

Лицензия

Шрифты в пару к Source Serif 4

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

Подключение Source Serif 4 на сайте

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

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/SourceSerif4-Italic-VariableFont_opsz%2Cwght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/SourceSerif4-VariableFont_opsz%2Cwght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Source Serif 4", serif;
}

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

<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=Source+Serif+4:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">

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

Оптический размер от 8 до 60

Значение оси по умолчанию — 20. Браузеры применяют оптический размер автоматически; в других программах задайте его вручную.

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

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

Детали, взятые у Fournier

Засечка в основании «b» и средняя засечка у «w» — намеренные исторические черты, а не ошибки.

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

Подборки с Source Serif 4

• Антиквы для долгого чтения с экрана

  Текстовые антиквы, нарисованные для экранов или длинного чтения: большая высота строчных, умеренный контраст и настоящий курсив для статей, блогов и документации.

• Шрифтовые системы: гротеск, антиква и моноширинный в паре

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

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

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