Space for a Name » CSS

Blueprint: Basics of CSS Typography

Jack — Fri, 17 Apr 2009 01:52:19 +0000

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

Site Layout: Columns and Menus and Grids, Oh My!

Jack — Sat, 11 Apr 2009 21:25:04 +0000

Three columns or two? Left sidebar or right? Vertical navigation or horizontal? Probably one of the more important decisions you’ll make while designing a website is just where all your content is going to live. While there are plenty of websites that make effective use of unique and mold-breaking layouts (VandelayDesign has an interesting article on unique layouts along with 20 great examples), I feel that if your goal is to communicate effectively with your reader, it’s best to stick with what works. Disregarding your user’s expectations more often than not results in fewer users. Sometimes, angry e-mails.

Assuredly, each website brings with it unique considerations, but I tend to fall back to a handful of fairly standard conventions. Primary navigation menus consisting of 3-5 items live quite comfortably in a horizontal menu adjacent to the website’s header. Longer lists of 6-9 main buttons are also a good fit for horizontal menus, but require a bit more room and are thus better placed above or below the website’s header. If your primary navigation conists of multiple menus, 10 or more buttons, or is likely to grow with time, then a vertical menu in a left sidebar is your best bet, as this is the most flexible solution.

Sidebar placement is an issue that may raise some questions. You want your main content to take precedence, but you don’t want your sidebar content to be ignored completely. Luckily for us, others have already done the hard work to determine how users view websites using heatmap studies. Jakob Nielsen, arguably the biggest name in web usability, has an informative and easy-to-read article on reading habits, and Google has also done their own reasearch involving eye-tracking.

What should we take away from this? As Nielsen’s article shows, readers focus across the first two paragraphs of your content, and down the left hand side of a website. If you have a sidebar with lots of navigation, it better be in a left sidebar if you want your users to be able to find their way through your website. If your sidebar consists mostly of secondary content that is of less importance to your readers, do them a favor and keep it to the right. Advertisements raise an interesting conundrum. Your users don’t want to be bothered with it, suggesting a right sidebar placement, but you want as many views and click-throughs as possible, indicating a preference for a left sidebar. If your website has ads, I’ll leave it to you to decide what’s best for you and your readers. Since I don’t plan on having a lot of navigation in my sidebar, to the right it goes.

Ok, Now What?

So you’ve chosen a layout. Now how are you supposed to implement it, and ensure cross-browser compatibility, no less? Enter the grid. I’ll admit, until recently, I’d never used any kind of pre-packaged CSS layout framework. I recently stumbled upon 960 Grid and was instantly converted. One problem I’d always had when designing was getting columns of content to look good. I never had a problem setting up my main columns—normally utilizing the layout resevoir from bluerobot.com—but when setting up content within a column, my widths were always a bit haphazard and margins were set with abandon. It worked, but never felt quite as solid as it should be. The grid framework changes all that. By providing designers a simple way of defining columns with specified, aesthetically pleasing widths and margins. All the pain of complying with various browsers is alleviated as well, since the CSS is already written. Just apply the right classes to your markup and go. The benefit for me was that a grid system is just as good at setting up your main columns as it is formatting content within those columns.

I was all set to adopt the 960 Grid system, but quickly found that it wasn’t the only player in the game. Here’s a quick list of the more popular options:

Each has their ups and downs. For instance, Grid Designer lets you build any size grid you want, customizing columns, margins and gutters. For a thorough write up on CSS grid systems, check out “Which CSS Grid Framework Should You Use For Web Design?” by nettuts.com. In the end, I wound up changing my mind and going with Blueprint. Not only is it widely used, it’s more than just a grid framework. Blueprint includes frameworks for forms, and more importantly, typography. I say more important because my next topic of discussion will be CSS typography and Blueprint is going to make my life a lot easier in that regard.

Blueprint works on a 950px wide layout with twenty-four 30px columns, separated by 10px gutters. Creating a column is as easy as adding the following classes to your

span-X : Creates a block that spans X columns
prepend-X : Pads the block with X columns to the left
append-X : Pads the block with X columns to the right
border : Places a light border to the right of the block
colborder : Appends a single column to the right of the block and places a border in the middle of said column

There are many more options as well, and Blueprint has a fairly thorough test page displaying what the framework can offer. For reference, this site uses class="span-16 colborder" for the main content column and class="span-7 last" for the sidebar. The last class makes sure there isn’t an unneeded 10px gutter to the right of the column. Click here to toggle the grid underlay (if overlay is a word, so is underlay) to see it for yourself.

The only complaint I could make about Blueprint is that it is not 100% compatible with IE by default. It corrects any bugs by using a conditional comment in the HTML header, adding an IE-specific stylesheet for users of Microsoft’s browser. A minor complaint, but a complaint nonetheless.

