Headings

Headings serve as the visual representation of our content and, as such, they deserve special consideration. We’ll discuss whether to use the same font as our body or whether it’s better to use a different one, and some things we can do with heading text. I wish I could tell you exactly what fonts to use but, as with many things type related, it’ll depend on many factors.

Let’s look at what the possibilities are.

Same or different fontface?

One of the questions that always baffles me is whether to use the same font for headings as I use for the body text.The first example uses the same font (Lato) for both headings and body text. It looks ok but I’m still not sold out on the idea.

See the Pen Headings using body type by Carlos Araya (@caraya) on CodePen.2039

The second example uses a Serif font, Roboto Slab, in the headings with Stone Humanist as the body font.I like the contrast I have to keep reminding myself that the contrast must be present but not be jarring to the reader.

See the Pen Headings in Serif Font by Carlos Araya (@caraya) on CodePen.2039

The last option is to use a typeface from the web safe palette. One of my favorite typefaces is Verdana (don’t judge) so we’ll try that for headings and see how that looks on our headings with the font selected for the body. And here it is:

See the Pen Headings in Verdana (or other system font) by Carlos Araya (@caraya) on CodePen.2039

So with these three options which one should I pick? Three typefaces may not be enough but out of the three I’d pick Roboto Slab. We should certainly test additional fonts either with a system like the one I just did or with Typecast but I was narrowing the choice to these three so doing it by hand was less of a hassle than setting up Typecast. In a larger project I would set up Typecast earlier and do all the testing there.  

Playing with heading type

Now that we’ve selected the font we can look at some effects that will make the headings stand out further. We can play with changing the capitalization of the heading, make them all upper or lower case and maybe even change letter and word spacing. The example below uses different values for the text-transform property to change the way the headings look.

See the Pen Different text effects applied to headings by Carlos Araya (@caraya) on CodePen.2039