

Beautiful web type: highlighting the best of the Google web fonts directory - ubuwaits
http://hellohappy.org/beautiful-web-type/

======
tuacker
Why do fonts look like ants chipped away some pixels in chrome/win7? They look
better in Firefox but I remember OSX looking better still, can be wrong about
that though since I hadn't access to one in a long time. But fonts in Chrome
are plain ugly, someone please turn on AA.

FF on the left, Chrome on the right: <http://i.imgur.com/SxlaT.png>

~~~
sp332
Hm, not sure what happened there. Chrome isn't applying _any_ anti-aliasing to
those fonts. No greyscale, no sub-pixel, nothing.

~~~
bprater
Noticed it, too. Pretty disappointing after waiting years to really be able to
play with great typography. Especially painful coming from a Google site
rendered inside a Google browser.

------
woodpanel
Disclaimer: I worked in print design for a while on Mac+Win. I know typography
and optics. The linked Website is butiful, so are the fonts there. What I'am
writing is propably off-topic and a general objection to some statements made
in the comments here.

1) the google web fonts directory is very nice, but does anyone really
consider those fonts for readable body text? They are great for headlines and
short snippets but a complete article - no thank you. There is a great
difference between fancyness and usability.

2) One Exemple is this myth, that OSX' font rendering is always better thant
the rendering of windows' rendering because OSX applies more anti-aliasing to
the fonts. As soon as you get to a certain font size - usually the one you use
for articles - anti-aliased fonts are a pain-in-the-eyes.

3) They might appear worn out but those boring old fonts, like Verdana, that
took months to built and cost real money are still the most reliable when it
comes to body text. They are boring because there are few alternatives.

4) Microsoft payed above average for their fonts. Maybe more than the
customers appreciate. But everytime I sit in front of an iPad, MacBook and the
like, those dirty fonts destroy the whole product for me. The only way apple
is gonna get rid of that cheap rendering performance is by investing in their
rendering engine (not gonna happen) or by introducing retina displays in all
of their products (more likely to happen).

~~~
socksy
> One Exemple is this myth, that OSX' font rendering is always better thant
> the rendering of windows' rendering because OSX applies more anti-aliasing
> to the fonts. As soon as you get to a certain font size - usually the one
> you use for articles - anti-aliased fonts are a pain-in-the-eyes.

It's not quite that simple, and I'm not sure everyone would agree with that
assertion. It's more to do with the fact that the font rendering is done
differently (regarding whether the "pixel grid" is respected) rather than more
anti-aliasing is applied.

> Microsoft payed above average for their fonts. Maybe more than the customers
> appreciate. But everytime I sit in front of an iPad, MacBook and the like,
> those dirty fonts destroy the whole product for me. The only way apple is
> gonna get rid of that cheap rendering performance is by investing in their
> rendering engine (not gonna happen) or by introducing retina displays in all
> of their products (more likely to happen).

Apple paid for their professional fonts too, even including Zapfino — simply
to show off their font rendering. It's not cheaper, and they already invest a
lot in to their rendering engine, which has improved in leaps and bounds over
different versions of Mac OS X. Fonts that looks good on Mac OS X can come out
terrible on Windows because manual hinting to every typeface has to be applied
to make them look good, or Cleartype will come along and distort all the
character forms.

The only reason you think Apple's font rendering is cheap is because you're
not used to it — and it pervades everything you read. In contrast, to me
Windows fonts look "cheaper", in that they're all thin and sickly. However, it
should be understood that's it's a subjective choice, rather than one
necessarily being better than another.

[http://damieng.com/blog/2007/06/13/font-rendering-
philosophi...](http://damieng.com/blog/2007/06/13/font-rendering-philosophies-
of-windows-and-mac-os-x) and [http://www.codinghorror.com/blog/2007/06/font-
rendering-resp...](http://www.codinghorror.com/blog/2007/06/font-rendering-
respecting-the-pixel-grid.html) might be interesting reading.

------
tripzilch
While that looks really pretty, it's not really useful.

This could have been a great article if they hadn't just gone for the easy eye
candy but instead _actually discuss the fonts_ in question?

\- name of the font

\- style of the font (sans, slab-serif, etc)

\- who made the font, what style is it based on, what was the designer's
purpose/goal with this font

\- what does the author of the article think the font is good for

\- how complete is the font, what characters does it support, quite a few of
them don't even have most of the basic symbols from lower ASCII, _that's
pretty important to be aware of_ or you get unpleasant surprises long after
the design is done

\- how well is the font kerned? this is probably the worst omission, because
the OP is actively _misleading_ on this front, look at the source code and
notice the special "kern" classes--and just stop right there and close the
tab.

Manual kerning, really? Having to do that before a font looks good pretty much
_excludes_ it from any serious consideration for usage as a web font. Utterly
worthless!

Imagine explaining to a client you designed a website for, that if they need
to add new content to the CMS, they must manually kern the headlines! ... errr
... manually do the _whut_ now?

