Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

What do you advise when it comes to selecting fonts for your User Interface?

share|improve this question
    
Are you looking for specific fonts or styles? –  Virtuosi Media Aug 10 '10 at 2:47
5  
Just whatever you do, do not use MS Comic Sans! –  scunliffe Aug 10 '10 at 12:14
    
@VirtuosiMedia: Either. @scunliffe: Well, Windings would be a pretty bad option too I would think. –  anon Aug 10 '10 at 22:18
    
@scunliffe, What's wrong with Comic Sans? I think I'm going to start a campaign to get everyone to use Comic Sans everywhere. I'm sure I can get buy-in from any marketing people I find. :) –  Charles Boyung Aug 13 '10 at 5:22
4  
I agree that Comic Sans is perfect for everything, but you may want to add some Papyrus in for variety. –  Fraser Aug 14 '10 at 6:13
show 2 more comments

8 Answers

up vote 18 down vote accepted

Read this article on font legibility. At least look at this graph of on-screen reading times (shorter line = faster/better):

enter image description here

The differences aren't that large, but it's worth noting that Times (a serif font) came in second place.

For medium-large text consider ClearType (or whatever Apple's alternative for it is). For very small text (~<= size 10.5, in my experience), this can look blurry (contrary to its intention) -- see the WPF explanation on this. I'd generally agree with KahWee Teng's answer -- stick with the platform default for non-web apps unless there's a compelling reason not to.

share|improve this answer
1  
No love for Lucida Grande? :( Tahoma is an awesome UI font, one of the best things to happen to Windows and far better than Segoe UI or Trebuchet. And just because I've used WinForms with VS 2005/8, I think MS Sans Serif is great too, it just doesn't scale well. –  John Ferguson Aug 16 '10 at 21:11
    
"shorter line = faster/better" - reading a line is different from reading a button label, in face, many serif fonts are better for reading texts than sans, because the serifs form a more stable base line. Yet, I don't think serif fonts are used a lot in interfaces with the same reasoning. –  kontur Jan 14 '13 at 6:52
add comment

I wanted to add that no font is a magic bullet. While a bad font and lose the game, a great legible, readable font wont win it for you either.

Once you have a font you like and that fits with your voice, you need to make sure you still pay attention to how you use that font. A few things to ensure you consider are:

  • Line Height - The amount of line height you use will vary depending on your body of text and your line length
  • Line Length - You'll want to keep this under control. Too long and readers will get lost, too short and reading feels choppy and broken.
  • Font Size - This is obvious, but you can also use it in as a way to help line lengths.
  • Contrast - If you want it readable, you need enough contrast. Too
    much contrast and it starts to buzz and hurt. An example of what not to do is have a pure
    white page, with pure black text on top.
  • Rhythm - Take care of the vertical spacing between blocks of text. Here's A

These princples and a ton more are covered by a great resource at http://webtypography.net/ in a resource called "The Elements of Typographic Style Applied to the Web".

It has a ton of great information, principles and techniques for ensuring your use of type is legible, readable, and enjoyable.

share|improve this answer
add comment

That article is a bit out of date (2005).

A more current article: http://www.vanseodesign.com/web-design/legible-readable-typography/

And linked from the article (which is not all that readable, honestly):

http://www.sitepoint.com/typography-readability-and-legibility-part-1/
http://www.sitepoint.com/typography-readability-legibility-part-2/

share|improve this answer
    
Cool; thanks for the update! Not sure if this stuff necessarily becomes "out-of-date" (though trends in displays and the advent of ClearType may have changed things a bit) –  Fraser Aug 16 '10 at 4:38
add comment

There are a lot of factors here. What is the application? A website? A mobile app? Clean is the way to go. For small devices, apple uses Helvetica. While it's not my favorite font, it is clean and easy to read.

share|improve this answer
add comment

From my point of view, and if applicable (domain and system), you should use the currently configured font. If the user chose some font for his system, who are you to tell him otherwise?
Of course his advice is void if you're doing a creative application, or on a system where the is no standard configuration.

share|improve this answer
    
I concur. Somehow, stackoverflow.com on Mac, used to force Monaco (shudder) for monospaced fonts, even though I was using Deja Vu Mono, or Droid Sans Mono and I even tried using a custom stylesheet. Plus, in CSS, don't use !important unless you really have to. –  John Ferguson Aug 16 '10 at 21:15
add comment

For large bodies of text, sans-serif fonts (eg. Tahoma, Arial) tend to work well on screen, while serif fonts (eg. Times New Roman) work well in print.

Presuming you don't destroy user's your eyes with something curly and pink, the size of your font (14px+ on a big screen), line-spacing and good background contrast can have a bigger effect on legibility than font face, in my opinion.

share|improve this answer
add comment

For smaller screens such as mobile device, it's better to use sans-serif fonts. Ultimately you should look at the platform UI guides to make your application feels native (unless you're creating a game).

share|improve this answer
add comment

In general for small type it is better (easier on the eyes) to use a sans-serif font. For larger type, more freedom of expression is "allowed" for different type faces because it is easier to read larger letters.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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