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