Blueprint: Basics of CSS Typography
Tagged as: CSS,Typography
Wouldn’t it be interesting if there were only one typeface in the world? Designers would really have to think about the idea behind their designs instead of covering it up with fancy typefaces. One, universal typeface would really strip away all the flashy emptiness in design. And, of course, that one typeface would have to be Helvetica. ~ Erik Kessels
I wanted to make this next article about true CSS typography, but it is proving to be a tougher nut to crack than I originally expected. It’s one thing to pick out a few font faces, set your colors, font sizes and line heights. It’s quite another to manage the plethora of available analphabetic symbols, fine-tune kerning and perfect vertical rhythm between elements.
My goal is to eventually write a jQuery plugin that does many of those tasks at run-time, letting anyone enhance their website’s copy without having to read The Elements of Typographic Style. But that’s a topic for another day. Instead, I’ve decided to start with the basics and implement the typography stylesheet provided by Blueprint CSS.
As mentioned previously, I chose Blueprint as my CSS framework because it included a typography stylesheet that has what I feel is a good foundation for building attractive copy. Even if you do not plan on using any CSS framework, there are some important tips one can take away from the stylesheet. A default font size is set as a percentage for the <body> tag and all other font sizes are set in ems. This allows you to easily alter the relative font sizes of all elements by changing a single rule. No top margins are set for headers or paragraphs to avoid a few browser discrepancies in how margins overlap each other. Blueprint also includes a number of “helper” classes, which can be used on any element to make common adjustments.
.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide { display: none; }
.quiet { color: #666; }
.loud { color: #000; }
.highlight { background:#ff0; }
.added { background:#060; color: #fff; }
.removed { background:#900; color: #fff; }
.first { margin-left:0; padding-left:0; }
.last { margin-right:0; padding-right:0; }
.top { margin-top:0; padding-top:0; }
.bottom { margin-bottom:0; padding-bottom:0; }
In addition to the basic typography stylesheet, Blueprint has also included a “fancy-type” stylesheet, which makes some headway toward implementing more advanced typographic styles. As you can see on this site now, successive paragraphs are set without any top margin and are indented to give the text more of a print feel. An alt class is also provided, which sets the specified element in a fancier font face and alters the style and color. A class is provided to shift opening quotes left so that a line of text that begins with a quotation mark will still sit flush with successive lines. Finally, a class is provided to make abbreviations or other words set in caps more attractive, altering letter spacing, padding and font size.
So, both stylesheets have been implemented, and with a little extra CSS magic, you can see what a change some simple text alterations can make to a website. If this is your first time visiting my website, you can see what the site used to look like by checking out the evolution gallery.
spaceforaname
com
The border is weird. What is this operation – a work in progress?
Line height and bottom padding for tags can make the difference between an easy-to-read site and one that has a tight or compressed feeling. I suggest you experiment with things like this: padding-bottom: 0.5em; and perhaps a line height that gives a little breathing room in your current layout. “Negative space” is a concept that is under-used in many designs that could greatly benefit from the freedom it provides.
I’ll admit, my current paragraph styling is much more akin to printed text than screen text. I’ve found that sometimes too large of a line height can also be a problem, so it’s a balancing act I’ll be experimenting with in the coming days.
That said, my current content column is nearly 100 characters wide, which is also less than ideal, so it looks like I can benefit from some increased font size and line height.