Stop Using Arial & Helvetica
64notes.com
64notes.com
{Arial) It's just a bad copy of Helvetica - a really bad one. It's just ugly.
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:
Edit: that said, I challenge anyone to reliably describe which "Mattel" is the correct version!
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.
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.
Well said dude. I agree with your other points too.
That's not the main topic of the writing :)
It just becomes another case of http://www.youtube.com/watch?v=qoIvd3zzu4Y
This just seems like font snobbery more than anything else.
Furthermore print =/= web.
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.
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.
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...
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.
Also, in my totally non-objective opinion, the font used on that page feels really shouty to me.
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
[0]: https://launchpad.net/ubuntu/precise/+package/ttf-mscorefont...
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 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."
"Helvetica Neue was recreated for web."
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."
"Second reason, which makes most sense, is availability[1]. Arial is available almost everywhere (~99% Macs and Windows machines have it)."
"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."
"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."
[1] http://en.wikipedia.org/wiki/Helvetica#Neue_Helvetica_.28198...
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!
> 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/
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.
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?
2. Click on the screenshots to see them fullsize.
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.
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 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.
That's why VIM is not MS Word.
Exactly. The browser/OS vendors make these default choices.
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.
(One minor point — type is much more than just font-family, as your second paragraph seems to assume.)
...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.
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.
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.
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.
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".
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.)
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.
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.
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.
This article doesn't mention margin sizing, nor maximum column widths.
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.
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)
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.
But such things do make a difference.
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.
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.
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.
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.
typo
I dislike this article.