27

(EDIT): It appears this issue only exists for people who see Helvetica Neue, and Windows users do not by default see Helvetica Neue.

In the request for feedback for the new Stack Overflow theme I posted a specific problem that I see: that Helvetica Neue, while it looks very neat and professional on one hand, has poor readability, especially in the case of trying to distinguish between lower-case i and l. I was somewhat late to the party as far as feedback, but it still got some upvotes.

I always hated fonts that basically conflate uppercase I's and lower case l's, but that was only a problem when George Bush called Kim Jong Il Kim Jong the Second in a speech (they should've known to use a serif font for printed text!). But this problem goes way beyond that.

In case this renders differently for some people I'll post some pictures of what I'm seeing (ripped from my old post):

Helvetica Neue Screenshot 1: Chrome Helvetica Neue Screenshot 1

Helvetica Neue Screenshot 2: Chrome Helvetica Neue Screenshot 2

Zoomed in:

Chrome Screenshot Enlarged

Even zoomed in I can barely find space between that i and its dot.

Here's a word that is difficult to read in this font (other than the word difficult): illegitimate

Is that word supposed to have six l's in it? No. Did I just type six l's or six i's. Can you tell?

I understand that your designers do not want to design by democracy, and there are aspects of the new style I can learn to live with, but this particular issue is one I'd like to see addressed.

I literally read every lowercase i as l, and it is terribly distracting, and I figure it has to be for someone else besides me. I also think the bad readability goes beyond i and l: the kerning is "scrunched" (to use a totally official word for it) and it looks like all the words are bold. What does a bold sentence even look like in this font? Oh, that's what it looks like.

This sentence is bold.

This sentence is not bold.

(EDIT) For those not seeing the bold problem like I am, this is what I see on this page, (Chrome for Windows 7, 39.0.2171.99):

Chrome bold picture:

(EDIT 2): The comments and answer were spot-on. Judging from comments and other upvotes in the other thread this i and l issue may exist for Macs, but there was no bold issue (gah).

13
  • 1
    I agree with everything except the bold. On Chrome, 100% zoom, the bold difference is very clear. Commented Jan 16, 2015 at 20:04
  • Hmm I'm also on Chrome 100%, and I can't see a difference? Maybe that part's just me for some reason. (I've added a picture) Commented Jan 16, 2015 at 20:05
  • 3
    Your machine is borken. Try superuser.com Commented Jan 16, 2015 at 20:13
  • Running the exact same (Chrome, same version, Windows 7) and I don't see a single issue that you're mentioning. You're example word, illegitimate, looks perfectly fine to me. Check your browser's font settings to ensure you (or another user) haven't done anything weird to it.
    – Kendra
    Commented Jan 16, 2015 at 20:17
  • 1
    No-repro on my end, Chrome Version 39.0.2171.99 m @ Windows 7. I don't think it's an SO issue. Something may be potato with your Chrome.
    – Compass
    Commented Jan 16, 2015 at 20:51
  • 4
    That being said, of course, that font is ATROCIOUS. Even Comic Sans would be a better choice. puts on flame suit
    – Compass
    Commented Jan 16, 2015 at 21:07
  • 3
    I can't stand the new format. I am an old fart, and need my big, ugly fonts back! Commented Jan 16, 2015 at 23:51
  • 5
    gimme verdana :<
    – deW1
    Commented Jan 17, 2015 at 8:21
  • I installed StylesTuner in my Firefox to change the appearance of sites I don't like. Works for the Font in SO as well.
    – user330315
    Commented Jan 17, 2015 at 11:09
  • We are trying to repro this but cannot - I can't understand from the question if you're on Windows with the font installed or...? Can you please post OS, Browser, and any non-default details with fonts on your system so that we can try to repro again?
    – Nick Craver Mod
    Commented Jan 18, 2015 at 2:43
  • My first comment on the accepted answer explains (rather poorly, my apologies) that I had installed Helvetica Neue on my Win7 machine years ago. That's why I was seeing this font. On top of that I'm not sure my screenshots are of Helvetica Neue Medium, they are most likely from Helvetica Neue bold. But people on Macs continue to upvote and post about this being a problem. I don't have a Mac to test on, but I think non-bold HN is better than my screenshots - still, people who see a change on Mac seem to dislike the readability vs. Arial. My apologies again for this being a mess of a question. Commented Jan 18, 2015 at 2:53
  • 1
    As I said in a comment on an answer (you can read here: meta.stackoverflow.com/questions/283788/…) you have to enable ClearType. Chrome has this quirk that the font becomes all bold when ClearType is disabled. (Opera 12.xx shows the font as if it was console font, but weirdly scaled. That's another example of the quirks that happen with ClearType disabled.) Commented Jan 19, 2015 at 10:04
  • 1
    If you are trying to show minute details in screenshots, perhaps .jpg might not be the best image format. Commented Jan 19, 2015 at 15:06

3 Answers 3

8

Yes, we can have a better font—for some values of “better”. Font preferences are largely a matter of taste and also context-dependent.

The current overall setting at SO is font-family: "Helvetica Neue", Helvetica, Arial, sans-serif. This means that the majority sees Arial, Mac users and some others see some Helvetica, and the others see whatever happens to be the browser’s default sans-serif font. This is fairly common, and that’s the main reason for keeping it. The second reason is that there are few realistic alternatives.

Just setting font-family: sans-serif would give everyone the default sans-serif font of his browser, which cannot be that bad.

Removing font-family setting entirely would give everyone his preferred font, provided that he has set his browser to use it. This would be the best option if SO were created today. Visitors can be expected to be knowledgeable enough to set the font, at least if encouraged and instructed to. However, changing the font settings of an existing, high-volume site is something completely different. Besides, if we think that users, rather than site management, should set font family, we should think the same about font sizes (and set font sizes only relatively).

As I don’t think that’s realistic, the question is whether there are other feasible options.

What you seem to have as a problem is specific to your situation. In a normal Windows 7 system, there is no Helvetica Neue or Helvetica (unless separately installed). Windows peculiarly maps Helvetica to Arial when no font named Helvetica is present, so almost all Windows 7 users see the text in Arial. In Arial, regular and bold typeface is visibly different. So you probably have either browser settings that override fonts set at SO pages or a font named Helvetica Neue or Helvetica, possibly somehow broken (e.g. so that regular typeface is used instead of bold typeface).

7
  • 1
    I had assumed Helvetica Neue came with Windows 7, thank you for clearing that up. I've gone through dev fonts on our old svn that was used for graphics and it was one of the ones installed to deal with old company brochures. I haven't dealt with the brochures in years. NOW I FEEL LIKE A REAL WINNER :( Should have waited until I got home, that computer's a fresh install. That said the old post of mine had upvotes and some people seem to agree here, so perhaps Mac users are having this problem while the rest of us enjoy Arial's qualities of comfortable meh? My thanks to you and commentors. Commented Jan 16, 2015 at 20:51
  • 2
    What was the setting for the old (readable) SO? Yes I am on a Mac
    – mmmmmm
    Commented Jan 16, 2015 at 23:34
  • 1
    The font on superuser is: Arial,Liberation Sans,DejaVu Sans,sans-serif; I believe I remember seeing Liberation Sans when I was looking through it before, but not DejaVu. I'd guess you saw Arial (included with OS X according to en.wikipedia.org/wiki/List_of_typefaces_included_with_OS_X ) rather than Helvetica Neue. I'd think users would all prefer to see the same font if possible, so maybe Arial could be placed first on the list. Commented Jan 17, 2015 at 2:54
  • How is only using relative font sizes infeasible? Not using relative font sizes is a UX sin.
    – bcrist
    Commented Jan 17, 2015 at 8:39
  • There are plenty of ways of making sure everyone is seeing the same font, I don't understand this dark ages mentality. Google Fonts? Font Face? On my systems I use the Ubuntu font on Google and have a Font Face backup (which can be downloaded here) Commented Jan 19, 2015 at 9:48
  • 1
    @JamieBarker, the question was not about making everyone see the same font but about getting a better font.. Commented Jan 19, 2015 at 10:41
  • My comment was not in response to the question, it was a response to paragraph 2 of your answer. In particular to the last sentence. Commented Jan 19, 2015 at 14:20
4

I'm using Linux Debian and can confirm that there is a strange font - only on Stack Overflow and Meta Stack Overflow, all other Stack Exchange sites looks OK. I checked that I don't have all of those fonts - Helvetica Neue, Helvetica and Arial are all not installed on my system. The default font is Liberation Serif, and I would be fine with it, but Firefox shows me some other unreadable font; I have no idea which. Looking at what Super User has I found that they specify other fonts that are installed on my system and are much better readable:

font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;

After experimenting a bit around I found out that Helvetica seems to have a font that is displayed instead of it that isn't good readable. Can we maybe get settings like this:

body {
  font-family: Liberation Sans, Helvetica Neue, Helvetica, Arial, DejaVu Sans, sans-serif;
}
.old {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
<p>This is a test to demonstrate the readability of the font.</p>
<p class="old">This is a test to demonstrate the readability of the font.</p>

As you can see it looks much better than the old one on my system:

Enter image description here

7
  • Are you saying Helvetica is being used on your system, as in some version of it is installed? That shouldn't be the case unless you've installed it from somewhere (which generally doesn't work well outside a mac OS). Can you clarify what's happening a bit? We'll certainly take a look!
    – Nick Craver Mod
    Commented Jan 17, 2015 at 14:09
  • 1
    @NickCraver No, I don't have Helvetica, but when I specify to use Helvetica in CSS before any other installed font this poorly readable font is displayed; I have no idea what happens here. I tested with LibreOffice and it used the default font after I set it to Helvetica manually. It seems like FF is using some font instead of Helvetica, but I never told him so and it doesn't shows that in the settings as well.
    – msrd0
    Commented Jan 17, 2015 at 15:00
  • Oh yeah, please use the proposed font-family. Everything is bold-ish for me right now, and I'm having a harder time reading stuff than ever before.
    – stefan
    Commented Jan 17, 2015 at 19:38
  • @stefan If you are on Windows, enable ClearType. That's a problem when people disable ClearType. Chrome shows it all bold. Commented Jan 19, 2015 at 9:58
  • @IsmaelMiguel That's not the issue, because I have ClearType enabled.
    – stefan
    Commented Jan 19, 2015 at 14:53
  • @stefan I've seen some issues where you enable ClearType but it doesn't take effect. Did you defined the advanced settings to have no effects at all? Sorry for the English, I'm not being able to express myself correctly. If you go to windows.microsoft.com/en-us/windows/… and look for "Turn off visual effects", you will understand what I'm trying (and fail) to say. Commented Jan 19, 2015 at 15:01
  • @NickCraver Can you please fix this issue quickly? SO is currently really unreadable.
    – msrd0
    Commented Jan 26, 2015 at 12:37
2

Using any form of Helvetica at high level in a font stack will get you angry Linux users.

Because Helvetica is a very old font, and besides part of the mandatory PostScript font set, it is very common to find it in one derivative form or other on Linux systems (via Ghostscript, Tex or something similar). However those are all old Helvetica variants, intended for mostly ASCII-only text, in bitmap formats or at best outline formats without hinting (for print not screen media). So a browser will find native Helvetica on Linux, but it will look bad on screen.

There was an effort to modernise the Postscript font set on free/open systems (TEX Gyre) but it stumbled at a critical moment by making novice licensing mistakes. Since then Linux integrators have been mostly ignoring it even though the legal problems should be fixed now.

The most common sans serif font on Linux systems should be DejaVu Sans (and DejaVu Sans Mono). The most common Helvetica-ish modern font (but less prevalent, with smaller coverage, and some hinting woes) is Liberation Sans (an Arial substitute, Arial having been described as a botched Helvetica when initially release). And if you're keen on Helvetica, TeX Gyre Heros, which is a clean modern helvetica variant, but few people will have it installed.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .