Categories
Accessibility Advocacy content copyright creativity CSS Design development DWWS Fonts Ideas industry links Real type on the web Standards State of the Web Tools Web Design Web Standards webfonts webtype

Web fonts now (how we’re doing with that)

THE WEB Fonts Wiki has a page listing fonts you can legally embed in your site designs using the CSS standard @font-face method. Just as importantly, the wiki maintains a page showing commercial foundries that allow @font-face embedding. Between these two wiki pages, you may find just the font you need for your next design (even if you can’t currently license classics like Adobe Garamond or ITC Franklin and Clarendon).

The advantages of using fonts other than Times, Arial, Georgia, and Verdana have long been obvious to designers; it’s why web design in the 1990s was divided between pages done in Flash, and HTML pages containing pictures of fonts—a practice that still, bizarrely, continues even in occasionally otherwise advanced recent sites.

Using real fonts instead of pictures of fonts or outlines of fonts provides speed and accessibility advantages.

Currently the Webkit-based Apple Safari browser supports @font-face. The soon-to-be-released next versions of Opera Software’s Opera browser, Google’s Webkit-based Chrome, and Mozilla Firefox will do likewise. When I say “soon-to-be-released,” I mean any day now. When this occurs, all browsers except IE will support @font-face.

IE has, however, offered font embedding since IE4 via Embedded OpenType (.EOT), a font format that enables real fonts to be temporarily embedded in web pages. That is, the reader sees the font while reading the page, but cannot download (“steal”) the font afterwards. Microsoft has “grant[ed] to the W3C a perpetual, nonexclusive, royalty-free, world-wide right and license under any Microsoft copyrights on this contribution, to copy, publish and distribute the contribution under the W3C document licenses,” in hopes that EOT would thereby become a standard. But so far, only Microsoft’s own browsers support EOT.

Thus, as we consider integrating real fonts into our designs, we must navigate between browsers that support @font-face now (Safari), those that will do so soon (Opera, Chrome, Firefox), and the one that possibly never will (IE, with a dwindling but still overwhelming market share).

The person who figures out a designer-friendly solution to all this will either be hailed as a hero/heroine or get rich. Meanwhile, near-complete solutions of varying implementation difficulty exist. Read on:

CSS @ Ten: The Next Big Thing

“Instead of making pictures of fonts, the actual font files can be linked to and retrieved from the web. This way, designers can use TrueType fonts without having to freeze the text as background images.” An introduction to @font-face by Håkon Wium Lie, father of CSS.

Real Fonts on the Web: An Interview with The Font Bureau’s David Berlow

Is there life after Georgia? To understand issues surrounding web fonts from the type designer’s perspective, I interview David Berlow, co-founder of The Font Bureau, Inc, and the ?rst TrueType type designer.

The W3C: @font-face vs. EOT

A discussion that shows why the W3C may not be able to resolve this conflict. (It’s kind of like asking the Montagues and Capulets to decide whether the Montagues or the Capulets should rule Verona.)

sIFR 2.0: Rich Accessible Typography for the Masses

Mike Davidson’s scalable and accessible remix of Shaun Inman’s pioneering use of Flash and JavaScript to replace short passages of HTML text with Flash movies of the same text set in a real font. The Flash movies are created on the fly. If JavaScript or images are turned off, the user “sees” the HTML text; text set in sIFR can also be copied and pasted. sIFR was a great initial solution to the problem of real fonts on the web, but it’s only for short passages (which means the rest of the page must still be set in Georgia or Verdana), and it fails if the user has a Flash block plug-in installed, as half of Firefox users seem to. It’s also always a pain to implement. I don’t know any designer or developer who has an easy time setting up sIFR. In short, while sIFR is an awesome stop-gap, real fonts on the web are still what’s needed. Which also leads us to…

Cufón – Fonts for the People

Simo Kinnunen’s method of embedding fonts, regardless of whether or not a browser supports @font-face.

Combining Cufón And @Font-Face

