12 ms·

Stop Using Arial & Helvetica

39 points by playhard 13y ago

sejje 13y ago
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.
- jvzr 13y ago
  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.
- Osmium 13y ago
  This will probably help: http://www.ironicsans.com/helvarialquiz/ 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...
kstenerud 13y ago
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 13y ago
  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 13y ago
    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 http://www.youtube.com/watch?v=qoIvd3zzu4Y
    - kingsidharth 13y ago
      "That's not the main topic of the writing :)"
lysium 13y ago
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.
crikli 13y ago
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.
- camus 13y ago
  Me too , it's just unreadable. Furthermore print =/= web.
- damoncali 13y ago
  Same here. Interesting that it looks very nice at a glance, but I found it very difficult to read.
- creodesigner 13y ago
  Agreed.
- bluedino 13y ago
  In a few years (months?) there will be articles telling everyone to quit using slab-serif fonts which are very popular right now.
- onli 13y ago
  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 13y ago
    He's using a custom font, Adele I think. Can't read shit unless it's blown up to 150%.
    - onli 13y ago
timclark 13y ago
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.
everyone 13y ago
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)
- TheShadowFog 13y ago
  Fix for the smoothing: http://blogs.adobe.com/typblography/2010/09/turning-on-cleartype-on-windows-xp.html http://blogs.adobe.com/typblography/2010/09/turning-on-clear...
