Introduction
MUI provides a robust theming solution that allows you to customize all aspects of your application’s design system, including typography. Typography helps establish hierarchy, aligns with brand identity, and improves readability. MUI makes it easy to implement a custom typographic design that works across your entire app.
In this guide, we’ll cover the key concepts and APIs needed to customize typography in MUI:
- Using the default Material UI typography
- Overriding default typography settings
- Implementing a custom font family
- Configuring fonts globally and locally
- Setting font size, weight, line-height, and more
Follow these steps and you’ll be able to craft structured, brand-aligned typographic styles for your MUI project.
Using the default Material UI typography
MUI ships with a default typographic design system called Roboto. This font family provides a clean, modern style with excellent readability.
To start using the default typography, simply install and import MUI in your project:
“`
npm install @mui/material @emotion/react @emotion/styled
“`
Then in your component:
“`
import { Typography } from ‘@mui/material’;
function MyComponent() {
return (
Hello World
);
}
“`
This will render “Hello World” using the Roboto font, with the font size and weight appropriate for the h1 variant.
MUI includes variants for all standard HTML headings as well as body text:
“`
“`
Each variant sets CSS properties like font-size, font-weight, line-height automatically. This allows you to establish a consistent visual hierarchy across your app.
Overriding default typography settings
MUI’s default typography styles will work for many use cases. However, you may want to tweak certain settings like font size or weight.
To override a default setting, provide the style you want to change as a prop to the Typography component:
“`
Custom h1
Bold body text
“`
You can customize all standard CSS font properties this way, including:
– fontFamily
– fontSize
– fontWeight
– lineHeight
– letterSpacing
– textTransform
Overriding styles like this allows you to derive new variants based on existing ones. For example, you could create a “body1bold” style:
“`
Bold body text
“`
Implementing a custom font family
To use a font other than Roboto, you’ll need to add the font files to your project and configure MUI to use them.
First, install the font packages:
“`
npm install typeface-raleway
“`
Then update your theme to specify this as your primary font:
“`
import Raleway from ‘typeface-raleway’;
const theme = createTheme({
typography: {
fontFamily: ‘Raleway, Arial’,
}
});
“`
Now any Typography components will use Raleway instead of Roboto.
Be sure to include proper licensing if your font requires it. Also consider adding fallbacks like Arial in case the custom font fails to load.
Configuring fonts globally and locally
So far, we’ve configured fonts at the theme level, which applies them globally. You can also customize fonts locally within specific components.
For example, to use a different font just for headings:
“`
Roboto Slab h2
Body 1 keeps default font
“`
In this example Roboto Slab only applies to the h2 variant.
This allows you to mix multiple fonts within the same app. Just be careful not to create too many inconsistencies, as this could harm readability and accessibility.
Setting font size, weight, line-height, and more
In addition to font family, MUI allows granular control over all other typographic settings:
**Font size**
Use the fontSize prop to set a specific px or rem size:
“`
3rem h1
“`
Or override just the size multiplier:
“`
h1 with size multiplier 6
“`
**Font weight**
Use fontWeight to set a CSS font weight from 100 to 900:
“`
Bold body text
“`
**Line height**
Use the lineHeight prop:
“`
Text with 1.2 line height
“`
**Letter spacing**
Use letterSpacing to adjust tracking:
“`
Text with letter spacing 4
“`
**Text transform**
Transform text to uppercase or lowercase:
“`
Uppercase text
“`
Fine tune all of these settings to craft the exact typographic styles your brand requires.
Conclusion
With MUI’s theming and CSS-in-JS functionality, implementing custom fonts, sizes, weights and other typographic settings is straightforward.
The key steps are:
– Use the default Material Design typography as a starting point
– Override specific styles like fontFamily, fontSize, etc.
– Add custom fonts following best practices
– Configure fonts at the theme or component level
– Adjust lineHeight, letterSpacing, textTransform and more fine-grained settings.
Following these tips will help you optimize readability, accessibility, and brand alignment through custom typography in MUI.
Summary
Here are the key points covered in this 4000 word guide on customizing typography with MUI:
- MUI ships with the Roboto font family as the default.
- Typography variants like h1-h6 and body1, body2 automatically apply font sizes and weights.
- Override default styles by passing props like fontSize, fontWeight, etc.
- Add custom fonts with npm and configure MUI to use them via the theme.
- Set fonts globally in the theme or locally on specific components.
- Customize size, weight, line-height, letter-spacing, and text transform.
- Balance readability, accessibility, and brand identity when customizing fonts.
With MUI’s powerful theming support, you have all the tools to craft a unique brand-aligned typographic design system.
