# Typography - Usage
# Typography - Usage

## Headings

Use headings from H1 to H6 for headlines to organize content and indicate the hierarchy of information.

HTML:
```html
<ix-typography format="h1"></ix-typography>
```

Angular:
```html
<ix-typography format="h1"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="h1"></ix-typography>
```

React:
```jsx
<IxTypography format="h1"></IxTypography>
```

Vue:
```vue
<IxTypography format="h1"></IxTypography>
```
HTML:
```html
<ix-typography format="h2"></ix-typography>
```

Angular:
```html
<ix-typography format="h2"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="h2"></ix-typography>
```

React:
```jsx
<IxTypography format="h2"></IxTypography>
```

Vue:
```vue
<IxTypography format="h2"></IxTypography>
```
HTML:
```html
<ix-typography format="h3"></ix-typography>
```

Angular:
```html
<ix-typography format="h3"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="h3"></ix-typography>
```

React:
```jsx
<IxTypography format="h3"></IxTypography>
```

Vue:
```vue
<IxTypography format="h3"></IxTypography>
```
HTML:
```html
<ix-typography format="h4"></ix-typography>
```

Angular:
```html
<ix-typography format="h4"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="h4"></ix-typography>
```

React:
```jsx
<IxTypography format="h4"></IxTypography>
```

Vue:
```vue
<IxTypography format="h4"></IxTypography>
```
HTML:
```html
<ix-typography format="h5"></ix-typography>
```

Angular:
```html
<ix-typography format="h5"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="h5"></ix-typography>
```

React:
```jsx
<IxTypography format="h5"></IxTypography>
```

Vue:
```vue
<IxTypography format="h5"></IxTypography>
```
HTML:
```html
<ix-typography format="h6"></ix-typography>
```

Angular:
```html
<ix-typography format="h6"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="h6"></ix-typography>
```

React:
```jsx
<IxTypography format="h6"></IxTypography>
```

Vue:
```vue
<IxTypography format="h6"></IxTypography>
```

## Body text

Use body text for content that includes multiple lines, paragraphs, and messages to ensure readability and a comfortable reading experience.

HTML:
```html
<ix-typography format="body"></ix-typography>
```

Angular:
```html
<ix-typography format="body"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="body"></ix-typography>
```

React:
```jsx
<IxTypography format="body"></IxTypography>
```

Vue:
```vue
<IxTypography format="body"></IxTypography>
```
HTML:
```html
<ix-typography format="body-xs"></ix-typography>
```

Angular:
```html
<ix-typography format="body-xs"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="body-xs"></ix-typography>
```

React:
```jsx
<IxTypography format="body-xs"></IxTypography>
```

Vue:
```vue
<IxTypography format="body-xs"></IxTypography>
```
HTML:
```html
<ix-typography format="body-sm"></ix-typography>
```

Angular:
```html
<ix-typography format="body-sm"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="body-sm"></ix-typography>
```

React:
```jsx
<IxTypography format="body-sm"></IxTypography>
```

Vue:
```vue
<IxTypography format="body-sm"></IxTypography>
```
HTML:
```html
<ix-typography format="body-lg"></ix-typography>
```

Angular:
```html
<ix-typography format="body-lg"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="body-lg"></ix-typography>
```

React:
```jsx
<IxTypography format="body-lg"></IxTypography>
```

Vue:
```vue
<IxTypography format="body-lg"></IxTypography>
```

## Label

Use label for text labels or single line texts in components.

HTML:
```html
<ix-typography format="label"></ix-typography>
```

Angular:
```html
<ix-typography format="label"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="label"></ix-typography>
```

React:
```jsx
<IxTypography format="label"></IxTypography>
```

Vue:
```vue
<IxTypography format="label"></IxTypography>
```
HTML:
```html
<ix-typography format="label-xs"></ix-typography>
```

Angular:
```html
<ix-typography format="label-xs"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="label-xs"></ix-typography>
```

