search

Dogfalo / materialize

Materialize, a CSS Framework based on Material Design
https://materializecss.com
MIT License
38.86k stars 4.74k forks source link

Headings don't change size for medium/small displays #4229

Open ahmetb opened 7 years ago

ahmetb commented 7 years ago

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:

image

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

image

and this is the h1:

image

I think we need more fluid font sizes for headings.

kylecordes commented 7 years ago

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 commented 7 years ago

Last time I checked MaterialIzeCSS implemtation just follows google guides

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

kmmbvnr commented 7 years ago

Here is the reference implementation

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

kylecordes commented 7 years ago

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.

typography comparison
kmmbvnr commented 7 years ago

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

kylecordes commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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