Typography defines the visual hierarchy and readability of content in Amazium. A consistent type scale and set of design tokens are used to control font size, line height, and spacing across all UI elements.
Typography in Amazium is built using scalable units and design tokens, ensuring consistent sizing and responsive behaviour across different screen sizes.
Typography in Amazium is controlled using the `@font-face` declarations defined at the top of the typography stylesheet. These font families are applied globally to body and heading styles using design tokens.
To change the font across the system, update the font files and `font-family` values within the `@font-face` declarations, then assign them to the appropriate text roles.
@font-face {
font-family:'txt-body';
src:url('../font/your-font-regular.woff') format('woff');
font-weight:400;
font-style:normal;
font-display:swap;
}
@font-face {
font-family:'txt-title';
src:url('../font/your-font-heading.woff') format('woff');
font-weight:400;
font-style:normal;
font-display:swap;
}Heading styles are available for both semantic HTML elements (`h1`–`h6`) and utility classes (`.h1`–`.h6`). This allows visual styles to be applied independently of document structure when needed.
Body Copy: 16px/24px
Small Label: 12px/16px
Paragraphs in Amazium are designed to optimise readability across all screen sizes. Line length, wrapping behaviour, and spacing are controlled to maintain comfortable reading rhythm and visual consistency.
Paragraph text uses a maximum line length and controlled wrapping to improve legibility and reduce visual fatigue on larger screens.
p {
max-width:65ch;
text-wrap:pretty;
}The `max-width` property limits line length for optimal readability, while `text-wrap: pretty` improves line breaking to avoid awkward spacing and improve overall text flow.
On larger screens, paragraph width remains constrained to maintain readability rather than expanding with the container.