Typography can help create clear hierarchies, organize information, and guide users through a product or experience.
Aqua uses type tokens and themes to manage typography. Type tokens are pre-set configurations of typographic elements such as font size, weight, or leading (line height) that are specifically calibrated for use in the products. Selecting the appropriate type style is determined by layout or template structure. Layouts may have several levels of architecture or areas that require varying typographic hierarchies.
A disciplined consistency with how you size and style type makes the whole admin more intuitive to use. Merchants who learn how to navigate one experience can apply that same knowledge to each new experience they come across.
We use the typographic scale to communicate visual hierarchy in text.
style-name: text--heading__semilight-07
font-family: Segoe UI
font-size: 54px/3.375rem
font-style: Semilight
font-weight: 400
line-height: 64px/4em
style-name: text--heading__semilight-01
font-family: Segoe UI
font-size: 42px/2.625rem
font-style: Semilight
font-weight: 400
line-height: 50px/3.125em
style-name: text--heading__regular-03
font-family: Segoe UI
font-size: 32px/2rem
font-style: Regular
font-weight: 400
line-height: 40px/2.5em
