7 ms·

Beautiful web type – typefaces from the Google web fonts directory

346 points by KhalilK 12y ago

eriktrautman 12y ago
https://news.ycombinator.com/item?id=3522965 https://news.ycombinator.com/item?id=3522965
purringmeow 12y ago
Nice collection, although one in my opinion awesome font is missing - Lato.
- kdvh 12y ago
  Lato is the sixth one in the showcase.
  - purringmeow 12y ago
    Oh, I just noticed it. But it's only the title, the rest is Merriweather.
    - alfredxing 12y ago
      For me the sixth is all Lato -- the blue block that starts with "Unity"
- gavinballard 12y ago
  It's there (the Unity / Rhythm / Balance... example)!
- capex 12y ago
  I don't know what's wrong with Lato at 400 weight. Its either the rounded extra-wide dot or something else, but Lato at its standard weight doesn't seem right.
moeamaya 12y ago
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 12y ago
  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 12y ago
    > 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 12y ago
      Except standard specimen samples are gibberish where these bits are more opinionated
shaydoc 12y ago
love this. I use Raleway, its is a beautiful typeface IMHO http://anexiledderryman.com/cv http://anexiledderryman.com/cv
- gokhan 12y ago
  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
  - mcguire 12y ago
    Those are "lowercase" or "oldstyle" numbers; they are built to go with mostly-lowercase, running text. I think they look odd with sans serif fonts and anywhere outside of blocks of text, but completely and totally wonderful otherwise.
  - jp555 12y ago
    I love old-style numbers. Why should letters get all the ascender & descender fun! :P
    - shaydoc 12y ago
      Agree completely!
  - shaydoc 12y ago
    I think they are artistically wonderful! It all depends how you perceive things, isn't it
- munificent 12y ago
  Raleway is a great font, but I'd suggest not using it for body copy. It's really a display font. If you want a sans serif body font to pair with it, I think it goes well with Source Sans Pro.
  - shaydoc 12y ago
Kiro 12y ago
As usual the fonts look beautiful on Mac but horrible on Windows (both using Chrome).
- dbcooper 12y ago
  Open chrome://flags/ and activate "Enable DirectWrite". That will give you proper rendering of webfonts. (Like FF and IE on Windows.)
  - schwarze_pest 12y ago
    Here is a newer Chrome with DirectWrite enabled by default: http://i.imgur.com/yrmxzkg.png http://i.imgur.com/yrmxzkg.png I still prefer Firefox.
  - patja 12y ago
    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.
  - darrenkopp 12y ago
    or run the new 64-bit chrome. I could never get the DirectWrite flag to work for me. Finally I got things working via registry changes, but I undid them and installed the new 64-bit beta and it's been amazing.
- gnufied 12y ago
  _at least_ fonts presented there look stunning on Linux (using Firefox). Not sure,why they won't look great on Windows though.
  - Slackwise 12y ago
    The Windows font rendering system tries to aggressively fit typefaces into the pixel grid. This is a throwback to low PPI displays from back in day. Linux's fontconfig allows for all sorts of configuration. Ubuntu, by default, probably has the nicest config. Otherwise, I personally turn off all hinting but leave subpixel rendering on. Brings it closer to what OSX does. Personally, the best font rendering I've ever seen is on a high PPI Android phone. Most pages that are more than 2-3 paragraphs I forward to my phone for reading, since my desktop displays aren't that great.
sirois 12y ago
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 12y ago
  Google already sorts that way, now. See 'Sorting: Number of Styles'.
jberryman 12y ago
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 12y ago
  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/tools/subset/subset.py https://code.google.com/p/googlefontdirectory/source/browse/...
  - deleted 12y ago
    [deleted]
  - mark-r 12y ago
    Do the fonts you download yourself from Google contain the missing information? Or do you have to dig up an original source?
    - makmanalp 12y ago
      I usually go back to the original source, and use something like http://fontprep.com/ http://fontprep.com/ or http://www.fontsquirrel.com/tools/webfont-generator http://www.fontsquirrel.com/tools/webfont-generator to subset and generate webfonts. But check the font license, some fonts don't allow you to do this.
  - unicornporn 12y ago
    You can get some of the best fonts from Google Web Fonts here http://brick.im/ http://brick.im/ with ligatures etc.