Ah, another day (ok, two days), another step under the belt. Come back next time to learn way more than you ever wanted to about CSS typography.

CSS Reset or: How I Learned to Stop Worrying and Love the Browser

Jack — Thu, 09 Apr 2009 20:40:04 +0000

And the sins of the browser shall be visited upon the site.

Take a look at this test page of various HTML elements. Take a brief look at its formatting. The headers are bold and set in varying sizes. Block quotes are indented. Emphasised text is set in italics (or oblique, depending on the font, but that’s a topic for another day). Paragraphs have margins. Even the itself has a margin. But why? I certainly didn’t tell the browser to style these HTML elements like this.

“But Jack, that’s what those elements are supposed to look like.”

Precisely. They’re supposed to look like that. It’s convention. Tradition. The way of things. In the days before CSS, browser manufacturers took it upon themselves to implement a set of presentational standards for HTML elements, making life for the website creator easier.

“We know you want your header to be big and bold, so we’ll save you the trouble by making it the default.”
“Oh, thank you, Netscape Navigator!”

That was fine and dandy until the day someone wrote out a CSS rule h1{ font-weight: normal; } and realized, “Wait, why should I be telling the browser what not to do? The browser shouldn’t be doing anything!” We simply don’t live in 1995 anymore. We’ve separated our markup from our presentation, and we want to keep it that way, but even modern browsers are hell bent on setting an arguably arbitrary set of default presentational rules. The worst of it is that the myriad browsers can’t even agree on the same defaults. Sure, headers will always default to bold, but how much space should be between a header and the following paragraph? Does a second-level unordered list use round or square bullets? Just how much do you indent a blockquote?

For an example of what the defaults for various browsers are, here are some screenshots I took of the aforementioned page.

Take particular note of the whitespace. While browsers may be more or less in sync when it comes to default font sizes, they’re all over the map when it comes to margins and line-heights. Firefox 3 in Windows is pretty generous with whitespace while Opera on OS X tries to cram as much content above the fold as it can. Also note that Opera 9 breaks from the crowd and refuses to style unordered sub-lists any differently than their parents.

Hit the Reset Button

You have two options here. Live with the fact that your users’ browsers are going to poke at prod at your markup and hope that you’ve defined a sufficient number of styles to keep the browser defaults from showing through, or you can wipe the slate clean before you even start writing your CSS. That’s where the CSS Reset comes in.

I won’t go into too much depth, because it’s been discussed at length over the past few years. In fact, Six Revisions has a pretty thorough article on resetting CSS. To make a long story short (too late), Eric Meyer, master of all things CSS, has what can be considered a pretty definitive foundation for CSS Resets. I say foundation, because you shouldn’t just dump this into your site untouched. For instance, why create a body{} rule to set up font color and background images when one already exists right there in the reset stylesheet? Also, your specific project may necessitate default styles that differ from what Meyer has deemed appropriate.

In fact, I wouldn’t really think of it in terms of resetting your CSS, but rather creating a new default for your particular site. If you know all the tables in your site will have a particular border style, don’t write a new table{} rule, just overwrite the existing rule in your reset stylesheet.

That said, let’s revisit our test page of HTML elements, now with Eric Meyer’s reset stylesheet applied. Much better…almost. You’ll notice that headers still appear in boldface, as well as table header cells (which also remain defaulted to a central alignment). Also, emphasized and strong text maintain their default appearance. Meyer has argued in favor of leaving these particular defaults as they are common enough and sensible enough to avoid resetting. However, for my needs, I would prefer defaulting headers to a normal font-weight and setting all elements to a default left alignment. To achieve this, I’ve added a few lines to Meyer’s universal rule to handle these attributes:

font-weight: inherit;
text-decoration: inherit;
font-style: inherit;
text-align: left;

These rules will default all elements to a normal font weight with no style or decoration, but allow me to override that as needed and ensure that all children of those elements inherit the overridden style. Of course, this also eliminates the styling on emphasized and strong text, so I need to explicitly define those styles now:

em { font-style: italic; }
strong { font-weight: bold; }

One last change I made was to ordered lists. While it’s good to leave unordered lists without any default styling (because they’re often used for much more than just lists of text), I decided that ordered lists will only be used for just that, ordered lists of text.

ol { list-style: decimal; }
ol ol { list-style: lower-alpha; }
ol ol ol { list-style: lower-roman; }

Let’s take one final look at our test page, this time with my version of the reset stylesheet. Now that’s a clean slate if I’ve ever seen one. I guess it’s high time I get cracking on making this site less of an eyesore. Readability, coming’ up!

P.S. – You won’t see any numbering on the ordered lists of the final test page because list-style-position defaults to outside, and since there are no margins in the page, the numbers wind up residing off the left edge of the browser window.