Poppins

Попробовать Poppins

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

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

О шрифте Poppins

Poppins — геометрический гротеск, в котором и латинские буквы, и деванагари построены из простых форм, прежде всего окружностей. Толщина штриха почти одинакова, а на стыках сделаны небольшие оптические поправки, чтобы набор оставался ровным по цвету. Высота строчных в латинице большая, а прописные ниже верхних выносных элементов, высота которых совпадает с высотой базовых знаков деванагари. Проект разрабатывала студия Indian Type Foundry: Ninad Kale нарисовал первоначальную деванагари, а Jonny Pinhorn — первоначальную латиницу, после чего команда студии доработала рисунок и расширила семейство новыми насыщенностями и курсивом. Сейчас в семействе девять насыщенностей от Thin до Black с курсивом, 18 статических начертаний и 1 059 глифов в подмножествах devanagari, latin и latin-ext. Шрифт распространяется под SIL Open Font License 1.1.

Где уместен Poppins

Фирменный стиль

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

Сайты и приложения

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

Двуязычная вёрстка на латинице и деванагари

Оба письма нарисованы на одной геометрии и согласованы по высоте, поэтому смешанные строки выглядят ровно.

Слайды презентаций

Насыщенности от Thin 100 до Black 900 создают чёткий контраст между заголовком, цифрой и сноской.

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

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

Глифы

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

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

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

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

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

Лицензия

Шрифты в пару к Poppins

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

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

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

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* …and 14 more files in the package, declared the same way */

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

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

<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

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

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

В пакете 18 отдельных TTF-файлов, по одному на каждую насыщенность и курсив. Вариативного шрифта в нём нет.

Деванагари входит в семейство

В шрифтах есть набор символов деванагари, а также латиница и расширенная латиница.

Нет кириллицы, греческого и вьетнамского

Поддержка ограничена подмножествами devanagari, latin и latin-ext.

Прописные невысокие

Латинские прописные ниже верхних выносных элементов — это следствие того, что пропорции латиницы подгоняли под деванагари.

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

Подборки с Poppins

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

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

• Геометрические гротески

  Гротески, построенные на окружностях, прямых и ровных штрихах: от дизайнов в духе 1920-х до современных фирменных гарнитур.

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

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

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

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

• Шрифты с поддержкой деванагари

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

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

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