Posts Tagged ‘CSS’

Blueprint: Basics of CSS Typography

Tags: ,
3 Comments

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. (more…)

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

Tags:
No Comments

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. (more…)

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

Tags:
1 Comment

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 <body> 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. (more…)

|