
Stop Using Arial & Helvetica - playhard
http://www.64notes.com/design/stop-helvetica-arial/
======
neya

        {Arial) It's just a bad copy of Helvetica - a really bad one. It's just ugly.
    

The author mixes personal preference whilst aiming to clarify technically
which I am not very fond of.

As a designer, if there's anything I learnt, all this doesn't matter. These
are basically tools. A good designer will make even the stupidest font (if
such a thing exists!) look beautiful. A bad designer will make bad designs no
matter what. Remember, a lazy carpenter will always blame his tools. Sure,
good fonts give you that extra 'edge'. But remember, right now we don't have a
very good way of displaying custom fonts over the web without some kind of
Javascript hack or increasing the page loading time by directly loading the
font file and/or without having alignment issues across various browsers.

Also, there are uneven artificats rendered across font edges in some browsers
which only worsens the User experience of using a custom font. Thus you'd be
much much better off using arial or the likes of it.

Upon reading the author's article you might be convinced that one font is
better than the other, but given the time, I can lead you on an infinite loop
comparing various fonts side by side saying something is better than Helvetica
and something else is better than this something, and so on. The real fact is,
when you read content, the font doesn't matter much unless it is pretty bad.
So if you read a lengthy article on a blog and if I just asked you what font
it was, I'm sure you wouldn't have an immediate answer, unless you are too
much into design, etc.[1]

[1]In fact, I'd like to present the author (and all of you) a challenge:

<http://www.ironicsans.com/helvarialquiz/>

~~~
Osmium
[Quiz spoilers] If anyone's struggling with the quiz, key things to look out
for are slanted vs horizontal lines (e.g. in 't'), the capital R, and general
balance (e.g. the 'O' in Helvetica is more circular). It's the combination of
these that make the Helvetica logos, generally, look "nicer."

Edit: that said, I challenge anyone to reliably describe which "Mattel" is the
correct version!

~~~
js2
Helvetica uses varying widths. Ariel tends toward fixed widths. For other
hints, see previous discussion -
<https://news.ycombinator.com/item?id=5086793>

------
kstenerud
I looked at it, stared at it, stared at it again. I cannot tell the difference
between Arial and Helvetica. And though I could tell the difference between
Helvetica and Lucidia, I don't get what the issue is supposed to be, except
that Helvetica seems a bit smaller.

~~~
kingsidharth
Keeping that one bit away: [http://ilovetypography.com/2007/10/06/arial-
versus-helvetica...](http://ilovetypography.com/2007/10/06/arial-versus-
helvetica/)

That's not the main topic of the writing :)

~~~
kstenerud
The point being, if it takes 3x magnification and careful examination (after
having been coached) to spot any difference, it's hardly worth worrying over,
let alone admonishing use of one over the other.

It just becomes another case of <http://www.youtube.com/watch?v=qoIvd3zzu4Y>

~~~
kingsidharth
"That's not the main topic of the writing :)"

------
crikli
The custom font he's using made my eyes schitz out. Switched it to Arial and
it became much more readable.

This just seems like font snobbery more than anything else.

~~~
onli
He's using Georgia, and recommending it. But a not so unpopular position is
that serif-fonts don't fit to the web, given the low dpi of current monitors.
Maybe if you target tablets.

Besides: > It's good to keep it in golden ration or between 1.5em to 1.6em

I can't take someone seriously who believes in the golden ratio. That is
debunked into oblivion.

And: Arial is different then helvetica, but there are not many technical
issues with it.

~~~
jvzr
He's using a custom font, Adele I think. Can't read shit unless it's blown up
to 150%.

~~~
onli
Ah, alright. It's Georgia on my system as the Adele font is not loading (maybe
Ghostery, dunno). Strange that the fallback of a sans-serif font is a serif
one, but well.

~~~
jvzr
Isn't Adele a slab serif? Or I might be mistaking the names. Pretty sure it
was a slab serif there.

~~~
onli
There is the font Adele and the font Adelle -.-

<https://typekit.com/fonts/adelle-web> is indeed a slab serif, whatever that
is. The css is

> "Adelle","Droid Serif",Georgia,serif

so it fits together after all, at least from that point of view.

~~~
jvzr
Spot on! Nice work, detective ;) Thanks for clarifying this.

------
sejje
Since I literally can't see the difference in the Arial and Helvetica, even
side by side, I'm going to say it's a pretty good rip-off. I don't know
exactly what you're looking at, but I assure you that the average person has
no idea they're different.

~~~
Osmium
This will probably help:

<http://www.ironicsans.com/helvarialquiz/>

