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

TrueType Hinting and Font Rendering

Tom Rickner for FontsLive: “It is a significant challenge to produce a font which renders the same pixels in multiple environments.”

Two modular scales Feb 16, 2011

Owen: I’m curious to know why you chose the major and minor seconds as the intervals to base your modular scales on. Both those intervals in music are quite dissonant.

Bernard: Indeed they are. Without context, when looking at major and minor second pages, they tend to feel almost slightly squat. I decided to use the seconds for a few reasons.

Great conversation. And Dribbble is a great place for it. This level of technical detail and aesthetic reasoning is exactly what we need as web typographers.

Ask me about this · #Modular Scales#Critique

New Bulletproof Font-Face Syntax

Ethan Dunham: “The hack that makes this work is the ‘#’ following the EOT filename. Seriously.”

Readability, readers, and designers Feb 1, 2011

A new version of Readability was announced today. It’s not just an update to the bookmarklet you may remember; It’s a whole new thing. Plus, the folks at Arc90 teamed up with Instapaper for iOS apps. Here are Richard Ziade’s and Marco Arment’s thoughts on the new effort.

It’s a super interesting model, but what intrigues me more is the potential for a new balance between reader preferences and designed experiences. As designers, we need to argue for the value of typesetting, and compositional choices, crafted for the specific content at hand. As one theme option in the Readability interface, a reader should be able to choose “intended design.”

Web designers: Our part of such a bargain is to design responsively and provide a Readability-style experience for our content. An experience that looks good, reads easy, and – most of all – is meaningful for our particular content. Why is it important that they read the piece typeset with the particular font you’ve chosen, or typeset with the size, leading, and measure among which you’ve worked hard to find balance? Here’s why I think it’s important.

Congratulations to the folks behind Readability. This new thing is exciting, well made, and potentially a step forward for not only publishing but the design of reading experiences. Web designers: Let’s give readers a reason to trust our design decisions.

Ask me about this · #Reading#Responsiveness

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

“Grids do not exist in a vacuum. They exist in relation to the content. We never start with a grid. We start with an idea which is then translated into a form, a structure.”

Linda van Deursen (via arstype, JSM)

“What’s the rationale behind specific layout and navigation choices for *this content* and will be they be thoughtlessly intuitive to the reader?”

Emphasis mine. Craig Mod for A List Apart: A Simpler Page.

The week in type Jan 11, 2011

In case you missed it, I Love Typography’s venerable The Week in Type is back! As you’d expect, there are loads of interesting type-related links and reads therein. Between this and Typedia’s Type News, my Saturday mornings are booked solid.

Ask me about this · #News

Font Remix Tools

A set of plugins by Tim Ahrens that help type designers harmonize glyph shapes, tune letters, and create different versions of glyphs for condenseds, extendeds, small caps, etc.

Fontscape

"An independent directory of typefaces organized into categories."

One of the example layouts from my Build talk. This one uses a modular scale.

One of the example layouts from my Build talk. This one uses a modular scale.

“Few type companies today invest in the education of type usage and the heritage of type design the way that Monotype or ATF did in the first half of the 20th century. Compare the Image Club catalog with, let’s say, the ATF Type Specimen book, or Agfa’s printed materials with the Monotype Recorder, and you’d have to be blind not to see the obvious difference in quality, both visually and in terms of content. Where are the Stanley Morisons, the Beatrice Wardes, the Jan van Krimpens, the Frederick Goudys and the Morris Fuller Bentons of today?”

Rudy VanderLans, The Trouble with Type, Emigre #43, Summer 1997

The non-typographer’s guide to practical typeface selection

Like it says, by Cameron Moll. From 2005, but the advice is timeless. Shame about all of the link rot.

“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
Previous 1 2 3 4 Next