z1mm32m4n 12y ago
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 12y ago
  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.
danbucholtz 12y ago
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!
- stevewilhelm 12y ago
  Some comments on your PaperBox logo. The font feels a bit thin and spindly. Gives me the impression of delicate or fragile. Might want to look at Kerning. The capital P is to far from the a, and the r is too close to the capital B. The blue graphical logo is also too close to the text and possibly too big; it feels cramped and to some extent overpowers the name. See LinkedIn [1] or Thompson Reuters [2] for examples on how to make your font more substantial and how they balance the graphical image verses the text. [1] https://developer.linkedin.com/documents/branding-guidelines#general-use https://developer.linkedin.com/documents/branding-guidelines... [2] http://thomsonreuters.com/site/reuters-brand-attribution-guidelines/ http://thomsonreuters.com/site/reuters-brand-attribution-gui...
- stevejohnson 12y ago
  First, give this a read: http://practicaltypography.com/ http://practicaltypography.com/ I like your design. I just have a few nitpicks... * Only center titles; don't center body text! * Your body text should be 90 characters wide, max. The paragraph under the photo is much too wide. * Spacing under titles seems too small to my eyes. * Triangles as bullet points look a little odd (this is really subjective) * The login button is in a bit of a weird place. Right-aligned is nice, but it looks misaligned vertically with the logo. My take on this stylesheet would be... .headline { margin-top: 0; } .h1, h2, h3 { margin-top: 0.7em; margin-bottom: 0.7em; } Remove text-center from any body copy. Use <ul> tags for lists. Regardless of the above, your work looks great.
  - mden 12y ago
tomasien 12y ago
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 12y ago
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.
namanyayg 12y ago
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/
mercnet 12y ago
My company's proxy flagged your site as a Malicious URL. Most likely for the wrong reasons but wanted to let you know.
hypertexthero 12y ago
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.

346 points by KhalilK 12y ago

eriktrautman 12y ago

https://news.ycombinator.com/item?id=3522965 https://news.ycombinator.com/item?id=3522965

purringmeow 12y ago

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

kdvh 12y ago
Lato is the sixth one in the showcase.
- purringmeow 12y ago
  Oh, I just noticed it. But it's only the title, the rest is Merriweather.
  - alfredxing 12y ago
    For me the sixth is all Lato -- the blue block that starts with "Unity"
gavinballard 12y ago
It's there (the Unity / Rhythm / Balance... example)!
capex 12y ago
I don't know what's wrong with Lato at 400 weight. Its either the rounded extra-wide dot or something else, but Lato at its standard weight doesn't seem right.

moeamaya 12y ago

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 12y ago
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 12y ago
  > 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 12y ago
    Except standard specimen samples are gibberish where these bits are more opinionated

shaydoc 12y ago

love this. I use Raleway, its is a beautiful typeface IMHO http://anexiledderryman.com/cv http://anexiledderryman.com/cv

gokhan 12y ago
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
- mcguire 12y ago
  Those are "lowercase" or "oldstyle" numbers; they are built to go with mostly-lowercase, running text. I think they look odd with sans serif fonts and anywhere outside of blocks of text, but completely and totally wonderful otherwise.
- jp555 12y ago
  I love old-style numbers. Why should letters get all the ascender & descender fun! :P
  - shaydoc 12y ago
    Agree completely!
- shaydoc 12y ago
  I think they are artistically wonderful! It all depends how you perceive things, isn't it
munificent 12y ago
Raleway is a great font, but I'd suggest not using it for body copy. It's really a display font. If you want a sans serif body font to pair with it, I think it goes well with Source Sans Pro.
- shaydoc 12y ago