It really stands out in e.g. logos, but less so in body text. I don't
understand this author's vehemence against them though...

------
lysium
I would have appreciated it, if the article tells me _which_ difference I am
supposed to see. I know, the fonts look different, but why is one deemed
'superior' to the other?

In the section 'Alternatives', it proposes Verdana, but in the comparison,
Arial looks sharper than Verdana, even if you open the image. Further, Arial
can put "more" letters into one line. Maybe it is a coincidence, but I'd like
to have seen number 15 of the Hacker News list shown in the Verdana font.

I'm not impressed yet.

------
timclark
What is it with all these web pages stealing my back button lately? This site
adds three pages to my browser history for one click.

Also, in my totally non-objective opinion, the font used on that page feels
really shouty to me.

------
powrtoch
This article seems to rest on the totally false premise that there's no
difference between setting headers and setting body text.

Arial is terrific for body text, because at small font sizes the modifications
separating it from Helvetica are basically impossible to even render. Since it
has all the hinting to ensure it displays nicely at small sizes, it's a best-
of-both-worlds scenario. And Helvetica looks pretty good at large font-sizes,
even on Windows systems (admittedly less smooth, but the readability concern
goes away). There's no reason to stop using these, just play them to their
strengths.

Likewise, Verdana and Georgia are terrible for headers. Not for any technical
reason like hinting, but simply because they were designed to be extremely
legible on computer monitors at small font sizes, at the expense of actually
looking good when blown up. Hence Verdanagate:
<http://en.wikipedia.org/wiki/IKEA#Verdana_typeface>

------
shared4you
Agree with the OP. Just use Verdana (sans-serif) and Georgia (serif). If you
are on Debain (and its children) you can install "ttf-mscorefonts-installer"
-- which provides Andale Mono, Arial, Verdana, Georgia, Comic Sans, Times New
Roman and Courier New.

[0]: [https://launchpad.net/ubuntu/precise/+package/ttf-
mscorefont...](https://launchpad.net/ubuntu/precise/+package/ttf-mscorefonts-
installer)

~~~
bluedino
I can't believe the author suggested Verdana or Tahoma. They look terrible.

------
everyone
This is pretty ironic!

Does the writer not know that the font he chooses to use does not render
properly without OS level font smoothing?

In fact the increasing popularity of these 'fancy' fonts in websites is a
problem for me. They render very aliased on my machine at any zoom level (I
always have windows set to maximum performance vs fanciness)

------
Samuel_Michon
I find it hard taking advice on typography from someone who thinks using slab
serif fonts as body text is A-OK. Reading that page made my eyes bleed.

~~~
subsection1h
So it's your position that Jill Shimabukuro shouldn't have won any awards for
the design of the 16th edition of The Chicago Manual of Style because it uses
FF Tisa for the body text?

~~~
Samuel_Michon
Because you can’t see the difference: sure.

------
jwarren
Just a terrible article.

    
    
        "Arial and Helvetica are the default font stack for most browsers and for most of the websites. That's bad, really really bad. Arial and Helvetica suck on web and for paragraphs of text - they are quiet *(sic)* unreadable (as compared to many other typefaces created specifically for web). And Helvetica looks ugly without proper kerning and Arial is just an ugly bastard son of Helvetica."
    

This is wildly ignorant linkbait. Whether or not Arial is a rip-off of
Helvetica or not is irrelevant to his argument. They're both excellent body
fonts, and the versions on your computer have had countless man hours spent on
hinting them perfectly for the screen.

    
    
        "Helvetica Neue was recreated for web."
    

Nope. It was created in 1983, as a more consistent type family. [1]

Okay, this bit is brilliant in it's ignorance:

    
    
        **"So Why do People Use Them?"**
        "Prevalent reason is ignorance. People just don't care/know about design - let alone typography."
    

This is jaw-droppingly misinformed. They're beautifully neutral typefaces that
work very well across tons of different situations. There's a reason that
font-family: 'sans-serif' defaults to Arial and Helvetica. To suggest that
someone building a website doesn't make a conscious decision about one of the
most important choices in their design is highly unlikely

    
    
        "Second reason, which makes most sense, is availability[1]. Arial is available almost everywhere (~99% Macs and Windows machines have it)."
    

Now this is the one spot-on point. This has classically been a very, very good
reason to use one of the canonical web-safe fonts.

    
    
        "Safe bet and cross-platform compatibility - Arial was created in image of Helvetica. They are very much same in terms of x-height and other measurements. So they are the safest thing to do! Different x-height can break your layout! It's easy to work with defaults no matter how bad they are."
    

