Static classes map one-to-one with Elementor’s font size presets, so what you preview in the editor is exactly what users see.
Static font-size utilities
Class
Size
CSS
Typical usage
.text-xs
12px
font-size: 12px;
Legal text, metadata
.text-sm
14px
font-size: 14px;
Form labels, UI copy
.text-base
16px
font-size: 16px;
Body copy baseline
.text-lg
18px
font-size: 18px;
Supporting paragraphs
.text-xl
20px
font-size: 20px;
Section subheadings
.text-2xl
24px
font-size: 24px;
Lead paragraphs
.text-3xl
30px
font-size: 30px;
H3 headings
.text-4xl
36px
font-size: 36px;
H2 headings
.text-5xl
48px
font-size: 48px;
Hero subheadings
.text-6xl
60px
font-size: 60px;
Hero headings
.text-7xl
72px
font-size: 72px;
Billboard headings
.text-8xl
96px
font-size: 96px;
Landing hero titles
.text-9xl
128px
font-size: 128px;
Oversized hero titles
Copy
<div class="text-center space-y-4"> <p class="text-sm text-gray">Static scale keeps buttons crisp</p> <h1 class="text-5xl font-bold text-black">Craft better Elementor experiences</h1> <p class="text-lg text-gray-dark leading-relaxed"> Start with `.text-base` for body copy and move up the scale as you assign heading levels. </p></div>
Need to match an existing Elementor Global Font? Assign the font family once, then stack .text-* utilities for size and .font-* utilities for weight to stay consistent.
Fluid utilities use clamp() to interpolate between a mobile-friendly minimum and a spacious desktop maximum. They shine for hero banners, marketing pages, and long-form editorial content.
Fluid font-size utilities
Class
Clamp expression
Mobile → Desktop range
.text-fluid-2xs
clamp(0.58rem, calc(0.49rem + 0.09vw), 0.64rem)
9.3px → 10.2px
.text-fluid-xs
clamp(0.69rem, calc(0.59rem + 0.16vw), 0.8rem)
11px → 12.8px
.text-fluid-sm
clamp(0.83rem, calc(0.71rem + 0.25vw), 1rem)
13.3px → 16px
.text-fluid-base
clamp(1rem, calc(0.85rem + 0.37vw), 1.25rem)
16px → 20px
.text-fluid-lg
clamp(1.2rem, calc(1.02rem + 0.53vw), 1.56rem)
19.2px → 25px
.text-fluid-xl
clamp(1.44rem, calc(1.22rem + 0.75vw), 1.95rem)
23px → 31.2px
.text-fluid-2xl
clamp(1.73rem, calc(1.47rem + 1.05vw), 2.44rem)
27.6px → 39px
.text-fluid-3xl
clamp(2.07rem, calc(1.76rem + 1.45vw), 3.05rem)
33.1px → 48.8px
.text-fluid-4xl
clamp(2.49rem, calc(2.12rem + 1.97vw), 3.82rem)
39.8px → 61.1px
.text-fluid-5xl
clamp(2.99rem, calc(2.54rem + 2.63vw), 4.77rem)
47.8px → 76.3px
.text-fluid-6xl
clamp(3.59rem, calc(3.08rem + 3.47vw), 5.96rem)
57.4px → 95.4px
.text-fluid-7xl
clamp(4.31rem, calc(3.74rem + 4.58vw), 7.45rem)
69px → 119.2px
.text-fluid-8xl
clamp(5.17rem, calc(4.51rem + 6.05vw), 9.31rem)
82.7px → 149px
.text-fluid-9xl
clamp(6.2rem, calc(5.45rem + 7.98vw), 11.64rem)
99.2px → 186px
Copy
<header class="py-fluid-6 text-center"> <p class="text-sm uppercase tracking-wide text-gray mb-fluid-2">Introducing Skelementor Utilities</p> <h1 class="text-fluid-6xl font-black leading-fluid-tight text-black"> Fluid type that scales naturally across breakpoints </h1> <p class="text-fluid-base leading-fluid-relaxed text-gray max-w-fluid-md mx-auto mt-fluid-3"> Swap a single class to jump between static and fluid typography. The rest of your component can stay the same. </p></header>
Fluid typography uses viewport units. Make sure you’re comfortable with the smallest size in the clamp range before publishing.
