86 comments

[ 4.4 ms ] story [ 149 ms ] thread
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.
When you know where to look, Arial really does stand for a truly ugly step-child of Helvetica. I guess it's fine only typography geeks can spot the differences, but for those people every appearance of Arial kills the game.
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.
Keeping that one bit away: http://ilovetypography.com/2007/10/06/arial-versus-helvetica...

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

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

"That's not the main topic of the writing :)"
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.

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.

Me too , it's just unreadable.

Furthermore print =/= web.

Same here. Interesting that it looks very nice at a glance, but I found it very difficult to read.
In a few years (months?) there will be articles telling everyone to quit using slab-serif fonts which are very popular right now.
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.

He's using a custom font, Adele I think. Can't read shit unless it's blown up to 150%.
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.
Isn't Adele a slab serif? Or I might be mistaking the names. Pretty sure it was a slab serif there.
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.

Spot on! Nice work, detective ;) Thanks for clarifying this.
(comment deleted)
Was going to write exactly the same thing!
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.

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)

    {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/

[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!

Even with all those hints in mind I had to look hard to see any of those differences. Only the 'O' was spelled out for Helvetica so even if I saw the difference I didn't know which font it was.

I think I got about 6 right. I just can't tell the difference, as is always the case when these font discussions come up. Last time I learned what serif vs non-serif meant though.

I agree. One of the more annoying things about people who talk too much about typography and other design topics is that they get locked into orthodoxies which are barely even opinion and certainly not even fact.

The classic example is Helvetica vs Arial. The first thing every designer learns about typography is that Arial is just an ugly copy of Helvetica and is to be avoided, but in fact, the difference between the two is so subtle that it really doesn't matter which you choose in most applications. In fact, when it comes to webpages, the fact that both of these fonts are being displayed on a computer screen means that pixelation will hide most of the differences most of the time so that they will really be equivalent. People who see the difference between the two on a website and decide one is better are falling victim to a kind of placebo effect.

My favorite example of this was a blogger who was extolling the advantages of Helvetica over Arial one day and showed two bitmapped renderings of Helvetica and Arial back-to-back. He intended this as proof of the superiority of one over the other, but he got the two samples mixed, and I had to point it out. Two samples, intended to show how one was superior, but he couldn't even tell the difference between the two.

Hahaha! It must have been awkward for him, no? xD

Well said dude. I agree with your other points too.

Don't tell me what to do. Especially when the reasons are nonsense.
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.

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...

I can't believe the author suggested Verdana or Tahoma. They look terrible.
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?

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

2. Click on the screenshots to see them fullsize.

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.

> 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.

I am not a designer, thankfully, or even more people would hate me.

I am fine with the usual serif, sans-serif, monospace etc. declarations, but I think that it should be left to the user/webbrowser to decide which particular serif font they prefer, as it is the user that has to read the text set in this font.

You will be surprised about how many people actually know that you can change your default fonts on browser. For normal non-nerd users, you make choice of good defaults.

That's why VIM is not MS Word.

> For normal non-nerd users, you make choice of good defaults.

Exactly. The browser/OS vendors make these default choices.

And then you get a completely inconsistent viewing experience across browsers and operating systems. The whole point of having a designer work on content presentation is that they can actually know what type is appropriate for the content they're presenting. You're probably going to want to use different type depending on whether you're in a header, navigation, paragraph-heavy body copy, or bullet-point lists, because different type is more readable in those circumstances. The designer also needs to be considering things like how many characters per line are displayed, because it's much easier to read copy when there are 75-80 characters per line than when there are, e.g., 200. These are all things that the browser does not do for you. Sites like c2.com's wiki are what you get when you let the browser handle everything. That is not an optimal reading experience.
There is absolutely nothing wrong with ‘inconsistent viewing experiences across browsers and operating systems’. Different operating systems are, by definition, different, and so are different browsers. Of course the ‘viewing experience’ will differ between Opera Mobile on a 4" Android device and Firefox on a 30" screen, and also between, say, Lynx and Firefox on the same screen. Differing viewing experiences are the only reason people choose different browsers.

And of course you want to use different type depending on whether you’re typesetting a header, navigation or paragraph. That’s what serif, sans-serif, monospace and even cursive and fantasy are for. You tell the browser which general family you would like to have in a particular place, and the browser/user then chooses the best family from this set depending on their device, font rendering settings etc. etc. (If you are seriously suggesting to use one serif type for the header, another serif type for the body and a third serif type for bullet point lists all on the same page I will have a hard time not trying to violate your physical integrity).

Furthermore, it is obviously important not to cram too many characters in a single line. However, if one font at a given size (which, again, you should only specify relatively to the browser’s default size) manages to fill a line with as little as fifty characters, another font will have a hard time filling that same line with considerably more than 70 – both of which are perfectly fine line lengths.

Again, I am not saying that CSS is evil and that you shouldn’t use it. I am saying that you should leave things to the browser that are best left to the browser.

I understand what you're saying, I simply disagree with you. Typography is the most important design decision that a content site makes. Leaving something that fundamental to the browser simply strikes me as an exceedingly poor choice.

(One minor point — type is much more than just font-family, as your second paragraph seems to assume.)

> Leaving something that fundamental to the browser simply strikes me as an exceedingly poor choice.

...But that's the point of the WWW. You don't know what resolution or browser or OS the user has. You don't know if they even have a screen.

I know I lost this argument sometime in 2004, but it'd be nice if people stopped trying to control where everything goes.

    I know I lost this argument sometime in 2004, but it'd be nice
    if people stopped trying to control where everything goes.
A recurring source of amusement (or frustration?) in the CIWA newsgroups back in the 90s was the young web designers whose questions began with "How do I force".

I never was able to determine if the decrease in the amount of these questions during the early 2000s was due to the decreasing popularity of Usenet or the increasing popularity of Flash.

> 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.

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.

> 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".

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.)

> 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.

The full size screen shots just reveals more of compression artifacts.
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!

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.

OP Authour (fast?)thoughts on Open Sans?
I'm in love with Open Sans for paragraph text...
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

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.
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)

Minor thing - but did you mine "quite unreadable" rather then "quiet unreadable"?
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.

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.
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.

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.
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?
Personally, I'd rather see content delivered in a sane standard format and let users apply stylesheets that match their own preferences or needs.
Assuming the users know what stylesheets are and write them.
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.
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.

(comment deleted)
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.

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.

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.

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.