Line Height - Skelementor

Overview

Use leading-* classes for fixed line-height steps that stay easy to pair with any text size.

Class	Line height	Best for
`.leading-tight`	`20px / 1.25`	Compact headings and stacked titles
`.leading-snug`	`22px / 1.375`	Subheads and UI copy
`.leading-normal`	`24px / 1.5`	Everyday body copy
`.leading-relaxed`	`26px / 1.625`	Long-form paragraphs
`.leading-loose`	`32px / 2`	Spacious display copy

Example

<article class="maximum-width-lg margin-horizontal-auto">
  <h2 class="text-3xl font-bold leading-tight text-black margin-bottom-4">
    Built-in rhythm for bundled typography
  </h2>
  <p class="text-base leading-relaxed text-gray-dark">
    Use `.leading-tight` when you want multi-line headings to stay compact. Swap to `.leading-relaxed` when paragraphs need more room to breathe.
  </p>
</article>

Best Practices

Use .leading-tight for headings and labels that should feel compact.
Use .leading-snug when tight feels cramped but normal feels too open (subheads, short descriptions).
Use .leading-normal for UI copy and shorter paragraphs.
Use .leading-relaxed for body copy, summaries, and longer text blocks.
Use .leading-loose sparingly for quotes and roomy display copy.