Font Weight

Set font weight

Syntax

visual="font:[weight]"

Values

Value	CSS Output	Description
normal	font-weight: var(--fw-normal)	Normal weight
medium	font-weight: var(--fw-medium)	Medium weight
bold	font-weight: var(--fw-bold)	Bold weight

Examples

<div visual="font:bold">Bold text</div>
<div visual="font:tw-semibold">Semibold text</div>

Preview

Font Weight

visual="font:bold" - Control text thickness

normalmediumbold

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span visual="font:normal">normal</span>
  <span visual="font:medium">medium</span>
  <span visual="font:bold">bold</span>
</div>

Notes

TIP

Tailwind Scale Support

Use tw- prefix to access Tailwind font weight scale: font:tw-thin (100), font:tw-semibold (600), font:tw-extrabold (800)

Reference