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

This is how the Typography component is customized to work:

theme.tsx
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 fontSizes

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.

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

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

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

​
Preview different fonts

The live demo 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.

ColorsIcons