neya 13y ago
{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/ http://www.ironicsans.com/helvarialquiz/
- Osmium 13y ago
  [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 13y ago
    Helvetica uses varying widths. Ariel tends toward fixed widths. For other hints, see previous discussion - https://news.ycombinator.com/item?id=5086793 https://news.ycombinator.com/item?id=5086793
Kiro 13y ago
Don't tell me what to do. Especially when the reasons are nonsense.
DanBC 13y ago
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.
shared4you 13y ago
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-mscorefonts-installer https://launchpad.net/ubuntu/precise/+package/ttf-mscorefont...
- bluedino 13y ago
  I can't believe the author suggested Verdana or Tahoma. They look terrible.
claudius 13y ago
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 13y ago
  1. Have you read the article? It's not Arial "OR" Helvetica. 2. Click on the screenshots to see them fullsize.
  - claudius 13y ago
    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 13y ago
      > 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.
      - claudius 13y ago
        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.
Sakes 13y ago
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!
lucb1e 13y ago
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.
sannu 13y ago
OP Authour (fast?)thoughts on Open Sans?
- blunte 13y ago
  I'm in love with Open Sans for paragraph text...
powrtoch 13y ago
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 http://en.wikipedia.org/wiki/IKEA#Verdana_typeface
kylesethgray 13y ago
> …shit laods of time typo
Ma8ee 13y ago
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 13y ago
  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 http://www.microsoft.com/typography/ClearTypeInfo.mspx)
JosephRedfern 13y ago
Minor thing - but did you mine "quite unreadable" rather then "quiet unreadable"?
blunte 13y ago
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.
jonknee 13y ago
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.
GhotiFish 13y ago
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.
Samuel_Michon 13y ago
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 13y ago
  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 13y ago
    Because you can’t see the difference: sure.
jackalope 13y ago
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 13y ago
  Assuming the users know what stylesheets are and write them.
itsybitsycoder 13y ago
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.
ebbv 13y ago
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.
- AlexanderDhoore 13y ago
  Relevant XKCD: http://xkcd.com/915/ http://xkcd.com/915/
- deleted 13y ago
  [deleted]
- kingsidharth 13y ago
  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 13y ago
    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 13y ago
      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 13y ago
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.
etjossem 13y ago
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.
jonas_maj 13y ago
Calibri is where it is at. Should be the universal font for documents.
JLehtinen 13y ago
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.
JLehtinen 13y ago
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 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 look elegant on screen. 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.
mnicole 13y ago
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/ 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://hellohappy.org/beautiful-web-type/ + http://font-combinator.com/ http://font-combinator.com/ + http://daneden.me/type/ 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/ http://css-tricks.com/snippets/css/better-helvetica/
- JLehtinen 13y ago
  I'm also not a big fan of his use of hyphens '-' for dashes '—', since we're so passionate about typography.
  - mnicole 13y ago
    Once you —, you never go back.
jwarren 13y ago
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_.281983.29 http://en.wikipedia.org/wiki/Helvetica#Neue_Helvetica_.28198...

39 points by playhard 13y ago

sejje 13y ago

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.

jvzr 13y ago
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.
Osmium 13y ago
This will probably help: http://www.ironicsans.com/helvarialquiz/ 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...

kstenerud 13y ago

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 13y ago
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 13y ago
  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 http://www.youtube.com/watch?v=qoIvd3zzu4Y
  - kingsidharth 13y ago
    "That's not the main topic of the writing :)"

lysium 13y ago

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.

crikli 13y ago

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.

camus 13y ago
Me too , it's just unreadable. Furthermore print =/= web.
damoncali 13y ago
Same here. Interesting that it looks very nice at a glance, but I found it very difficult to read.
creodesigner 13y ago
Agreed.
bluedino 13y ago
In a few years (months?) there will be articles telling everyone to quit using slab-serif fonts which are very popular right now.
onli 13y ago
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 13y ago
  He's using a custom font, Adele I think. Can't read shit unless it's blown up to 150%.
  - onli 13y ago

timclark 13y ago

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.

everyone 13y ago

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)

TheShadowFog 13y ago
Fix for the smoothing: http://blogs.adobe.com/typblography/2010/09/turning-on-cleartype-on-windows-xp.html http://blogs.adobe.com/typblography/2010/09/turning-on-clear...

neya 13y ago

{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/ http://www.ironicsans.com/helvarialquiz/

Osmium 13y ago
[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 13y ago
  Helvetica uses varying widths. Ariel tends toward fixed widths. For other hints, see previous discussion - https://news.ycombinator.com/item?id=5086793 https://news.ycombinator.com/item?id=5086793

Kiro 13y ago

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

DanBC 13y ago

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.

shared4you 13y ago

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-mscorefonts-installer https://launchpad.net/ubuntu/precise/+package/ttf-mscorefont...

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

claudius 13y ago

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 13y ago
1. Have you read the article? It's not Arial "OR" Helvetica. 2. Click on the screenshots to see them fullsize.
- claudius 13y ago
  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 13y ago
    > 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.
    - claudius 13y ago
      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.

Sakes 13y ago

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!

lucb1e 13y ago

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.

sannu 13y ago

OP Authour (fast?)thoughts on Open Sans?

blunte 13y ago
I'm in love with Open Sans for paragraph text...

powrtoch 13y ago

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 http://en.wikipedia.org/wiki/IKEA#Verdana_typeface

kylesethgray 13y ago

> …shit laods of time typo

Ma8ee 13y ago

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 13y ago
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 http://www.microsoft.com/typography/ClearTypeInfo.mspx)

JosephRedfern 13y ago

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

blunte 13y ago

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.

jonknee 13y ago

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.

GhotiFish 13y ago

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.

Samuel_Michon 13y ago

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 13y ago
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 13y ago
  Because you can’t see the difference: sure.

jackalope 13y ago

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 13y ago
Assuming the users know what stylesheets are and write them.

itsybitsycoder 13y ago

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.

ebbv 13y ago

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.

AlexanderDhoore 13y ago
Relevant XKCD: http://xkcd.com/915/ http://xkcd.com/915/
deleted 13y ago
[deleted]
kingsidharth 13y ago
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 13y ago
  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 13y ago
    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 13y ago

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.

etjossem 13y ago

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.

jonas_maj 13y ago

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

JLehtinen 13y ago

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.

JLehtinen 13y ago

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 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 look elegant on screen. 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.

mnicole 13y ago

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/ 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://hellohappy.org/beautiful-web-type/ + http://font-combinator.com/ http://font-combinator.com/ + http://daneden.me/type/ 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/ http://css-tricks.com/snippets/css/better-helvetica/

JLehtinen 13y ago
I'm also not a big fan of his use of hyphens '-' for dashes '—', since we're so passionate about typography.
- mnicole 13y ago
  Once you —, you never go back.

jwarren 13y ago

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_.281983.29 http://en.wikipedia.org/wiki/Helvetica#Neue_Helvetica_.28198...