Designer Elliot Jay Stocks talks about typographic rules on the web:
To summarize: we can hyphenate pretty well, but justification still has a way to go, so I’m afraid to say that we’re not going to be using them together the way we do in print any time soon.
88 different typefaces are mentioned on this informative Typewolf post; Avenir, Brandon Grotesque and Adelle lead the pack.
This typography learning resource has gotten a lot of buzz online and I can see why. Typekit is a well respected source of custom web fonts, and the backing of Adobe – with its many font foundries – doesn’t hurt either. You’ll find a few quick lessons, links to many external posts along with recommended book selections.
The 1910 design team posted some advice for optimal web typography on their blog. Some of it I’ve seen before, but rarely in such a concise yet helpful format. Here’s one of those “why didn’t I think of this myself” moments, regarding picking an optimal body text size:
If in doubt, just grab a camera and take a picture of the text from the desired viewing distance and compare this to a picture of a page from a regular textbook taken from 30 to 40 cm away. Alternatively hold the book somewhere between yourself and the screen while keeping one of your eyes closed. If the digital text is smaller than the printed one you’ll want to go bigger.
To quote from the site, “loved by hipsters & lazy designers.”
Mikael Cho writing at Medium:
I came across a study by psychologist Kevin Larson. Larson has spent his career researching typefaces and recently conducted a landmark study at MIT about how font and layout affect our emotions.
In the study, 20 volunteers- half men and half women- were separated into two groups. Each group was shown a separate version of The New Yorker- one where the image placement, font, and layout were designed well and one where the layout was designed poorly.
The researchers found that readers felt bad while reading the poorly designed layout.
Good design and good typography are more than just fluff. They make us happier.
Seeing Hoefler and Frere-Jones jump into the web font game with their own custom delivery solution is super exciting. Can’t wait to see web sites jump on board this; I’d bet money the quality will be uniformly excellent.
Almost any modern web designer now has to decide between potentially thousands of custom web fonts. To rapidly prototype different combinations in the browser, even with good front end development chops, can be pretty time consuming.
Typecast is a web app that tries to address this problem. You get a much more visual, WYSIWYG interface for trying out font combinations, but with the advantages of actual font rendering in the browser. I don’t see a personal need for the app given the cost ($29 a month isn’t a minor expense) and considering at my day job we’re mostly focused on Proxima Nova. But especially in an agency environment, this could be a huge time saver.
This is one of the best articles regarding web optimization for long form reading I’ve read in a while. Lots of great tips: don’t break page flow between articles, test how the typography looks on multiple devices and much more.
Designer Viljami Salminen:
As I earlier in that article wrote, typography for the Web is really hard to design anywhere else than inside the browser. This is today even more true than it was a year ago. Typography prototype tries to solve this by doing the hard choices before jumping to other design tools like Photoshop.
Viljami really has a great point here. I’ve seen way too many projects backpedal when a font was decided on that looks awesome in Photoshop, only to fall apart in actual browser usage in the middle of a development cycle. But it’s more than face selection, it’s also issues of size and scale, also briefly touched on in this post.