Typography
Typography is used to create clarity, readability and clear hierarchies to create great experiences for people using the product. Radius uses a single, flexible font, Aktiv Grotesk.
Typeface:
type_font_face
Typographic scale:
h1, .h1 bold, 30px/38px
heading--level-1
h2, .h2 bold, 24px/31px
heading--level-2
h3, .h3 bold, 21px/27px
heading--level-3
h4, .h4 bold, 19px/25px
heading--level-4
h5, .h5 bold, 17px/22px
heading--level-5
h6, .h6 bold, 15px/20px
heading--level-6
Body text:
body, .body 15px/22px
type_body
Helper text:
helper text 13px/22px
helper-text
Links:
a #1498BE
type_links
Lists:
ul, li 15px/22px
lists
Best practices
Accessibility
- Heading tags communicate the structure of the page to screen readers and other assistive technologies. Nest heading tags in order. For example,
<h4>should not follow<h2>. - Wide blocks of text are difficult to read and make it harder for people to focus. Limit line lengths to 70 characters or around 16 words.