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:

.primary-heading {
font-size: 2.25em;

.secondary-heading {
font-size: 1.6875em;

.tertiary-heading {
font-size: 1.3125em;

.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.