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 a 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.
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.
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:
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.
[codepen_embed height="475" theme_id="2039" slug_hash="WvENoL" default_tab="result" user="caraya"]See the Pen Different text effects applied to headings by Carlos Araya (@caraya) on CodePen.[/codepen_embed]