Typography

This page explains our typography system, showing how to use consistent font sizes, weights, and naming conventions. It bridges design (Figma) and development (CSS) to ensure alignment, scalability, and accessibility in our app.

How to use

We define consistent font sizes, weights, and naming conventions to ensure visual harmony and scalability across the application.

While Figma text styles combine size and weight into a single style (e.g., "regular" or "regular+"), in our CSS implementation we need to use two separate variables: one for size (--font-size-) and one for weight (--font-weight-).

When implementing text styles:

• Regular text uses 450 (Normal), while emphasized text ("Plus" styles) uses 500 (Medium)
• Always check Figma text properties carefully for additional styling (line-height, letter-spacing, etc.)
• Use both size and weight variables together for accurate reproduction

Titles

Use title1, title2, and title3 for headings.

Title	Font Size Variable	Font Size	Font Weight Variable	Font Weight
Title1	--font-size-title1	2.25rem	--font-weight-medium	500
Title2	--font-size-title2	1.5rem	--font-weight-medium	500
Title3	--font-size-title3	1.25rem	--font-weight-medium	500

important

When implementing titles, always use both the font size and font weight variables together. For example:

.title {
  font-size: var(--font-size-title1);
  font-weight: var(--font-weight-medium);
}

<div className="text-font-size-title1 font-font-weight-medium">Title Text</div>

Text

Use large, regular, small, mini, and micro for body content, with "Plus" variants for emphasis (e.g., small+).

Figma Variable	Font Size Variable	Font Weight Variable	CSS Example
--font-size-large	--font-size-large	--font-weight-normal	font-size: var(--font-size-large); font-weight: var(--font-weight-normal);
--font-size-large+	--font-size-large	--font-weight-medium	font-size: var(--font-size-large); font-weight: var(--font-weight-medium);
--font-size-regular	--font-size-regular	--font-weight-normal	font-size: var(--font-size-regular); font-weight: var(--font-weight-normal);
--font-size-regular+	--font-size-regular	--font-weight-medium	font-size: var(--font-size-regular); font-weight: var(--font-weight-medium);
--font-size-small	--font-size-small	--font-weight-normal	font-size: var(--font-size-small); font-weight: var(--font-weight-normal);
--font-size-small+	--font-size-small	--font-weight-medium	font-size: var(--font-size-small); font-weight: var(--font-weight-medium);
--font-size-mini	--font-size-mini	--font-weight-normal	font-size: var(--font-size-mini); font-weight: var(--font-weight-normal);
--font-size-mini+	--font-size-mini	--font-weight-medium	font-size: var(--font-size-mini); font-weight: var(--font-weight-medium);
--font-size-micro	--font-size-micro	--font-weight-normal	font-size: var(--font-size-micro); font-weight: var(--font-weight-normal);
--font-size-micro+	--font-size-micro	--font-weight-medium	font-size: var(--font-size-micro); font-weight: var(--font-weight-medium);

important

When implementing text styles, always use both the font size and font weight variables together. For example:

.body-text {
  font-size: var(--font-size-regular);
  font-weight: var(--font-weight-normal);
}

.body-text-emphasized {
  font-size: var(--font-size-regular);
  font-weight: var(--font-weight-medium);
}

<div className="text-font-size-regular font-font-weight-normal">Regular Text</div>
<div className="text-font-size-regular font-font-weight-medium">Emphasized Text</div>

Weight

We have a range of font weights available for flexible typography needs:

Weight Variable	Value	Usage
--font-weight-light	300	Lighter text, use sparingly
--font-weight-normal	450	Default body text
--font-weight-medium	500	Emphasis, "Plus" variants
--font-weight-semibold	600	Strong emphasis
--font-weight-bold	700	Maximum emphasis

note

While these weights are available for use, be mindful when mixing them:

• Always check Figma text properties carefully as there might be additional styles or weight variations applied
• Feel free to combine weights to meet specific design needs, but maintain consistency within similar UI elements
• When in doubt, stick to the standard combinations outlined in the titles and text sections above