Kilian Valkhof: “Everyone wants @font-face to work everywhere, but as it stands, it only works in Safari and the upcoming versions of Firefox and Opera. In this article I’ll show you how to use Cufón only if we can’t load the font through other, faster methods.”

Adobe, Web Fonts, and EOT

Why Adobe supports Microsoft’s EOT instead of @font-face.

Introducing Typekit

Update May 28, 2009: Working with Jason Santa Maria, Jeff Veen’s company Small Batch Inc. introduces Typekit:

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

Read more

  • Web Fonts, HTML 5 Roundup: Worthwhile reading on the hot new web font proposals, and on HTML 5/CSS 3 basics, plus a demo of advanced HTML 5 trickery. — 20 July 2009
  • Web Fonts Now, for real: David Berlow of The Font Bureau has proposed a Permissions Table for OpenType that can be implemented immediately to turn raw fonts into web fonts without any wrappers or other nonsense. If adopted, it will enable type designers to license their work for web use, and web designers to create pages that use real fonts via the CSS @font-face standard. — 16 July 2009

[tags]fonts, webfonts, webdesign, embed, @font-face, EOT, wiki, css, layout, safari, opera, firefox, chrome, browsers[/tags]

Categories
An Event Apart Appearances Browsers Career client services Code Community content creativity CSS Design eric meyer events Happy Cog™ HTML HTML5 Ideas Images industry Information architecture jobs Redesigns Seattle speaking Standards State of the Web Surviving The Profession tweets twitter Working Zeldman

AEA Seattle after-report

Armed with nothing more than a keen eye, a good seat, a fine camera, and the ability to use it, An Event Apart Seattle attendee Warren Parsons captured the entire two-day show in crisp and loving detail. Presenting, for your viewing pleasure, An Event Apart Seattle 2009 – a set on Flickr.

When you’ve paged your way through those, have a gander at Think Brownstone’s extraordinary sketches of AEA Seattle.

Still can’t get enough of that AEA stuff? Check out the official AEA Seattle photo pool on Flickr.

Wonder what people said about the event? Check these Twitter streams: AEA and AEA09.

And here are Luke W’s notes on the show.

Our thanks to the photographers, sketchers, speakers, and all who attended.

[tags]aneventapart, aeaseattle09, AEA, AEA09, Seattle, webdesign, conference, Flickr, sets, Twitter, photos, illustrations, sketches, aneventapart.com[/tags]

Categories
A List Apart An Event Apart Appearances better-know-a-speaker cities Code Community conferences content creativity CSS Design development Education eric meyer events HTML industry Information architecture Seattle Web Design Web Standards

Seattle-bound

City of Puget Sound, Jimi Hendrix, and the space needle, here I come for An Event Apart Seattle 2009—two days of peace, love, design, code, and content.

[tags]seattle, aneventapart, webdesign, webstandards, design, conference, conferences, webdesign conference, webdesign conferences, standards, IA, UX, ericmeyer, jeffreyzeldman, zeldman, meyerweb[/tags]

Categories
Appearances Browsers content creativity CSS Design Fonts HTML Layout Web Design Web Standards Websites wordpress work Working XHTML Zeldman zeldman.com

Redesign in progress

Here’s a little something for a Wednesday evening. (Or wherever day and time it is in your part of the world.)

The body and bottom of the next zeldman.com design are now finished. Tomorrow I start working on the top.

Have a look.

Looks extra sweet in iPhone.

I’m designing from the content out. Meaning that I designed the middle of the page (the part you read) first. Because that’s what this site is about.

When I was satisfied that it was not only readable but actually encouraged reading, I brought in colors and started working on the footer. (The colors, I need not point out to longtime visitors, hearken back to the zeldman.com brand as it was in the 1990s.)

The footer, I reckoned, was the right place for my literary and software products.

I designed the grid in my head, verified it on sketch paper, and laid out the footer bits in Photoshop just to make sure they fit and looked right. Essentially, though, this is a design process that takes place outside Photoshop. That is, it starts in my head, gets interpreted via CSS, viewed in a browser, and tweaked.

