Fluid type
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
On this page
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
Related terms
- Tailwind v4 theme tokensTailwind 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.
- Responsive designResponsive 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.
- Design tokensDesign 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.