Beautiful web type – typefaces from the Google web fonts directory

http://hellohappy.org/beautiful-web-type/?1

by KhalilK • 12 years ago

346 66 12 years ago

hellohappy.org

purringmeow2• 12 years ago

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

kdvh• 12 years ago

Lato is the sixth one in the showcase.

purringmeow2• 12 years ago

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

gavinballard• 12 years ago

It's there (the Unity / Rhythm / Balance... example)!

capex• 12 years 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• 12 years 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• 12 years 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.

munificent2• 12 years 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.

shaydoc4• 12 years ago

love this.

I use Raleway, its is a beautiful typeface IMHO

http://anexiledderryman.com/cv

gokhan• 12 years 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

mcguire• 12 years 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• 12 years ago

I love old-style numbers.

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

shaydoc4• 12 years ago

I think they are artistically wonderful! It all depends how you perceive things, isn't it

munificent2• 12 years 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.

shaydoc4• 12 years ago

I appreciate the feedback/tip. I am no expert in typography by any means. and I will be interested to A/B the contrasting styles. I have seen it used in body before and I liked it, hence I used it 😀

davebees• 12 years ago

The negative letter spacing is a little jarring imo.

Kiro• 12 years ago

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

gnufied• 12 years ago

_at least_ fonts presented there look stunning on Linux (using Firefox). Not sure,why they won't look great on Windows though.

Slackwise• 12 years 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.

markild• 12 years ago

I seem to have the same issue with Chrome on Windows.

Chrome[1] seems to not do any anti-aliasing, as opposed to Firefox[2].

[1] http://i.imgur.com/ZgoB9Nn.png

[2] http://i.imgur.com/XWsEMXv.png

jonahx• 12 years ago

If you want to avoid that, do you have to stick with standard system fonts for chrome windows? Is the issue google web fonts specifically?

phs2501• 12 years ago

What you're seeing is that Chrome is using the (terrible) old Windows GDI ClearType font rendering, whereas Firefox is using the (newer, less terrible) DirectWrite font rendering. This can be enabled in Chrome by visiting chrome://flags . Specifically, what you're mostly seeing here is that ClearType does not antialias in the Y dimension, which is why you see stairstepping. (Firefox will also use GDI font rendering if it is not using Direct2D acceleration, IIRC.)

Of course, a lot of people have complained that DirectWrite rendering is "fuzzy", so to each their own I guess.

I've been starting to use webfonts and this issue has been very annoying for me (as a Linux user, where pretty much all fonts look good).

itp• 12 years ago

Yeah, you're running up against https://code.google.com/p/chromium/issues/detail?id=137692 (which appears to finally be closing in on a point where it can be fixed?)

stan_rogers• 12 years ago

I'm using Chrome 35.0.1916.153 m on Windows, and, um, there's something wrong — there's nothing wrong with the web fonts! Apart from the Merriweather Ultra-Bold that's titling De Beneficiis, that is (and a quick check at Google shows that that same font is rough in the bold weight as well). Everything else is clean and well-aliased, and that's never been the case before.

dbcooper• 12 years ago

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

schwarze_pest• 12 years ago

Here is a newer Chrome with DirectWrite enabled by default: http://i.imgur.com/yrmxzkg.png

I still prefer Firefox.

patja• 12 years 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• 12 years 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.

sirois• 12 years 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/

namanyayg2• 12 years ago

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

eriktrautman• 12 years ago

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

jberryman• 12 years 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.

makmanalp3• 12 years 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/...

mark-r2• 12 years ago

Do the fonts you download yourself from Google contain the missing information? Or do you have to dig up an original source?

unicornporn• 12 years ago

You can get some of the best fonts from Google Web Fonts here http://brick.im/ with ligatures etc.

thejosh• 12 years ago

since no one is going to do that ever in real life

Yes they will, it's the easiest way to get different fonts how you want them.

z1mm32m4n• 12 years 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-r2• 12 years 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.

danbucholtz2• 12 years 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• 12 years 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...

[2] http://thomsonreuters.com/site/reuters-brand-attribution-gui...

stevejohnson• 12 years ago

First, give this a read: 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• 12 years ago

Partially off topic, but page layouts like the one you linked to really come off as unnatural to me. Specifically the way the margin for annotations is used in the centering of the main content is distracting. It's like you are giving equal relevance to sporadic notes as to the main article. I'm surprised to see it in a typography book.

clay_to_n• 12 years ago

I think you need more whitespace on your website. Even the very top banner looks cluttered, with the logo super close to the name, and both right above the buttons, and all of it right above the image. No space to breathe, especially when you mouse-over the buttons.

Farther down, I'd work on the "You need PaperBox if..." section - the way the right bullets are aligned under the "p" (on my screen) makes it look like the title is not centered. I might add more vertical space before the bullets, and potentially also move the bullets all closer to the center / allow them to be more than one line.

The last section, with the colored fonts and images, looks better than the earlier parts. I'd play with adding a little more vertical space before each header and image.

Hope some of this advice is useful to you. I know you asked for advice on the fonts, but I thought since you're looking for advice I might as well offer some.

vertex-four• 12 years ago

Unrelated to fonts specifically, but the white text on the image is extremely difficult to read, I suspect due to being over a fairly busy background. The entire thing is simply fuzzy.

goldenchrome• 12 years ago

Hire a designer

cheapsteak2• 12 years ago

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

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 and http://monanetwork.com/

lifeisstillgood• 12 years ago

And welcome to five grands worth of consultancy, courtesy of a skilled practitioner, a lunch hour, and HN

This is what amazes and inspires me about open source and places like HN - the value of community and respect is greater than rubies - yet had the GP offered five bucks for a quick look everyone would have been outraged.

Good luck with the fonts !

danbucholtz2• 12 years ago

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

jre• 12 years ago

Looks like a really good product. I've been thinking about writing something like that for some time. I'll give paperbox a shot !

tomasien• 12 years 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• 12 years 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.

namanyayg2• 12 years 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/ [1]: http://namanyayg.github.io/pretty-open-type/

mercnet• 12 years 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• 12 years 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.

Beautiful web type – typefaces from the Google web fonts directory

Related Stories