
Beautiful web type – typefaces from the Google web fonts directory - KhalilK
http://hellohappy.org/beautiful-web-type/?1
======
jberryman
The last time this came up people pointed out this kind of thing:

    
    
        Beautiful W
        <span class="kern">
            eb
        </span>
         Type
    

It would be nice to just see what they look like without all that hackery,
since no one is going to do that ever in real life.

~~~
makmanalp
So the problem happens because google web fonts actually subset the actual
fonts to remove things so that the file sizes are reasonable. For example it's
only latin characters unless you specify. And opentype data is also stripped.
This means ligatures, for example are tossed. I had a hell of a time figuring
this out. I think font-specific kerning also goes away when this happens.

This is why I now serve my own font.

Here's the code I found that does this:
[https://code.google.com/p/googlefontdirectory/source/browse/...](https://code.google.com/p/googlefontdirectory/source/browse/tools/subset/subset.py)

~~~
unicornporn
You can get some of the best fonts from Google Web Fonts here
[http://brick.im/](http://brick.im/) with ligatures etc.

~~~
PeterGriffin
I use some Google Web Fonts and I was interested, but when I went here:

[http://brick.im/fonts/](http://brick.im/fonts/)

And I clicked on a few fonts, I kept getting 404s. Any idea?

~~~
thisgai
It looks like it's supposed to link to the downloadable original source, but
it's missing. To use the font just click the little + button and then the
'Bucket' button in the menu.

~~~
alfredxing
They're supposed to link to a font-specific specimen page where you can see
exactly how the font renders and take advantage of some content-editable
headings and paragraphs.

------
moeamaya
These examples showcase the importance of typesetting as much as they do
typeface choice. Proper hierarchy, contrast and layout can extend the ability
of the typeface individually to do a lot more than seems plausible when seen
in isolation.

~~~
selmnoo
Agreed, that was a stunningly beautiful way of showing fonts. They're not just
showcasing the typesetting, they're also relating the emotion of it by using
specific passages of text from different places that match the spirit of the
font. I can't believe no-one ever thought to do this before, but I'm still
very surprised to see it though.

~~~
munificent
> I can't believe no-one ever thought to do this before

Lots of sites for typefaces include "posters", "specimens" or other examples
of using the font in a context that highlights its best usage, often including
quotations.

~~~
platz
Except standard specimen samples are gibberish where these bits are more
opinionated

------
danbucholtz
As a developer who plays the role of designer in my start-up
(www.gopaperbox.com), I must say that typography is insanely hard.

Getting the right heights, weights and style to look visually appealing is
probably the hardest part of the whole thing. Making graphics is pretty easy
in today's world with icon fonts. I have been rolling with Proxima-nova lately
- but I'm not tied to it.

Can you guys check out the fonts on my page and give some feedback? I would
love to switch to a free Google font.

Thanks!

~~~
cheapsteak
Fiddled with it in with the web inspector, here's a mock up of what I think
might look better (was going to send you the edited css but the tab crashed
while I was taking the screenshot..)

[https://dl.dropboxusercontent.com/u/324756/PaperBox%20%20%20...](https://dl.dropboxusercontent.com/u/324756/PaperBox%20%20%20Take%20back%20your%20desk.png)

I think it might be a good idea if you could cut down the copy you have for
the featurettes by about 1/3

\---

edit: also, if you can swing it, a quick video demo might be a nice
alternative to swap out the image e.g. [http://www.domo.com/company/what-is-
domo](http://www.domo.com/company/what-is-domo) and
[http://monanetwork.com/](http://monanetwork.com/)

~~~
danbucholtz
Wow, way cool! I agree, your design looks much cleaner and more sophisticated!
Thanks!

~~~
cheapsteak
Glad you liked it :)

I don't typically do design either but got hit with a string of marketing-
microsite gigs of late and have a sort of formula down. (basically things my
designers yelled at me to fix - spacing, font weight, font size)

Best of luck with your startup! And if at all possible consider Google Drive
integration? This is actually something I would use (would love to be able to
easily scan receipts and chuck'em ), except dropbox is $10.99/month for 100G,
while GDrive is $1.99/month for 100G, kind of a no brainer as a cheapskate :P

------
Kiro
As usual the fonts look beautiful on Mac but horrible on Windows (both using
Chrome).

~~~
dbcooper
Open chrome://flags/ and activate "Enable DirectWrite". That will give you
proper rendering of webfonts. (Like FF and IE on Windows.)

~~~
patja
I'll just put a little note on my site instructing users of Chrome on Windows
to do that :)

It has been YEARS of putting up with the horrible Google font rendering in
Google's browser on Windows, all the while IE and Firefox render them
perfectly.

------
z1mm32m4n
Not enough sans serif fonts for my taste. I think that serif fonts have a very
specific, somewhat limited place on the web.

~~~
mark-r
Serif fonts are finally coming into their own, now that enough devices have
high enough resolution to do them justice.

That said I think I still prefer sans serif for myself.

------
namanyayg
I've found brick.im[0] to be pretty good for free fonts as well. They have
better support for ligatures, too.

I'm working on something similar, Pretty Open Type[1]..

[0]: [http://brick.im/](http://brick.im/) [1]:
[http://namanyayg.github.io/pretty-open-
type/](http://namanyayg.github.io/pretty-open-type/)

------
sirois
Web fonts is nice, but one part of a font family is even better. Here’s a
really nice list of all the Google Web Fonts Family
[http://somadesign.ca/demos/better-google-
fonts/](http://somadesign.ca/demos/better-google-fonts/)

~~~
namanyayg
Google already sorts that way, now. See 'Sorting: Number of Styles'.

------
hypertexthero
Some nice typefaces (Gentium is a favorite) and quotations there.

I like the following from Stowe Boyd's _Postnormal era_:

    
    
        Authoritarian/Centralized > Egalitarian/Decentralized
        Objective/Impartial > Subjective/Partial
        Hierarchy > Network
        Nuclear > neo-Tribal
        Globalism/Growth > Localism/Steady-State
        Nation/Province/City > Locale/Watershed/Region/World
        Broadcast > Participative
        Exploitative/Unsustainable > Restorative/Sustainable
        Dogmatic/Orthodox > Enigmatic/Heterodox
    

Edit: A right arrow (→) would be better than the greater-than symbol in the
above.

------
shaydoc
love this.

I use Raleway, its is a beautiful typeface IMHO

[http://anexiledderryman.com/cv](http://anexiledderryman.com/cv)

~~~
gokhan
That font has terrible numbers, 3 to 9 are totally weird [1]. The @ symbol is
also mentally taxing on smaller sizes.

[1] [http://imgur.com/87sEqIW](http://imgur.com/87sEqIW)

~~~
jp555
I love old-style numbers.

Why should letters get all the ascender & descender fun! :P

~~~
shaydoc
Agree completely!

------
tomasien
Is the reason you (assuming this is the author) use only +BTC for donation
because you only want BTC or bc you think you'll only get BTC or because you
think only BTC is appropriate to donate to online work?

------
DotSauce
The Gentium Book / Open Sans combination is sexy. Thanks for taking the time
to do this.

I would love to see more, and if possible be able to sort by style type and
read labeled font names.

------
eriktrautman
[https://news.ycombinator.com/item?id=3522965](https://news.ycombinator.com/item?id=3522965)

------
mercnet
My company's proxy flagged your site as a Malicious URL. Most likely for the
wrong reasons but wanted to let you know.

------
purringmeow
Nice collection, although one in my opinion awesome font is missing - Lato.

~~~
kdvh
Lato is the sixth one in the showcase.

~~~
purringmeow
Oh, I just noticed it. But it's only the title, the rest is Merriweather.

~~~
alfredxing
For me the sixth is all Lato -- the blue block that starts with "Unity"

