Typography - Feature request: font size responsiveness

[PolGuixe]

Currently, the Typography variants are quite rigid. It will be really useful if they could become responsive e.g. different font-sizes according to the screen size.

What do you think? Would you consider a PR in that direction? 🤔

[oliviertassinari]

@PolGuixe What's preventing from doing it now? The theme.typograpgy.xxx objects are interpreted as CSS. So you can always use a breakpoint.

[PolGuixe]

@oliviertassinari you are right.

I just was wondering if you think it would be useful to have it integrate it in Material-UI.

What I am doing right now is:

const theme = createMuiTheme({
  palette,
  typography,
});

const coef = 0.1;
const modifyRem = (value, coef) => {
  return `${parseFloat(value) * (1 + coef)}rem`;
};

each(theme.typography, (variant, variantName) => {
  if (typeof variant !== 'object') {
    return variant;
  }
  theme.typography[variantName] = {
    ...variant,
    fontSize: modifyRem(variant.fontSize, -coef * 5),
    [theme.breakpoints.up('sm')]: {
      fontSize: modifyRem(variant.fontSize, -coef * 2.5),
    },
    [theme.breakpoints.up('md')]: {
      fontSize: modifyRem(variant.fontSize, -coef * 1),
    },
    [theme.breakpoints.up('lg')]: {
      fontSize: modifyRem(variant.fontSize, 0),
    },
    [theme.breakpoints.up('xl')]: {
      fontSize: modifyRem(variant.fontSize, coef),
    },
  };
});

export default theme;

Note 1: the numbers are a bit random as I couldn't find any guidelines from Material
Note 2: the logic could be improved to be more granular e.g. different coefficients for each breakpoint.
Note 3: maybe it could be integrated within the createTypography function. The default coefficient could be 0 and if any user needs it they can set up their own.

For us it works, because having a display4on an xs screen is normally is not very useful in most of the cases.

[oliviertassinari]

it would be useful to have it integrate it in Material-UI

@PolGuixe This sounds too opinionated. You couldn't find this logic on Bootstrap, on Ant Design, on Semantic-UI, on Blueprint, on Fabric.
Thanks for sharing the workaround! Maybe we could document it at some point.

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as I'm not sure people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[PolGuixe]

Ok, fair enough 😉

[oliviertassinari]

I think that we should add an example in the documentation with the best strategy.