Opt-in Typography

Avatar of Chris Coyier
Chris Coyier on (Updated on )

I recently heard Chris Eppstein give a talk (slides) about creating better stylesheets and using SASS to do it. There were a couple of surprising bits in there, one of which was about “opt-in typography.” The idea was that instead of setting global styles for typographic elements like p, ul, ol, h1, h2, etc that you would instead apply those styles as a class, perhaps .text.

The idea is that there is a lot of places on a website where you want a clean slate to work from and not be worried about what global styles are doing. The classic example is lists, where when using them for things like navigation you likely don’t want the same margin/padding/list-style as you would within an article.

Further, you might have different sets of typographic styles you may want to apply at will. So, instead of global styles like this:

p  {    }
ul {    }
ol {    }
h1 {    }
h2 {    }
/* etc */

You would scope them to a class instead (using SCSS here):

.text-article {
  p  {    }
  ul {    }
  ol {    }
  h1 {    }
  h2 {    }
  /* etc */
}

.text-module {
  p  {    }
  ul {    }
  ol {    }
  h1 {    }
  h2 {    }
  /* etc */
}

In an area of the site that’s a blog post, you can snag your article typography, and in a sidebar module, you can grab the typography for that:

<section class="main-content">
  <article class="text-article">
    ...
  </article>
</section>
<aside>
  <div class="module text-module">
     Texty module
  </div>
  <div class="module">
     Module in which typography isn't needed
  </div>
</aside>

Anthony Short feels the same way.

Of course, the effectiveness of this depends on the website. What kind of site it is and what stage in it’s evolution it’s in. I suspect it would work better on websites that have a more “modular” architecture and that don’t have a huge set of legacy content. I’d be interested in trying it on a fresh project.