Do not interpret this as me dumping on Photoshop. I love Photoshop and could not live or work without it. But especially for a simple site focused on reading, I find it quicker and easier to tweak font settings in code than to laboriously render pages in Photoshop.

If you view source, I haven’t optimized the CSS. (There’s no sense in doing so yet, as I still have to design the top of the page.)

I thought about waiting till I was finished before showing anything. That, after all, is what any sensible designer would do. But this site has a long history of redesigning in public, and the current design has been with us at least four years too long. Since I can’t snap my fingers and change it, sharing is the next best thing.

A work in progress. Like ourselves.

[tags]zeldman, zeldman.com, redesign, webdesign, css, code[/tags]

Categories
art direction books Community content creativity CSS Design downloads Free Happy Cog™ HTML Ideas industry Information architecture jobs Layout Publications Publishing reprints State of the Web The Essentials The Profession Tools Typography Usability User Experience UX W3C Web Design Web Standards Websites Working writing Zeldman

“Taking Your Talent to the Web” is now a free downloadable book

Taking Your Talent To The Web, a guide for the transitioning designer, by L. Jeffrey Zeldman. Hand model: Tim Brown.

RATED FIVE STARS at Amazon.com since the day it was published, Taking Your Talent to the Web (PDF) is now a free downloadable book from zeldman.com:

I wrote this book in 2001 for print designers whose clients want websites, print art directors who’d like to move into full–time web and interaction design, homepage creators who are ready to turn pro, and professionals who seek to deepen their web skills and understanding.

Here we are in 2009, and print designers and art directors are scrambling to move into web and interaction design.

The dot-com crash killed this book. Now it lives again. While browser references and modem speeds may reek of 2001, much of the advice about transitioning to the web still holds true.

It’s yours. Enjoy.

Oh, yes, here’s that ancient Amazon page.


Short Link

Update – now with bookmarks

Attention, K-Mart shoppers. The PDF now includes proper Acrobat bookmarks, courtesy of Robert Black. Thanks, Robert!

Categories
art arts creativity Design flickr Ideas Images Layout links photography work

Meshes of the Afternoon

Some of my favorite images from Flickr; part of a series.

Favorites of the afternoon of April 10, 2009. Part of this complete breakfast.

[tags]flickr, favorites, art, photography, images, image, collections[/tags]

Categories
A List Apart Accessibility Advocacy An Event Apart Appearances art direction creativity CSS Design development events experience Web Design Web Standards Zeldman

Your Guide to An Event Apart Boston

The complete schedule for An Event Apart Boston is now online for your reading pleasure.

Join Eric Meyer and your humble host with truly special guest speakers Jason Santa Maria, Jeremy Keith, Joshua Porter, Whitney Hess, Dan Cederholm, Daniel Mall, Derek Featherstone, Aarron Walter, Scott Thomas, Heather Champ, Andy Clarke, and GoodBarry’s Brett Welch for two days of design, code, and content.

An intensely educational two-day conference for passionate practitioners of standards-based web design, An Event Apart brings together thirteen of the leading minds in web design for two days of non-stop inspiration and enlightenment. If you care about code as well as content, usability as well as design, this is the one you’ve been waiting for.

Educational discounts and group rates are available, and everyone saves $100 during the early bird registration period.

Comments off.

[tags]aneventapart, AEA, webdesign, conference, webstandards[/tags]

Categories
A List Apart art direction client services creativity Design industry Jason Santa Maria jobs Web Design work Working

Jason Has Left the Building

I owe it all to Douglas Bowman‘s bad back.

Doug and Brian Alvey and Adam Greenfield and I were working on a big client project when Doug’s back went out. He was so sick, he couldn’t work, and it was unclear when he would be able to work again.

As a friend, I was worried about Doug. As a creative director, I was worried about finishing my client’s project.

Doug and I had both done designs. The client liked my design but I’d sold him Doug’s. Now Doug couldn’t finish, and I didn’t trust myself to execute the remaining pages in Doug’s style. I needed someone skilled enough to finish what Doug had started and mature enough to sublimate his own style while still making good design choices.