~~~
jberryman
You have a good point about the manual kerning (not sure what's up with that),
but I don't agree with any of your other criticisms. This is basically what
typeface catalogs are like: a demo of a particular face.

 _\- name of the font_

who cares. click through to find out

 _\- style of the font (sans, slab-serif, etc)_

you need someone to tell you that? I don't understand.

 _\- who made the font, what style is it based on, what was the designer's
purpose/goal with this font_

who cares. click through to find out

 _\- how complete is the font, what characters does it support, quite a few of
them don't even have most of the basic symbols from lower ASCII, that's pretty
important to be aware of or you get unpleasant surprises long after the design
is done_

Yes, that information is clearly visible when you click through.

 _Imagine explaining to a client you designed a website for, that if they need
to add new content to the CMS, they must manually kern the headlines! ... errr
... manually do the whut now?_

Yes, you'd look like an idiot if you did that.

------
jphackworth
I really appreciate that this site uses interesting quotes rather than lorem
ipsum. It makes it less boring to trawl through different fonts.

~~~
blahedo
...and more difficult to compare them.

~~~
ubuwaits
These typefaces should not necessarily be compared to each other. Every
typeface has contexts where it works better than other contexts. I've tried to
use each typeface in a way that highlights its positive attributes and
minimizes its negative ones.

------
slamdunc
Lato is one of my current favorites, glad you included it. Orbitron, Jura and
Cabin also work well in certain places.

I do wish there were more fonts with 3+ styles (reg, bold and ital at least),
though I'm sure that'll change with time.

~~~
Chris_Newton
> I do wish there were more fonts with 3+ styles (reg, bold and ital at least)

On a related note, this was linked from a few places the other day:

<http://somadesign.ca/demos/better-google-fonts/>

~~~
slamdunc
Nice - "Because web designers want font families, not just fonts." Thanks for
the link, Chris.

------
sgdesign
Very nice list! I recently also wrote on this topic:
<http://sachagreif.com/google-webfonts-that-dont-suck/>

~~~
chlee
Nice list! But I feel you may have overlooked some other great google web
fonts.

For example, Open Sans and Arimo are two good Sans fonts created by the
awesome Steve Matteson. I am currently using Arimo for my new project, and it
s a nice replacement for the vanilla Arial/Helvetica [Neue].

~~~
thristian
Oh man, don't use Arimo, or its identical twin Liberation Sans. It is to Arial
what Arial is to Helvetica; a metrics-compatible replacement that tries to do
its own thing and winds up just awkward. The stupid little serif on J annoys
me to no end, and all the capitals look almost like small-caps compared to the
lower-case.

By contrast, Open Sans is lovely, go nuts with it. :)

~~~
chlee
Thanks for the feedback :D

I need a good alternative to Arial. Do you have any other recommendations from
google web fonts?

~~~
unicornporn
<http://www.google.com/webfonts/specimen/Nokora>

------
hsmyers
As I slip on my typographic curmudgeon's hat, I have to ask where are the
printer's ornaments? Can you set a chess diagram with anything in Google web
fonts? Don't think we've quite arrived yet...

~~~
celoyd
Ornaments? Ha. A lot of them don’t have _italics_. Or reasonable kerning. Or
text figures. Or even basic “special” characters like _ñ_.

I’d give up dozens of attractive but incomplete fonts for a single complete
one. One or two bugs or minor missing features puts a font out of the question
as a default.

~~~
justincormack
Ubuntu seem to be working for completeness, especially multilingually
<http://font.ubuntu.com/>

Sorts mill Goudy has italics, text figures etc
<http://www.theleagueofmoveabletype.com/sorts-mill-goudy>

Clearly though there is much to do in free fonts.

------
jebblue
If you want more fonts to choose from on Ubuntu, you can download the fonts
using Mercurial as described here:

<http://code.google.com/p/googlefontdirectory/>

As a nice twist I tested and found that if you place your googlefontdirectory
in $HOME/.fonts then the gnome-tweak-tool will scan and pick up the fonts,
even in Unity!

------
Pickels
I so envy you font guys. If I had more time I would invest it in typography.
Good design always starts with awesome fonts.

------
buro9
1 web page

22 HTTP requests

442.61KB transferred

Thankfully we're not facing an increasing use of mobile devices on high
latency networks. Oh.

Platform and browser defaults have come so far that nowadays my preferred font
stack is this:

    
    
      font-family: sans-serif;

~~~
ceejayoz
Most sites aren't going to be demoing a bunch of different fonts like this.
They'd likely pick one for headers and one for copy.

~~~
iamhenry
I agree. On that same note, I would stay away from using a web font in your
body. It'll render slow on smart phones if you have a fairly lenthy article.
Not only that, it may not render as crisp, therefore causing a bad reading
experience.

~~~
voyou
"I would stay away from using a web font in your body. It'll render slow on
smart phones"

Why is that? I thought the system fonts would be TrueType or OpenType, and so
use the same renderer as web fonts. Not that I know much about the technical
details of fonts; is it possible to optimize a font for ease of rendering?

------
tstegart
So what are the first two fonts? That's frustrating they're not named.

~~~
ubuwaits
The display face is Abril Fatface and the body is set in Open Sans.

~~~
rumblestrut
Maybe you could put that in the github repo?

(Or maybe I could, I know, I know ...)

