Stop Using Arial and Helvetica (2013) | Hacker News Reader

Stop Using Arial and Helvetica (2013)

64notes.com

42 pointsoskarth44 comments

The article didn't really explain why they are bad, and why is Arial worse than Helvetica, and why is Helvetica Neue is better. It just went on with ramblings and snobbishness about some hinting problems and unexplained screenshots with big, intrusive labels. As a person with minimal knowledge about typography, I understand what hinting is, but I don't see the problem unless it is clearly pointed out to me. So my general thought is maybe they are not the best, they are just as bad as MP3 sound clips and JPG screenshots ;-) are -- i.e. It gets the point across for most people.

A bigger problem is, to many international users (and news publishers that have articles with names in international characters), it matters if it works. In that regard, Arial and Times New Roman are the winners hands-down. They will display whatever you can possibly imagine. Part of the reasons why many people chose those fonts over the "fucking amazing" fonts that the author suggested (Georgia included) is that most of them have abysmal international support. "日本語," "中文," "ไทย," or "Tiếng Việt," for example, reads just as well as rectangular boxes in Georgia [1] (fallbacks will cure the rectangular boxes but Georgia with fallbacks looks like crap in the case of "Tiếng Việt").

Verdana and Tahoma are not compact enough for many of the applications I was planning to do. The capitalized "I" character in Tahoma is annoying at best and plain ugly to look at at worst.

On a personal level, the Ubuntu-esque font in TFA somehow rustles my jimmies.

1: https://www.myfonts.com/fonts/microsoft/georgia/

Neither Arial nor Times New Roman have any of those non-latin languages included either; you're just seeing fallbacks when they work.

You are correct - I was wrong. "Tiếng Việt" works here without fallbacks [1], though.

My theory is that the fallbacks are designed to work well for those popular fonts so it doesn't look off when the system falls back. The consistency in the width of the stroke seems to be the most important factor to my eyes. Here [2] you can see the mix looks natural, while in Georgia in dev tool it looks inconsistent. The screenshot is made on my Ubuntu computer.

1: https://www.myfonts.com/fonts/microsoft/arial/ 2: http://imgur.com/a/hBl0A

Just because Helvetica wasn't designed or hinted for modern displays doesn't necessarily imply it looks bad on them, far from it. It's handsome typeface and its legacy lives on in typefaces like Roboto and San Francisco, which are designed and hinted for modern displays.

And as for Arial, most of the attitude directed towards it is nothing more than anti-Microsoft snobbishness.

