| description | Manage the reusable font-size scale for your website |
|---|
Font Size defines the reusable text sizes available throughout the project. Theme values provide a consistent scale from xs to 9xl, and custom values let you add a size for a specific design system need.
Font sizes are stored in rem units so they scale consistently with the root text size.
- Custom Text Styles — Project-specific font sizes added with the plus button.
- Theme Text Styles — Sizes inherited from the selected theme:
xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, and9xl.
The base size is the normal starting point for body text. Larger names form a progressive display scale; smaller names are useful for captions and supporting text.
- Open Theme Studio → Font Size.
- Select the plus button beside Custom Text Styles.
- Enter a short, meaningful Name.
- Set the Size in rem.
- Enable Advanced Settings when the size needs its own line height.
- Apply the new value in a Component or Typography preset.
At the standard browser root size, 1rem is normally 16px. Rem values respect a visitor’s text-size preferences more reliably than fixed pixel values.
Enable Advanced Settings to set the line height associated with the font size. Use enough line height to keep wrapped lines distinct:
- Body text generally needs more line height than a short heading.
- Very large display text can use a tighter line height.
- Test headings that wrap onto two or more lines.
Components that expose responsive Font Size controls can select a different Theme Studio size at each enabled Screen. Start with the Mobile size, then add larger overrides only where needed.
- Reuse a small, deliberate type scale.
- Use
baseor a nearby size for comfortable body copy. - Avoid custom sizes that differ by only a fraction with no clear purpose.
- Check large headings on narrow screens.
- Keep the relationship between Font Size and Typography clear: Font Size defines individual scale values, while Typography combines them with font, weight, colour, spacing, and element styles.