Font Size
Use fontSize prop to control the font-size of an element.
Name | Value | Pixels |
|---|---|---|
xs | fontSize: 0.625rem lineHeight: 0.875rem | fontSize: 10px lineHeight: 14px |
sm | fontSize: 0.75rem lineHeight: 1rem | fontSize: 12px lineHeight: 16px |
md | fontSize: 0.875rem lineHeight: 1.25rem | fontSize: 14px lineHeight: 20px |
lg | fontSize: 1rem lineHeight: 1.5rem | fontSize: 16px lineHeight: 24px |
xl | fontSize: 1.125rem lineHeight: 1.75rem | fontSize: 18px lineHeight: 28px |
2xl | fontSize: 1.25rem lineHeight: 1.75rem | fontSize: 20px lineHeight: 28px |
3xl | fontSize: 1.5rem lineHeight: 2rem | fontSize: 24px lineHeight: 32px |
4xl | fontSize: 1.875rem lineHeight: 2.25rem | fontSize: 30px lineHeight: 36px |
5xl | fontSize: 2.25rem lineHeight: 2.5rem | fontSize: 36px lineHeight: 40px |
6xl | fontSize: 3rem lineHeight: 1 | fontSize: 48px lineHeight: 1 |
7xl | fontSize: 3.75rem lineHeight: 1 | fontSize: 60px lineHeight: 1 |
#
Documentation
#
#
Usage
#
sm
The quick brown fox jumps over the lazy dog.
md
The quick brown fox jumps over the lazy dog.
lg
The quick brown fox jumps over the lazy dog.
xl
The quick brown fox jumps over the lazy dog.
2xl
The quick brown fox jumps over the lazy dog.
import { Text } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas name="fontSize">
<Text fontSize="sm">The quick brown fox jumps over the lazy dog.</Text>
<Text fontSize="md">The quick brown fox jumps over the lazy dog.</Text>
<Text fontSize="lg">The quick brown fox jumps over the lazy dog.</Text>
<Text fontSize="xl">The quick brown fox jumps over the lazy dog.</Text>
<Text fontSize="2xl">The quick brown fox jumps over the lazy dog.</Text>
</Canvas>
);
}