I had just read “Grey Box Methodology,” a well-written romp through a personal design process. The author was a young designer named Jason Santa Maria. His site looked great, his portfolio was impressive, he had good ideas about design, and the process he had written about lent itself to the technical aspects of finishing Doug’s work.

I wrote to Jason Santa Maria, telling him I had a small freelance project that was probably boring and would bring him no glory, since it required him to design like someone else. Jason was game and said yes. He did a great job and was egoless about it, and he seemed perfectly comfortable working with better established, heavyweight talents. His quick, professional, selfless work kept the project going until Doug was back on his feet.

To reward Jason for what he had done, when a new and juicy assignment came my way, I asked if he wanted to be the project’s lead designer. The rest you can you figure out.

For four and a half years, Jason Santa Maria has been a designer and then a creative director at Happy Cog. In an agency filled with talent, he made a huge personal mark. I’ve trusted him with some of the most important designs we’ve handled, from AIGA to the redesign of A List Apart. He has never let me down, professionally or personally. More than that, his work has expanded my conception of what web design can be.

Four and a half years is a couple of centuries in internet time. For about a year, Jason and I have known that it was getting to be time for him to move on. Not that we had any problem with him or he with us. But just that nearly half a decade is a long time for any designer to spend in one place.

As he has just announced, Jason is leaving Happy Cog. He will stay involved in A List Apart and perhaps a few selected projects, but basically he is out the door and spreading his wings. Godspeed.

[tags]jasonsantamaria, Jason Santa Maria, JSM, Stan, adieu, happycog, design, webdesign[/tags]

Categories
Accessibility Applications architecture art direction Browsers bugs business Code Community content copyright creativity Fonts Ideas industry Layout links spec Standards stealing Tools Typography Usability User Experience W3C Working

Real type on the web?

A proposal for a fonts working group is under discussion at the W3C. The minutes of a small meeting held on Thursday 23 October include a condensed, corrected transcription of a discussion between Sampo Kaasila (Bitstream), Mike Champion (Microsoft), John Daggett (Mozilla), Håkon Wium Lie (Opera), Liam Quin (W3C), Bert Bos (W3C), Alex Mogilevsky (Microsoft), Josh Soref (Nokia), Vladimir Levantovsky (Monotype), Klaas Bals (Inventive Designers), and Richard Ishida (W3C).

The meeting started with a discussion of Microsoft’s EOT (Embedded OpenType) versus raw fonts. Bert Bos, style activity lead and co-creator of CSS, has beautifully summarized the relevant pros and cons discussed.

For those just catching up with the issue of real type on the web, here’s a bone-simple intro:

  1. CSS provides a mechanism for embedding real fonts on your website, and some browsers support it, but its use probably violates your licensing agreement with the type foundry, and may also cause security problems on an end-user’s computer.
  2. Microsoft’s EOT (based on the same standard CSS mechanism) works harder to avoid violating your licensing agreement, and has long worked in Internet Explorer, but is not supported in other browsers, is not foolproof vis-a-vis type foundry licensing rules, and may also cause PC security problems.

The proposed fonts working group hopes to navigate the technical and business problems of providing real fonts on the web, and in its first meeting came up with a potential compromise proposal before lunch.

Like everyone these days, the W3C is feeling a financial pinch, which means, if a real fonts working group is formed, its size and scope will necessarily be somewhat limited. That could be a good thing, since small groups work more efficiently than large groups. But a financial constraint on the number of invited experts could make for tough going where some details are concerned—and with typography, as with web technology, the details are everything.

I advise every web designer who cares about typography and web standards—that’s all of you, right?—to read the minutes of this remarkable first gathering, and to keep watching the skies.

[tags]web typography, typography, standards, webstandards, W3C, fonts, embedded, @fontface, EOT, workinggroup[/tags]

Categories
A List Apart An Event Apart cities Code conferences content creativity CSS Design development eric meyer events experience Happy Cog™ Ideas industry Jason Santa Maria San Francisco Usability User Experience UX Web Design work Working Zeldman

Photos from An Event Apart San Francisco

