Custom Typography utilities are available in the design system.
Used together with Tailwind typographic utilities classes.
Open Sans
regular 400
semibold 500
bold 700
Heading element styles
classes: rtds-heading-1
font: Open Sans
font size: 36px
classes: rtds-heading-2
font: Open Sans
font size: 24px
classes: rtds-heading-3
font: Open Sans
font size: 20px
classes: rtds-heading-4
font: Open Sans
font size: 18px
classes: rtds-heading-5
font: Open Sans
font size: 16px
classes: rtds-heading-6
font: Open Sans
font size: 14px
classes: rtds-text-40px
font: Open Sans
font size: 40px
classes: rtds-text-42px
font: Open Sans
font size: 42px
Heading-like styles
Display 1
classes: rtds-display-heading-1
font: Open Sans
font size: 8rem - 128px
Display 2
classes: rtds-display-heading-2
font: Open Sans
font size: 6rem - 96px
Display 3
classes: rtds-display-heading-3
font: Open Sans
font size: 4.5rem - 72px
Display 4
classes: rtds-display-heading-4
font: Open Sans
font size: 3.75rem - 60px
Display 5
classes: rtds-display-heading-5
font: Open Sans
font size: 3rem - 48px
Display 6
classes: rtds-display-heading-6
font: Open Sans
font size: 2.25rem - 36px
Page body styles
Body xs
classes: rtds-body-xs
font: Open Sans
font size: 0.75rem - 12px
Body sm
classes: rtds-body-sm
font: Open Sans
font size: 14px
Body (principale)
classes: rtds-body
font: Open Sans
font size: 16px
Body lg
classes: rtds-body-lg
font: Open Sans
font size: 18px
Body xl
classes: rtds-body-xl
font: Open Sans
font size: 20px