I agree. If most of the people viewing your site/app/whatever are using high DPI screens, use whatever font you want to. Most accusations of 'looks terrible on screens!' apply to low DPI screens (which, I'll admit, most people still have, and will continue to have).

I am going to go even further, and admit most people on those low DPI screens don't think they look that terrible. Designers have extremely high standards, and often err to the side of stylish instead of readable.

You might be surprised how many people prefer 17pt comic sans to the crisp 7pt pale-gray-on-white designers usually label "joy to read" or "beautiful".

> to the crisp 7pt pale-gray-on-white designers usually label "joy to read" or "beautiful".

Perhaps because they are actually neither and many designers are not well-versed in typography. Making text beautiful (but not necessarily readable) is design; making text readable (but not necessarily beautiful) is typography. They of course, overlap, and good typography usually looks good as well.

Also, Arial is among the few fonts that displays right without anti-aliasing (aka XP era). I know people who prefer crisp fonts and have anti-aliasing turned off on their screen for whatever reason. Georgia is inferior in that regard.

>And as for Arial, most of the attitude directed towards it is nothing more than anti-Microsoft snobbishness.

I disagree. Arial features some truly revolting glyphs. The R being the worst offender. Probably of any font I can think of. The G is also pretty disgusting.

On the other hand I find it hard to make something look bad using only Helvetica.

The article nicely demonstrates that .jpg is not a good format for screenshots of text.

Yes! It really subverts the "less contrast" argument if reducing the contrast turns the screenshot into a blurry mess.

Also, I don't really buy that "less contrast" argument. Not everyone uses a HDR Retina screen, so by dialing down the contrast in CSS, you're reducing the available contrast range on sub-par screens. People with high-contrast screens should just dial down the brightness a bit.

It's generally accepted (rightly or wrongly, trends change) in UX that black on white is a "bad thing"(TM) and that a dark grey text (#333 thru #262626) makes for better readability. Or that black text on an off-white 'paper' is also better.

The problem is when inexperienced developers read about this UX rule and do both grey text and off-white bg, or use a grey text that is far too light and removed all contrast making the eyes strain to see the text at all, something that is all too common.

I use a sub-par screen regularly, a 2007 T42 screen, and the app I use most on that PC is FocusWriter, that has low contrast text aimed toward longer periods of writing .

Yes! I was squinting and trying to figure out if I agreed or disagreed with some of the points, tabbing into various sites and playing around with the inspector when I noticed that.

Helvetica is a bit of an acquired taste (I can't stand its grotesque x-height), but regardless of whether it looks good or not (which is a subjective judgement in any case), I agree with the article that it is for many people just not a very good typeface to read larger amounts of prose in.

If readability of multiple paragraphs of text is your goal, than there are many alternatives that are measurably easier to read (e.g., for sans-serif typefaces: try DejaVu Sans, Open Sans, or Calibri, or consider a typeface with serifs suitable for screens).

A lot depends on your target audience of course (age and eyesight matter as well), and HiDPI screens help a bit — but unless your demographics consist exclusively of Apple fans or mobile users only you can't rely on that. On average though reading Helvetica (and Arial) is cognitively more taxing than a lot of good alternatives. I'm surprised this isn't common knowledge in the HN crowd.

I recently went back to using Helvetica (well, Arial) more often. I have to do a ton of powerpoint presentations at work (at least two or three group reports a week).

In the beginning, my personal template used to be very complex. Header, footer, a cloud chamber image as a watermark, custom fonts. Over time, I simplified it more and more, removed the watermark, the header and footer backgrounds, and so on. The only extravaganza remaining was the font (Source Sans Pro, and Source Sans Pro Light for the titles... I found it looks quite elegant to make the titles lighter instead of bolder, they draw enough attention already.)

Long story short, today I just droped the custom font and went all Arial. I'm surprized how clean and professional it looks (like "I don't have to pretty up my slides, I have confidence in my content :-D"). I think I'm going to try this out for a while. It also has the benefit that everybody can now edit my .pptx files.

You can go full openbsd mode and switch to Comic sans :)

Could you post a slide for us to see? I've often had difficulties finding a place between "clean and professional" and "Rushed and amateurish" minimal styles.

Site seems overloaded.

Here's a mirror: https://web.archive.org/web/20160404030737/http://www.64note...

Ironically, the CSS didn't load for me, so I read this site with the "browser defaults", which do many of the things the site was complaining about.

"they are unreadable" is a pretty exaggerated and subjective statement. I don't find them unreadable at all. A little over-used in logos and such, but I don't see them particularly often in the body text of websites.

> Prevalent reason is ignorance... > Second reason, which makes most sense, is availability

I think these arguments are in wrong order. Availability and page performance are huge things in webdev. Accessibility profit from correct fonts does not always cover usability cost of waiting them to download.

Arial and Helvetica are good readable fonts which always exist on every platform and don't require additional download.

> Arial and Helvetica are good readable fonts which always exist on every platform […]

This used to be the case, but it is no longer so. The Microsoft Core Fonts are not necessarily present on each OS (except for Windows of course), although on GNU/Linux and Android (IOS as well I guess?) you often do get a set of comparable replacements that are automatically substituted. Helvetica is always present on Apple devices, but it is certainly not present on each common OS.

There are no fonts that are guaranteed to be present everywhere (and this is fine).

In HTML/CSS (and many other GUI APIs) you can always rely on getting a serif, sans-serif, or monospaced font when you use their corresponding reserved family names, and with @font-face you can load whatever you want (providing you use a font that can be redistributed by you that way). So if you want all users to see text on your website in Comic Sans Neue, then that is (trivially) possible.

There's a difference? Would be nice if author actually pointed what he thinks is a problem.

Completely agree. As someone who has zero knowledge in typography, it would have been nice to get some explanations as to why Arial and Helvetica are so horrible.

They're popular

The exaggerated x-height — the height of the 'body' of each letter compared to the height of the ascenders and descenders (the stem of the 'h' is an ascender, the letter 'x' has no ascenders or descenders, hence x-height) — the narrowness of the typeface, and the (relative) lack of distinction between letters, makes the letters harder to distinguish in large bodies of text, increasing cognitive load (your brain needs to work harder to decipher the glyph), and thus reducing readability.

>Programmers spend shit loads of time staring at text (code) on their screens and most of them prefer low contrast themes. For a good reason, it's easy on eyes.

Oh? Most programmers know how to adjust the brightness and contrast on their monitors. If you have more contrast than you can use then your text is too large.

I started using 'sans serif' for almost everything. Because every device, OS, user is different. So let them decide what sans serif is.

In CSS you want to use the special name 'sans-serif' (note the dash) to indicate the default user configurable sans-serif font.

That's a great idea in theory, but bear in mind that (in most target audiences) few people will know how to change the default typeface and even fewer will bother. I'd be willing to bet that 95 percent of your visitors will be seeing Arial, Helvetica or Roboto.

I'm not trying to dissuade you, just make you aware (if you weren't already) that you're making a choice by not making a choice.

