Open Sans, how do we love thee?(en.blog.wordpress.com)

en.blog.wordpress.com

http://en.blog.wordpress.com/2012/10/09/open-sans-how-do-we-love-thee-let-us-count-the-ways/

80 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

Recoil4213 anni fa

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

huhtenberg13 anni fa

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.

chrisvineup13 anni fa

Good list +1

danso13 anni fa

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.

[deleted]13 anni fa

misframer13 anni fa

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

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

buro913 anni fa

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.

da_n13 anni fa

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

karlshea13 anni fa

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.)

tsahyt13 anni fa

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

misframer13 anni fa

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

FireBeyond13 anni fa

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

For me, at least, Pragmata won.

[deleted]13 anni fa

msutherl13 anni fa

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.

RexRollman13 anni fa

Wow, very nice.

tga13 anni fa

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.

bjz_13 anni fa

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?

tga13 anni fa

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.

robin_reala13 anni fa

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

huhtenberg13 anni fa

Make sure you have ClearType turned on.

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

Trezoid13 anni fa

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

rthomas613 anni fa

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.

dizzystar13 anni fa

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?

wfoof13 anni fa

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

jongala13 anni fa

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 :)

jfb13 anni fa

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

troels13 anni fa

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

dbcooper13 anni fa

No love for Univers? ;-)

cpeterso13 anni fa

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;

msutherl13 anni fa

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;

bryne13 anni fa

16px is proper body-text size.

msutherl13 anni fa

"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

mryall13 anni fa

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.

titlex13 anni fa

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.

nsmartt13 anni fa

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

Samuel_Michon13 anni fa

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.

nollidge13 anni fa

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

acqq13 anni fa

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?

andybak13 anni fa

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.

DanBC13 anni fa

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.

[deleted]13 anni fa

pyxy13 anni fa

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!

jfb13 anni fa

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

fredyr13 anni fa

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

pgrote13 anni fa

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?

pgrote13 anni fa

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.

Bezvezenator13 anni fa

> Any ideas?

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

iaskwhy13 anni fa

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.

Bezvezenator13 anni fa

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.

mmahemoff13 anni fa

Seems fine on Chrome 26 in OSX (10.7.5).

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

pgrote13 anni fa

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.

mattengi13 anni fa

http://imgur.com/j7TGaA9.png

from ubuntu with infinality freetype patch.

tasuki13 anni fa

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

shardling13 anni fa

Recent-ish Firefox Android builds use Open Sans.

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

duggan13 anni fa

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).

[deleted]13 anni fa

(1)

spatten13 anni fa

Any recommendations for open source serif fonts?

Surio13 anni fa

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!

pfg13 anni fa

Try Charis SIL[0].

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

misframer13 anni fa

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

networked13 anni fa

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/

solox313 anni fa

Liberation Serif. Great for writing reports.

jboynyc13 anni fa

Gentium

acdha13 anni fa

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.

dspillett13 anni fa

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.

acdha13 anni fa

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"; }

taitems13 anni fa

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

josteink13 anni fa

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.

mryall13 anni fa

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.

dchest13 anni fa

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.

[deleted]13 anni fa

mikesten13 anni fa

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

28inch13 anni fa

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

huhtenberg13 anni fa

Care to show a screen grab?

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

camus13 anni fa

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.

swah13 anni fa

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

uxwtf13 anni fa

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

pavanky13 anni fa

> Let us count the ways.

I count at most one.