## slim.

Katherine

###### Typography Utilities

Font Size Utilities

You can set a font size instantly to an element by using the following utilities classes.

Class Reference

Class | Size
--- | ---
`.tx-[size]` | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16
`.tx-[size]` | 18 | 20 | 22 | 24 | ... | 140 (step of 2)

Media Query Class Reference

Class | Viewport | Size
--- | --- | ---
`.tx-[viewport]-[size]` | xs | sm | md | lg | xl | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16
`.tx-[viewport]-[size]` | xs | sm | md | lg | xl | 18 | 20 | 22 | 24 | ... | 140 (step of 2)

Font Weight Utilities

You can set a font weight instantly to an element by using the following utilities classes.

Example

#### Slim Admin Template

Class Reference

Class | Weight
--- | ---
`.tx-[weight]` | bold | semibold | medium | normal | light | thin | xthin

Media Query Class Reference

Class | Viewport | Weight
--- | --- | ---
`.tx-[viewport]-[weight]` | xs | sm | md | lg | xl | bold | semibold | medium | normal | light | thin | xthin

Font Family Utilities

You can set a font family instantly to an element by using the following utilities classes.

Class Reference

Class | Family
--- | ---
`.tx-[family]` | poppins | hind | firasans (default) | roboto | source

Font Color Utilities

You can set a font color instantly to an element by using the following utilities classes.

Example

#### Slim Admin Template

Class Reference

Class | Color
--- | ---
`.tx-[color]` | primary | success | warning | danger | info | indigo | purple | orange | teal | pink | black | white | inverse
`.tx-gray-[num]` | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
`.tx-white-[transparency]` | 2 | 3 | 4 | 5 | 6 | 7 | 8

Font Spacing Utilities

You can set a font spacing instantly to an element by using the following utilities classes.

Class Reference

Class | Value
--- | ---
`.tx-spacing-[value]` | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
`.tx-spacing--[value]` | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 (negative spacing result)

Line Height Utilities

You can set a line height instantly to an element by using the following utilities classes.

Class Reference

Class | Value
--- | ---
`.lh-[value]` | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15

Media Query Class Reference

Class | Viewport | Value
--- | --- | ---
`.lh-[viewport]-[value]` | xs | sm | md | lg | xl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15