React:
```jsx
<IxTypography format="label-xs"></IxTypography>
```

Vue:
```vue
<IxTypography format="label-xs"></IxTypography>
```
HTML:
```html
<ix-typography format="label-sm"></ix-typography>
```

Angular:
```html
<ix-typography format="label-sm"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="label-sm"></ix-typography>
```

React:
```jsx
<IxTypography format="label-sm"></IxTypography>
```

Vue:
```vue
<IxTypography format="label-sm"></IxTypography>
```
HTML:
```html
<ix-typography format="label-lg"></ix-typography>
```

Angular:
```html
<ix-typography format="label-lg"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="label-lg"></ix-typography>
```

React:
```jsx
<IxTypography format="label-lg"></IxTypography>
```

Vue:
```vue
<IxTypography format="label-lg"></IxTypography>
```

## Display

Use display text for large number/text displays, single-line, like KPI values on cards.

HTML:
```html
<ix-typography format="display"></ix-typography>
```

Angular:
```html
<ix-typography format="display"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="display"></ix-typography>
```

React:
```jsx
<IxTypography format="display"></IxTypography>
```

Vue:
```vue
<IxTypography format="display"></IxTypography>
```
HTML:
```html
<ix-typography format="display-xs"></ix-typography>
```

Angular:
```html
<ix-typography format="display-xs"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="display-xs"></ix-typography>
```

React:
```jsx
<IxTypography format="display-xs"></IxTypography>
```

Vue:
```vue
<IxTypography format="display-xs"></IxTypography>
```
HTML:
```html
<ix-typography format="display-sm"></ix-typography>
```

Angular:
```html
<ix-typography format="display-sm"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="display-sm"></ix-typography>
```

React:
```jsx
<IxTypography format="display-sm"></IxTypography>
```

Vue:
```vue
<IxTypography format="display-sm"></IxTypography>
```
HTML:
```html
<ix-typography format="display-lg"></ix-typography>
```

Angular:
```html
<ix-typography format="display-lg"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="display-lg"></ix-typography>
```

React:
```jsx
<IxTypography format="display-lg"></IxTypography>
```

Vue:
```vue
<IxTypography format="display-lg"></IxTypography>
```
HTML:
```html
<ix-typography format="display-xl"></ix-typography>
```

Angular:
```html
<ix-typography format="display-xl"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="display-xl"></ix-typography>
```

React:
```jsx
<IxTypography format="display-xl"></IxTypography>
```

Vue:
```vue
<IxTypography format="display-xl"></IxTypography>
```
HTML:
```html
<ix-typography format="display-xxl"></ix-typography>
```

Angular:
```html
<ix-typography format="display-xxl"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="display-xxl"></ix-typography>
```

React:
```jsx
<IxTypography format="display-xxl"></IxTypography>
```

Vue:
```vue
<IxTypography format="display-xxl"></IxTypography>
```

## Code

Use code text for code snippets, code keywords, code editor etc.

HTML:
```html
<ix-typography format="code"></ix-typography>
```

Angular:
```html
<ix-typography format="code"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="code"></ix-typography>
```

React:
```jsx
<IxTypography format="code"></IxTypography>
```

Vue:
```vue
<IxTypography format="code"></IxTypography>
```
HTML:
```html
<ix-typography format="code-sm"></ix-typography>
```

Angular:
```html
<ix-typography format="code-sm"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="code-sm"></ix-typography>
```

React:
```jsx
<IxTypography format="code-sm"></IxTypography>
```

Vue:
```vue
<IxTypography format="code-sm"></IxTypography>
```
HTML:
```html
<ix-typography format="code-lg"></ix-typography>
```

Angular:
```html
<ix-typography format="code-lg"></ix-typography>
```

Angular standalone:
```html
<ix-typography format="code-lg"></ix-typography>
```

React:
```jsx
<IxTypography format="code-lg"></IxTypography>
```

Vue:
```vue
<IxTypography format="code-lg"></IxTypography>
```