Nice Web Type

For the betterment of typographic style and practice.

Nice Web Type is one place for web typography, following experiments, advancements, and best practices in typesetting web text. Handcrafted by Tim Brown, Type Manager for Adobe Typekit.

Visit nicewebtype.com for more.

Twitter: @nicewebtype Dribbble: timbrown

Notes & bookmarks RSS

CSS and type rendering Jan 27, 2011

Over at Typekit, I wrote about CSS properties that affect type rendering.

I talked about text size, contrast, rotation, and vendor-specific font smoothing, but additional resources/considerations are being linked up in the comments. Check it out, and share your own experiences.

Ask me about this · #Elsewhere#Typekit#Rendering#CSS

Web fonts via 2010 Jan 14, 2011

Web fonts got a lot of sensational press last year. I urge you to look past the (obligatory?) handful of web font services that are routinely mentioned, and rather at last year’s extraordinary feats of professionalism that have catalyzed the growth of typography and web design right under our noses.

In short: Stop writing, “Thanks to web font services like Typekit, Fontdeck, Kernest…” The real thanks goes to designers who decide to use web fonts, people who open their minds to type as a valuable web asset, people who share what they learn, type foundries sweating the details, and the folks moving WOFF forward.

Designers redesigning, shops redefining

Websites are being made with web-standard CSS @font-face. Whether you attribute this to Apple products being incompatible with Flash or designers’ favorable experiences with web fonts, it’s happening. Sites big and small are planning and executing redesigns with web fonts. Designers are not only experimenting, but convincing their colleagues, bosses, and clients that web standards are the right way to craft typography on the web. It’s amazing to consider this industry shift, especially when you see very dynamic HTML/CSS/JS experiences that have been made by traditionally Flash-based web shops. Not surprising, but amazing.

In this context, some resources worth mentioning are the “web” category at Fonts In Use (although not all of the entries in this category use web fonts) and Typekit’s series of Sites we like blog posts, both of which showcase redesigned sites’ web typography, talk about the typefaces being used, and provide a means for public discussion.

Fonts are being recognized as a web asset

People are opening their minds to a new mental model: fonts as a valuable web asset. Prior to last year, many (certainly not all) web designers had never been familiar with the concept of a type library as something they should care about and pay for. Some reasons that come to mind are the patchwork nature of many web professionals’ educational backgrounds and workplaces, and the availability of massive collections of digital font-shaped objects. Even for responsible designers, the hassles of using type with replacement techniques have always been devastating. On top of this all, Microsoft’s core web fonts have been ubiquitous and, for all intents and purposes, free.

Given this context, it’s no wonder that fonts have seemed like something web designers can’t get easily or cheaply enough. However, keep in mind that designers who think of type this way aren’t bad people, they just need to learn how much hard work goes into type design. They need help discovering the value of type. And Typekit, long before I came on board, made several extraordinary decisions to help web designers discover that value. Although these decisions were made before 2010, they’re useful for context.

The concept of kits, as anyone who has both used Typekit and rolled her own @font-face definitions can tell you, simplifies and compartmentalizes the experience of using web fonts. Kits make managing font files and settings easy, so designers can instead spend their time just getting to know type.

Another important decision Typekit made was to offer a subscription library, rather than individual font license purchases. Offering customers a library over which they could feel ownership, at prices that worked for an audience used to “free,” struck a critical balance and laid a foundation for education about type’s value.

"My point is that webfonts can’t be all things to all people AND free, or close to it." — Christian Schwartz

Mr. Schwartz is right. Great type costs money. In 2010, Typekit announced a second kind of library with which many people are still not familiar: My Library, to which customers can add web licenses they have purchased directly from type foundries, at prices those foundries determine. Committed customers have routinely augmented their Typekit library subscriptions with these external purchases, and these customers use Typekit as a way of not only serving web fonts but as a means of organizing their personal type library. Plus, because people feel this investment in Typekit, they read what we write…

People are learning and sharing

