Beautiful web type – typefaces from the Google web fonts directory | Hacker News Reader

Beautiful web type – typefaces from the Google web fonts directory

hellohappy.org

346 pointsKhalilK66 comments

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.

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

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

I usually go back to the original source, and use something like http://fontprep.com/ or 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.

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

This is gorgeous and seems to work very well. Thank you!

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

http://brick.im/fonts/

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

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.

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.

It's because GitHub Pages (where the Brick site itself is hosted right now) runs an outdated version of Jekyll that doesn't support Collections yet.

You can track the issue here: https://github.com/alfredxing/brick/issues/62

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

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.

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.

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

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

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!

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

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.

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.

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.

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.

Hire a designer

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/

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 !

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

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

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

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

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

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.

There is also infinality fontconfig mod, which brings even more options and some sane pre-sets (it can even mimic Windows).

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

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?

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

There is a windows service app called gdi++ which replaces the default renderer. I use it but sadly it won't help others visiting your own site

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

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.

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

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

I still prefer Firefox.

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.

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.

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

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.

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/

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/

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

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.

love this.

I use Raleway, its is a beautiful typeface IMHO

http://anexiledderryman.com/cv

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

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.

I love old-style numbers.

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

Agree completely!

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

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.

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 😀

The negative letter spacing is a little jarring imo.

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?

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.

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

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

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

Lato is the sixth one in the showcase.

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

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

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

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.

Reply on news.ycombinator.com