When marking up web pages I often struggle balancing the styling of headings against making my document outline correct, earlier this week I think I solved my problem by doing this:

h1,
.primary-heading {
font-size: 2.25em;
}

h2,
.secondary-heading {
font-size: 1.6875em;
}

h3,
.tertiary-heading {
font-size: 1.3125em;
}

h4,
.quarternary-heading {
font-size: 0.875em;
}

Now I can rely on the regular html selectors but when I want to I can override them using a class. So when I need an h2 to look like an h4, for example in a sidebar or footer, the addition of a simple class does the job. I’ve also tried to keep the classnames separate from the document outline, so it should self-document okay too.