Font Size

The bundled responsive text scale from .text-2xs through .text-9xl.

Overview

The bundled text-* classes are Skelementor’s default font-size scale.

For how fluid clamp() scaling relates to breakpoint suffixes, see Fluid scaling.

Class	Range	CSS
.text-2xs	10px -> 11px	clamp(0.58rem, calc(0.49rem + 0.09vw), 0.64rem)
.text-xs	12px -> 13px	clamp(0.69rem, calc(0.59rem + 0.16vw), 0.8rem)
.text-sm	14px -> 16px	clamp(0.83rem, calc(0.71rem + 0.25vw), 1rem)
.text-base	16px -> 20px	clamp(1rem, calc(0.85rem + 0.37vw), 1.25rem)
.text-lg	18px -> 25px	clamp(1.2rem, calc(1.02rem + 0.53vw), 1.56rem)
.text-xl	20px -> 31px	clamp(1.44rem, calc(1.22rem + 0.75vw), 1.95rem)
.text-2xl	24px -> 39px	clamp(1.73rem, calc(1.47rem + 1.05vw), 2.44rem)
.text-3xl	30px -> 49px	clamp(2.07rem, calc(1.76rem + 1.45vw), 3.05rem)
.text-4xl	36px -> 61px	clamp(2.49rem, calc(2.12rem + 1.97vw), 3.82rem)
.text-5xl	48px -> 76px	clamp(2.99rem, calc(2.54rem + 2.63vw), 4.77rem)
.text-6xl	60px -> 95px	clamp(3.59rem, calc(3.08rem + 3.47vw), 5.96rem)
.text-7xl	72px -> 119px	clamp(4.31rem, calc(3.74rem + 4.58vw), 7.45rem)
.text-8xl	96px -> 149px	clamp(5.17rem, calc(4.51rem + 6.05vw), 9.31rem)
.text-9xl	128px -> 186px	clamp(6.2rem, calc(5.45rem + 7.98vw), 11.64rem)

Example

<div class="elementor-element text-center">
  <p class="text-sm uppercase tracking-wide text-gray margin-bottom-2">
    Bundled scale
  </p>
  <h1 class="text-5xl font-black text-black margin-bottom-4">
    One text system
  </h1>
  <p class="text-base leading-relaxed text-gray-dark maximum-width-md margin-horizontal-auto">
    Use the default `text-*` names directly. The responsive behavior is already built into the framework.
  </p>
</div>

Use text-base to text-lg for running copy, and step into text-xl to text-3xl for section headings. Reserve the largest sizes for hero statements and high-emphasis moments. Pair text-* with .leading-* and .font-* utilities instead of looking for a separate naming scheme.