Menu
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).
374
Responsive h3 To automate this setup, you can use the responsiveFontSizes() helper to make Typography font sizes in the theme responsive.
Responsive design is the practice of writing CSS styles in a way that displays the website correctly on all device widths. Whether you're using a mobile phone, tablet, or ultra-wide monitor, the website should look good and be readable, even if it doesn't look exactly the same on all devices.
You can import <Typography /> component from @mui/material using the following code. import Typography from '@mui/material/Typography'; // or import { Typography } from '@mui/material'; Important Props and its values: align: It is used to align the text on the component.
How do you make MUI Typography bold? MUI Typography font weight can be set to bold by adding fontWeight: bold value to the sx prop. Here is example code: <Typography sx={{fontWeight: 'bold'}}>My Text</Typography> .
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 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) } } } }
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
