font-family: Arial, Helvetica, sans-serif; is enough?

[mib70]

Hello, I am beginner in web design and I’m trying to make my first website.
I’m at the stage of choosing websafe font.
Im looking for a font that it is available in PCs of the most users, a font that is pleasant to read, and a font simple and pretty.

I’m testing my project with the font-family: Arial, Helvetica, sans-serif; and I like.
My question is if you use just this css: font-family: Arial, Helvetica, sans-serif; is enough to ensure that the font is available on most computers?

I never used google fonts, but I read that is a better solution, because they host the fontt, and users with a connection can see it. But, do you think its really necessary use google fonts instead of just, in my case, usefont-family: Arial, Helvetica, sans-serif;?

[Senff]

My question is if you use just this css: font-family: Arial, Helvetica, sans-serif; is enough to ensure that the font is available on most computers?

Yes. It’s very safe and standard. Which, to some people, might make it a bit boring.

Google fonts is not a better solution — it’s just a different way of showing non-standard fonts (= fonts that users dont have installed on their local computer), and it’s definitely not “necessary” to use. If you think Arial/Helvetica looks good and clean, there’s no reason to try to find any other solutions.

[mib70]

Thank you for your answer.

So I think I’ll keep my first choice ‘Arial, Helvetica, sans-serif;’.
Typography is an area that I like, and I’m trying to study about this subject, do
you know where I can find information about Arial and Helvetica about being safes and standards for web?

However, after writing my question was in fonts google looking for a font that I like (in case of be more safe to use nowadays google fonts) and I found the Open Sans, and I liked a lot.
Do you think its a good font to use in websites? Sorry, if I’m bothering, but Im a bit confused, because I see many people on internet talking very good about this font, but others say that looks bad on their laptops and that is struggle to read…!

[Senff]

Do you think its a good font to use in websites?

If you think it looks good and fits your site, then by all means use it. Google fonts are widely supported and if people complain that its a struggle to read, you may want to consider using a large font size — for Open Sans I’d say go for at least 20px or so.

Google fonts downside 1: font rendering on Chrome (Windows only) can be a bit bad. Since this happens with a lot of fonts (most custom, non-standard fonts), this is a Chrome/Windows issue and nothing the font itself can be blamed for.

Google fonts downside 2: Google fonts don’t generally work in IE8. So if you want to support that browser too (or lower), don’t use Google fonts.

[chrisburton]

Do you think its a good font to use in websites? – @Mib70

If you think it looks good and fits your site, then by all means use it. @Senff

I have to disagree with this, respectfully of course. Text makes up majority of websites that is why typography is important, even more so for minimal designs. What if Mib70 suggested to use Comic Sans? Would you then agree with your answer?

Google fonts is not a better solution

In regards to Helvetica, it certainly can be. For example, Open Sans.

I’ve posted this quote before so here it is again (this is in reply to another person):

[…] you overestimate the abilities of a Retina display. Some typefaces are simply not optimal for reading at small sizes, regardless of render quality or substrate. It has to do with weight, spacing, openness of letterforms, and most importantly rhythm. Neue Helvetica is known for its strict uniformity. This makes it appealing for big, graphic stuff like headlines, posters, and logos, but does not make it a great text or UI face. – Stephen Coles

“But he’s talking about Neue Helvetica”, you might say. Keep in mind that Neue Helvetica is an improvement to Helvetica.

Open Sans I’d say go for at least 20px

Why?

Google fonts downside 1: font rendering on Chrome (Windows only) can be a bit bad. Since this happens with a lot of fonts (most custom, non-standard fonts), this is a Chrome/Windows issue and nothing the font itself can be blamed for.

There are other contributing factors that can in fact be blamed on the typeface which is why so many in Google’s library are horrendous. Also, see Stephen Coles’s quote above.

[Senff]

I have to disagree with this, respectfully of course. Text makes up majority of websites that is why typography is important, even more so for minimal designs. What if Mib70 suggested to use Comic Sans? Would you then agree with your answer?

Well…. I think it’s safe to say that Comic Sans is one of those fonts that’s generally accepted as ugly/wrong/bad, so I see your point, but then still, I probably would’ve said the same. Maybe his site is aimed at children? Either way, it’s also safe to say that Arial and Helvetica are fairly “neutral” fonts, which is why I said that. But of course, you’re right. In the grand scheme of things, it’s a lot more complicated.

Open Sans I’d say go for at least 20px

Why?

Well, try it. Starting from 20px and up, it’s where it becomes “large enough” to be “comfortable” to read. With Arial and Helvetica I think that’s at 16px, but for Open Sans, which looks like it’s smaller in general, I just suggest 20px.

By no means I claim I’m an expert on fonts. Merely stating what works for me, and (what I believe) works in general. :)

[chrisburton]

Maybe his site is aimed at children

Even if it is aimed at children, there are far better and more readable typefaces to choose from than Comic Sans. I think we would both agree with that.

Well, try it. Starting from 20px and up, it’s where it becomes “large enough” to be “comfortable” to read. With Arial and Helvetica I think that’s at 16px, but for Open Sans, which looks like it’s smaller in general, I just suggest 20px.

What about mobile? Do you still set it at 20px? Open Sans is very legible and readable at small sizes.

[Senff]

What about mobile? Do you still set it at 20px? Open Sans is very legible and readable at small sizes.

Yeah, maybe. I was just tinkering with it on https://www.google.com/fonts/specimen/Open+Sans and setting a font to 16 made it look very tiny. But testing it in Codepen seems fine: http://codepen.io/senff/pen/CfGut

I should stop talking about fonts and typography, I obviously don’t know anything about it ;)

[chrisburton]

Yeah, maybe. I was just tinkering with it on https://www.google.com/fonts/specimen/Open+Sans and setting a font to 16 made it look very tiny. But testing it in Codepen seems fine: http://codepen.io/senff/pen/CfGut

Open Sans is more readable and legible than Helvetica even down to 14px (see below).

http://codepen.io/chrisburton/pen/xGoqc

I should stop talking about fonts and typography

That’s the opposite of how we educate ourselves. I’m glad people care enough to even post these questions or spend time to learn.

[Author]

Posts