{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:
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.
[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 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.
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.
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.
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.
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 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.
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
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.
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)
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?
> 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 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/
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.
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.
1. The point is that websites shouldnotspecifyafont.
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.
> 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'.
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.)
> 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.
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.
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.)
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.
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.
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.
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.
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)
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.
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.
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.
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.
"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."
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/