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).

Stop the (Design) Madness

I know, I know. As a few readers have wondered: when are the changes in appearance going to stop? Ever since I began the site overhaul I have been at a loss to determine how the site should look and function. The older design was meant to emphasize the “day book” nature of the site, something I want to keep, but I also want to make reading longer pieces easier, and the old design was a little cramped. The old design also didn’t use any of the newer WordPress functionality — heck, it didn’t use a lot of the old WordPress functionality.

In order to make the older site use as few computing resources as possible, I had stripped out much of the dynamic code, but that also meant I lost things like widgets, which make it easy to drop in such functionality as a Recent Posts block. I have also been looking forward to the new post format functionality coming out in WP 3.1. I’m running the beta right now, but I haven’t decided how I want to format visually the different kinds of posts — a visual tag with some changes in what is displayed is the usual way to do it, and that is probably how I will do it, but it also means I need to take my CSS skills up one level (at least).

Here is what I have been looking for in a theme:

  • Support of the new-ish loop.php functionality which makes coding various kind of “sub” pages easier
  • Support of post format
  • A smaller CSS — and one not requiring includes, which a lot of the grid-based styles depend upon
  • White space

This is the new design, by the way. It’s called Jotter and it’s based on Ghostwriter by Bruno Calvacante. Calvacante’s design was lovely, but I wanted something a bit more modern looking. Much of the CSS, for now, is his, but I have slowly been making changes under the hood. But, let me say, cheers to him for embracing the new HTML elements available in HTML5.

Tweaking the New CSS

Regular readers have probably noticed that over the holidays I tried out quite a few themes. There were a few that I really liked, especially Satorii by [Felipe Levin](http://www.yukei.net/), but I decided not to use for one reason or another. In Satorii’s case the CSS was rather involved and depended upon a grid system with which I was not familiar. While I still may return to the original custom theme I made for this site, Jello, I am interested in exploring what other themes have to offer not only in terms of looks but also in terms of functionality. I am particularly interested in finding a theme that will make it fairly easy to implement post formats when they are finally rolled into the official version of WordPress. (They are slated for WP 3.1, as I understand it.)

### Changing Up Fonts

There is the simple version of `@font-face`:

@font-face {
font-family: yourFontName ;
src: url( /location/of/font/FontFileName.ttf ) format(“truetype”);
}

/* Then use it like you would any other font */
.yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;
}

A more comprehensive version includes using [Microsoft’s embedded font widget](http://www.microsoft.com/typography/WEFT.mspx) — or [this one](http://www.cuvou.com/wizards/ttf2eot.cgi) — and then coding for IE’s inadequacies.

@font-face {
font-family: ” your FontName “;
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(” real FontName “), url( /location/of/font/FontFileName.ttf ) format(“truetype”); /* non-IE */
}

/* THEN use like you would any other font */
.yourFontName { font-family:” your FontName “, verdana, helvetica, sans-serif;
}

There’s more on cross-browser fonts [here](http://randsco.com/index.php/2009/07/04/p680).

Generated Content in CSS

The [W3 Consortium has a handy section in its documentation](http://www.w3.org/TR/CSS2/generate.html) for CSS2 on the service of generated content, e.g. automatically numbered lists, placing a fancy quotation mark in front of a block quotation, etc.

New Design

Over the past week I struggled with the decision to maintain my own infrastructure for my website. For now, I have decided to keep the backend the way it is, but I really wanted a much more compact and simple frontend for the site. I was inspired, in part, by some of [Tumblr’s](http://tumblr.com) offerings and by [Andre Torres’s site](http://notes.torrez.org/). It’s not as stripped down as Torres’, but it’s close enough for now. I was especially inspired by his compacting post title and other meta-post information into a single line. It was a great opportunity not only to learn more about CSS, as the whole re-design was, but to learn a bit more about WordPress’s infamous *loop*. Please let me know what works and what does not. And I am open to suggestions that make the site easier to read or use. (I recognize that my desire for simplicity might make the site harder to use for some.)

Styling for the Mobile Device

The age of the mobile device is upon us. Smart phones, or smartphones, be they iPhones or Blackberries or Droids, are everywhere and making sure our users can access our content in a way that respects the full functionality of their devices and, at the same time, the limitations of their screens is becoming increasingly important. As many web developers already know, the problem is that the browsers on these devices often don’t announce themselves very well, and so you have to guess a bit — or, rather, make it possible for your website to guess a bit.

Here’s the `` code for guessing the iPhone and sending its browser, Mobile Safari, the right style sheet:

``

A good place to begin, as always when it comes to CSS, is [A List Apart](http://www.alistapart.com/), which has an article entitled [Put Your Content in My Pocket](http://www.alistapart.com/articles/putyourcontentinmypocket/).

The Redesign Itch

With the Christmas holidays here and a little bit of time on my hands, I am feeling in the design mood/mode. With the bathroom repair behind me, I am also in the building mood. I don’t know that an overhaul of the JLX site’s CSS would typically fall under *build* but it’s too wet to put my furniture-building plans into effect.

There are several articles discussing CSS3 that are prompting this:

* [24ways](http://24ways.org/) has an article on [making your mockup in mark-up](http://24ways.org/2009/make-your-mockup-in-markup) that repeatedly cites the convenience of CSS3’s ability to use gradients, create highlights and shadows, and to specify fonts as a reason to “design in your browser.” (Much of this is in reference to an overwhelming number of web designers doing their mockup in Photoshop.)
* The author of the “Make Your Mockup in Mark-Up” is [Megan Fisher](http://owltastic.com/) who has a nice site of her own which takes advantage of a number of CSS3’s abilities.
* A lot of designer’s now subscribe to the cult of grids. [Slammer](http://ringce.com/slammer) is a gridding tool that you deploy as an overlay on your Mac — and so it isn’t built into your CSS the way some of the gridding systems are. The interesting thing about Slammer is that it offers you the chance to choose different gridding/design systems: Golden Ratio, Fibonacci, Rule of Thirds, etc.
* One of the cool new things about CSS3 is it’s ability to create alpha effects with color, using the new `rgba` property. It uses the following scheme: `color: rgba(0-255, 0-255, 0-255, 0-1);`.
* Tim Brown has a terrific write-up on how to use [`@font-face`](http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/). He also has a great list of [web design basics](http://nicewebtype.com/notes/getting-started/) that are worth reading either when getting started or reviewing when you feel the need to revisit the basics.