Letter Spacing

Set letter spacing

Syntax

visual="tracking:[value]"

Values

Value	CSS Output	Description
tighter	letter-spacing: -0.05em	Tighter spacing
tight	letter-spacing: -0.025em	Tight spacing
normal	letter-spacing: 0	Normal spacing
wide	letter-spacing: 0.025em	Wide spacing
wider	letter-spacing: 0.05em	Wider spacing
widest	letter-spacing: 0.1em	Widest spacing

Examples

<div visual="tracking:wide">Wide tracking</div>

Preview

Letter Spacing

visual="tracking:wide" - Adjust spacing between characters

tighter spacingnormal spacingwidest spacing

View Code

<div layout="flex:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span visual="tracking:tighter">tighter spacing</span>
  <span visual="tracking:normal">normal spacing</span>
  <span visual="tracking:widest">widest spacing</span>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div visual="letter:[custom-value]">Custom</div>