I suppose that's dependant on your design, but it shouldn't be so reliant on
x-height as to actually break it. If you're using a custom font, you should
really make sure you have a web-safe font in your font stack, and that your
site works well with it.

    
    
        "They like it. (Gulp!) Well however much I'd like to say "to each; his own" - still there are good things from mad. Justin Bieber can never be compared to Tony Bennett - he is just not that good technically no matter what poplar taste is. Arial is shit and Helvetica hardly works as good on web."
    

Well, I suppose there's no accounting for taste.

[1]
[http://en.wikipedia.org/wiki/Helvetica#Neue_Helvetica_.28198...](http://en.wikipedia.org/wiki/Helvetica#Neue_Helvetica_.281983.29)

------
Kiro
Don't tell me what to do. Especially when the reasons are nonsense.

------
Sakes
He makes some good points, and gives good alternatives. Definitely worth the
read. I bookmarked it and will run over it later in more detail.

But gotta say, I did not like the font that he chose to start his article in.
But what do I know, I'm just a User!

------
mnicole
What a pretentious article.

> Do NOT Use Black on White

> The only reason I don't visit Quora is bad typography. Yeah, I am that
> crazy!

Meanwhile, OP's body copy is a heavy slab-serif, his headers are a custom
sans-serif without any margins or visual differences besides 6px in size.
Using something like <http://www.gridlover.net/>, you can accomplish better
readability and hierarchy.

He suggests type based on what's available on your OS despite the fact that
those should be your fallbacks, not your defaults now. We've got a brilliant
library of web type that look good and sites like
<http://hellohappy.org/beautiful-web-type/> \+ <http://font-combinator.com/>
\+ <http://daneden.me/type/> help to figure out what emotion you're going for.

He also completely ignores the weights and families available with Helvetica
that truly make it superior to Arial that you can call for most OS X users,
and fallback with Arial for Windows folks. <http://css-
tricks.com/snippets/css/better-helvetica/>

~~~
JLehtinen
I'm also not a big fan of his use of hyphens '-' for dashes '—', since we're
so passionate about typography.

~~~
mnicole
Once you &mdash;, you never go back.

------
lucb1e
I will quote/paraphrase what a good friend of mine said on MSN: "Lol I wanted
to ask you what font you used on your website because it looked good, but it
turns out it was just Arial"

And I had the same numerous times with both Arial and other default fonts. The
trick is line spacing, font size, and line width. Either that, or it's
personal preference and the OP's preference differs from mine and most people
I asked about it.

I personally have a much bigger problem with _not_ using standard fonts.
They're usually broken in two or three browsers (testing in Firefox, Chrome or
Internet Explorer 9), and even if they work I find them ugly more often than
not, or at the very least they're less readable than normal fonts. The most
used tool in my browser is Inspect Element to reset fonts on many blogs to the
browser's default.

I can't disagree with his love for Georgia as a serif font, but even Times New
Roman can be pretty (yes, pretty) if used correctly. It doesn't take very long
(perhaps 30 minutes the first time, 10 minutes after that) to set the correct
settings for spacing and the like. So I do agree that Georgia is usually the
superior choice, but Times New Roman is not hideous per se.

------
claudius
I don’t want to argue whether to use Arial or Helvetica, as I personally think
that the proper thing to do is to use sans-serif and let the preferences of
the reader/webbrowser sort this out, but:

What happened to these screenshots? It’s not just the scaling-down for the
article (which shouldn’t happen if you want to make a point about fonts…),
even the original images look weird to say the least.

Overzealous anti-aliasing?

~~~
kingsidharth
1\. Have you read the article? It's not Arial "OR" Helvetica.

2\. Click on the screenshots to see them fullsize.

~~~
claudius
1\. The point is that websites _should_ _not_ _specify_ _a_ _font_.

2\. The fullsize screenshots are nearly as ugly as the scaled-down versions. I
searched for the text and the Wired article is rendered nicely without funky
subpixels blurring everything for me (on Xfce/Opera, 1440x900). If the
standard of font rendering on other devices is as bad as appears to be shown
in the screenshots, this would be yet another reason not to worry about
specific fonts but fix the rendering first.

~~~
nbouscal
> The point is that websites should not specify a font.

Seriously? One of the most important aspects of your design, and you want to
leave it up to the browser? Web design is 95% typography. If your website
doesn't specify a font you aren't doing your job as a designer.

~~~
dragonwriter
> Seriously? One of the most important aspects of your design

Most websites need a lot less design than they have. There are properties
that, for branding or other reasons, need to exert full control of their look
and feel that need strong design, but most websites don't, and over-design
gets in the way of disseminating information to users.

> If your website doesn't specify a font you aren't doing your job as a
> designer.

Not every website _needs_ anyone doing a job as a designer. There certainly
are very important places for design on the web, but the web as a whole is an
information dissemination platform, not a full employment program for graphic
designers.

~~~
nbouscal
You and I are using the same word, 'design', to mean two completely different
things. To me, design is _all about_ disseminating information to users.
That's why designers should care so much about typography - readability is
absolutely key to a good design.

I wish there were a good specific word for what you're referring to as
'design'. It's very prevalent, and in most cases it's actually a great example
of poor design.

~~~
dragonwriter
> You and I are using the same word, 'design', to mean two completely
> different things.

I don't think we are. We just have different opinions about the need for it.

> To me, design is all about disseminating information to users.

Design is about _presentation_ of information to users, not dissemination.

> That's why designers should care so much about typography - readability is
> absolutely key to a good design.

Readability is subjective and not essential to dissemination; design is about
controlling presentation, rather than leaving it to system through which the
user accesses the information. For information that doesn't have specialized
presentation needs, this will make the presentation _worse_ for people that
have their defaults well tuned for themselves in the name of making it better-
than-untuned-results (ideally) for the average user.

> I wish there were a good specific word for what you're referring to as
> 'design'.

There is. "Design".

~~~
nbouscal
Readability is not subjective. Small font sizes, low contrast, bad kerning,
and many other things _objectively_ decrease readability.

It sounds like you think the web should be a collection of RSS feeds and APIs.
That's interesting and all, but that's not even remotely what the web is. The
system through which the user accesses web information (aka browser) is only
well-tuned for a very small minority of users, because the vast majority don't
even know that they _can_ tune their browser, let alone think that they
should. Further, I've never seen a browser where the defaults make for
excellent readability. In every case I've seen, they don't even make for
_acceptable_ readability.

> There is. "Design".

Appreciate the snark, but I was talking about a _specific_ word for what I
understood you to be talking about. Design is the exact opposite of a specific
word. It's so general as to be downright vague. (Also, since you said you
didn't think we were talking about different things, this comment really isn't
useful.)

~~~
dragonwriter
> Readability is not subjective.

Yes, it is.

> Small font sizes, low contrast, bad kerning, and many other things
> objectively decrease readability.

There are elements of design which affect readability more consistently across
individual users than other elements of design do, but that doesn't stop
readability from being subjective.

------
talmand
Ah, font snobbery is truly a strange thing.

What if, stick with me here, people like Arial? What if the website's audience
likes the fonts that this font geek doesn't like?

Besides, as is eventually pointed out, most web sites were designed with
availability as the main criteria behind chosen fonts, not design. That's why
you can specify more than one as fallbacks. If you design a website totally
around a specific font then what happens if the font isn't available?

True, we have web fonts today. If you start a new project then seriously
consider using a web font. But this type of judgmental opinion isn't fair to
websites designed before the rise of the web font. For some, switching to a
web font for an established design may be a significant undertaking with
unforeseen consequences.

EDIT: Read the guy's about page. He's apparently a young guy that already
knows everything. His description of himself doesn't portray him as much of a
professional.

------
JLehtinen
I don't even know where to start with this post.

