More punch from your headings

22 October, 2009

• css
• design

Ismail Koci

Category: Web Design

While this is not an actual typography guide to headings (these will come later!), it is just a starting point to getting more punch from your website's headings.

Font size

Headings are there to be recognised. Early on in my design career I was always very cautious to stay within the imaginary boundaries of the time. Now I love going as big as I see fit, and that should really be the way a designer tackles the size issue. If it looks good at 64px, then do it! Remember that size is a major factor in emphasising type, so as long as you are always ensuring your headings are clearly larger the your body copy, you should be fine.

Typeface

Whilst using the same typeface as your body copy makes for a "consistent" layout, it also means that maximum contrast is not being achieved. I have found that using a serif font such as Georgia tends to not only be more visually appealing, but will also create a clear distinction from the body copy if that so happens to be a sans serif font such as Arial.

The irony is not lost on me that the Feedia site does not employ this tactic, but the reason for this is that it does not visually suit the overall look and feel of this particular website. So as with all of these tips, you should only use where necessary!

Colour

This is often overlooked, but can make a huge difference! Depending on your design, and the importance of the heading to its surrounding elements will dictate how you should apply colour. Generally though, your headings should be a colour that contrasts more with the background than the body copy. An example would be if you had a white background with gray text, you could use a darker gray or black for the headings.

Weight

Headings don't always have to be bold! I've found that when using very large font sizes (eg. 50px), there is no need to make it bold as its size already distinguishes it appropriately. However this isn't a rule and if making very large font sizes bold looks better and feels right, then go ahead! Be wary of smaller font sizes though. For example I would definitely bold a 16px heading if the body copy was 12px.

Space

We all love our personal space, and so do headings! If your not using a strict baseline grid method or any other typography guides, just use your keen eye to work out how much room a heading needs. Perhaps as a starting point though, you can ensure that your heading has a bottom margin of at least the size of the font itself. Again, this isn’t intended t o be a strict guide on how to make your headings typographically and mathematically brilliant. Hopefully though, it can be used as a starting point in helping you re-evaluate how you can make your headings more effective.

That's a wrap

Again, this isn’t intended to be a strict guide on how to make your headings typographically and mathematically brilliant. Hopefully though, it can be used as a starting point in helping you re-evaluate how you can make your headings more effective.