Open Sans, how do we love thee?

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

by neeee • 13 years ago

132 74 13 years ago

en.blog.wordpress.com

misframer3• 13 years ago

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

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

da_n• 13 years ago

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

karlshea• 13 years ago

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

msutherl3• 13 years ago

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.

RexRollman• 13 years ago

Wow, very nice.

buro9• 13 years ago

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.

wfoof• 13 years ago

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

cpeterso• 13 years ago

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;

msutherl3• 13 years ago

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;

titlex• 13 years ago

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.

mryall2• 13 years ago

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.

nsmartt• 13 years ago

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

Samuel_Michon• 13 years ago

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.

jongala• 13 years ago

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

jfb2• 13 years ago

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

dbcooper• 13 years ago

No love for Univers? ;-)

nollidge• 13 years ago

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

danso• 13 years ago

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.

shardling• 13 years ago

Recent-ish Firefox Android builds use Open Sans.

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

spatten• 13 years ago

Any recommendations for open source serif fonts?

pfg• 13 years ago

Try Charis SIL[0].

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

jboynyc• 13 years ago

Gentium

solox3• 13 years ago

Liberation Serif. Great for writing reports.

misframer3• 13 years ago

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

networked• 13 years ago

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/

Surio• 13 years ago

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!

taitems• 13 years ago

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

pgrote3• 13 years ago

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?

pgrote3• 13 years ago

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.

mmahemoff• 13 years ago

Seems fine on Chrome 26 in OSX (10.7.5).

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

pgrote3• 13 years ago

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.

Bezvezenator2• 13 years ago

> Any ideas?

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

iaskwhy• 13 years ago

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.

tga2• 13 years ago

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.

robin_reala• 13 years ago

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

huhtenberg4• 13 years ago

Make sure you have ClearType turned on.

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

Trezoid• 13 years ago

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

dizzystar• 13 years ago

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?

rthomas6• 13 years ago

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.

bjz_• 13 years ago

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?

tga2• 13 years ago

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.

josteink• 13 years ago

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.

dchest• 13 years ago

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.

mryall2• 13 years ago

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.

28inch• 13 years ago

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

huhtenberg4• 13 years ago

Care to show a screen grab?

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

camus• 13 years ago

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.

pyxy• 13 years ago

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!

fredyr• 13 years ago

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

jfb2• 13 years ago

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

huhtenberg4• 13 years ago

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

chrisvineup• 13 years ago

Good list +1

Recoil42• 13 years ago

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

huhtenberg4• 13 years ago

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.

pavanky• 13 years ago

> Let us count the ways.

I count at most one.

acqq• 13 years ago

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?

andybak• 13 years ago

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.

DanBC• 13 years ago

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.

acdha2• 13 years ago

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.

dspillett• 13 years ago

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.

acdha2• 13 years ago

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

swah• 13 years ago

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

duggan• 13 years ago

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

uxwtf• 13 years ago

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

mikesten• 13 years ago

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

Open Sans, how do we love thee?

Related Stories