Skip to main content
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.

​
Typography Utilities at a Glance

Font Size

14 fluid steps from .text-2xs (10–11px) to .text-9xl (128–186px) using CSS clamp().

Font Weight

9 weight steps from .font-thin (100) to .font-black (900).

Line Height

5 fixed values from .leading-tight (1.25) to .leading-loose (2).

Letter Spacing

10 steps from .tracking-tightest (−0.1em) to .tracking-ultra-wide (0.2em).

Text Alignment

Logical alignment utilities: .text-start, .text-center, and .text-end.

Text Style

Transform and decoration utilities: uppercase, lowercase, underline, italic, and more.

Text Colors

Structural grays and six semantic tokens for text color — covered in the Colors section.

​
Font Size

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.
ClassSize Range
.text-2xs10px → 11px
.text-xs12px → 13px
.text-sm14px → 16px
.text-base16px → 20px
.text-lg18px → 25px
.text-xl20px → 31px
.text-2xl24px → 39px
.text-3xl30px → 49px
.text-4xl36px → 61px
.text-5xl48px → 76px
.text-6xl60px → 95px
.text-7xl72px → 119px
.text-8xl96px → 149px
.text-9xl128px → 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

ClassWeight
.font-thin100
.font-extralight200
.font-light300
.font-normal400
.font-medium500
.font-semibold600
.font-bold700
.font-extrabold800
.font-black900
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.

​
Line Height

Line height utilities set a fixed value in pixels along with a unitless ratio. Apply them to block-level text elements to control vertical rhythm.
ClassValue
.leading-tight20px / 1.25
.leading-snug22px / 1.375
.leading-normal24px / 1.5
.leading-relaxed26px / 1.625
.leading-loose32px / 2

​
Quick Reference: Combining Typography Utilities

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>

​
Letter Spacing

ClassCSS Value
.tracking-tightestletter-spacing: -0.1em
.tracking-extra-tightletter-spacing: -0.075em
.tracking-tighterletter-spacing: -0.05em
.tracking-tightletter-spacing: -0.025em
.tracking-normalletter-spacing: 0em
.tracking-wideletter-spacing: 0.025em
.tracking-widerletter-spacing: 0.05em
.tracking-widestletter-spacing: 0.1em
.tracking-extra-wideletter-spacing: 0.15em
.tracking-ultra-wideletter-spacing: 0.2em
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.

​
Text Alignment

Use logical alignment utilities instead of directional ones so your layouts adapt correctly in both left-to-right and right-to-left contexts.
ClassAlignment
.text-startAligns to the inline start (left in LTR)
.text-centerCenters text
.text-endAligns to the inline end (right in LTR)
<h2 class="text-center text-3xl font-bold text-black">Centered Section Title</h2>
<p class="text-start text-base text-gray-dark">Left-aligned body copy.</p>
<p class="text-end text-sm text-gray">Right-aligned metadata or attribution.</p>

​
Text Style

Apply text transform, decoration, and style utilities to add visual treatment without overriding your font or size settings.
ClassEffect
.uppercaseTransforms text to ALL CAPS
.lowercaseTransforms text to all lowercase
.underlineAdds an underline decoration
.no-underlineRemoves underline decoration
.italicSets 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.