Open Sans, how do we love thee? | Hacker News Reader

Open Sans, how do we love thee?

en.blog.wordpress.com

132 pointsneeee75 comments

A short list of body fonts that render consistently well in smaller sizes:

  Open Sans
  Source Sans Pro
  Droid Sans
  Lato
  Pontano Sans
  Proxima Nova
  Museo Sans
  PT Sans
  Segoe UI
  Tondo 
  Istok Web
  Interval Sans (Light)

http://www.google.com/webfonts/specimen/Source+Sans+Pro

http://www.google.com/fonts/specimen/Droid+Sans

http://www.google.com/fonts/specimen/Lato

http://www.google.com/webfonts/specimen/Pontano+Sans

https://typekit.com/fonts/proxima-nova

https://typekit.com/fonts/museo-sans

http://www.google.com/fonts/specimen/PT+Sans

https://www.microsoft.com/typography/fonts/family.aspx?FID=3...

http://www.webink.com/face/1133

http://www.google.com/fonts/specimen/Istok+Web

http://www.fontspring.com/fonts/mostardesign/interval

Good list +1

Out of curiosity, did you derive this list from anywhere, or is it just from off the top of your head?

It's my own list based on sifting through a metric ton of fonts available for online use, trying them for size and what not. I really like type design and related matters, so I used to do that for every project, the OCD way, and it was an enormous time sink. So I ended up compiling a short list and started updating it every time I'd see a good type in use when surfing.

I'd add PT Sans as also a great, free sans-serif font. In fact, sometimes I can't tell them apart: see the pairing here:

http://www.google.com/fonts/specimen/PT+Sans#pairings

Open Sans is killing it in usage...1.9 billion font views in the last week, according to Google Fonts API: http://www.google.com/fonts/specimen/Open+Sans#stats , which is more than 2.5x as popular as the next popular Google Font, Oswald: http://www.google.com/fonts/specimen/Oswald#stats

I'd love to see Open Sans used so frequently that Helvetica becomes fresh, again.

Source Sans Pro is another great open source font, and it's by Adobe.

http://blogs.adobe.com/typblography/2012/08/source-sans-pro....

I also really like Source Code Pro, my favourite coding font.

I was a big fan of ProggyClean but Source Code Pro converted me. And it works in more places. (If only there was an italic version. Syntax highlighting can look weird.)

Last time I looked, the font wasn't fully finished though. Maybe the italic version will come later?

It's open source, so if someone's willing to do it...

I kept going back and forth between Source Code Pro and Pragmata Pro.

For me, at least, Pragmata won.

Source Sans Pro is an excellent, extremely versatile, well-hinted and very contemporary-looking humanist sans-serif. Not to mention the platform availability and wide selection of weights. It's become my new Helvetica.

Wow, very nice.

We've had a print designer and typography expert in with us these last few weeks and top of the list of things to fix was our web typography.

Source Sans Pro is the font we've gone with after a fairly extensive search. And we've set the base size at 16px with a line-height of 24px. Which is to say, fairly large, very readable.

Since we are on this topic, I have a public service announcement: even though light Open Sans looks great and is trendy for headings, using a light font weight for body text is a bad idea because it makes it difficult to read. I keep coming across examples on the web, always with bad results.

Thank you.

Are you on XP by any chance? It’s got horrible rendering for light fonts in my experience.

Make sure you have ClearType turned on.

http://support.microsoft.com/kb/306527

It doesn't matter. Any font deliberately set lighter then normal is hard to read on any device.

I came into say exactly this.

Crying shame that the world's most popular blog platform thoughtlessly made this color mistake, and now this problem is going to become common-place.

Not everyone on earth has 20/20 vision and uses an Apple Retina device. Is it possible to block all WP sites so my browsing world is less miserable?

I'm by no means any sort of designer, but on their comparison picture the Open Sans body is easier for me to read than the Helvetica/Ariel body.

The type looks fine to me, and and reads very comfortably – better than the original type choice actually. Here are some screenshots on OSX:

Firefox 22.0a2 (2013-04-22) http://i.imgur.com/7o0fmL9.png

Chrome 26.0.1410.65 http://i.imgur.com/f9kqILy.png

