Typography

Type Scale

Our type scale is built on Tailwind CSS sizing conventions and expressed in rem units. We use rem over pixels wherever possible, as rem values scale relative to the user's browser settings and produce more accessible, consistent results across devices and contexts. Each size in our scale is listed with its Tailwind class name, rem value, and line height. Use the toggle above to switch between rem and pixel values if you prefer to work in pixels. Use the breakpoint toggle to explore how the scale adjusts across desktop, tablet, and mobile.

Headings

Headings have fixed styles. Each heading level comes with a predefined Tailwind size class, rem-based font size, line height, and weight, and should be used as-is without modification. For example, our H1 at desktop is 7xl Semibold, which is 4.5rem with a 5.25rem line height. This consistency is what gives our layouts a reliable visual hierarchy across every product and touchpoint. H1 through H4 are available, and each scales down gracefully from desktop to tablet to mobile.

Use headings to establish structure and guide the reader through a page. Don't use heading styles purely for their size. If something isn't structurally a heading, use body text with an appropriate weight instead.

Body Text

Body text works differently from headings. Each size, ranging from Text Extra Small up to Text Extra Large, comes with a predefined font size and line height, but the weight is flexible depending on context. We use five weights across body text: Light, Normal, Medium, Semibold, and Bold. Normal is the default for most body copy. Semibold is the go-to for emphasis, supporting text under headings, labels, or anywhere you need to draw attention within a block of text without introducing a heading level. Light, Medium, and Bold are available for additional nuance when the context calls for it.

For example, a short descriptor beneath an H1 might use Text Large Semibold, while the paragraph that follows uses Text Base Normal. A data label in a table might use Text Small Semibold, while the value next to it uses Text Small Normal. The combination of size and weight is how we create nuance and hierarchy within body content.