You can pry Helvetica from my cold, dead, hands.

He should write 2 lines of css for quora and use the browser stylish extention.

I just recently made wikipedia sane for myself: https://userstyles.org/styles/137180/clean-wikipedia-minimal... (and I like black on white and change screen brightness if I want less contrast)

Keep in mind that there's a reason for Wikipedia's slightly cluttered interface: it's meant for editors as much as it is for readers—although I agree that paragraphs are too wide, a better strategy for line wrapping than letting lines use the entire width of the screen would be good.

You may like Wikipedia's "mobile" site: https://en.m.wikipedia.org/wiki/Launch_loop

I understand a bit, but I think that's no excuse for the clutter :)

The mobile site on desktop looks indeed great, quite close to what I built (just sans-serif, but that's a matter of taste).

Bear in mind that Arial and other fonts will look quite different across platforms depending on how they render text. Small text on Windows is optimised for crispness and pixel-aligned (so it looks more like the old non-antialiased and pixel fonts; personally I think it looks hideous), whereas on macOS/iOS it scales smoothly at all sizes.

As a UX/Typography rant post, it explain very badly why those two fonts suck.

What's with the jpeg images and labels? I had to closely look at it to see when did font A ended and font B started.

Author should've explained better imo, as I don't think I got the message, except "don't use it because...reasons"

I'd be interested to see what the results would be if you took that jpeg and asked 1000 people which font was best.

Also, if the designer is focusing on "readable" they need to make the text of the jpegs very much larger.

So the author speaks about readability and then argues which Sans Serif font is better?

My answer is: he chasing the wrong animal. The serif fonts are more readable for me. The serifs matter. I hope I'm still not in a minority.

am i wrong if i think in most of his screenshots looks helvetica or arial as superior don't compared to his recommendation? his recommended fonts either waste lot of screen estate or look childish or both

Yeah, for me the article proves the exact opposite of what it was set out to prove. Verdana today is an abomination (just like DejaVu fonts), Tahoma is a little better.

Arial though renders well on low pixel density devices (like todays FHD screens) and when rendering small characters, that is, I think, why it is still used in many business webapps.

Well, that title certainly gets this to the front page.

Glad to see some Georgia love, though.

My own love for Georgia is basically due to distinguishing oO0 and |l1. It also helps that it looks nice. But it still seems uncommon, so I appreciate its increased exposure too.

Verdana has problems as well: too much spacing at anything but tiny font sizes.

I switched to Georgia for all of my paperwork... I love it :)

I know all the UX "rules" say don't use a serif font on a screen, but I love me some Georgia, Bookman et al. There's nothing like a well designed serif font, imo. Just like the common hate of Comic Sans, in the right context, it's a good font.

What we really need is to purge ourselves of these so-called rules and design sentient fonts that can speak up and say "I can't go there! I'm serif/sans/fantasy/mono!".

Reply on news.ycombinator.com