Expressive Type for Copy Blocks

Override everything

When overriding everything we find ourselves writing markup such as .product-meta p or, worse yet, .product-meta p, .product-meta ul, .product-meta ol, .product-meta omg…. This is all so that we can take our system defaults and tailor them to this very specific implementation. The downside here is that our overrides are only as generic as we allow them to be. If we forget to put blockquote in our list of overrides then you can forget about using a blockquote in your .product-meta element. This is less than ideal and inevitably causes 11th-hour “fixes” to support additional markup patterns you maybe didn’t consider during design and/or development.

Simple defaults

The flip side of the override everything approach is to explicitly define everything. In this way, the ul, ol, p, etc… all have “simple” defaults that will not include margins, padding, or any implied formatting. This fixes our .product-meta issue because there’s nothing to override. It also makes our .product-meta code shorter because we’re not wasting CSS selectors overriding system defaults. Where we run into issues with this approach is when we actually do want the implied formatting of a ul, ol, p, etc…. For example, within the middle of a blog post we do want our lists to be indented and our paragraphs to be spaced out. With simple defaults, you’re forced to add classes to your paragraphs to get the spacing you want.

Welcome .copy-block

Merging a bit of both approaches I’ve been using a .copy-block to represent any content that should have the formatting you’ve come to expect with something like a blog post or press release.

With this approach, my overall system can have simple defaults and zero out, literally, everything. No margins on anything, no paddings on anything. Line-heights of 1em everywhere. This means there’s never any overrides. Instead of tearing down the cascade to build it back up all our CSS is written to build up a pattern.

Layered on top of the simple defaults is the .copy-block class, which I use to wrap any text (commonly coming out of a CMS’s WYSIWYG). Within a .copy-block we set all the defaults we would want on our unclassed elements. In this way, a UL doesn’t need a class to get sensible defaults. But, at the same time those sensible defaults aren’t applied in places, we don’t specifically want them.

This approach layers nicely on top of Allison’s approach to type, leveraging expressive “type classes.” Within our .copy-block can set a naked h1 to use sans-xxlwithout fear that the sans-xxl class needs to override the default styling of the naked element.

Understandably, this approach isn’t for everyone. Your HTML will contain a lot of .copy-block classes. If I were re-coding Cognition today we’d use a .copy-block for this main body, for the text within the recent case study, the event description. And a year from now if we wanted to add a testimonial, I’d use it there too, because it’s just that flexible.

Back to Top