Take a dip in the Flickr photo pool from An Event Apart San Francisco 2008. Day Two is about to begin.

111 Minna Gallery (MediaTemple party)

[tags]aeasf08, aneventapart, webdesign, conference, sanfrancisco[/tags]

Categories
art art direction Blogroll books Community content creativity Design experience Ideas industry people Web Design work writing Zeldman

Around the Word with Web Talent

My first book didn’t sell very well but it had an effect on people’s hearts. Web designers around the world circulated a single copy of Taking Your Talent to the Web, adding their autographs, drawings, photos, and other verbal and visual messages to every page—even the covers and spine.

While unpacking from the office move, I found this special world-traveled copy of the book and snapped a few pages at random. Some people who signed this book went on to do amazing things on the web. Others lowered their profiles but continued to do work of quality and significance. Still others simply disappeared. (At least they disappeared from the worldwide web design community.) I love every one of them. Thank you all again.

A photo spread on Flickr Around the Word with Web Talent.

[tags]webdesign, community, talent, takingyourtalenttotheweb, newriders, publishing, book, books, zeldman, writing, dreamless[/tags]

Categories
An Event Apart cities Community conferences creativity CSS Design development San Francisco

Flowers in your hair

An Event Apart, the design conference for people who make websites, has posted its San Francisco 2008 schedule. Join us August 18–19, 2008 at the Palace Hotel for two jam-packed 9.5-hour-long days of learning and inspiration with Heather Champ, Kelly Goto, Jeremy Keith, Luke Wroblewski, Dan Cederholm, Tantek Çelik, Jeffrey Veen, Derek Featherstone, Liz Danzico, Jason Santa Maria, Eric Meyer, and Jeffrey Zeldman.

[tags]sanfrancisco, aeasf08, aneventapart, design, webdesign, UX, web, conference, conferences[/tags]

Categories
Advertising arts business client services creativity Design film tv wisdom work Zeldman

Stick out your tongue

While employed at a famous New York advertising agency twenty years ago, a partner and I created a TV commercial touting an over-the-counter medicine client’s revolutionary new cold and flu remedy for young children.

Only when the shooting and shouting was over did we learn that the product did not, in fact, exist.

The commercial whose every creative detail we’d had to fight for was never going to run.

The client—the marketing side of a product development group—had a budget of $60,000 to spend. So they spent it, even though the R&D side of the product development group had not been able to deliver the product.

It was not a liquid medicine that needed to be measured. It was not a pill that needed to be chewed or swallowed. It was a pill that dissolved instantly on the tongue. Or would have been, if the engineers had been able to create it.

During weeks of presentation, the client rejected campaigns that would have caught the attention of the nation’s parents. The client bought a safe campaign that called less attention to itself, then set about systematically softening its edges. My partner and I wanted to cast like Fellini or Woody Allen. We brought in amazing children of various backgrounds, their faces rich in character. But the client picked cute blonde girls instead.

And so on. Every decision, however small, required approval. Everything was a fight. A ladies-and-gentlemanly fight. A fight that sounded like polite, mutually respectful discussion. A fight with invisible knives.

We won some and we lost some. For all the back-and-forth with the client, the resulting commercial wasn’t bad at all. The first few times anyone—even the guy delivering sandwiches—saw it, they laughed. Afterwards, they smiled. It could have been okay. It could have gotten my partner and me out of that agency and to a better one.

After the shoot was completed, the client told our account executive that the product did not exist and the commercial was never going to run.

The client had known this going in. So why didn’t they let us win more creative battles? Because they wanted something soft and safe to show the boss who had the power of life and death over their budget.

Why did the boss give them $60,000 to produce a commercial for a product that didn’t exist? Because that’s how corporations work. If they didn’t spend advertising dollars in 1988, they wouldn’t get ad dollars in 1989, when (in theory) they would finally have a product to advertise.

