Ah, Stackoverflow

So I was doing a little CSS clean-up, having taken one more step to making the new style for the site look the I want it to, and I realized that navigation links at the bottom of each page, you know the ones that take link to *previous* or *next* items in a series of posts, were styled using the serif typeface and I have almost all non-content material styled sans-serif. Okay, so I gotta add `font-family: yada yada, sans-serif;` to that entry in my css. But I’m still thinking about what sans-serif typeface I like best. After all, for the past month or so I have been using this:

font-family: ‘Avenir Next Condensed’, ‘Arial Narrow’, sans-serif;

I like Avenir Next Condensed very much, but it’s currently available only on newer Macs (and on updated iOS devices). I’m fating all Windows users to Arial Narrow and I have no idea what Android users are seeing. So I decided to switch to a Google Web Font (sorry, I can’t afford WebKit):

font-family: ‘Dosis’, sans-serif;

That means having to search and replace one with the other to make this change and then to do so again when I want to try something else. That’s not a huge amount of labor, by the way, but the geek in me thinks *There has to be a better way.*

What I want is a kind of global definition of typeface families, where you would define your typeface “families” at the top of the CSS stylesheet and then simply call upon it as needed:

@typeface: sans-serif {font-family: ‘Dosis’, sans-serif;}

and then later:

.post h2 {type-face: sans-serif}

But what to call this? This, I find, is my greatest weakness when operating in new, unfamiliar domains or in domains which I do not work in a great deal. What to call something? (Surely this is the disadvantage at which our students find themselves and to which we should be more sympathetic — and I think here is where always trying to learn something is truly useful: you are regularly reminded of where the pain points lie.)

Enter [StackOverflow][], where you can type [an inarticulate search query][] and see a range of questions that might be a lot like yours. And you find [one that is yours][], or at least sufficiently close to yours that you can safely assign it as `identity == True` in your mind.

And the best answer is that you can do this, but you need to reverse the sequence in your mind and in your stylesheet:

{ /* Your list of selectors that need to use this font stack */

{ /* Your list of selectors that need to use this font stack */

If you are looking for me on StackOverflow: [I’m here][].

[StackOverflow]: http://stackoverflow.com/
[an inarticulate search query]: http://stackoverflow.com/search?q=css+set+font+family+for+stylesheet
[one that is yours]: http://stackoverflow.com/questions/7351427/organizing-font-family-usage-site-colors-etc
[I’m here]: http://stackoverflow.com/users/1457672/john-laudun

Leave a Reply