Usability Counts | User Experience, Social Media » CSS

Typographic Design Patterns and Best Practices from the Best Blogs of Today

Jocelyn Wang — Wed, 16 Sep 2009 01:57:16 +0000

One of my favorite topics is typography and even though there’s a somewhat limited set of options in CSS, typography can still vary tremendously using pure CSS syntax.

Smashing Magazine conducted a detailed survey of 50 popular websites to see answer questions like Serif or sans-serif? Large or small font? Light or dark background? and more.

Though the findings aren’t scientific, the study shows a clear set of common practices and guidelines for setting type in Web design. Granted, these points should serve only as rough guidelines (not hard and fast rules):

1. Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
2. Common choices for headlines are Georgia, Arial and Helvetica.
3. Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
4. The most popular font size for headings is a range between 18 and 29 pixels.
5. The most popular font size for body copy is a range between 12 and 14 pixels.
6. Header font size ÷ Body copy font size = 1.96.
7. Line height (pixels) ÷ body copy font size (pixels) = 1.48.
8. Line length (pixels) ÷ line height (pixels) = 27.8.
9. Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
10. The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular,
11. Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

Of course, every website is unique, and few people want their sites to look like everyone else’s sites. But it’s always great to keep in mind that following these guidelines could make your website feel more familiar to your readers. (If you are a data and spreadsheet nerd like I am, check out the spreadsheet of the study and export its data for further analysis.)Similar Posts:

CMS Fridays: The MOSS CSS Reference Chart

Patrick Neeman — Fri, 25 Jul 2008 16:00:23 +0000

The hardest issue regarding skinning a SharePoint site is the CSS that MOSS generates — it’s cryptic, and more often than not, it shouldn’t be changed. Heather Solomon has a great reference guide that covers just about every CSS class SharePoint has, complete with screenshots.Similar Posts:

20 Useful Tools to Make Web Developement More Efficient

Patrick Neeman — Fri, 16 May 2008 03:00:51 +0000

Stolen from a work blog. Go here.Similar Posts:

Cool Website Tuesdays: Browser Shots

Patrick Neeman — Tue, 22 Apr 2008 16:00:19 +0000

Browser Shots takes a screen shot of your website for quality assurance purposes in over 40 browsers available on the web — testing it across the board in PC, Mac, and Linux platforms. Excuse me while I fix some issues I found in Galeon 1.3.20.Similar Posts:

Internet Explorer 8: Beta, But Has Some Nifty Features

Patrick Neeman — Sun, 06 Apr 2008 19:00:42 +0000

I was at Mix 08 recently, and got to see the test drive of Internet Explorer 8 while talking to one of Microsoft’s Program Managers. The first question I asked was, “so what did you guys break this time?” and the second question was, “what’s that nifty Emulate IE 7 button?”

(To this day, 15 years or so into the web, I still can’t believe we’re having browser wars.)

While they are still perfecting it and actually striving for a standard compliant browser, some of the notes from the conversations I had were:

It should be a lot faster (I hope so — I just downloaded the Firefox 3 beta, and it’s smokin’ fast).
The team says they will try to be as backwards compatible as possible.
How IE8 will handle Element ID’s will be much different than previous browsers, and could break a lot of sites.
A lot more built in tools like validating CSS and HTML will be right in the browser (and no more going back to Firefox to check).
You as the user can choose how compliant you want to view websites, because there will be several modes (including a “quirks” mode) to choose from.

That last one alone might be worth installing it. I’m going to be test driving it for a while, so I’ll give reports of how I’m liking it.

Similar Posts: