A terrific rundown of all your options when it comes to web font loading.
A handy tool for testing the legibility of different typefaces under all sorts of conditions.
I’ve always loved the way that Edward Tufte consistently uses Bembo to typeset his books. Here’s a version made for screen and freely licensed.
You can think of this as a short book or a long article, but either way it’s a handy overview of typography on the web:
A concise, referential guide on best web typographic practices.
Mind you, I take issue with this assertion:
Establishing a vertical rhythm is simple.
Some smart thoughts on web fonts.
I love good typography but I have to agree with the sentiment expressed here.
System fonts can be beautiful. Webfonts are not a requirement for great typography.
A wonderfully thoughtful piece on typography, Jan Tschichold and the web. This really resonated with me:
It’s only been over the past year or so in which I’ve recognised myself as a ‘Web designer’ with a capital W, as I now believe that something happens to information and technology, and even typography itself, when people pass through these interconnected networks and interact with hypertext.
It’s for these reasons that I don’t believe in “digital design” or “designing for screens” and it’s why I’m often attracted to one particular side of this spectrum.
Robin proposes three “principles, suggestions, outlines, or rather things-that-I-ought-to-be nervous-about when setting text on the web”:
- We must prioritise the text over the font, or semantics over style.
- We ought to use and/or make tools that reveal the consequences of typographic decisions.
- We should acknowledge that web typography is only as strong as its weakest point.
There’s an in-depth look at applying progressive enhancement to web type, and every single link in the resources section at the end is worth investigating.
Oh, and of course it’s beautifully typeset.
We have some new
font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.
Charlotte talks through some of the techniques she used when she was building the site for this year’s UX London, with a particular emphasis on improving perceived performance.
A single page showing all the weights available from Google fonts at a glance.
The transcript of a great talk by Wilto, focusing on responsive images, inlining critical CSS, and webfont loading.
When we present users with a slow website, a loading spinner, laggy webfonts—or tell them outright that they‘re not using a website the right way—we’re breaking the fourth wall. We’ve gone so far as to invent an arbitary line between “webapp” and “website” so we could justify these decisions to ourselves: “well, but, this is a web app. It… it has… JSON. The people that can’t use the thing I built? They don’t get a say.”
We, as an industry, have nearly decided that we’re doing a great job as long as we don’t count the cases where we’re doing a terrible job.
The missing font generator for Mac OS X.
Very handy for subsetting fonts for the web. It doesn’t (yet) export WOFF2 unfortunately.
This is such a delightful story of a brilliant mistake—true typographic nerdery and nostalgia.
Read all the way through for a free gift.
Websites should not come with minimum software requirements.
It’s really great to see the performance improvements being made by the Vox team. This is the one that I think will make the most difference:
Our Revenue Team is increasing focus on the impact our advertising has on user experience and overall performance. One of their biggest initiatives has been to change the way ads load from synchronous to asynchronous, which has been underway for several months and is nearing deployment.
A long zoom and then a deep dive into web typography.
Google Fonts aren’t renowned for their quality but this is a beautiful demonstration of what you can accomplish with them.
A quick drag’n’drop way to base 64 encode your web fonts so you can stick ‘em in local storage.
Smart thinking on optimising the perceived performance of loading web fonts: if you prioritise the most widely-used weight and style (usually the regular roman), and load other weights and styles subsequently, then it appears as though the font is ready sooner.
Smart thinking here on the eternal dilemma with loading web fonts. Filament Group have thought about how the initial experience of the first page load could be quite different to subsequent page loads.
Many of the free fonts available from Google are pretty bad, but this site showcases how some of them can be used to great effect.
An in-depth look at using icon fonts without any nasty edge-cases ruining your day.
The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.
A wonderful essay about type on the web by Jessica.
A handy walkthrough of using icon fonts. The examples here use the excellent IcoMoon service
This issue of A List Apart is a great double-whammy. Lara Swanson has a ton of practical tips for front-end performance enhancements, and Brian dives deep into making your own icon fonts.
The slides from Josh’s super-quickfire presentation at the Responsive Day Out.
Some handy tips for starting off your responsive designs from the type out.
A lovely new service from Mike Stenhouse: install the bookmarklet and then when you come across a website with a nice combination of fonts, you can save a snapshot of the page (and its fonts) for later perusal. You can then browse those fonts on Typekit, Fontdeck, MyFonts or Google Fonts.
This is a great free service for generating small subsetted icon fonts. Launch the app and have a play around — you can choose from the icons provided or you can import your own SVG shapes.
Nice touch: you can get the resulting font (mapped to your choice of unicode characters) base-64 encoded for your stylesheet.
A great in-depth description by Paul of how he optimised his site. More of this please!
Here’s something that Josh debuted at Smashing Conference: a script for responsive designs to adjust font-sizes based on a desired line-length.
Inevitably, it’s a jQuery plugin but I’m sure somebody could fork it to create a standalone version (hint, hint).
It’s really good to see more providers of icon font sets. These look very nicely designed indeed.
An informative post on ligatures in web type from Elliot. And, oh yeah, he redesigned his site again (it’s unsurprisingly lovely).
Chris defends himself from some inaccuracies I flung his way, regarding fonts and DRM.
In an interesting new twist, Pictos now allows you to put together a custom subset of their icons as a font that can be served from their server just like any other webfont service.
Some of these pay-what-you-want fonts are actually rather nice.
Richard starts diving into some the nifty ligatures that are becoming available to us in OpenType fonts with CSS3.
Emigre’s font library is now available as web fonts that you can self-host (providing you take some protective measures with .htaccess). That means Mrs. Eaves is available for the screen. W00t!
Heaven Devoid of Stars – a tale of cross-browser kerning | Clagnut § Browsers · Typography · CSS techniques
Richard dives into the differences in how browsers handle kerning. Be sure to click through to the beautiful finished result.
A great article by guest author Ethan on the various approaches to sizing text in CSS.
Richard would like your help. Take a few minutes to run through a card-sorting exercise to help classify fonts in a more meaningful way.
Take all the fonts on your operating system, superimpose them, and whaddya get? This.
This handy matrix shows the effect of different -webkit-font-smoothing setting on various text combinations (serif/san-serif light/dark, etc.).
Jake’s talk at DIBI earlier this year was absolutely fantastic. It features a rape reference, a story about pissing, and a Human Centipede metaphor.
It’s also very, very informative. Watch this.
A cute idea: see how signs (mostly in Brazil) would look if they were set in Helvetica.
Well, ya learn something new every day …or at least I did. I had no idea about the rem unit—relative em—for font-sizing in CSS.
A useful bookmarklet that suggests font stacks to match up with the web fonts on whatever page you happen to be viewing.
A beautiful glossary of typographic terms.
A handy bookmarklet that allows you to examine any piece of text on a website to determine what font it is set in.
Clearly my knowledge of cheese and fonts is way worse than I realised.
Syntax for @font-face that’s more bulletproof than the techniques previously considered bulletproof …’till an even more bulletproof syntax comes along.
A handy browser-based way of previewing the fonts installed on your computer.
A somewhat condescending piece of work about Comic Sans …from a designer who uses the oh-so-passé Museo on his personal site.
Live by the judgemental sword, die by the judgemental sword.
A handy list of installed fonts on the iPhone and iPad.
It's a type drawer that's also an advent calendar. Responsive too. Check it every day between December 1st and 24th.
Lovely typographic showcases from Stan and friends.
The newest web fonts delivery service is a collaboration between five foundries: The Font Bureau, Ascender, Roger Black, Petr van Blokland and DevBridge.
Cute wearable typography snobbery.
A nice look at some rules of thumb for combining typefaces.
Ascender is selling (and hosting) webfonts now.
Google-hosted free-as-in-beer webfonts.
Get a glimpse behind Fontdeck's curtain.
Here's a Kickstarter project worth supporting: fund a documentary on crafting typefaces.
A thoroughly researched and well-written look at font stacks, with some practical suggestions and advice.
A store of fonts for sale, many of which have licenses that allow you to use them with @font-face.
A very handy list of fonts ranked from "less likely" to "almost certain" to be installed.
Some beautiful typefaces here, gathered together for your enjoyment.
Beautiful writing on headstones.
Test cases for font-linking.
Steve Souders does the research and reveals the sad truth about the effect font-linking has on performance.
A quick, slick primer on font linking.
A good look at choosing fonts for font linking.
A wonderfully engaging history of Johnston Underground.
Getting font-linking to work in all browsers.
Like Wikipedia for typefaces. Beautiful work from Jason, Dan, and others.
"A tribute to two former bookkeepers who impacted American design & typography for all time."
Elliot gives a rundown of the font delivery services for the web that are on the way.
A good, clear-headed summation of font linking.
Web fonts. Where are we? Will web fonts ever be a reality? | i love typography, the typography and fonts blog
A great round-up on the current state of web typography following TypeCon 2009.
@font-face for all — Ted shows how to convert TTF files to EOT using the command line.
Another font-linking service is on the way.
A good description of how font linking works.
Jeff's got something up his sleeve that will help the cause of web typography.
A great example of @font-face in action: comparing Graublau Sans Web with with Lucida Grande.
A repository of liberally-licensed fonts to link to with @font-face.
"We're done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won't have it. It's time to raise our standards. Here, you'll find only the most well-made, free & open-source, @font-face ready fonts."
An excellent take on font-linking from someone who designs typefaces for a living.
Mark Pilgrim knows the score.
Ampersands. Lovely, lovely ampersands.
Like Shazam, but for fonts. Snap a picture of some text on your iPhone and this app will phone home to the WhatTheFont mothership in order to identify it for you.
The slides from Richard's superb Skillswap presentation.
A look at different font stacks out there in the wild.
Font-weight is still broken in all but one browser | Clagnut Â§ Browsers Â· Typography Â· CSSÂ techniques
A superb bit of browser research by Richard. "Thereâ€™s more to the lives of many typefaces than just Bold and Regular, but almost no browsers follow the proper CSS 1 way of specifying Light, Semibold, Black and other weights. There is a workaround,â€¦
Top Trumps with typefaces.
A wiki for tracking which fonts have licenses that allow for @font-face embedding with CSS.
John has come to the same conclusion as Richard with regards to font embedding. In short, the font foundries are missing a huge revenue stream. They could be offering fonts on a per-domain basis (a la Google Maps or any other third-party API). Remâ€¦
A handy little tool that's beautifully designed. View typeface/style/size combinations and then grab the CSS.