:::caution Текст данной страницы относится к функционалу, который больше не поддерживается. С актуальной информацией можно ознакомиться на странице Типографическая система . ::: # Типографическая система Текст – основа интерфейса. Типографическая система Plasma разработана, чтобы текст выглядел одинаково во всей экосистеме Salute. Типографическая система представляет собой набор констант ( токенов ) и компонентов . Компоненты заменяют обычные HTML-теги, такие как `h1` , `h2` , `h3` , `h4` , `p` и некоторые другие. ## Токен `typography` включает в себя готовые стилевые объекты: Hero Unit : display1 display2 display3 Заголовки : headline1 headline2 headline3 headline4 Основной текст : body1 body2 body3 paragraph1 paragraph2 Вспомогательный текст : footnote1 footnote2 Контролы : button1 button2 Дополнительные : caption underline ### Импорт токена Каждый стилевой объект можно импортировать отдельно: В приведенном примере: Текст написан не фирменным шрифтом . Размер шрифта выглядит хорошо на экране средних размеров, но будет слишком маленьким на экране телевизора. ### Размеры Размер текста в объектах стилей, которые предоставляет типографическая система, задан в единицах измерения `rem` . Это позволяет масштабировать весь интерфейс за счёт указания `font-size` на теге `` . Значение по умолчанию — `16px` . Необходимые значения также предоставляются в пакете `plasma-tokens` . Пример использования со styled-components: ### Дополнительно Также из пакета можно получить все возможные значения для: `fontSizes` `fonts` `fontWeights` `lineHeights` `letterSpacings` ## Компонент Все типографические компоненты Plasma web поддерживают типографическую систему Plasma Tokens по умолчанию. Такой подход позволяет использовать типографику, создавая меньше кода в проекте. С компонентами, реализующими типографику Plasma, можно ознакомиться на странице Typography . ## Установка шрифта Типографическая система основана на фирменном шрифте SB Sans Text. Для подключения в веб-приложения, шрифт загружен в CDN . Чтобы использовать типографическую систему, достаточно указать один CSS-файл внутри тега `` . Если вы используете Create React App , подключите систему в файле `public/index.html` . Если вы используете Next.js , создайте файл `pages/_document.tsx` и подключите систему в нем.