Helvetica or Arial as base font in CSS?

Question

One of my friend told me "Use font family: helvetica, arial, sans-serif in your website", when I asked him why then "blank" he don't know, some usability expert in his company told him this thing.

But when I tried helvetica, arial, sans-serif then I noticed that I bold and un-bold is not working properly with this font whereas I use arial, helvetica, sans-serif this then its working fine. note the difference here: http://hell.meiert.org/core/html/helvetica-arial.html

I googled on this, but nowhere seen anything much convincing to me. Then I SO'd and found a post http://stackoverflow.com/questions/879769/is-helvetica-a-browser-base-font

So I want to ask that why Helvetica is recommended, and in the same post one of answers says "If you want Helvetica, you either have to get a Mac" So is the MAC PC's are the only reason to use this so that it will look good in MAC only?

In my site when I am using "arial..." as base font then → html character is rendering well in all browsers but when using "Helvetica..." then its not displaying properly in google chrome, Why?

Thanks

Answer 1

The machine you were running on did not have a bold-face for Helvetica, but it did have one for Arial.

Answer 2

Well each browser as we all know has their quirks. This could possibly be just a browser issue.

To answer you first question however, the industry standard for font usage is based completely around the availability and usage of that font. So fonts that are more compatible are listed first.

Basically in CSS if you list more than one font-family, it tries to display with the first available listed font. If that doesn't work then it tries the next and so-on until it gets displayed, if it doesn't it just uses a default. It is quite possible that it's settling with a font that works, but not to the expected results for you. That would explain why re-ordering them produces something more expected in almost all browsers.

Answer 3

I use font-family: Arial, Helvetica, sans-serif when I use that font at all, myself.

The reason you're running into a problem is probably that your machine, unlike the expected case for Windows machines, actually has a Helvetica font installed, and there's something going on with it such that it doesn't support bold font weight properly.

Answer 4

the best web fonts (according to "best practices" and web gurus) are verdana, helvetica, arial, and any sans-serif font. if these fonts aren't showing up on your comp it's because your comp doesn't have them, and that's weird.

Answer 5

Here's a page that lists browser-safe fonts for windows and mac

If you stick with one of those, your font should be the same across windows/mac machines.

Answer 6

On the question of why one is recommended over the other, from the research I've done it seems Helvetica is the superior font family. It should always be used when it exists, so thats why you want to put it first in the list. For almost all the slight differences, Helvetica is more aestetically pleasing. Yes, it is usally just found on Macs.

http://www.ms-studio.com/articles.html

http://www.ms-studio.com/articlesarialsid.html

http://ilovetypography.com/2007/10/06/arial-versus-helvetica/

Answer 7

As someone said before, the reason for the "sans-serif" fonts, is almost as old as the web itself.

First of all, the "serif" fonts (times new roman, georgia, every font with those little decorations at the end of every character ending, etc.) works well in printings, becasue of the size, the space, the junctions between characters, etc. But it would never work well when you make it small. In the other hand, the "sans-serif" fonts work well in both scenarios, just controlling the character width, the separation between characters and you don't have visibility issues in small sizes let's say 10px, 9px, even 8px, where you can still read and not get bothered by the decorations of the "serif" fonts that in those sizes start to make a mess.

Second, the CSS declaration for the font-family, has another reasons as I recall. The first font is the one you would like to use let's say "Segoe UI". It's a good font, has good size, looks great small, etc. But is not that common right now, so I should choose another font that works just as well and in case not being the first one the browser should use this instead. And so on. The real problem is that you must acknowledge that every font have some different outter spaces, space between characters, space between words, so even being from the same family sans-serif they are not exactly the same.

Helvetica is a very famous font because all what I said before: looks great big, small, very small, it's wide, narrow, tall, short, etc. its proportions let it be that way, but is not as commonly used in every computer because its proprietary, and if you got it, then you use a Mac or you bought it (unless it has come with a graphic program and then is just one type of Helvetica).

So the statement should be:

font-family: helvetica, arial, sans-serif;

You shouldn't use variable width character fonts with fixed width character fonts in the same statement, because monospaced (same space between characters) and variable width don't look even close each other, but all that requires more knowledge when to use it and where to apply.

I myself use these:

font-family: calibri, arial, sans-serif; font-family: 'Segoe UI', arial, sans-serif;

Calibri is very very small but is easy to read, and Segoe is kind of Verdana but the elegant version.

In any case, Arial and Helvetica are almost the same.

See ya.