New from Typekit: Faster font browsing
October 20, 2011
Today, we’re excited to release the first of many improvements to the Typekit website. We set out to make it as fast as possible to browse thousands of fonts. Just a few clicks, in a few seconds, to get to what you want.
To start, we completely revamped the tagging system, ditching the plethora of unorganized, and often confusing, tags, and replacing it with a much more robust system designed around font classifications (i.e., serif, monospaced, etc.) and properties (i.e., x-height, width, weight, etc.). This means the new tagging system is derived from the physical characteristics of the fonts themselves — a much more useful means for discovery.
Additionally, we’ve added two new categories of recommended fonts: headings and paragraphs. These categories are handpicked by Typekit’s staff and feature fonts that are both aesthetically and technically exceptional. (All of the paragraph fonts have been manually hinted, and many of the headline fonts are served with PostScript outlines.) If you’re looking for the best fonts in Typekit’s library, start here.
The look of the tags has also changed, trading text links for a visual presentation of each tag. This also aids in browsing fast, and it means you can successfully browse by font characteristics even if you are unfamiliar with the terminology. Helpful tips are tucked away for those looking for more information about the tags themselves.
We consulted with type designers and typographers on the new taxonomy, and our type team then reviewed and retagged every single font in the library. The result is a browsing experience that’s much more intuitive, and fast. Try it and see for yourself.
Under the hood, we’ve worked incredibly hard on performance, taking advantage of the capabilities of the latest browsers, while gracefully degrading in older ones. You can now see many more than nine fonts per page (an oft-heard request, and one we’re very happy to deliver on). In modern web browsers that support pushState (such as the latest versions of Chrome, Safari, and Firefox), we update the url as you browse, so you don’t have to wait for the entire page to reload. As you click around, the browser progressively loads only the necessary information. (In older browsers, we fall back to the standard behavior of links and reload the page each time.)
There’s a lot more to this new interface on the technical side. We’ll have more to share about the process of creating it in the coming weeks.
And there’s more coming down the line: better search, improved detail pages, favorites (at last!), and new ways to preview fonts — plus even more help finding the perfect font for your needs. Stay tuned!
Update: By popular request, we’ve added a size slider to the browsing pages, so you can now adjust the size of the fonts as you browse. Enjoy!