Selector Gadget

I’m not entirely sure I need a CSS inspector when the Web Inspector in Safari works so well — it’s under the Developer menu (search to find out how to make that appear in your Safari browser if you don’t see it), but if I did need one, there is [Selector Gadget][].

[Selector Gadget]: http://selectorgadget.com

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:

h1,h2,h3,h4,h5,h6,
{ /* Your list of selectors that need to use this font stack */
font-family:one;
}

p,ul,
{ /* Your list of selectors that need to use this font stack */
font-family:two;
}

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

Been wanting to play with how blockquotes are presented. [Some great css tricks here](http://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/).

CSS for @font-face

Nice Web Type has the CSS for @font-face. Whenever I play with this, I always forget it, and so I’m simply pasting what I need to remember here:

@font-face {
font-family: “Your typeface”;
src: url(“type/filename.eot”);
src: local(“☺”),
url(“type/filename.woff”) format(“woff”),
url(“type/filename.otf”) format(“opentype”),
url(“type/filename.svg#filename”) format(“svg”);
}
@font-face {
font-family: “Your italic typeface”;
src: url(“type/filename-ital.eot”);
src: local(“☺”),
url(“type/filename-ital.woff”) format(“woff”),
url(“type/filename-ital.otf”) format(“opentype”),
url(“type/filename-ital.svg#filename-ital”) format(“svg”);
}
h2 { font-family: “Your typeface”, Georgia, serif; }
h2 em { font-family: “Your italic typeface”, Georgia, serif; }
em { font-style: italic; }

CSS Typography

A number of people have asked about the type faces I am using in the new layout. If everything goes well, then you are viewing this site using two open source, free-to-use type faces. One is Gentium, and the other is Yanone Kaffeesatz. Gentium is the serif face, Kaffeesatz the sans-serif. Both faces are available under the SIL Open Font License. SIL’s goals are noble, but they are also quite critical for building a knowledge distribution system that is beholden to no one entity. (I don’t have a horse in the current H.264 vs. WebM race, but the MPEG-LA would make everyone’s life a lot easier if they simply made that standard open and free.)

But how do you load these type faces? How do you get them to appear on your website? Well, it does take some work in CSS, and, in the case of my site running on WordPress, the creation of a directory within the WP theme that contains the fonts — note the use of a relative URL below:

@font-face {
font-family: "Gentium Basic";
src: local("Gentium Basic"), url("font/gentium.ttf");
}
@font-face {
font-family: "Gentium Basic";
font-style: italic;
src: local("Gentium Basic Italic"), url("./font/gentium-italic.ttf");
}
@font-face {
font-family: "Gentium Basic";
font-weight: bold;
src: local("Gentium Basic Bold"), url("./font/gentium-bold.ttf");
}
@font-face {
font-family: "Gentium Basic";
font-style: italic;
font-weight: bold;
src: local("Gentium Basic Bold Italic"), url("./font/gentium-bold-italic.ttf");
}

@font-face {
font-family: "YanoneKaffeesatz";
font-weight: normal;
src: local("YanoneKaffeesatz"), url("font/YanoneKaffeesatz-Regular.ttf");
}
@font-face {
font-family: "YanoneKaffeesatz";
font-style: thin;
src: local("YanoneKaffeesatz Thin"), url("./font/YanoneKaffeesatz-Thin.ttf");
}
@font-face {
font-family: "YanoneKaffeesatz";
font-weight: bold;
src: local("YanoneKaffeesatz Bold"), url("./font/YanoneKaffeesatz-Bold.ttf");
}
@font-face {
font-family: "YanoneKaffeesatz";
font-style: light;
font-weight: light;
src: local("YanoneKaffeesatz Light"), url("./font/YanoneKaffeesatz-Light.ttf");
}

As you can see from looking at the source (src) for each file, my server is currently carrying the load of delivering both the type face — unless a reader already has the type face installed on their computer. (And you do have at least Gentium installed, don’t you? Come on, it’s a beautiful type face and it’s open source.) This affects two things: my bandwidth usage with my hosting service and the speed with which readers view pages. I can fix this in a couple of ways:

  • I can make Gentium the first type face in the CSS for body contents and make Georgia the fall-over type face. What will happen is that fore viewers who don’t have Gentium installed, their browser won’t download it from my server but simply move onto Georgia. (I might just make my life easier and make Georgia the preferred face: that way I can make sure that I am seeing what everyone else is seeing.)
  • I can also shift the burden of delivering the Kaffeesatz type face from my own server to Google’s servers, because Kaffeesatz is one of the web fonts they have chosen to support. The code for that would look like this:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

Place that in the head of your HTML or PHP files and you are good to go. All you need to do is insert the font name in your CSS like so:

h1 { font-family: 'Yanone Kaffeesatz', arial, serif; }

It’s typographical magic without the bandwidth costs.

**UPDATE**: Sorry about the ugly formatting of the blocks of code. That was my fault: I put the wrong tags in. Also, Google offers a *lot* more options in web fonts: [check it out](http://code.google.com/webfonts).