I have already expressed my happiness and gratitude that sharing knowledge is a priority at Typekit. Consider Typekit’s posts (some of which I wrote) on font metrics and vertical space in CSS, style linking in IE, and browser support on mobile devices. Consider also our series’ on type rendering and font events, our type studies by Ryan Essmaker and Trent Walton, and our open source contributions — like WebFont Loader (with Google) for greater control over font loading and fallback styles, and Speakeasy for language support.

Folks from all over the web shared important ideas and resources last year.

Web fonts were a hot topic at excellent conferences like SXSW, TypeCon, and ATypI, and were even the subject of a dedicated conference: Webfontday. See Bert Bos’ presentation slides from SXSW and Vlad Levantovsky’s ATypI slides on WOFF. If you know of other presentation materials made available online, let me know: @nicewebtype.

My Pinboard bookmarks are full of amazing stuff that I’m very thankful people wrote about. Like Peter Bil’ak’s article on hinting, Martin Wenzel and Christoph Koeberlin’s Introduction to OpenType Substitution Features at I Love Typography, and two inspiring email newsletters from H&FJ: Four Ways to Mix Fonts, and Finishing Touches. And like PPK’s article on pixel density and CSS measurement, @font-face syntax refinement from Paul Irish, font naming conventions from Jon Tan, John Daggett’s post on Firefox 4 OpenType feature support, and Inayaili de León’s CSS wish list for 24ways.

The folks at Adobe (Adobe!) published articles, week after week in 2010, about web font technology, and even took requests from web designers about which Adobe fonts they’d like to see next as web fonts.

This is how the web grows. Having these shared resources as a baseline helps us think, talk, and make better things than we did before. This cycle of learning and sharing outlasts technologies, standards, and lives. If there’s one thing I know about the future of typography, it’s that we’re all in this together. But thanks to all these folks growing the web, I know a little more than that.

The links mentioned above are all in my Pinboard bookmarks, which now appear in Nice Web Type’s tumblr (mid-redesign) and RSS feed. If you know of other good resources from last year, tell your friends and /cc @nicewebtype.

Type designers are working incredibly hard

Worldwide, foundries and independent type designers are bringing their typefaces to market — so that web designers can actually use them. This isn’t as simple as changing the words on an End User License Agreement that comes with font files. Type designers who care about the quality of their typefaces sweat and worry over details unfathomable by ordinary human beings, in order to give customers what they deserve: trustworthy web fonts that work in all browsers, and straightforward terms of use.

Designing or adjusting fonts for use on screens is an expensive, time consuming, and nearly thankless job, despite momentary cheers of joy when a particular typeface becomes available for web use. The way I see it, type designers take one of three approaches:

  1. Offer web fonts, whether the type is web-ready or not.
  2. Prepare type for the web, make it available to web designers, listen, learn, improve, and update.
  3. Do not offer typefaces for web use.

Three is sad, but understandable; Some typefaces always remain of their own time, made for a bygone means of production. One and two are worth discussing: How ready is web-ready? The way web designers see it, I’m sure, is that nothing is ever finished. To evolve, they need to experience typesetting with web fonts and share their experiences — and so, they need fonts!

My guess is that foundries see “ready” as equal parts screen preparation, testing, business preparation, and marketing strategy. And getting ready takes time, as this is a matter of both livelihood and legacy for type foundries.

It’s tough.

In any case, I’m thankful for foundries who have chosen to offer web fonts sooner rather than later, even though it has meant the incremental release of their catalogs. Their openness toward the web market and willingness to iterate based on real-world use has helped us all move forward. The risks these folks have taken, to grow the way the web grows, is worth remembering.

Sure, web font services have provided a means of universal browser support and a variety of flexible licensing terms, but without type foundries that wouldn’t amount to much. Next time you see your local type designer in the grocery store, be sure to thank him or her for all the hard work. Or you could just send a @mention on Twitter (see Ivo Gabrowitsch’s list of type foundries).

WOFF, the web standard for type

