User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Ideally I need something that has been specifically designed for easy reading on displays. Accessibility is key really.

Does anyone have a suggestion for a good webfont that looks fairly similar to Univers/Helvetica Neue?

Not too keen on using one of the default fonts (Arial, Verdana etc). My ideal solution would be to use something that's a contemporary cut of a classic humanist font. One that has been designed with ease of reading as its main priority.

Here are my current thoughts:

Typecast selection

share|improve this question
2  
Arial? Screen-optimized, Akzidenz Grotesk-based. Another font based on it is Folio, but Arial is the screen optimized one. – Aadaam Oct 11 '12 at 20:36
    
Or if you want to go to a more humanist direction, Frutiger Next could be for you (the original Frutiger font isn't digitalized with screens in mind). In general however, Arial or Lucida Grande should do the work for you, they did for years in Windows and OS X respectively. – Aadaam Oct 11 '12 at 20:42
    
Are you looking for a web safe font or a font to link via CSS? – Mike G. Oct 11 '12 at 21:55
    
Verdana for it's non-ambiguous nature! – Amandeep Jiddewar Oct 12 '12 at 5:06
2  
Define 'accessibility'. There's nothing particular accessible or inaccessible about a particular font beyond legibility. And even then, the typeface is less of an issue than all the other factors: color, contrast, x-height, type size, line spacing, line length, etc. – DA01 Oct 12 '12 at 15:11
up vote 3 down vote accepted

I particularly like Open Sans, "especially designed for legibility across print, web, and mobile interfaces."

But a few days ago Adobe released Source Sans Pro, it might be worth a try.

The primary need for type in Adobe’s open source applications has thus far been for usage within user interfaces. A second environment of perennial interest to Adobe is the realm of text typography. Thus the immediate constraints on the design were to create a set of fonts that would be both legible in short UI labels, as well as being comfortable to read in longer passages of text on screen and in print.


[Update]

As Rahul said, a nice idea is to give a look at OS fonts that are designed specifically to have very good readability.

  • Android has Droid Sans and Roboto.
  • iOS uses Helvetica Neue.
  • Windows 8 uses Segoe.
  • And Ubuntu created Ubuntu.
share|improve this answer
1  
I think the Android Roboto font was designed with these priorities in mind as well. – Rahul Oct 12 '12 at 13:49

Bad eyes like characters made with pen strokes of uniform width, like Arial or the one developed by the American Printing House for the Blind, I think it is called APHont

I have seen that serif fonts are not good, but I think it has nothing to do with the serifs. To my old eyes the fine curved strokes that go between strong verticals are invisible, leaving a forest of tree trunks with no branches, illegible.

share|improve this answer

I am working on an interface with these exact concerns. We want something very clear and optimized at small sizes, yet have it be a bit different from the default and specified in our app for consistency across platforms.

Open Sans seemed a great choice, I really love the modern look, however I found a big problem (at least with open sans served by google fonts).

The kerning is different between Firefox and Chrome- specifically, Firefox renders the characters a bit farther apart. This is a problem. It is not fixable by the letter-spacing or kerning properties.

So we've gone with Adobe's source sans for now.

share|improve this answer

Appropriately kerned san serif's.

share|improve this answer
    
Could you elaborate on your answer and maybe add a credible source as a reference? Right now your answer is a little thin. – Benny Skogberg Oct 14 '12 at 13:01
    
Well, as I'm sure you're aware it is simply common knowledge in the design field that san serif's are more readable than serif fonts. With that said however, from personal experience, I find it difficult to read san serif fonts that are too closely kerned. For example: BenchNine google.com/webfonts/specimen/BenchNine An example of a nice, readable san serif is Hammersmith One: google.com/webfonts/specimen/Hammersmith+One – pixelbacon Oct 22 '12 at 14:19

There are lots of standards and guidelines for accessibility, many of which deal with the aspects of design relating to typography and the legibility of the text. Some of the areas addressed that can be used to help guide your decision include:

  • Knowing the audience and demographics: the classic example is the elderly people that require fonts that work well in larger sizes, so don't choose a font that is designed to be very compact and read in small viewports that don't resize up well.
  • Looking at specific characters in the glyph charts: the classic examples are the difference between the character 'B' and the number '8', the difference between the uppercase letter 'I', lowercase 'l' and the number '1'
  • Look for character spacing and balance: this will improve the readability and legibility for the audience with clear and distinct spacing helping to group and differentiate between letters and words
  • Web-safe fonts: so it doesn't revert to a default font that doesn't have good accessibility characteristics (lots of web-safe fonts to choose from these days so not really an issue)
share|improve this answer

I personally love the following font for body text. They also look great on small screens.

  • Source sans pro
  • Proxima Nova
  • Roboto
  • Open Sans
  • Droid Sans
  • Lato
  • PT Sans
share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

    
i think this should be a comment rather than an answer – Devin Mar 14 at 16:55
    
I second Devin's answer. – Mayo Mar 14 at 17:04
1  
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Mayo Mar 14 at 17:05

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.