> This page is for Flowkit CSS Framework, version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/flowkit/v2.0.0/llms.txt
> - v1: https://developers.webflow.com/flowkit/v1.0.0/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Typography

> The typography system provides consistent text styling using variables to control size, spacing, and hierarchy.

The typography system provides consistent text styling with variables to control **size**, **spacing**, and **hierarchy**.

The base typography variables define the fundamental text properties used throughout the project. These variables are inherited by the default Paragraph, Text elements, and Body tag.

| Base Typography Variable | Property                       |
| ------------------------ | ------------------------------ |
| Base Font                | Font Family                    |
| Base Font Size           | Font Size (1rem)               |
| Base Font Weight         | Font Weight                    |
| Base Letter Spacing      | Letter Spacing                 |
| Base Line Height         | Line Height                    |
| Base Margin Bottom       | Margin Bottom (using em units) |

> **Note**
>
> In the Webflow Variables panel, these variables appear exactly as shown in the **Properties** column above.
> In the Styles panel, purple color indicates that the property is linked to a variable.

![Styles panel with linked variables](/_fern-img/223c29aae2420614e594dc8a862bd8a18a793a6a464367fb5d0d310423860bff.webp)

---

## Font Family

A font family is applied to text elements through the variable. To update the font, make changes in the Variables panel.

| Font Variables | Usage                                                                   |
| -------------- | ----------------------------------------------------------------------- |
| Heading Font   | All H1-H6 Heading and heading\_h1 through heading\_h6 heading selectors |
| Body Font      | Body tag, All Paragraph tag, default text, text links                   |
| Button Font    | Button tag, button class, tag class, etc.                               |

---

## Headings

Heading tags and classes use the same variables, making it easy to keep styles consistent and manage them in the variables panel.

Here's an example of how variables are applied to the heading\_h1 and All H1 Heading tag:

![Styles panel with linked variables](/_fern-img/5cb768cdc3bbb257b0ffb007b8fe243ff629bea9a6a9e197e351aea41c561778.webp)

Each heading level has its own responsive variables for different breakpoints, following the same pattern.

> **Subheading**
>
> For consistency across the site, Flowkit uses the subheading class to accompany headings.
> It works with any text element and automatically inherits its color, applying a transparent tint.

---

## Paragraph

Similar to headings, All Paragraphs selector, text class, and its size variations properties are controlled through related text variables.

Available text sizes:

* All Paragraphs
* text (default)
* text is-small
* text is-large
* text is-xlarge
* text is-xxlarge

---

## Default Spacing

Headings and paragraphs have default bottom spacing applied via variables.
For example, the heading\_h1 and All H1 Heading use the variable H1 Margin Bottom
The same pattern applies to paragraphs using Base Margin Bottom.

To override this spacing, use a margin utility class such as:
margin-bottom\_none

See the full list of margin utilities [here](/flowkit/reference/utilities#margin).

---

## Utility classes

Also check how to use utility classes to override the default behavior of typography classes:

* [Text Color Modifiers](/flowkit/reference/utilities#text-color)
* [Text Alignment Modifiers](/flowkit/reference/utilities#text-alignment)

---

## Best Practices

* **Use variables for consistency** — Modify variables when possible instead of creating custom styles.
* **Choose appropriate sizes** — Use text is-small for small text, text is-large / is-xlarge / is-xxlarge for emphasis.
* **Maintain readability** — Ensure text remains readable at all screen sizes.
* **Preserve hierarchy** — Maintain clear distinction between headings and paragraph text.
* **Semantic order** — Keep the hierarchy in tag usage (e.g., `h1` > `h2` > `h3` > `p`).
* **One H1 tag per page** — Only one `h1` tag per page. If you need multiple visually styled H1s, apply the heading\_h1 class instead.