Governments, at least the ones I know of, work the same way. Since last night, the city of New York has been paving 34th Street in places it doesn’t need to be paved. Why do they do this? To justify the budget. In a better world, money set aside to pave streets that don’t need paving would be reassigned to something the city actually needs—like affordable housing, or medical care for poor or homeless people. But cities are corporations—that Mike Bloomberg is New York’s mayor merely confirms this—and few corporations are agile enough to rethink budgetary distributions on the basis of changing needs.

Last week, in an airport, on one of the inescapable widescreen TVs set to CNN (and always set to the wrong resolution) I saw a commercial for a revolutionary children’s medicine product that melts instantly on the tongue.

I guess they finally made it.

[tags]advertising, design, artdirection, writing, copywriting, TV, production, commercials, adverts, wisdom, work, experience, budgets, business, waste, government, medicine, OTC, overthecounter, newyork, nyc[/tags]

Categories
Accessibility Blogs and Blogging business client services creativity Design development Ideas links Marketing social networking Standards Tools writing

Monday links

WCAG Samurai
The WCAG Samurai Errata for Web Content Accessibility Guidelines 1.0 are published as an alternative to WCAG 2. “You may comply with WCAG 2, or with these errata, or with neither, but not with both at once.” Published 26 February 2008. Read the intro first.
Happy Cog Studios at SXSW Interactive
Two hot panels, plus bowling.
Alex King’s Twitter Tools
Integrate your Twitter account with your WordPress blog. Archive your tweets, create a blog post from each tweet, create a daily digest of your tweets, post a tweet in your sidebar, and more.
Chopsticks by Carlos Segura
Brilliant! 51 chopstick bags by Carlos Segura assisted by Ryan Halvorsen. In EPS for your raster or vector pleasure.
Can a Gas Station Really Be Green?
Boston design firm builds green gas station in smoggy LA.
48 Unique Ways To Use WordPress
CMS, city guide, history/timeline site, intranet, movie poster and trailer site, network hub, polling site, Feedburner alternative, Twitter clone, many more.
Misleading Marketing Copy
Words and phrases to avoid if you want an honest relationship with your customers.
Pattern inspiration (Veerle’s Blog)
Design inspiration via wallpaper and tiles.
Mental Models: Aligning Design Strategy with Human Behavior (on Flickr)
Illustrations from the newly published book by Indi Young (Rosenfeld Media, 2008).
A Speck of Sunlight Is a Town’s Yearly Alarm Clock
On March 8, the sun will rise again in Longyearbyen, the first time since October.
Dockdrop
Free Mac OS X application lets you share files fast. Drag any file or folder onto the Dockdrop dock icon, then choose how you want to send it. Dockdrop uploads it and puts a URL for your upload on the clipboard, ready for pasting into an email, chat program or website.
Official Google Maps API Blog: Google Maps Without the Scripting
The Google Static Maps API provides a simpler way to add maps to your website. Rather than use JavaScript, the Google Static Maps API creates map images on the fly via simple requests to the Static Maps service with HTTP requests.

[tags]zeldman, wcagsamurai, happycog, sxsw, googlemaps, wordpress, veerle, indiyoung, mentalmodels, wcag2, accessibility[/tags]

Categories
Accessibility client services creativity Design development Publishing Standards

Appreciating web design; setting type

We have what we think is a special issue of A List Apart for people who make websites.

  • Every responsible web designer has theories about how best to serve type on the web. In How to Size Text in CSS, Richard Rutter puts the theories to the test, conducting experiments to determine the best of all best practices for setting type on the web. Richard’s recommendation lets designers reliably control text size and the vertical grid, while leaving readers free to resize text.
  • And in Understanding Web Design, I explain why cultural and business leaders mistake web design for something it’s not; show how these misunderstandings retard critical discourse and prevent projects from reaching their greatest potential; and provide a framework for better design through clearer understanding.

Plus, from October 2001, we resurrect Typography Matters by Erin Kissane, the magazine’s editor, who is currently on sabbatical.

[tags]webdesign, css, textsize, type, typography, sizingtype, sizingtext, understanding, typedesign, architecture, newspaperdesign, posterdesign, bobdylanposter, erinkissane, richardrutter, zeldman, jeffreyzeldman, alistapart[/tags]