Docs / Font Size

Font Size

vel-src: typography.css

Utilities for controlling the font size of an element.

ClassProperties
vel-text-xsfont-size: 0.75rem
vel-text-smfont-size: 0.875rem
vel-text-basefont-size: 1rem
vel-text-lgfont-size: 1.125rem
vel-text-xlfont-size: 1.25rem
vel-text-2xlfont-size: 1.5rem
vel-text-3xlfont-size: 1.875rem
vel-text-4xlfont-size: 2.25rem
vel-text-5xlfont-size: 3rem
vel-text-6xlfont-size: 3.75rem
vel-text-7xlfont-size: 4.5rem
vel-text-8xlfont-size: 6rem
vel-text-9xlfont-size: 8rem

Examples

Type scale

vel-text-xs — Extra small (0.75rem)

vel-text-sm — Small (0.875rem)

vel-text-base — Base (1rem)

vel-text-lg — Large (1.125rem)

vel-text-xl — X-Large (1.25rem)

vel-text-2xl — 2X-Large (1.5rem)

vel-text-3xl — 3X-Large (1.875rem)

vel-text-4xl (2.25rem)

example.html
<div class="vel-flex vel-flex-col vel-gap-2">
  <p class="vel-text-xs" style="color:#94a3b8">vel-text-xs — Extra small (0.75rem)</p>
  <p class="vel-text-sm" style="color:#94a3b8">vel-text-sm — Small (0.875rem)</p>
  <p class="vel-text-base" style="color:#e2e8f0">vel-text-base — Base (1rem)</p>
  <p class="vel-text-lg" style="color:#e2e8f0">vel-text-lg — Large (1.125rem)</p>
  <p class="vel-text-xl" style="color:#e2e8f0">vel-text-xl — X-Large (1.25rem)</p>
  <p class="vel-text-2xl" style="color:#c4b5fd">vel-text-2xl — 2X-Large (1.5rem)</p>
  <p class="vel-text-3xl" style="color:#c4b5fd">vel-text-3xl — 3X-Large (1.875rem)</p>
  <p class="vel-text-4xl" style="color:#a87fff">vel-text-4xl (2.25rem)</p>
</div>