You have probably heard of WOFF (Web Open Font Format). It’s a new file format (technically a packaging format) for web fonts that allows for XML metadata to be coupled with a standard TTF or OTF file, and for the whole thing to be compressed. WOFF is so awesome that in 2010, it became a W3C Working Draft. Tip your tuques to Tal Leming, Erik van Blokland, and Jonathan Kew, because these guys have scaffolded how we’ll purchase and use web fonts for years to come, given browsers a universal format to support, and given type sellers avenues to verify the legal use of their wares.

WOFF will create a clear distinction between type sellers and services that help you use fonts in your website (some of which may also host the fonts for you). Some type designers will be happy because they won’t need to rely on a third-party to do business. Web designers will be happy because they’ll be able to use any kind of tool they prefer, or no tools, to manage and host their type.

Some folks believe that WOFF will mean the end of web font services, but I don’t think so. I think it spells trouble for poorly designed, limited web font services, because right now the only reason web designers use those services is for the specific typefaces they offer.

Thanks, 2010

Conducted at once in focused solitude and with affable transparency, these efforts have shaped new businesses, inspired new design thinking, and have helped folks learn about web typography. To everyone who made, bought, sold, thought, shared, and learned web fonts in 2010: thank you. You made our future better.

Ask me about this · #WOFF#Typekit#Services#Foundries

“More complex letters can require special attention, and design-related questions arise: do we want to keep the black strokes consistent, or should we preserve the white inner space?”

Tim Ahrens for Typekit: A closer look at TrueType hinting

Type rendering Dec 17, 2010

Earlier today, I published a blog post over at Typekit that concluded our series on type rendering. Although I penned six of the seven posts in this series (type designer and Typekit team member Tim Ahrens wrote the penultimate post, a concise yet technical look at hinting), I speak as usual to our collective knowledge — as a team at Typekit, and as an industry of web and type professionals.

Matt Colyer, colleague of mine and engineer at Typekit, did most of the research upon which my claims are based, and is the kind of guy who never gets frustrated — even when you ask the same questions again and again, for clarity. He also provided invaluable technical edits for each article.

Mandy Brown, another colleague at Typekit, made magical edits to phrasing that make me sound like a genius and, more importantly, made key structural changes to the pace of the series. I wrote as best I could, attempting to stitch together what I thought mattered; Mandy made it digestible, added polish, and (most importantly of all) made sure the posts actually got published.

This series meant a lot to me. And not only because I got to collaborate with these special colleagues. Figuring out why fonts look one way or another – some great, some awful – across browsers and operating systems has been a frustrating mystery to me for years.

I had read, and kept bookmarked for months or years, a variety of resources that helped shape my personal understanding of type rendering. Thanks to investigative and authoritative articles by Thomas Phinney, Jon Tan, and Peter Bil’ak, on font technology, rendering engines, or both, I was able to more easily grasp the big picture as Matt and I did research. I knew how I wanted to communicate what I was learning.

Furthermore, conversations with Tim Ahrens (even before he joined the team) and Jason Campbell were instrumental to my own understanding of some specific details along the way. Can’t thank these guys enough for their generosity and time.

Before I joined Typekit, Paul Irish invited me to collaborate with he, Ethan Dunham, and Zoltan Hawryluk. We had very loose goals, but we shared some links and general knowledge. This was helpful and inspiring, but what I had always meant to contribute to that effort is exactly what we’ve now done with this series of posts at Typekit. I wanted to try and figure out as many specifics as I could – specifics that matter to web designers – and share them in a digestible way.

So I’m especially thankful that Jeff Veen made learning and sharing this stuff a priority. My time could have been spent on many other things. It’s really satisfying to not only have addressed this topic, but to also work each day under Jeff’s leadership, where sharing knowledge is as valuable as gaining that knowledge to begin with.

Ask me about this · #Typekit#Rendering

Typekit colophon bookmarklet Sep 17, 2010

Curious to know whether Typekit fonts are present on a page you’re viewing? Install the nifty bookmarklet that Paul Hammond shared in his post about Using the Typekit API from Javascript. Just drag this link up to your toolbar: Typekit?

Ask me about this · #Utilities#Typekit