add fluidTypography and fluidProperty to new css package

[n-batalha]

This is a tracker for the feature request suggested here by @oliviertassinari :

• [theme] Responsive font sizes #14573 (comment)
• [theme] Responsive font sizes #14573 (comment)

Rather than try to do in the same MR, making a reminder ticket to work on this next.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Please see links above

Current Behavior 😯

Benchmark

• https://github.com/twbs/rfs/tree/main#visualisation
• https://fluid-typography.netlify.app/

[sdornan]

fluidProperty() would be super useful to us. Is it still in the works?

[oliviertassinari]

@sdornan Nobody is working on it, but we would definitely love a pull request.

[mahesh-kedari]

What's the expected timeline of this feature?

[oliviertassinari]

@mahesh-kedari Do you wish to give it a spin with a pull request?

[tonypine]

Hello @oliviertassinari, does this feature would make possible to use MUI with a Fluid approach as a whole? With typography elements and other spacing units following this principle? I'm asking because this feature would be very useful at the company I'm working and if that's the case I'm willing to open a PR.

[oliviertassinari]

@tonypine The idea of fluidTypography is to implement:

where responsiveFontSizes implements:

[tonypine]

Yeah, there will still be breakpoints, but the font sizes will transition as if they are scaling down or up with the viewport width, right? Do the fluipProperty would make this possible also for spacings?

[tonypine]

I would like to achieve a result similar to this:

[oliviertassinari]

Yeah, there will still be breakpoints

@tonypine breakpoint(s), I imagine we could consider a single one by default for simplicity, like https://github.com/twbs/rfs/tree/v8.0.4#visualisation.

Do the fluipProperty would make this possible also for spacings?

The typography is a concern on its own. Spacing has never been included in the discussion. What's your use case?

[tonypine]

@oliviertassinari got it. Scaling in a linear proportion can be achieved with just one breakpoint.

[tonypine]

Thanks, I'll check the contribution guide and see what I can do 👍

[oliviertassinari]

The implementation could use https://developer.mozilla.org/en-US/docs/Web/CSS/clamp().

[andreassk80]

How about using the Utopia fluid type system?

[ggascoigne]

Related to this: Fluid Type Scale Calculator and Fluid Type Scale with CSS clamp.

[ParrotStone]

Any updates here?

[LikeDreamwalker]

I generate one with https://www.fluid-type-scale.com/calculate and Copilot, and it should be close to the original font size setiing in mui. Anyone who is interested can try this and update the specific font size setting.

1. Add the global.css, which should be able to apply to the whole app:

@supports (font-size: clamp(1rem, 1vi, 1rem)) {
  :root {
    --fs-h1: clamp(3.05rem, 3.54vi + 2.17rem, 6rem);
    --fs-h2: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
    --fs-h3: clamp(1.95rem, 1.56vi + 1.56rem, 3rem);
    --fs-h4: clamp(1.56rem, 1vi + 1.31rem, 2.125rem);
    --fs-h5: clamp(1.25rem, 0.61vi + 1.1rem, 1.5rem);
    --fs-h6: clamp(1rem, 0.34vi + 0.91rem, 1.25rem);
    --fs-subtitle1: clamp(0.875rem, 0.34vi + 0.76rem, 1rem);
    --fs-subtitle2: clamp(0.75rem, 0.17vi + 0.68rem, 0.875rem);
    --fs-body1: clamp(0.875rem, 0.34vi + 0.76rem, 1rem);
    --fs-body2: clamp(0.75rem, 0.17vi + 0.68rem, 0.875rem);
    --fs-button: clamp(0.75rem, 0.17vi + 0.68rem, 0.875rem);
    --fs-caption: clamp(0.625rem, 0.17vi + 0.6rem, 0.75rem);
    --fs-overline: clamp(0.625rem, 0.17vi + 0.6rem, 0.75rem);
  }
}

@supports not (font-size: clamp(1rem, 1vi, 1rem)) {
  :root {
    --fs-h1: 3.05rem;
    --fs-h2: 2.44rem;
    --fs-h3: 1.95rem;
    --fs-h4: 1.56rem;
    --fs-h5: 1.25rem;
    --fs-h6: 1rem;
    --fs-subtitle1: 1rem;
    --fs-subtitle2: 0.875rem;
    --fs-body1: 1rem;
    --fs-body2: 0.875rem;
    --fs-button: 0.875rem;
    --fs-caption: 0.75rem;
    --fs-overline: 0.75rem;
  }
  @media screen and (min-width: 1280px) {
    :root {
      --fs-h1: 6rem;
      --fs-h2: 3.75rem;
      --fs-h3: 3rem;
      --fs-h4: 2.125rem;
      --fs-h5: 1.5rem;
      --fs-h6: 1.25rem;
      --fs-subtitle1: 1rem;
      --fs-subtitle2: 0.875rem;
      --fs-body1: 1rem;
      --fs-body2: 0.875rem;
      --fs-button: 0.875rem;
      --fs-caption: 0.75rem;
      --fs-overline: 0.75rem;
    }
  }
}

2. Change your theme config:

  typography: {
    fontSize: 16,
    h1: {
      fontSize: "var(--fs-h1)",
    },
    h2: {
      fontSize: "var(--fs-h2)",
    },
    h3: {
      fontSize: "var(--fs-h3)",
    },
    h4: {
      fontSize: "var(--fs-h4)",
    },
    h5: {
      fontSize: "var(--fs-h5)",
    },
    h6: {
      fontSize: "var(--fs-h6)",
    },
    subtitle1: {
      fontSize: "var(--fs-subtitle1)",
    },
    subtitle2: {
      fontSize: "var(--fs-subtitle2)",
    },
    body1: {
      fontSize: "var(--fs-body1)",
    },
    body2: {
      fontSize: "var(--fs-body2)",
    },
    button: {
      fontSize: "var(--fs-button)",
    },
    caption: {
      fontSize: "var(--fs-caption)",
    },
    overline: {
      fontSize: "var(--fs-overline)",
    },
  },

[siriwatknp]

This post raise a warning about fluid typography. I think Material UI should not have fluid typography, instead it should provide a way (likely with CSS variables for the typography) so that anyone can add fluid typography by themselves.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@n-batalha How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.