Scoping Typography CSS

I’m writing a very long article on front-end dev builds, this is a quick prelude to that!

It’s common practice to define global typography style early in a stylesheet. This makes a lot of sense. After all, a good design has consistent typography with a clear hierarchy throughout. When writing this CSS, type selectors like:

h1 { font-weight: bold; }
p { font-size: 1em; line-height: 1.5em; }

are necessary; adding classes to every text element isn’t feasible when you consider content managed websites and WYSIWYG editors. You’d have to be a nutter to do <p class="paragraph"> everywhere. Global styles are great but there are a few catches:

  • Unique elements exist that are exceptions to the rule.
  • Many UI elements maintain semantics but are visually worlds apart from textual content, e.g. navigation with <ul> are rarely designed as simple bullet points.

The first example can easily be solved with small “modifier” classes like <p class="error">. The second example requires hard overriding of styles.

The more your website resembles an application over a document, the more global typography styles become a pain to build upon. Even heavily content-based websites seem more like an app in the modern world of responsive design. The solution? Just scope typographic styles:

.text h1 { font-weight: bold; }
.text p { font-size: 1em; line-height: 1.5em; }

Simply choose a class that makes sense — I swing between .text and .content — and add it to any element that contains text-based content. This frees the rest of your HTML document from CSS pollution and effectively scopes the typographic style.

That is if you’re using a CSS reset, obviously…

Update: 7th May 2012 - I’m glad to know I’m not the only one doing this, see Opt-in Typography at CSS Tricks and Global typographic styles suck by Anthony Short.

Buy me a coffee! Support me on Ko-fi