Typographic conditions

Originally published as a series of tweets.

So you’ve got some type on a website. That’s some CSS right there, to start. But you should style the fallbacks primarily, and style the intended type if it has loaded. So there’s now a condition in your styles.

And you’ll want to adjust other things depending on the typeface (size, line-height, etc.) … so there’s another condition. And some of those things won’t be specific values, they’ll be calculated dynamically via something like Modular Scale … so that’s functions all up in your conditionals.

And then you have media and container queries, which are conditional.

That’s a lot of logic, laid out in your styles. Where does it belong? How much goes in ordinary styles, and how much in mixins/functions? In what order are these conditional choices nested? How do you avoid problems with inheritance? (This is the big one for me right now — I find myself with elements inheriting rules tied to very specific selectors because of how I’ve nested conditional stuff.)

What I have in mind is like … how do you combine these things in a way that makes sense? http://codepen.io/scottkellum/pen/YXaaNg + http://codepen.io/timbrown/pen/uqgJj

Still thinking about it.

Like what you read? Give Tim Brown a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.