Responsive Typography in MUI?
Solution 1
Update
MUI v4 has responsive typography built in! Check here for details.
Old response
@Luke's answer is great. I wanted to add some detail to make this work in practice, because both breakpoints and pxToRem are accessible on the theme object... making this becomes a chicken and egg problem! My approach:
import { createMuiTheme } from "@material-ui/core"
const defaultTheme = createMuiTheme({ ... customisations that don’t rely on theme properties... })
const { breakpoints, typography: { pxToRem } } = defaultTheme
const theme = {
...defaultTheme,
overrides: {
MuiTypography: {
h1: {
fontSize: "5rem",
[breakpoints.down("xs")]: {
fontSize: "3rem"
}
}
}
}
}
export default theme
Solution 2
Update
The latest version of Material UI (v4) fully supports response typography. See the official documentation for details.
Original Answer
As of version 1.x, Material UI does not have a specific mechanism for handling responsive typography.
You can scale the size of all MUI Typography
by changing the font-size
of the <html>
element, as you mentioned. (docs)
const styles = theme => ({
"@global": {
html: {
[theme.breakpoints.up("sm")]: {
fontSize: 18
}
}
}
}
Theme overrides
As far as i know, the only other option is to use theme overrides to define custom styles for each of the Typography
variants.
This requires replicating some of the logic in createTypography.js (ie setting line heights to maintain vertical rhythm)
const theme = createMuiTheme({
overrides: {
MuiTypography: {
headline: {
fontSize: pxToRem(24),
[breakpoints.up("md")]: {
fontSize: pxToRem(32)
}
}
}
}
Solution 3
As described in the docs you can use the responsiveFontSizes()
helper to make Typography font sizes in the theme responsive.
import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
let theme = createMuiTheme();
theme = responsiveFontSizes(theme);
Solution 4
None of the other answers uses the variant
preset.
The best way to MUI v5, and use variant
:
<Typography sx={{ typography: { sm: 'body1', xs: 'body2' } }} >
Hello world!
</Typography>
Solution 5
MUI v5 adds sx
prop to all MUI components which supports responsive values where you can pass an object to define the values at different breakpoints:
<Typography
sx={{
fontSize: {
lg: 30,
md: 20,
sm: 15,
xs: 10
}
}}
>
This text is resized on different screen breakpoints
</Typography>
Similar to Box
, Typography
also supports system properties so you can skip the sx
prop and pass the fontSize
property directly. The code below is the same as above, just a bit shorter to write:
<Typography
fontSize={{
lg: 30,
md: 20,
sm: 15,
xs: 10
}}
>
This text is resized on different screen breakpoints
</Typography>
![dwjohnston](https://i.stack.imgur.com/F5uzH.jpg?s=256&g=1)
dwjohnston
I like continuous integration and tight development feedback loops. Some real world problems I'm particularly interested in working with are traffic and congestion, logistics, climate change, behavioural economics, mental health and wellbeing. I also like pinball, boardgames.
Updated on February 12, 2022Comments
-
dwjohnston over 2 years
Designs commonly have smaller headline fonts for mobile designs.
Does MUI have a mechanism for making the typography responsive?
I see that the default theme has the font sizes defined in rems - does that mean it's a matter of just reducing the base font-size? (That doesn't seem to work, what if you want to reduce the headline fonts at different rates).