Typography
Documentation and examples for the typography system. Built on top of Material UI Typography with custom styling using the Inter font family.
Typography Scale
The complete typography scale used throughout the application. All variants are based on the Inter font family.
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox jumps
The quick brown fox jumps over
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog. This is the default body text style.
The quick brown fox jumps over the lazy dog. This is a smaller body text style.
Font Weights
Available font weight variations. Use the fontWeight prop to apply different weights.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Props Reference
Common props available on the Typography component.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | "body1" | h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2, caption, overline |
fontWeight | number | string | — | 400 (regular), 500 (medium), 600 (semiBold), 700 (bold) |
color | string | "inherit" | text.primary, text.secondary, text.disabled, primary, secondary, error |
align | string | "inherit" | left, center, right, justify |
gutterBottom | boolean | false | Adds margin-bottom to the text |
noWrap | boolean | false | Prevents text wrapping and adds ellipsis on overflow |
component | elementType | — | Override the rendered HTML element (e.g., 'span', 'div') |