# Fluid type

URL: https://xodia.ai/glossary/fluid-type
Description: Fluid type is text whose size grows smoothly with the width of the screen between a minimum and a maximum, usually written with the CSS clamp() function.
Last updated: 2026-11-08

Fluid type is text whose size grows smoothly with the width of the screen between a minimum and a maximum, usually written with the CSS clamp() function.

Updated November 8, 2026

## What it is

Fixed sizes jump at each breakpoint: a heading is one size on phones and another on desktops. Fluid type sets a smallest size, a largest size and a rate in between, so a heading scales with the window and never gets too small or too large.

Using rem units in the formula keeps it tied to the reader's font size setting, so people who enlarge text in their browser still get larger text.

## In Xodia

Xodia's starters define fluid text sizes and section spacing as theme tokens, such as text-fluid-4xl and py-section, and the Variables panel lists them with the other sizes.

Xodia's design skills tell your AI to use rem and fluid steps rather than px, and the design check flags px font sizes where rem belongs.

## Read more

- [Tailwind CSS in Xodia](https://xodia.ai/frameworks/tailwind)
- [The design check](https://xodia.ai/product/checks)

## Related terms

- [Tailwind v4 theme tokens Tailwind v4 theme tokens are CSS variables declared in an @theme block that define a site's colours, fonts, sizes and spacing, and that Tailwind turns into utility classes.](https://xodia.ai/glossary/tailwind-theme-tokens)
- [Responsive design Responsive design is building one website that adapts its layout, images and type to every screen size, instead of making separate sites for phones and desktops.](https://xodia.ai/glossary/responsive-design)
- [Design tokens Design tokens are the named values a design system is built from, such as brand colours, font families, text sizes and spacing steps, kept in one place and used everywhere.](https://xodia.ai/glossary/design-tokens)

[See every term in the glossary](https://xodia.ai/glossary)

Glossary