[Typography] Ascender/descender escape line-height

[LorenzHenk]

Characters like g and Ü are partially displayed out of the Typography component when using variant h1, h2 or h3.
If used in combination with the overflow: hidden style, these parts are cut off.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Letters get cut off on top and bottom.

Expected Behavior 🤔

The whole text should be completely visible, not letters should be cut off.

Steps to Reproduce 🕹

Context 🔦

I have a page wrapper with overflow: auto. In the page wrapper, the first component at the top is my heading (Typography variant h2). If the title text is "Überraschung", the dots above the "U" are partially cut off.

Your Environment 🌎

Tech	Version
Material-UI	v4.7.1
Browser	Firefox
Font	Roboto
OS	Fedora 30

[oliviertassinari]

Thanks for the report, I can reproduce with our demo: no padding and overflow auto.

This is not great. The specification has no mention to expected line-height values. I think that the current values come from https://material.angular.io/guide/typography that were, in turn, used in https://material-components.github.io/material-components-web-catalog/#/component/typography, and later ended up in Material-UI and Vuetify. What do you think of the following diff? It increases the line height by the minimum number of 4px increments (so it stays on the same grid).

diff --git a/packages/material-ui/src/styles/createTypography.js b/packages/material-ui/src/styles/createTypography.js
index 33ab4821c..e01672bbb 100644
--- a/packages/material-ui/src/styles/createTypography.js
+++ b/packages/material-ui/src/styles/createTypography.js
@@ -59,11 +59,11 @@ export default function createTypography(palette, typography) {
   });

   const variants = {
-    h1: buildVariant(fontWeightLight, 96, 1, -1.5),
-    h2: buildVariant(fontWeightLight, 60, 1, -0.5),
-    h3: buildVariant(fontWeightRegular, 48, 1.04, 0),
-    h4: buildVariant(fontWeightRegular, 34, 1.17, 0.25),
-    h5: buildVariant(fontWeightRegular, 24, 1.33, 0),
+    h1: buildVariant(fontWeightLight, 96, 1.125, -1.5),
+    h2: buildVariant(fontWeightLight, 60, 1.134, -0.5),
+    h3: buildVariant(fontWeightRegular, 48, 1.084, 0),
+    h4: buildVariant(fontWeightRegular, 34, 1.118, 0.25),
+    h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
     h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
     subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
     subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),

Do you want to submit a pull request :) ?

[suliskh]

Set the lineHeight: "normal" will also work. But I don't know if it breaks the rule for using a non-unitless value in lineHeight

[LorenzHenk]

So what should we go for?

Increase until it looks fine or use lineHeight: "normal"?

Here are some screenshots - for me, lineHeight: "normal" is taller than the custom set lineHeight.

Before:

After adjusting lineHeight value:

lineHeight: "normal":

As lineHeight: normal depends on the user agent, I think we should go for the custom values @oliviertassinari proposed.