add fluidTypography and fluidProperty to new css package

[n-batalha]

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

• https://github.com/mui-org/material-ui/pull/14573#discussion_r269117429
• https://github.com/mui-org/material-ui/pull/14573#issuecomment-479555907

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

• [x] This is not a v0.x issue.
• [x] 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.

[oliviertassinari]

By the way, the data-vis in https://material-ui.com/customization/typography/#responsive-font-sizes is wrong, it should be:

diff --git a/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js b/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js
index feb2da622..373deff22 100644
--- a/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js
+++ b/docs/src/pages/customization/typography/ResponsiveFontSizesChart.js
@@ -45,6 +45,10 @@ export default function ResponsiveFontSizes() {
       const value = theme.breakpoints.up(key);

       if (variant[value]) {
+        data.push({
+          viewport: viewport -1,
+          fontSize: data[data.length - 1].fontSize,
+        });
         data.push({
           viewport,
           fontSize: toPx(variant[value].fontSize),
@@ -74,12 +78,12 @@ export default function ResponsiveFontSizes() {
             left: 30,
           }}
         >
-          <XAxis dataKey="viewport" type="category" allowDuplicatedCategory={false}>
+          <XAxis dataKey="viewport" type="number">
             <Label position="right" offset={30}>
               viewport (px)
             </Label>
           </XAxis>
-          <YAxis dataKey="fontSize">
+          <YAxis dataKey="fontSize" type="number">
             <Label position="top" offset={20}>
               font-size (px)
             </Label>

[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 👍

[jrhager84]

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

Any traction on this?

[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:
```ts
  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)",
    },
  },