What are some good font guidelines for headers, paragraphs, etc. that just look really nice?

Question

One thing I find somewhat difficult is getting the various fonts and sizes and weights to look "just right". What are some good guidelines to follow for font sizes, weights and styles when making web applications?

One problem I have is simply getting stuff to fit on the screen too, like for tables that need quite a few columns and things like this. I find that there are a lot of typographic decisions though... the header, main menu text, side menus, forms, lots of multi-level page content, tables, footers, etc.

What would be the best examples of application-oriented websites that have done a great job that I can maybe borrow ideas from? :P

Answer 1

You should know that your choice of typeface is your identity - after all, it is the very channel via which you are presenting your product for the user.

Typography speaks volumes about your service, attitude, and approachability - it's not just all about different sizes for different sections and the like.

To read around the subject - visit Fonts in use, read about the font that was used for UX firm Cloudberry and other reviews of fonts used around the web.

The Cloudberry site is actually very interesting because they have chosen to use the same font absolutely everywhere, without differing colour schemes or separate boxes - but instead used weight, italics, caps, point size - and critically - whitespace - to differentiate different sections. So this is a good one to look at because you can see how things can be done well, while changing very few parameters other than markup.

Key to choosing a typeface is deciding how you wish to represent yourself: mood, attitude, clean, simple, clear, vintage, modern, stylish, etc. Only you can answer this.

Answer 2

The Typography in Mobile Devices entry on Nokia's developer wiki offers a few things to keep in mind for selecting a type.

x-height between 65 and 80% of the cap height

For column-heavy tables, a viewport that horizontally scrolls might be a viable option. Though you really have to ask yourself do you need to display all this data - see Jakob Nielsen's Defer Secondary Content When Writing for Mobile Users. You may be better off showing only a few crucial attributes and putting everything else in a "more info" page.

Take a look at Basecamp Mobile as an example of an app-oriented mobile website. I have no idea what you intend to build, so perhaps you should take a look at the Skeleton boilerplate: a mobile CSS framework that starts you off with a solid typography style.