Normalize headings

[necolas]

I'm considering normalizing headings in some way after all. Mainly because I caught myself out while developing a project which used HTML5 elements, because of the way modern Firefox and Chrome resize h1 (coincidently to the size I needed) when nested within sectioning elements...while other browsers do not.

It would be pretty simple, just use the existing defaults and it will override the -webkit-any() / -moz-any() rules and kill off h1 resizing in sectioning elements. But then one might as well normalize all the headings and margins too, I suppose. It's likely that every project is going to modify these styles to match the design.

Thoughts?

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

[vladocar]

If you normalizing the headings then you need to offer complete typography solution for all the other elements. I think heading size shouldn't be a part of Normalize.css.

You can create complete typographical framework based on some scale. Example I used Fibonacci sequence for building http://code.google.com/p/azbuka/ and http://code.google.com/p/better-web-readability-project/

[gosseti]

Agreed. I think the consistency is important, but perhaps it’s still a good idea to include a style that mimics the -webkit/moz-any resizing. I find it a good way to establish typographic hierarchy without switching to a h2.

[necolas]

If you normalizing the headings then you need to offer complete typography solution for all the other elements.

I don't see how one follows the other.

There's no special reason to use the Fibonacci sequence

perhaps it’s still a good idea to include a style that mimics the -webkit/moz-any resizing.

There is no practical way to do this. Nicole's recent article is also worth baring in mind - http://www.stubbornella.org/content/2011/09/06/style-headings-using-html5-sections/

[gosseti]

It depends whether you’re using h1s outside of section elements or not. Fibonacci sequence creates too much size difference in my experience (and is a bit gimmicky). Heading sizes should try to fit the baseline grid where possible.

[i-like-robots]

I would also include matching class names (h1, .h1 { * }). Obviously font-size is not always relevant to importance of content which is a common problem when working with some designers who insist each page having 3 headings (yeah, really).

Adding these classes eases the pain on (or helps less experienced) developers so that the markup always maintains content importance even if the design does not. EG. <h1 class="h3" />

[necolas]

@i-like-robots Yeah that is one approach (which Nicole describes) that I see value in when developing a site. But it is not within the scope of normalize.css. People might want to edit the file to include those classes at the same time as they customise the heading styles, but the project isn't going to impose that approach or start including classes :)

[vladocar]

Sorry maybe my answer was misleading.I'm not saying you should use Fibonacci. I'm just saying headings size you should make a meaningful scale for other elements. Every designer has its own scale. Here is a good article about that http://www.alistapart.com/articles/more-meaningful-typography/

[necolas]

@vladocar That isn't within the scope of normalize.css, which is to normalize browser defaults. So the styles at the start of the issue are based on modern browser defaults. All other elements do the same.

[vladocar]

@necolas I love the idea behind normalize.css. I'm actually working on something that will be mix of normalize.css and my http://www.vcarrer.com/2010/05/css-mini-reset.html ( I will send you all the details when is done ). My general concern with that people will never bother to change the settings inside normalize.css they will simply overwrite everything into another CSS file.

[necolas]

Cool.

If people want to write their CSS on top of normalize.css, that is their choice, even if it is usually unnecessary. It is a pattern that is common among reset users.

[jitendravyas]

Almost every project needs different styling for heading so I also use my own styling for font-size, margin and padding for headings

[Keyamoon]

@necolas I prefer to write my own font-size classes. It is similar to the font-size: 13px for body which I think you fortunately removed it from normalize.css (still present in h5bp). In my opinion, adding such rules just makes using normalize.css harder as people will have to remove/modify these extras.

By the way, I suggest using the golden ratio for the scales you're using (instead of 2em, 1.5em, etc.). I use modular scale: http://modularscale.com/

[necolas]

Yeah, most people are going to modify the styles (as they might others). But I don't see how it makes it harder for people to change them.

Why would I want to use the "golden ratio"? The browser defaults are not related to it.

[Keyamoon]

Well, yea it doesn't exactly make it harder but every time people want to use normalize.css, they will have to either remove these rules or change them. Whereas for most of the other rules in normalize.css, we can just forget about them, knowing they are some good defaults that we want to keep them. I write my css in a modular way and I like to be able to @imoprt and use normalize.css in different projects without changing it each time. So I believe adding heading rules or link colors makes normalize.css less modular. Yeah if you ask me, color rules should not be included either. Generally, adding any rule that most of the people want to change makes normalize.css less modular.

As for why use golden rations, well it's a design best-practice I suppose. Also, not every browser default is the best (that's why we use normalize.css in the first place :P).
Watch this talk by Tim Brown if you haven't already.