Typography
To manage Typography options, the theme object supports the following keys:
fonts (font family)fontSizesfontWeightslineHeights
Font Family
export const fonts = {
base: '\'Segoe UI\', -apple-system, BlinkMacSystemFont, \'Helvetica Neue\', Helvetica, Arial, sans-serif',
mono: '\'Segoe UI Mono\', \'SFMono-Medium\', \'SF Mono\', Menlo, Consolas, Courier, monospace'
}
EDITABLE EXAMPLE
<Stack direction="column" spacing=".5rem" alignItems="center">
<Box fontFamily="base">Segoe UI Sans-Serif</Box>
<Box fontFamily="mono">Segoe UI Mono</Box>
</Stack>
Font Size
export const fontSizes = {
xs: '.75rem',
sm: '.875rem',
md: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.75rem',
'4xl': '2rem'
}
| Name | Size | Pixels | Example |
|---|
| xs | .75rem | 12px | Font Size 12px |
| sm | .875rem | 14px | Font Size 14px |
| md | 1rem | 16px | Font Size 16px |
| lg | 1.125rem | 18px | Font Size 18px |
| xl | 1.25rem | 20px | Font Size 20px |
| 2xl | 1.5rem | 24px | Font Size 24px |
| 3xl | 1.75rem | 28px | Font Size 28px |
| 4xl | 1.2rem | 32px | Font Size 32px |
EDITABLE EXAMPLE
<Stack direction="column" spacing=".5rem" alignItems="center">
<Box fontSize="sm">Font Size 14px</Box>
<Box fontSize="md">Font Size 16px</Box>
<Box fontSize="lg">Font Size 18px</Box>
</Stack>
Font Weight
export const fontWeights = {
thin: 100,
extralight: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900
}
EDITABLE EXAMPLE
<Stack direction="column" spacing=".5rem" alignItems="center">
<Box fontWeight="normal">Regular (400)</Box>
<Box fontWeight="medium">Semibold (600)</Box>
<Box fontWeight="semibold">Bold (600)</Box>
</Stack>
Line Height
export const lineHeights = {
normal: 'normal',
base: '1.5',
xs: '1.125rem',
sm: '1.25rem',
md: '1.375rem',
lg: '1.5rem',
xl: '1.75rem',
'2xl': '2rem',
'3xl': '2.25rem',
'4xl': '2.5rem'
}
| Name | Line height | Pixels |
|---|
| xs | 1.125rem | 18px |
| sm | 1.25rem | 20px |
| md | 1.375rem | 22px |
| lg | 1.5rem | 24px |
| xl | 1.75rem | 28px |
| 2xl | 2rem | 32px |
| 3xl | 2.25rem | 36px |
| 4xl | 2.5rem | 40px |
EDITABLE EXAMPLE
<Stack direction="row" spacing="12x" justifyContent="center">
<Box width="324px" lineHeight="sm">
<Box>Line height 1.25rem</Box>
<Box>Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.</Box>
</Box>
<Box width="324px" lineHeight="lg">
<Box>Line height 1.5rem</Box>
<Box>Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.</Box>
</Box>
<Box width="324px" lineHeight="2xl">
<Box>Line height 2rem</Box>
<Box>Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.</Box>
</Box>
</Stack>
Configuration Reference
Except for breakpoints, colors, and spacing, all keys in the theme object map to one of the core themes. All keys can be replaced or extended.
For more information, see the complete properties reference table.
