Font Size - Skelementor

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.