10

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

Improve this question
5
  • 2
    Arial? Screen-optimized, Akzidenz Grotesk-based. Another font based on it is Folio, but Arial is the screen optimized one.
    – Aadaam
    Commented Oct 11, 2012 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
    Commented Oct 11, 2012 at 20:42
  • Are you looking for a web safe font or a font to link via CSS?
    – Mike G.
    Commented Oct 11, 2012 at 21:55
  • Verdana for it's non-ambiguous nature!
    – Aman J
    Commented Oct 12, 2012 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
    Commented Oct 12, 2012 at 15:11

7 Answers 7

Reset to default
4

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.
Improve this answer
1
  • 1
    I think the Android Roboto font was designed with these priorities in mind as well.
    – Rahul
    Commented Oct 12, 2012 at 13:49
2

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)
Improve this answer
1

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.

Improve this answer
1

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.

Improve this answer
0

Appropriately kerned san serif's.

Improve this answer
2
  • 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
    Commented Oct 14, 2012 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
    – french toast
    Commented Oct 22, 2012 at 14:19
0

I just found this while looking for open source accessible fonts:

https://github.com/Orange-OpenSource/font-accessible-dfa

If you don't need open source I was just reading this article https://medium.com/chels-codes/web-typography-for-dyslexia-31bd6958d4b2 which suggests https://www.dyslexiefont.com/en/typeface/

Improve this answer
0

Recently came across B612 and been using it a text heavy SaaS product of my own. Pretty happy with the feedback.

B612 is an highly legible open source font family designed and tested to be used on aircraft cockpit screens.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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