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>
);
}