Typography

To manage Typography options, the theme object supports the following keys:

fonts (font-family)
fontSizes
fontWeights
lineHeights

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'
}

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><Stack direction="column" spacing=".5rem" alignItems="center">
  <Box fontFamily="base">Segoe UI Sans-Serif</Box>
  <Box fontFamily="mono">Segoe UI Mono</Box>
</Stack>

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

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><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'
}

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><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>