Heading sizes need adjustment.

[garretwilson]

I started using Milligram 1.2.0 primarily for a nice stylesheet for generating documentation. Compared to a lot of CSS frameworks, it looks great on paper.

But the headers! I can't tell the difference between <h2> and <h3>, frankly. Chrome is telling me that <h2> is getting 4.2rem and that <h3> is getting 3.6rem, but you couldn't tell it by looking at it.

Could Milligram switch to heading sizes that actually look gradually smaller? Or maybe you could point me to a CSS framework that already provides good styling oriented towards documents. Thanks

[nateberkopec]

Have to say I agree. Avid user of the framework but the headers leave something to be desired.

[cjpatoilo]

Hi @garretwilson @nateberkopec

Good issue, guys! I'll do some testing to see how we can improve this. About this do you have any suggestions?

BTW, I'd like to share with you a new feature that has been added recently to ensure the quality of the framework. It analyzes and reports any changes that are made to the framework. If there is a detail that is going unnoticed it will be identified after comparing with the old version. This is the visual regression test and it should help with the visual improvements of the next versions.

[nateberkopec]

@cjpatoilo The traditional typographic scale is covered here and here

I think the main problem here is that scale isn't followed for h1 and h2 - they need to be bigger.

Based on those resources, here's a suggestion:

h1
	font-size: 6.0rem

h2
	font-size: 4.8rem

h3
	font-size: 3.6rem

h4
	font-size: 2.4rem

h5
	font-size: 2.1rem

h6
	font-size: 1.8rem

[garretwilson]

I'm undecided if I like things that big. But anyway I still can't tell the difference very much between h2 and h3. I'm thinking they need to decrease in size faster.

Maybe look here for ideas:

• https://www.w3.org/StyleSheets/Core/stylebot.html?family=8&doc=Sampler
• http://materializecss.com/typography.html#headers
• http://www.blueprintcss.org/tests/parts/elements.html

[nateberkopec]

If you want a large body type size (like Milligram does at 16px), h1 is probably going to be pretty big. That's just sort of how typography works. You can't have small headers and big body text, trying to cram 5 different header sizes in too small a range means you can't tell the headers apart (like now). Milligram needs to either make it's body text smaller (I'm not in favor of that) or make it's headers bigger.

Here's another tool for messing with typographic scales.

If you're okay with H6 being the same size as the body copy, here's an alternative:

h1
	font-size: 4.8rem

h2
	font-size: 3.6rem

h3
	font-size: 2.4rem

h4
	font-size: 2.1rem

h5
	font-size: 1.8rem

h6
	font-size: 1.6rem

[garretwilson]

If you're okay with H6 being the same size as the body copy …

I just tried out the first three of those, and I like those much better!! And I'm OK with H6 being the same size as the body. I recommend you just make H6 bold or something by default. But even if you don't, I personally will seldom go down to H6 anyway.

[nateberkopec]

The mobile font sizes will also need fixing - they're far too similar to be usable. I'd recommend just using the same scale for mobile.

[garretwilson]

So is this scheduled to go into a new release anytime soon?

[garretwilson]

So I see that this didn't get into v1.2.2. Any reason why? Do I need to make a pull request?

[cjpatoilo]

Hi @garretwilson @nateberkopec Nice work. This means a lot to me ♥

The discussion is open! This framework is an open source project and anyone can contribute. I hope more people have the same interest and contribute as you do. I'll go over everything that's been talked about here and I'll work on it as soon as possible.

[cjpatoilo]

Hey @garretwilson npm install ..and chill!

[garretwilson]

Hey @garretwilson npm install

Could you clarify what you mean by that? I downloaded v1.2.2 from the site and this didn't seem to be included. Are you saying that "npm install" will give me something more recent that hasn't been released? Is it version v1.2.3? I'm like a computer, easily confused unless you spell it out to me.

..and chill!

I was just checking on the status because I wasn't clear if this was scheduled or released or what. I also was trying to make clear that I was offering to help out, but I wasn't sure if someone had done this already. Let me know how I can help.

[sudheerDev]

@nateberkopec isn't the existing h1 at 5.0rem (50px) ? Are you suggesting that we decrease it? to 4.8rem?

[nateberkopec]

@sudheerDev I'm not a typographer, I just know what I read on the internet. If you'll read the links above about typographic scales, you'll see why it's 4.8 rather than 5 (basically - spacing between header sizes follows a pattern).

[sudheerDev]

@nateberkopec Got it makes sense. I will give a PR for this. lets see how they look

[sudheerDev]

@nateberkopec thanks for the PR!. i got busy so i coudn't push

[cjpatoilo]

@garretwilson @nateberkopec @sudheerDev Finally I was able to launch the new version with these contributions. I did a search of the heading sizes based on the main frameworks and finally I came in a more adequate situation of what was requested. I hope you like it!

[garretwilson]

The heading sizes make much more sense, now, thank you.