Harmonic typographic scales for better looking UI
Typography
component is customized to work:
<Typography />
component, so you don’t have to worry about it.
fontSize
ssm
, 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.
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.
vite-ts/index.html
file.
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.