Materialize: Headings don't change size for medium/small displays

[ahmetb]

I am showing headings in my design and some of them can be 6-7 words long. However they look absolutely terrible because the h1, h2, h3 etc. have exactly the same size on small/medium displays as the large displays.

h1 on large display should not be the same as large display on mobile. You can look at blog.google for a reference on how to implement this.

This is a h1 on Google Blog:

This is a h2 on my design yet is' way bigger:

and this is the h1:

I think we need more fluid font sizes for headings.

[kylecordes]

Closely related - the heading sizes are surprisingly large. Only all the way down at h6 (!!) is there a heading of a suitable size to label sections of UI or content inside something like a <div class=card>.

Could the typography make typical semantic headings show up with reasonable style when used inside various materialize constructs?

[kmmbvnr]

Last time I checked MaterialIzeCSS implemtation just follows google guides

https://material.io/guidelines/style/typography.html

[kmmbvnr]

Here is the reference implementation

https://github.com/material-components/material-components-web/blob/master/packages/mdc-typography/_variables.scss

[kylecordes]

I brought them up at the same zoom level, and compared side by side, see below. This is just a quick look (I didn't even check the CSS for font sizes...). It does not appear to match.

[kmmbvnr]

At least they are not surprisingly large. That's the specification

[kylecordes]

@kmmbvnr Indeed, that is true!

The actual problem I experienced: that there doesn't appear to be a class/style/element in Materialize which corresponds to the "Title" typography from the spec.

[fega]

I don't believe that materialize is following the specification, Display 4,3,2,1 are not titles, those should be classes instead of something important in the SEO like the headers.

Sadly, I also think that change this is a huge breaking change and couldn't be added in the v0.+.+

[tomscholz]

Related https://github.com/Dogfalo/materialize/pull/3735