# Typography

Fonts, scales and styles for typographic elements.

Section: foundations
Docs: https://nebula.kaluza.com/foundations/typography

---

## Overview

Typography groups together **font size**, **weight**, **family** and **line heights**.

Responsive font sizes are array values that correspond to the responsive breakpoints.
The first value will be used below the smallAndUp breakpoint, the second value will be used for all other screen sizes.

## Line Height
Line height is a ratio, set per type style so headings, body text and small text can each be tuned independently. Text that isn't one of these named styles uses `standard`.

_Theme tokens for this component are configurable via `createTheme`. See the theme guide: https://nebula.kaluza.com/guides/theme_

## Weight

<Card inline>
    <Inline spaceBetween={4}>
        <Text fontWeight="normal" fontSize={6}>Aa</Text>
        <Text fontWeight="semiBold" fontSize={6}>Aa</Text>
        <Text fontWeight="bold" fontSize={6}>Aa</Text>
    </Inline>
</Card>

_Theme tokens for this component are configurable via `createTheme`. See the theme guide: https://nebula.kaluza.com/guides/theme_

## Fonts

Nebula uses the open source [Aspekta](https://github.com/ivodolenc/aspekta) font family for headings and display text, and the [Inter](https://fonts.google.com/specimen/Inter) font family, available from Google Fonts, for body text. If Aspekta is not present, Inter is used as the fallback.

<Card inline>
    <Stack spaceBetween={4}>
        <Text fontFamily="display">Display</Text>
        <Text fontFamily="body">Body</Text>
        <Text fontFamily="monospace">Monospace</Text>
    </Stack>
</Card>

_Theme tokens for this component are configurable via `createTheme`. See the theme guide: https://nebula.kaluza.com/guides/theme_

## Font Sizes

Font sizes are paired for responsive scaling. Each token has an array of corresponding values.
As a general rule, the small screen size is usually one step down the scale. e.g. `body` on small screen
is equivalent to `small` on screen sizes above `small`.

<Card inline>
    <Inline spaceBetween={4}>
        <Stack spaceBetween={4}>
            <Text fontSize={6}>Level 1</Text>
            <Text fontSize={5}>Level 2</Text>
            <Text fontSize={4}>Level 3</Text>
            <Text fontSize={3}>Level 4</Text>
            <Text fontSize={2}>Body</Text>
            <Text fontSize={1}>Small</Text>
        </Stack>
                <Stack spaceBetween={4}>
            <Text fontSize={5}>Level 1</Text>
            <Text fontSize={4}>Level 2</Text>
            <Text fontSize={3}>Level 3</Text>
            <Text fontSize={2}>Level 4</Text>
            <Text fontSize={1}>Body</Text>
            <Text fontSize={0}>Small</Text>
        </Stack>
    </Inline>
</Card>

The scale is also available under `fontSizes`, but the recommendation is to use `responsiveFontSizes` to get the responsive pairings.

_Theme tokens for this component are configurable via `createTheme`. See the theme guide: https://nebula.kaluza.com/guides/theme_