> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/design-and-theming/theme-studio/font-style.md).
# Font Size
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 and Theme Text Styles
* **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`, and `9xl`.
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.
### Add a Font Size
1. Open **Theme Studio → Font Size**.
2. Select the plus button beside Custom Text Styles.
3. Enter a short, meaningful **Name**.
4. Set the **Size** in rem.
5. Enable **Advanced Settings** when the size needs its own line height.
6. Apply the new value in a Component or [Typography](/elements-docs/using-elements/design-and-theming/theme-studio/typography.md) 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.
### Advanced Settings
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.
### Responsive Text
Components that expose responsive Font Size controls can select a different Theme Studio size at each enabled [Screen](/elements-docs/using-elements/design-and-theming/theme-studio/screens.md). Start with the Mobile size, then add larger overrides only where needed.
### Best Practices
* Reuse a small, deliberate type scale.
* Use `base` or 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](/elements-docs/using-elements/design-and-theming/theme-studio/typography.md) clear: Font Size defines individual scale values, while Typography combines them with font, weight, colour, spacing, and element styles.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.realmacsoftware.com/elements-docs/using-elements/design-and-theming/theme-studio/font-style.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.