Safari 6.0.4 http://i.imgur.com/PYAxOkw.png

I can't speak for Windows and Linux though. Do you have ClearType turned on?

I think I wasn't clear enough on what I meant.

Open Sans itself is a nice font, I have nothing against it. As a web font it might get rendered improperly, but that is an issue with the browser and the platform.

What I was talking about -- unlike, say, Arial, Open Sans also has a light weight (font-weight: 300) variant. That is now popular with large headings BUT I do not find it at all readable as body text (in Open Sans or most other fonts). Wordpress.com is a good example, as they do NOT make this mistake.

Open Sans like all the other Helvetica replacements (except Arial) are only cool the first few days. After that it's like, nah, gimme back Helvetica (which have been cool since the 70s):

http://helveticafilm.com

I prefer Helvetica Neue (1983); its spacing and curves are a little more relaxed than traditional Helvetica. Plus, Helvetica is notorious for being rendered poorly on Windows web browsers. Since Windows does not have a Helvetica Neue (unless the user has installed an Adobe design application), you can avoid Helvetica on Windows with a CSS font stack like:

  font-family: 'Helvetica Neue',Arial,sans-serif;

I don't understand, Helvetica Neue renders awfully at body-text sizes on computer displays. Unless you need the light weights, use Arial. It's Helvetica made to look good on computers under 16px.

  font-family: Arial, sans-serif;

16px is proper body-text size.

"Proper". I agree with Oliver Reichenstein's argument[1], but Google does 13px and it's fine. The font-size in most desktop apps is less than 16px. Human's are adaptable. 16px is just more comfortable.

[1]: http://ia.net/blog/100e2r

Unfortunately, Helvetica Neue also renders poorly on Windows web browsers. It's a problem that I have been seeing a lot lately, especially with the popularity of Twitter Bootstrap. I understand that being a Windows user with Helvetica/Helvetica Neue installed is not very common, but when a website has an unreadable font I immediately leave it.

I've had some success with removing specific fonts entirely:

  font-family: sans-serif;

You get Helvetica on Mac, Arial on Windows and various other default fonts on other platforms. Users can also pick their own font via browser settings.

For pixel-perfect alignment, you need to deal with some minor size differences between the fonts, but pixel-perfect design is not really achievable in many designs anyway.

I disagree, simply because Open Sans is, well, open.

Open != better

I’m more than happy to pay Typekit to provide my website visitors with high quality fonts that are optimized for all major platforms and conform to my clients’ brand guidelines. Adobe Typekit[1] even has a free tier that lets you use many of the fonts in its catalog and all requests are handled by their CDNs, saving you bandwidth (=money).

Even when I have carte blanche, I rather use Myriad or Frutiger over Open Sans. On OS X and iOS, Open Sans appears unbalanced to me.

As for the openness: if somehow Typekit’s CDNs are down, there’s always the fallback fonts, like Helvetica/Arial. I don’t see a need to start hosting fonts myself or settle for less than ideal fonts hosted elsewhere.

[1] I subscribed to Typekit years before it was acquired by Adobe, and I feared Adobe would ruin it, but to my surprise, since the acquisition the service has only gotten better.

Open Sans is not a Helvetica replacement / poor man's Helvetica just because it is sans-serif. It belongs along side other beautiful sans faces like Avenir, Frutiger, Myriad, and others that have their own styles and worthiness in design.

Helvetica is indeed cool (the Neue family cooler, IMO) and has been since the 50s, and _Helvetica_ is also cool. Thinking of Helvetica as the only worthwhile sans-serif typeface is less cool :)

Also cool, Akzidenz Grotesk, which predates Helvetica by what, seventy years?

Good luck getting a license to embed it into a web page though ..

No love for Univers? ;-)

Helvetica's great, but it's pretty awful for body text, and particularly awful on a monitor.

Didn't they effectively increased the "download size" of pages and slowed the rendering down because now pages depend on the font which has to be downloaded, at the same time as they made the rendering on Chrome on Windows looking worse? Is that progress?

Chrome on Windows is a real problem for webfonts and one that I'm astonished hasn't been addressed yet.

