> This page is for Flowkit CSS Framework, version v1.
> 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.

# Units

> Units are a collection of values that determine the size of a website and its parts.

## Overview

The primary unit of the framework is `REM`. It's used for sizing, spacing, and typography to ensure flexibility and accessibility. Other units also used based on the use-cases. Here is the list of all the units used:

| Category       | Unit      | Primary Uses                          | Description                                                                             |
| -------------- | --------- | ------------------------------------- | --------------------------------------------------------------------------------------- |
| **Responsive** | `REM`     | * Typography
* Spacing
* Components   | Scales with root font size (default: 16px)                                              |
|                | `EM`      | - Button padding
- Icon sizes         | Scales with parent element's font size                                                  |
| **Layout**     | `%`       | * Container widths
* Max-widths       | Relative to parent element's size                                                       |
|                | `FR`      | - Grid columns
- Grid layouts         | Distributes available space in CSS Grid                                                 |
| **Viewport**   | `VH`/`VW` | * Hero sections
* Full-height layouts | Relative to viewport dimensions                                                         |
|                | `DVH`     | - Mobile layouts
- Dynamic heights    | Adjusts for mobile browser chrome                                                       |
| **Special**    | `PX`      | * Borders
* Shadows                   | Fixed-size elements (use sparingly)                                                     |
|                | `CQW`     | Fluid typography                      | Character-width-based unit for responsive typography. Requires \[Utility] CQW Container |

---

## Why do we use REM?

`REM` (short for "root em") is the foundation of our unit system.

* It scales based on the root `<html>` font size (by default `16px`)
* It makes spacing and typography fluid-responsive and consistent
* It improves accessibility and user control

If `1rem = 16px`, then:

| REM      | Pixels |
| -------- | ------ |
| `0.5rem` | 8px    |
| `1rem`   | 16px   |
| `2rem`   | 32px   |

You can override the base by embedding a rule in your Webflow project custom code:

```html
<style>
  html { font-size: 20px; } /* 1rem now equals 20px */
</style>
```

> **Pro Tip**
>
> To see the font size change reflected in the Webflow Designer, it's best to place this code inside a [Code embed element](https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed) within a reusable Component. This ensures the override is included on every page of your project.

---

## REM in Webflow

Webflow supports REM-based math directly in input fields. You can type formulas like 64/16 hit `↵` and get a result of 4. In Webflow `PX` is the default unit, you can switch to REM by clicking on units indicator and select REM, or simply add 64/16REM, hit `↵` and get `4 REM`.

![Style Guide](/_fern-files/webflow.docs.buildwithfern.com/bedb118254d8d8b2403c519113ea0c1937913b6e4390652ae9b6562c10be8f7e/products/flowkit/pages/v1/units/flowkit-calc.gif)