> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uifoundations.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Harmonic typographic scales for better looking UI

## Rhythm and Harmony

UI Foundations Kit uses a typographic scale that is based on the golden ratio. This scale is used to create harmonious and visually appealing typography automatically. This is based off recommendations by [Inter's Dynamic Metrics](https://d.rsms.me/inter-website/v3/dynmetrics/).

This is how the `Typography` component is customized to work:

```tsx theme.tsx theme={null}
MuiTypography: {
  styleOverrides: {
    root: ({
      ownerState,
    }: {
      ownerState: {
        sx: { fontSize: TypographySizes };
      };
    }) => {
      let tracking: number | string = 'inherit';
      const sizeToken: TypographySizes | undefined = ownerState?.sx?.fontSize;
      if (sizeToken in typographySizesPx) {
        const pixelSize = typographySizesPx[ownerState.sx.fontSize];
        if (typeof pixelSize === 'number') {
          // automatically apply suggest dynamic tracking based on recommendations for Inter:
          // https://rsms.me/inter/dynmetrics/
          const a = -0.0223;
          const b = 0.185;
          const c = -0.1745;
          let trackingAmount = a + b * Math.E ** (c * pixelSize);
          // don't allow below a good default amount
          if (trackingAmount < 1.25) {
            trackingAmount = 1.25;
          }
          tracking = `${trackingAmount}em`;
        }
      }
      return {
        color: lightPaletteScales.gray['800'],
        [`${DARK_THEME_STRING}`]: {
          color: darkPaletteScales.gray['800'],
        },
        lineHeight: tracking,
      };
    },
  },
},
```

The default UI Foundations theme automatically applies these adjustments to the `<Typography />` component, so you don't have to worry about it.

## Styled System `fontSize`s

UI Foundations Kit also adds the `sm`, `md`, `lg`, etc. `fontSize` modifiers from libraries like Styled System and Tailwind. In addition to defining styles using the `sx` prop, you can pass in a string modifier like `fontSize="lg"` to adjust the font size of text in a component.

```jsx theme={null}
<Typography sx={{ fontSize: "lg" }}>Large text</Typography>
```

## Fonts

By default, UI Foundations Kit uses the `Inter` font family for all text. This font is a modern sans-serif typeface that is designed for legibility and readability on screens. It is also open-source and free to use in your projects.

The `vite-ts/src/context/ThemeCustomizationProvider.tsx` has a series of fonts that are held in state as well. There are 4 fonts installed via Google Fonts for starters.

1. Inter
2. Roboto
3. Ubuntu
4. Manrope

You can find their installations in the `vite-ts/index.html` file.

```index.html theme={null}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap"
  rel="stylesheet"
/>
```

You can replace these font with any other fonts you're interested in as well. These fonts are toggled in the theme file to allow you to preview other fonts from the global theme switcher.

MUI encourages you to define the font family used by your app in the theme file, which UI Foundations Kit does as well, but overrides with an additional `activeFont` for use via the theme switcher. If you are not interested in the theme switcher, it can be removed in favor of a sole default.

```ts theme.ts theme={null}
const theme = createTheme({
  typography: {
    fontFamily: "Roboto",
  },
});
```

## Preview different fonts

The [live demo](https://demo.uifoundations.com/dashboard/home) allows you to preview the installed fonts from the theme switcher, if you're interested in seeing how different fonts look within the context of the app.