How is Firefox on Windows (especially XP) now? It's a while since I've checked.

I'm hopping between a few machines at the moment.

I don't find the fonts on Chrome under Vista[1] particularly bad. Not worse than other OSs. I have lousy eyesight, so most sites have lousy readability, so I often change the fonts.

It's weird that fonts on Windows, OS X, and Linux are all so differently blurry / sharp.

It'd be great if there was some user-understandable standard language so that users could chose the setting they prefer. You do get used to the differences, but it'd be nice to not have to do that each time I changed machine.

All this doesn't matter to me while I cannot increase font size by zooming in the page. Why does it happen to more and more web sites? I zoom in because font is too small for me, but font size doesn't increase, only paragraph width increases!

I was experiencing the exact same thing! I hope that trend doesn't stick.

Try using this in a user CSS:

  * { -webkit-text-size-adjust: auto !important; }

Why anybody anywhere thought that the behavior for 'none' was appropriate is baffling [1].

[1] https://bugs.webkit.org/show_bug.cgi?id=56543

I am baffled.

OpenSans renders fine in IE and Firefox, but Chrome doesn't do it. Here is what I get on the WP page:

http://imgur.com/XgmEN9P

It is the same for every other site that uses opensans.

Windows 7, Chrome 26.0.1410.64 m, Font Size: Medium, Page Zoom, 100%.

Any ideas?

I did fine a bug for Chrome.

https://code.google.com/p/chromium/issues/detail?id=137692

Looks like the workaround is to turn off ClearType.

Seems fine on Chrome 26 in OSX (10.7.5).

http://i.imgur.com/RTARq61.png

Thanks for the comparison ... and the feelings of envy. lol

It really is a gorgeous looking font. For the longest time I just though trendy designers were picking the worst looking font.

http://imgur.com/j7TGaA9.png

from ubuntu with infinality freetype patch.

That doesn't look right. The font-weight of the heading is supposed to be 300 and is at least 400 in your screenshot.

Chromium on out-of-the-box ubuntu seems better: http://i.imgur.com/0WIO2t6.png

> Any ideas?

Chrome uses GDI for font rendering while Firefox and IE use DirectWrite.

Is there any relation between the font rendering engine and the font being hinted for Windows? When I saw the title of the article on the page my first thought was the font not being properly hinted for Windows.

You're right, it most likely means font is not hinted for windows. That looks horrible when rendered with GDI at smaller sizes because GDI hammers everything into pixel grid and doesn't do vertical anti-aliasing. DirectWrite features anti-aliasing in both directions and doesn't try to fit everything into pixel grid. Because of that non-hinted fonts look much better, although blurrier, with DW than with GDI.

Recent-ish Firefox Android builds use Open Sans.

https://blog.mozilla.org/ux/2013/03/improved-type-on-firefox...

So, it turns out that when you have selectively added Open Sans typefaces as system fonts, this is what all these sites start to look like: http://i.imgur.com/kgpY6WO.png

I had added two densities so I could muck around with stuff in Pixelmator and was wondering why everyone had chosen the horrible slender version for body text on various sites, but apparently it just means whatever the system collection provides gets priority (which makes sense).

Any recommendations for open source serif fonts?

Try Charis SIL[0].

[0]: http://scripts.sil.org/charissilfont

Gentium

Liberation Serif. Great for writing reports.

Linux Libertine. http://www.linuxlibertine.org/

Hate to be that guy, but Computer Modern [1].

Out of TTF "natives" check out DejaVu Serif [2] and Droid Serif [3]. I've read countless ebooks set in the later.

[1] https://en.wikipedia.org/wiki/Computer_Modern

[2] http://dejavu-fonts.org/wiki/Main_Page

[3] http://www.droidfonts.com/info/droid-serif-fonts/

I'm partial to Serif myself, so I know what you mean :-)

In addition to Droid Serif, Liberation serif and Linux Libertine and Gentium recommended here, check out PT Serif also. Very readable on high resolutions and medium body fonts...

All these sets below, are complete (R, SC, B ,IT, B+IT...) fonts AFAIK.

http://www.fontsquirrel.com/fonts/pt-serif

