Styled SystemLetter Spacing

Letter Spacing

Use tracking prop to control the letter-spacing of an element.

Name

Value

tighter

-0.05em

tight

-0.025em

normal

0

wide

0.025em

wider

0.05em

widest

0.1em

Documentation

Usage

tight

The quick brown fox jumps over the lazy dog.

normal

The quick brown fox jumps over the lazy dog.

wide

The quick brown fox jumps over the lazy dog.

import { Text } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas name="tracking">
      <Text fontSize="xl" fontWeight="500" tracking="tight">
        The quick brown fox jumps over the lazy dog.
      </Text>
      <Text fontSize="xl" fontWeight="500" tracking="normal">
        The quick brown fox jumps over the lazy dog.
      </Text>
      <Text fontSize="xl" fontWeight="500" tracking="wide">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </Canvas>
  );
}

Copyright 2024 © Optimizely.