Arial has its flaws (what font doesn't?), but to call it "a bad copy of
Helvetica" is just plain wrong. If Arial is a copy of Helvetica, then
Helvetica is a copy of Akzidenz Grotesk, and so on.

Traditional web fonts had their place and might still be a valid choice for
some sites, but with higher resolution screens becoming more and more
commonplace solely recommending "web fonts" no longer makes sense. If
anything, Verdana and Georgia look clunky on retina screens (like they do in
print), whereas classic fonts aimed for print have regained their subtle
shapes and now look elegant on screens.

Yes, Lucida has a larger x-height and thus looks 'more readable' to a lot of
people — but only at the same pt size. I'm so used to Helvetica's word shapes
and tight letterspacing, though, that I'll have to disagree on that as well.

------
itsybitsycoder
Feels a little ironic that the wrong image format is used in an article
talking about the details of web design. In some of these pictures, both the
"good" and "bad" fonts look bad to me, but I can't tell if it's because of the
compression or not. In others, the "bad" font looks better to me, but I'm
guessing this is because the "good" font was more aliased before it was
compressed. The lower-contrast text examples also look blurrier than the high-
contrast ones. Images with relatively few colors (like pictures of text)
should be stored as PNG, especially if being able to pore over the details is
important. This might be a good article with a good point (I don't know much
about typefaces), but I feel like the examples really work against the
article.

------
DanBC
Thanks for this. I like the actual suggestions for what should be done, rather
than just ranting against poor practice.

This article doesn't mention margin sizing, nor maximum column widths.

------
etjossem
I'm going to suggest something radical. Spell-checking one's work before
publishing it is more important to design on the web than one's choice of
font. This is a provocative article, but it has so many typos that I can't
take the readability argument seriously.

A couple things I saw (at least in the version I read): Hacker News and Justin
Bieber are both "poplar." Programmers spend "shit laods" of time. And
Helvetica has issues with "it's availability" on Windows.

------
Ma8ee
JPEGs for text examples! I'm sorry, but a big part of the apparent differences
between the different font examples comes from compression artifacts. It's not
that Helvetica is a inherently brighter font than Lucinda Grand, see e.g. the
first example. Just judging from the images, the difference in readability of
the different fonts might come as much from how well they compress as anything
else.

~~~
stevep98
The images are also scaled down to 82% of the original size when viewed inline
in the document.

Another related issue is that when you screenshot something, you're not
capturing any of the enhancements that are made by technology such as
Cleartype for rendering fonts on LCD displays.
(<http://www.microsoft.com/typography/ClearTypeInfo.mspx>)

------
ebbv
This reminds me of audiophiles who say that listening to music on anything
other than vinyl through a Class A tube amp on [favorite speaker manufacturer]
speakers is a waste of time.

Grow up.

Most people cannot appreciate the difference. Taste is subjective. Look at the
Billboard Top 40.

You do what you want, other people will do what they want.

If someone ASKS for your opinion, of course share it with them. But writing
screeds about how the rest of the world needs to conform to your tastes is
hilariously stupid.

~~~
kingsidharth
Much of UX design is suck. People can't tell a difference, not at least in
detail. If I were to change color of a button, maybe you'd think no one cared.

But such things do make a difference.

~~~
talmand
I think you just proved the point, most people will not notice, nor care,
about a change in fonts from one family to another if they are similar.

If one were to change a button from red to a slightly different red, which is
a detail, then most will not notice nor care. Change it from red to green then
there could possibly be a change in response; be it good or bad.

~~~
Ma8ee
Even if they don't care or consciously notice, the small details do make the
experience. Even the reader who can't name even one font of knows what serifs
are will experience the different fonts differently. One site will make his
reading a little less comfortable, maybe make him tense some small facial
muscles, and after a few minutes he just closes the tab because for some
reason he doesn't even care to articulate he just feel slightly annoyed with
the site. Another site has a design with a calming and harmonic color scheme,
few distractions, a font that can be read without strain and our reader
finishing his reading in a good mode and adds the site to his RSS feed. :)

Of course the most perfect site won't save crappy content, but the ugly site's
content may never be read. It's similar to all the non verbal clues in human
interaction. The tone of your voice and even the color of your shirt do make a
difference.

~~~
talmand
But you are talking about several elements across the board that I would agree
would have some sort of impact.

I'm just saying that changing from one font to another that are almost
identical, and to the layman are identical, will not have much impact in the
long run.

------
jonknee
Once you find the perfect font, with it's microscopic differences set just so,
you'll realize you're on the web and not print so fonts look different to your
users. High DPI, low DPI, Windows/Mac/Linux/iOS/Android, etc etc. I wouldn't
waste much time fretting the differences between Helvetica and Arial unless
you're printing the result.

------
blunte
Verdana is lovely, but it takes up too much space. This is especially a
problem in information-dense contexts. Ariel fits much better.

It's also interesting to me that the author chose a paragraph font that I find
too heavy and too "interesting". Reading it was unpleasant.

------
jackalope
Personally, I'd rather see content delivered in a sane standard format and let
users apply stylesheets that match their own preferences or needs.

~~~
kingsidharth
Assuming the users know what stylesheets are and write them.

------
JosephRedfern
Minor thing - but did you mine "quite unreadable" rather then "quiet
unreadable"?

------
sannu
OP Authour (fast?)thoughts on Open Sans?

~~~
blunte
I'm in love with Open Sans for paragraph text...

------
kylesethgray
> …shit laods of time

typo

------
GhotiFish
Ok. I don't see any aesthetic difference. I can read all text equally well.
All text looks easily parsable, nothing looks ugly.

I dislike this article.

------
jonas_maj
Calibri is where it is at. Should be the universal font for documents.