Gandhi Serif, on the other hand makes excellent compliment to PT Serif as a beautiful heading font!

http://www.fontsquirrel.com/fonts/gandhi-serif

I also use Alegreya a lot.....

http://www.fontsquirrel.com/fonts/alegreya

In addition, these sets below, are complete (R, SC, B ,IT, B+IT...) fonts AFAIK.

http://www.dafont.com/justus.font

http://www.fontsquirrel.com/fonts/Latin-Modern-Roman

http://www.fontsquirrel.com/fonts/TeX-Gyre-Schola

http://www.fontsquirrel.com/fonts/TeX-Gyre-Bonum -- Bookman clone.

These are not complete, but they are close relatives.

http://www.fontsquirrel.com/fonts/Theano-Didot

http://www.fontsquirrel.com/foundry/Alexey-Kryukov

http://www.fontsquirrel.com/fonts/Old-Standard-TT

http://www.fontsquirrel.com/fonts/Bentham

http://www.fontsquirrel.com/fonts/DubielPlain

http://www.fontsquirrel.com/fonts/Theano-Modern

Enjoy!

This would be why my iPhone displays the page without text for 30 seconds until the font loads. Much as I like web fonts, using them for body text is painful.

Depends where the delay lies. If the font is loaded in such a way that page rendering blocks in all cases then they need to rearrange their code somewhat, but it could be your browser that is broken: unless there is something blocking rendering (the font being loaded synchronously in a static script tag or something) then the browser should render the content using an alternative from the CSS definition or what-ever its default is, and reflow once the font is loaded. While it is extra processing it isn't like modern phones are short of a CPU cycle or few.

Nothing is broken, it's just a design decision: do you show unstyled content or wait until you have everything. See http://paulirish.com/2009/fighting-the-font-face-fout/#updat... for details but the gist is that browsers used to differ (Firefox chose the approach you prefer) but have converged on blocking until the fonts have downloaded.

Currently the only way to get the behaviour you want would be using something like https://github.com/typekit/webfontloader and using CSS to specify a default to be used until the font has transfered:

body { font-family: sans-serif; } .webfonts-loaded body {font-family: "Open Sans"; }

I'm a frequent user and massive proponent of Open Sans, which I think allows me to say how much I wish it had a Hairline and Black weight. I end up using Lato for a Futura-esque heavy weight. (eg: http://techevents.co)

EDIT: Lato for reference http://www.google.com/fonts/specimen/Lato

Looking at both of those screenshots, am I the only one who finds font-rendering on Macs very blurry and extremely hard to read?

So blurry in fact, I find it's hard to tell that there are different fonts in those two screenshots. They just both look like text smudged over a while matte when switching back and forth between them.

Yes, it's blurry, especially for the eye coming from Windows. You get used to it, though. My favorite font rendering is the current Ubuntu's default: it doesn't destroy letter shapes as much as Windows, but still not as blurry as OS X.

Rather than designing to better fit the pixels you can see like on Windows, I'm pretty sure the Mac OS X hinting was designed to get progressively better as screen densities increased. Like their reliance on hardware acceleration in the window manager, it was a forward-looking technical decision built in to the OS.

Unfortunately, we got stuck in a 96 DPI rut throughout the 2000s and are only just coming out of it with high-DPI "Retina" displays. Now the Mac hinting decision makes more sense, and the ClearType technology looks bizarre, whereas for all the last decade it was the opposite.

There are a bunch of examples of Open Sans in the wild up on Typio: http://www.typ.io/fonts/open_sans

"It’s beautifully legible" I couldn`t disagree more. The body text set with opensans on Windows(especially in chrome) looks awful.

Care to show a screen grab?

There must be something off with your setup, because OpenSans is very legible, even on Windows.

I agree , sans serif is just not readable. A mix between serif for text and sans ( for headers , titles ,etc ... ) is the way to go. I just cant read any long text that is sans. It's very painfull.

On a second visit, can you guys see webpages with webfonts without delay? My cache does not seem to work.

It would be great if Open Sans could be part of default browser fonts along with Helvetica and Arial.

> Let us count the ways.

I count at most one.

Reply on news.ycombinator.com