Grow your CSS skills. Land your dream job.

Opt-in Typography

Published by Chris Coyier

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.

Comments

  1. Great article!. I’m gonna try this on my next project using LESS. I sort of used this style of CSS typography without realizing it, but without LESS, the last time I started a project from a clean slate.

  2. Ian Rock

    I like this.
    I like this a lot!

  3. Hmmm… you’re either overriding YOUR global styles or the BROWSERS, so what’s the difference?

  4. Schadeck

    I was toying around with this concept in a current project, but this article pretty much validates my thought process for it. Good show.

  5. Great article, I try and do this fairly often on my sites, it makes my job a little easier when I only have to worry about how it will effect one section versus the whole site.

  6. Sam Sherwood

    I’m gonna play devil’s advocate and say that if your base styles are conflicting too much down the DOM, then your base styles are, in fact, too prescriptive to begin with.

    If you try to use as few classes and specific IDs as possible in your CSS, you tend to gravitate to styling patterns, which lend an incredible amount of flexibility to a site.

  7. I have done this, and it works great.

    Having your content typography separate from the rest of your site is wonderful; you can change how your content is displayed without wrecking the rest of your site.

  8. Alexander Albrecht

    I don’t like the fact adding more classes to my HTML. It is the same we have done with grids in the past. Now everybody who uses SASS should be familiar with the concept of mixing grid columns with his CSS.

    So why not use the power of SASS, defining typography in one place and flavoring the CSS we already use?

  9. +1

    I’ve always used a class ‘.flow’ to designate flowing content of arbitary headings, paragraphs and lists.

    Really is a much smarter way than constantly fighting the cascade.

  10. I really like this concept works great for particular projects that have distinct content. Maybe a blog where you want to give each category a particular style, etc.

    Very neat – might just have to try this on my next project.

  11. Scott

    I’m not overly familiar with SASS but isn’t this *exactly* the type of CSS that we are trying to move away from?

    Your examples are creating dozens of CSS rules with descendent selectors, so on most of your elements the browser has to search all its parent elements each time.

    • @Scott You really aren’t creating any extra rules. You’re still using the cascade, you’re just taking better control of it. Worrying about the performance of a single element selector vs a 2 level deep descendent selector is probably not worth it.

    • Scott has a good point here. I think the technique described comes natural to SASS writers, I’ve been doing it for a while now, and well it’s okay as long as you don’t stack to deep, you have to be a little careful..

      In my experience, it’s tempting to do things like this:

      
      footer, nav {
        /* Some styling for footers and nav */
      
        > ul {
          /* Some styling for ul in footers and nav */
      
          li:last-of-type {
            /* Some styling for li in ul in footers and nav */
      
            a { /* Some styling for a in li in ul in footers and nav */ }
      
          }
      
        }
      
      }
      

      The resulting selector for the nested a elements would be:

      
      footer > ul li:last-of-type a, nav > ul li:last-of-type a
      

      That’s rather big already, and what if this would be wrapped in an article, as part of a sidebar, which SASS and this article might mislead you to do.

      Not saying the technique is bad, but keep in mind that nesting too deep will get you enormous selectors, if only for the kb’s, think twice.

  12. Rhys Lloyd

    Interesting. As a few people have said, I think I too have started to gravitate toward this type of structure anyhow.

    I have a fresh personal project coming up which I’m going to try this on. Looking forward to it!

  13. I use this technique for about 2 months and I love it! It’s also very useful for other global modules for example forms.

    And sometimes you need to put new module inside your .text-article {}, for that I use reset class .text-article_reset {}.

    I’ve made a litte example: http://jsfiddle.net/ruslan_savenok/DQGDZ/embedded/result/

  14. I’ve thought about doing my styles this way but then I always felt like it was too “different”. Now I feel silly about not doing it this way.

    I think this may be a permanent change in my web development habits.

  15. seems interesting to use typography with ease and would like to use it in my next theme

  16. Jhon

    I have thought of this before, it’s a great way to have diferent styles without overwriting previous properties, I have one question though, in your example you are creating scoped typography styles, but what about the browser default styling, they are still there making list have default styles that are gonna still make trouble when we want to create a nav for example, or links are gonna have border bottoms, is it a good idea to also reset all default typography styles to a normal text style like only inherit the font-size and line-height from the html or body but nothing else?

  17. Owen

    This is the technique I currently used, although I never thought to call it something. The company I work for develops almost exclusively in Joomla, which is inherently modular, so it works well.

  18. It’s a nice tidy approach that I’ve been seeing more and more often recently. Is there a performance boost to only loading typeface requirements on elements that use them?

  19. whootboy

    I mostly do this, too! It’s awesome!

  20. Gawd! This is brilliant! I’ve been deep in a project for over 6 months now, with a Twitter Bootstrap base. As the project grows (Agile dev) I find myself fighting the cascade as we add new pieces: mobile, iframes, Facebook apps, WordPress, stand-alone HTML, etc.

    I will definitely think along these lines as we continue development. And I’m sure going to use this method on new projects!

    Thanks!

  21. Cool, thanks. It’s rare that a top level element retains it’s styles throughout a project and I always find myself overriding the master styles I set ( which truthfully are usually only relevant to the content area of a site anway).

  22. seems interesting to use typography with ease.I’ve thought about doing my styles this way but then I always felt like it was too “different”. Now I feel silly about not doing it this way.

    I think this may be a permanent change in my web development habits.

  23. Taking into consideration the HTML5 usage, I think html5.js should be mentioned for older browsers. The HTML5 tags might be problematic with IE<=8

  24. Ahmed

    i like that :D

  25. Brad

    Excellent Idea and one that we all should have seen. So easy to do using LESS

  26. I’ve worked with sites that do this both ways (basic styles applied universally or only to elements within a certain class container).

    While different intelligent folks will work differently, I strongly feel it’s better to have good general styles and then override them as necessary. That’s how CSS is supposed to work.

    Setting good defaults saves lots of trouble, for all the situations and modules you (or your client) haven’t made yet.

    At some point, someone would forget to apply that ‘text-module’ or ‘c’ or ‘whatever’ class, and then the typography would be wrong and someone would have to change the HTML. That smells bad. Especially if you’re talking about a system that maybe doesn’t have a great templating system, like Drupal, well, that can become more complicated than you’ll enjoy.

    At some point the HTML will not be what you expect right now. This is good, this is the growing web. Even if it remains clean and semantic, it will need to do something different later. CSS is great for this, because you can define default styles to get you most or all of the way there.

    I have a much stronger suggestion for you folks who use SASS or LESS: create a reset mixin that contains all your reset styles. Then, in places like your global nav where you want to blow all the defaults away, you can just add in your reset mixin and start fresh.

  27. I love this concept. Such a simple way to extend greater control over different elements of your site.

  28. Great article! Thanks!

    I have been using this technique for a while now (5 projects I guess) and it is doing great! Especially in the projects where you need standard styling for content in few places.

    My implementation differs a bit. My approach, is to identify the common stuff in typography and style it globally. Only after then I scope styling that is specific strictly for “standard” text. This way I get styling that is more universal IMO and has the best of both worlds.

  29. Permalink to comment#

    I don’t get this.. Weren’t we doing this all along, but leaving global selector styles in ?

    I follow @snook’s approach with SMACSS, were a module is designed so you can drop it anywhere. But I can’t see why you’d not define a global style.. leave it up to the (various and inconsistent) browsers ???

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".