
Open Sans, how do we love thee? - neeee
http://en.blog.wordpress.com/2012/10/09/open-sans-how-do-we-love-thee-let-us-count-the-ways/
======
huhtenberg
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...](https://www.microsoft.com/typography/fonts/family.aspx?FID=331)

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

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

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

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

~~~
huhtenberg
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.

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

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

[http://blogs.adobe.com/typblography/2012/08/source-sans-
pro....](http://blogs.adobe.com/typblography/2012/08/source-sans-pro.html)

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

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

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

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

------
tga
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
Are you on XP by any chance? It’s got horrible rendering for light fonts in my
experience.

~~~
huhtenberg
Make sure you have ClearType turned on.

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

------
wfoof
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
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;

~~~
msutherl
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;

~~~
bryne
16px is proper body-text size.

~~~
msutherl
"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>

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

------
pyxy
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!

~~~
jfb
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>

------
pgrote
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?

~~~
Bezvezenator
> Any ideas?

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

~~~
iaskwhy
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.

~~~
Bezvezenator
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.

------
shardling
Recent-ish Firefox Android builds use Open Sans.

[https://blog.mozilla.org/ux/2013/03/improved-type-on-
firefox...](https://blog.mozilla.org/ux/2013/03/improved-type-on-firefox-for-
android/)

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

------
spatten
Any recommendations for open source serif fonts?

~~~
Surio
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!

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

~~~
acdha
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...](http://paulirish.com/2009/fighting-the-font-
face-fout/#update2011) 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"; }

------
taitems
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>

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

~~~
mryall
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.

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

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

~~~
huhtenberg
Care to show a screen grab?

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

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

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

------
pavanky
> Let us count the ways.

I count at most one.

