# Typography В состав Plasma Web входят компоненты, реализующие типографическую систему  типографическую систему Plasma .
Они заменяют обычные HTML-теги, такие, как  `h1` ,  `h2` ,  `h3` ,  `h4` ,  `p` , etc. ## Установка шрифта Компоненты типографики используют фирменный шрифт  SB Sans Text .
О том, как установить данный шрифт, смотрите на странице  Типографическая система . ## Отступы По умолчанию типографика поддерживает стандартные отступы.
О том, как использовать отступы, читайте на странице  Стандартные отступы . ## Переносы По умолчанию в типографике слова переносятся по слогам.
Чтобы отключить данный функционал, необходимо установить свойство  `breakWord`  в значении  `false` . ## Пробелы По умолчанию в типографике если текст превышает ширину элемента, то слова будут переноситься по пробелам.
Чтобы запретить перенос по пробелам, необходимо установить свойство  `noWrap`  в значении  `true` . ## Смена тега Если при использовании компонентов необходимо сменить тег, то можно использовать свойство  `as` :
```tsx
import React from 'react';
import { BodyM } from '@salutejs/plasma-web';
export function App() {
return (
<BodyM as="h3">
BodyM
</BodyM>
);
}
```
## Моноширинные числа Если необходимо сделать числа моноширинным, то нужно установить свойство  `inNumeric`  в значении  `true` . ## Состав ### Hero unit 
```tsx
import React from 'react';
import { DsplL, DsplM, DsplS } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: 'block' }}>
<DsplL bold={false}>DsplL</DsplL>
<DsplL>DsplL Bold</DsplL>
<DsplL medium>DsplL Medium</DsplL>
<DsplM bold={false}>DsplM</DsplM>
<DsplM>DsplM Bold</DsplM>
<DsplM medium>DsplM Medium</DsplM>
<DsplS bold={false}>DsplS</DsplS>
<DsplS>DsplS Bold</DsplS>
<DsplS medium>DsplS Medium</DsplS>
</div>
);
}
```
### Заголовки 
```tsx
import React from 'react';
import { H1, H2, H3, H4, H5 } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: 'block' }}>
<H1 bold={false}>H1</H1>
<H1>H1 Bold</H1>
<H1 medium>H1 Medium</H1>
<H2 bold={false}>H2</H2>
<H2>H2 Bold</H2>
<H2 medium>H2 Medium</H2>
<H3 bold={false}>H3</H3>
<H3>H3 Bold</H3>
<H3 medium>H3 Medium</H3>
<H4 bold={false}>H4</H4>
<H4>H4 Bold</H4>
<H4 medium>H4 Medium</H4>
<H5 bold={false}>H5</H5>
<H5>H5 Bold</H5>
<H5 medium>H5 Medium</H5>
</div>
);
}
```
### Интерфейсы Типографика для таких частей интерфейса, как button, label, подписи, и т.п. 
```tsx
import React from 'react';
import { BodyL, BodyM, BodyS, BodyXS, BodyXXS } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: 'block' }}>
<BodyL>BodyL</BodyL>
<BodyL bold>BodyL Bold</BodyL>
<BodyL medium>BodyL Medium</BodyL>
<BodyM>BodyM</BodyM>
<BodyM bold>BodyM Bold</BodyM>
<BodyM medium>BodyM Medium</BodyM>
<BodyS>BodyS</BodyS>
<BodyS bold>BodyS Bold</BodyS>
<BodyS medium>BodyS Medium</BodyS>
<BodyXS>BodyXS</BodyXS>
<BodyXS bold>BodyXS Bold</BodyXS>
<BodyXS medium>BodyXS Medium</BodyXS>
<BodyXXS>BodyXXS</BodyXXS>
<BodyXXS bold>BodyXXS Bold</BodyXXS>
<BodyXXS medium>BodyXXS Medium</BodyXXS>
</div>
);
}
```
### Текст Типографические элементы для описаний к статьям, дополнительной информации и т.д. 
```tsx
import React from 'react';
import { TextL, TextM, TextS, TextXS } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: 'block' }}>
<TextL>TextL</TextL>
<TextL bold>TextL Bold</TextL>
<TextL medium>TextL Medium</TextL>
<TextM>TextM</TextM>
<TextM bold>TextM Bold</TextM>
<TextM medium>TextM Medium</TextM>
<TextS>TextS</TextS>
<TextS bold>TextS Bold</TextS>
<TextS medium>TextS Medium</TextS>
<TextXS>TextXS</TextXS>
<TextXS bold>TextXS Bold</TextXS>
<TextXS medium>TextXS Medium</TextXS>
</div>
);
}
```