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

  • 1
    Your question is open to subjective responses and discussion. If you gave examples of what you consider "nice", people could suggest similar fonts. Nov 11, 2011 at 11:29

2 Answers 2


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.

  • This is more for marketing part of the site. I am actually referring to web applications - like apps that actually do and manage complex things.
    – egervari
    Nov 11, 2011 at 21:26
  • @egervari web applications are web pages, and both can be very complex. The principles are very similar, and I think this answer summarizes it perfectly, specially in the last paragraph.
    – Yisela
    Oct 29, 2012 at 23:00

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.

  • Does this apply for normal browser-based applications?
    – egervari
    Nov 11, 2011 at 23:46

Not the answer you're looking for? Browse other questions tagged or ask your own question.