Typography

Reshaped supports a variety of tokens controlling the text content styles like font size, line height, etc. They're grouped and are exposed for product use through the Text utility component.

Text components supports responsive syntax for its variants, which means you can change the applied font based on the viewport:

<Text variant={{ s: "title-6", m: "title-5" }} />

Learn more about the Text component in its documentation: