Typography Utilities: Type Scale and Styles in AtomicKit
AtomicKit’s typography system covers fluid font sizes, font weights, line heights, letter spacing, text alignment, and text style utilities for Elementor.
AtomicKit ships a complete set of typography utilities that let you control every dimension of type directly from your Elementor class field. The system includes a fluid font size scale (using CSS clamp() so sizes adapt between viewport breakpoints), nine font weight steps, five line height values, ten letter spacing steps, three alignment options, and a handful of text style treatments. Combine these utilities to build expressive, consistent type styles without writing a single line of custom CSS.
All size utilities are fluid — each class uses a clamp() expression that interpolates between a minimum and maximum size as the viewport width changes. This means your type scales smoothly across devices without breakpoint overrides.
Class
Size Range
.text-2xs
10px → 11px
.text-xs
12px → 13px
.text-sm
14px → 16px
.text-base
16px → 20px
.text-lg
18px → 25px
.text-xl
20px → 31px
.text-2xl
24px → 39px
.text-3xl
30px → 49px
.text-4xl
36px → 61px
.text-5xl
48px → 76px
.text-6xl
60px → 95px
.text-7xl
72px → 119px
.text-8xl
96px → 149px
.text-9xl
128px → 186px
Use .text-base for body copy as a reliable starting point — it spans 16px to 20px, covering comfortable reading sizes across mobile and desktop. Step up to .text-lg or .text-xl for lead paragraphs and introductory text.
Font weight rendering depends on your loaded typeface. If a weight step isn’t available in the font you’ve set in Elementor’s Global Fonts, the browser will synthesize or substitute the nearest available weight. Load the specific weights you intend to use to avoid unexpected results.
Typography utilities are designed to be composed. Apply multiple classes together to build complete, production-ready type styles directly in Elementor’s Advanced CSS Classes field.
<!-- Display heading — large, bold, tight tracking, dark --><h1 class="text-4xl font-bold leading-tight tracking-tight text-black"> Build beautiful WordPress sites faster</h1><!-- Body copy — base size, normal weight, comfortable leading --><p class="text-base font-normal leading-relaxed text-gray-dark"> AtomicKit gives you a complete set of utility classes so you can style any Elementor element without writing custom CSS.</p><!-- UI label — small, medium weight, uppercase, wide tracking --><label class="text-sm font-medium uppercase tracking-wide text-gray"> Category</label>
Tight tracking (negative values) reads best on large display headings where default spacing can feel too open. Wide tracking pairs naturally with uppercase labels and small caps at smaller sizes where tight spacing becomes illegible.
Apply text transform, decoration, and style utilities to add visual treatment without overriding your font or size settings.
Class
Effect
.uppercase
Transforms text to ALL CAPS
.lowercase
Transforms text to all lowercase
.underline
Adds an underline decoration
.no-underline
Removes underline decoration
.italic
Sets font style to italic
<!-- Uppercase label with wide tracking --><span class="uppercase tracking-widest text-sm font-semibold text-gray"> Featured</span><!-- Italic pull quote --><blockquote class="italic text-xl font-light leading-relaxed text-gray-dark"> "AtomicKit changed how I build with Elementor."</blockquote><!-- Remove underline from a styled link --><a class="text-primary no-underline font-medium"> Read the full case study</a>
Use .uppercase with care on body copy — all-caps text at reading sizes significantly reduces legibility. Reserve it for short labels, badges, navigation items, and headings where the visual weight adds structure rather than obscuring content.
