Fluid design isn’t just about text — almost everything in your layout can scale smoothly with screen size. This creates a seamless experience across all devices.
The main things you can make fluid are:
Everything stays proportional, without abrupt jumps at breakpoints.
You define a minimum and maximum size for your text and spacing.
The browser automatically calculates the right size based on the viewport width. You don’t need to think about mobile, tablet, or desktop separately — the scaling happens naturally in between.
CSS variables store these values once, so the same rules are reused everywhere. Headings, body text, and spacing all stay in sync.
The main tool behind fluid sizing is the CSS clamp() function, which lets you define a minimum value and a maximum value within a set viewport width. This allows your typography and spacing to grow or shrink naturally without abrupt jumps at breakpoints.
There is a small learning curve, but it’s very manageable:
First, you define your CSS variables using a tool like Core Framework or an online tool like Fluid Type Scale Calculator. These variables cover your font sizes, spacing, and other scalable properties. Common naming conventions include:
Font size variables:
--text-xs, --text-s, --text-m, --text-l, --text-xl, and so onSpacing variables:
--space-xs, --space-s, --space-m, --space-l, --space-xl, --space-2xl, etc.Once the variables are created, the only learning curve left is adding them into Elementor. Instead of manually adjusting sizes at each breakpoint, you simply reference your variables on the desktop breakpoint:
var(--text-l) for large textvar(--space-xl) for padding and marginsThis approach keeps your workflow consistent, reduces repetitive tasks, and ensures your typography and spacing scale fluidly across all devices. You can also create variables for other elements, such as var(--radius) for border-radius, so global adjustments are easy.
Fluid typography and spacing give you major workflow and design advantages:
In short: you set it once, and your site just works everywhere.
Add the CSS variables
The easiest way to start is using a tool like Core Framework or Fluid Type Scale Calculator, which helps you generate fluid typography and spacing variables automatically.
Alternatively, you can manually add the CSS variables into your customizer or CSS tool of choice. Below is the scale I use, with heading variables mapped to font sizes. This allows you to choose a new heading size if you need in the future.
:root {
--text-xs: clamp(0.79rem, calc(-0.02vw + 0.79rem), 0.78rem);
--text-s: clamp(0.89rem, calc(0.1vw + 0.86rem), 0.94rem);
--text-m: clamp(1rem, calc(0.25vw + 0.94rem), 1.13rem);
--text-l: clamp(1.13rem, calc(0.45vw + 1.01rem), 1.35rem);
--text-xl: clamp(1.27rem, calc(0.71vw + 1.09rem), 1.62rem);
--text-2xl: clamp(1.42rem, calc(1.04vw + 1.16rem), 1.94rem);
--text-3xl: clamp(1.6rem, calc(1.46vw + 1.24rem), 2.33rem);
--text-4xl: clamp(1.8rem, calc(1.99vw + 1.3rem), 2.8rem);
/* Heading mappings */
--h1: var(--text-4xl);
--h2: var(--text-3xl);
--h3: var(--text-2xl);
--h4: var(--text-xl);
--h5: var(--text-l);
--h6: var(--text-m);
}Update Elementor Global Fonts
Open Elementor’s global font settings and assign your CSS variables:
var(--text-m)var(--h1), var(--h2), etc.)
Finer adjustments
Lastly, when you need text or spacing that differs from the global settings, you edit the widget in Elementor and change the input controls from px to custom, then add in the variable you want to use.
Fluid typography and spacing work best when planned from the start.
Adding them at the end of a project can be difficult. Any manually set font sizes or spacing values need to be removed first, otherwise they override the fluid system.
Once implemented, however, you gain a scalable maintainable design system that’s consistent, easy to update globally, and looks polished on any device.