Kiro 12y ago

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

dbcooper 12y ago
Open chrome://flags/ and activate "Enable DirectWrite". That will give you proper rendering of webfonts. (Like FF and IE on Windows.)
- schwarze_pest 12y ago
  Here is a newer Chrome with DirectWrite enabled by default: http://i.imgur.com/yrmxzkg.png http://i.imgur.com/yrmxzkg.png I still prefer Firefox.
- patja 12y ago
  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.
- darrenkopp 12y ago
  or run the new 64-bit chrome. I could never get the DirectWrite flag to work for me. Finally I got things working via registry changes, but I undid them and installed the new 64-bit beta and it's been amazing.
gnufied 12y ago
_at least_ fonts presented there look stunning on Linux (using Firefox). Not sure,why they won't look great on Windows though.
- Slackwise 12y ago
  The Windows font rendering system tries to aggressively fit typefaces into the pixel grid. This is a throwback to low PPI displays from back in day. Linux's fontconfig allows for all sorts of configuration. Ubuntu, by default, probably has the nicest config. Otherwise, I personally turn off all hinting but leave subpixel rendering on. Brings it closer to what OSX does. Personally, the best font rendering I've ever seen is on a high PPI Android phone. Most pages that are more than 2-3 paragraphs I forward to my phone for reading, since my desktop displays aren't that great.

sirois 12y ago

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 12y ago
Google already sorts that way, now. See 'Sorting: Number of Styles'.

jberryman 12y ago

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 12y ago
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/tools/subset/subset.py https://code.google.com/p/googlefontdirectory/source/browse/...
- deleted 12y ago
  [deleted]
- mark-r 12y ago
  Do the fonts you download yourself from Google contain the missing information? Or do you have to dig up an original source?
  - makmanalp 12y ago
    I usually go back to the original source, and use something like http://fontprep.com/ http://fontprep.com/ or http://www.fontsquirrel.com/tools/webfont-generator http://www.fontsquirrel.com/tools/webfont-generator to subset and generate webfonts. But check the font license, some fonts don't allow you to do this.
- unicornporn 12y ago
  You can get some of the best fonts from Google Web Fonts here http://brick.im/ http://brick.im/ with ligatures etc.

z1mm32m4n 12y ago

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 12y ago
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.

danbucholtz 12y ago

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!

stevewilhelm 12y ago
Some comments on your PaperBox logo. The font feels a bit thin and spindly. Gives me the impression of delicate or fragile. Might want to look at Kerning. The capital P is to far from the a, and the r is too close to the capital B. The blue graphical logo is also too close to the text and possibly too big; it feels cramped and to some extent overpowers the name. See LinkedIn [1] or Thompson Reuters [2] for examples on how to make your font more substantial and how they balance the graphical image verses the text. [1] https://developer.linkedin.com/documents/branding-guidelines#general-use https://developer.linkedin.com/documents/branding-guidelines... [2] http://thomsonreuters.com/site/reuters-brand-attribution-guidelines/ http://thomsonreuters.com/site/reuters-brand-attribution-gui...
stevejohnson 12y ago
First, give this a read: http://practicaltypography.com/ http://practicaltypography.com/ I like your design. I just have a few nitpicks... * Only center titles; don't center body text! * Your body text should be 90 characters wide, max. The paragraph under the photo is much too wide. * Spacing under titles seems too small to my eyes. * Triangles as bullet points look a little odd (this is really subjective) * The login button is in a bit of a weird place. Right-aligned is nice, but it looks misaligned vertically with the logo. My take on this stylesheet would be... .headline { margin-top: 0; } .h1, h2, h3 { margin-top: 0.7em; margin-bottom: 0.7em; } Remove text-center from any body copy. Use <ul> tags for lists. Regardless of the above, your work looks great.
- mden 12y ago

tomasien 12y ago

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 12y ago

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.

namanyayg 12y ago

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/

mercnet 12y ago

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

hypertexthero 12y ago

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.