Noto Sans Display

Попробовать Noto Sans Display

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

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

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

О шрифте Noto Sans Display

Noto Sans Display — семейство без засечек, рассчитанное на крупные кегли, где обычное текстовое начертание гарнитуры может выглядеть рыхлым и тяжёлым. На образце буквы стоят ближе друг к другу, чем в текстовой гарнитуре, а насыщенность Thin доведена до волосных линий, которые выдерживают только крупный набор. Доступны две вариативные оси: насыщенность от 100 до 900 и ширина от 62,5 до 100, так что один файл покрывает путь от нормальной ширины до узкого заголовочного набора. У прямого начертания и курсива по девять именованных насыщенностей, всего 18 начертаний. В шрифтах 3 327 глифов с подмножествами для латиницы, расширенной латиницы, кириллицы, греческого и вьетнамского. Автором указана Google, а в таблице name названа команда Monotype Design Team. Семейство добавлено в Google Fonts в 2020 году.

Где уместен Noto Sans Display

Заголовки и названия страниц

Семейство нарисовано для крупных кеглей, и интервалы в нём плотнее, чем в текстовом начертании.

Узкие заголовки в тесной вёрстке

Ось ширины опускается до 62,5, поэтому длинные заголовки умещаются в карточках, баннерах и мобильных шапках.

Плакаты с тонким шрифтом

Насыщенности Thin 100 и ExtraLight 200 дают тонкие штрихи, которые хорошо работают при крупном наборе.

Многоязычные кампании

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

Глифы

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

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

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

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

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

Лицензия

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

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

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

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

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

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

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

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

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

Это не текстовое начертание

Для абзацев в коллекции есть отдельное семейство, рассчитанное на основной текст; это настроено на крупные размеры.

Ширина только сужается

Ось ширины идёт от 62,5 до 100. Настроек шире обычной нет.

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

Прямое начертание и курсив — отдельные файлы, в каждом обе оси.

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

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

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