Docs / Font Weight

Font Weight

vel-src: typography.css

Utilities for controlling the font weight of an element.

ClassProperties
vel-font-thinfont-weight: 100
vel-font-extralightfont-weight: 200
vel-font-lightfont-weight: 300
vel-font-normalfont-weight: 400
vel-font-mediumfont-weight: 500
vel-font-semiboldfont-weight: 600
vel-font-boldfont-weight: 700
vel-font-extraboldfont-weight: 800
vel-font-blackfont-weight: 900

Examples

Weight scale

vel-font-thin — VeloraCSS (100)

vel-font-light — VeloraCSS (300)

vel-font-normal — VeloraCSS (400)

vel-font-medium — VeloraCSS (500)

vel-font-semibold — VeloraCSS (600)

vel-font-bold — VeloraCSS (700)

vel-font-black — VeloraCSS (900)

example.html
<div class="vel-flex vel-flex-col vel-gap-2">
  <p class="vel-font-thin vel-text-lg" style="color:#e2e8f0">vel-font-thin — VeloraCSS (100)</p>
  <p class="vel-font-light vel-text-lg" style="color:#e2e8f0">vel-font-light — VeloraCSS (300)</p>
  <p class="vel-font-normal vel-text-lg" style="color:#e2e8f0">vel-font-normal — VeloraCSS (400)</p>
  <p class="vel-font-medium vel-text-lg" style="color:#e2e8f0">vel-font-medium — VeloraCSS (500)</p>
  <p class="vel-font-semibold vel-text-lg" style="color:#e2e8f0">vel-font-semibold — VeloraCSS (600)</p>
  <p class="vel-font-bold vel-text-lg" style="color:#e2e8f0">vel-font-bold — VeloraCSS (700)</p>
  <p class="vel-font-black vel-text-lg" style="color:#a87fff">vel-font-black — VeloraCSS (900)</p>
</div>