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.
This is how the Typography
component is customized to work:
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.
<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.
- Inter
- Roboto
- Ubuntu
- 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.
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.