Sviluppare Siti Con Gli Standard Web: Designing With Web Standards, 3rd Edition, Italian translation.
Prefer English?
Category: Web Design History
In Issue 307 of A List Apart for people who make websites:
Web Fonts at the Crossing
by Richard Fink
Everything you wanted to know about web fonts but were afraid to ask. Richard Fink summarizes the latest news in web fonts, examining formats, rules, licenses, and tools. He creates a checklist for evaluating font hosting and obfuscation services like Typekit; looks at what’s coming down the road (from problems of advanced typography being pursued by the CSS3 Fonts Module group, to the implications of Google-hosted fonts); and wraps up with a how-to on making web fonts work today.
A List Apart: Web Fonts at the Crossing
Illustration by Kevin Cornell for A List Apart
And I’m off on a mini road trip to Penn State and its annual web conference, where I’ll be honored to deliver the opening keynote on standards-based web design, from 1452 to the present.
The Penn State Web 2010 Conference (@PSUWebConf) takes place Monday and Tuesday, June 7 and 8, 2010 at the Penn Stater Conference Center. Patti Fantaske is chair. The conference is for all who manage, write, edit, design, program, or administer websites or web content at university offices, departments, colleges, and campuses.
THE long-planned inevitable has now been announced. With open-source-licensed web fonts, web font hosting, and add-a-line-to-your-header ease of configuration, Google has joined Typekit, Font Squirrel, Ascender, Font Bureau and others in forever changing the meaning of the phrase, “typography on the web.”
The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers.
Oh, and Typekit? They’re in on it, and they couldn’t be more pleased.
WHEN MANDY BROWN, Jason Santa Maria and I formed A Book Apart, one topic burned uppermost in our minds, and there was only one author for
the job.
Nothing else, not even “real fonts” or CSS3, has stirred the standards-based design community like the imminent arrival of HTML5. Born out of dissatisfaction with the pacing and politics of the W3C, and conceived for a web of applications (not just documents), this new edition of the web’s lingua franca has in equal measure excited, angered, and confused the web design community.
Win free copies of HTML5 For Web Designers on Gowalla!
Just as he did with the DOM and JavaScript, Jeremy Keith has a unique ability to illuminate HTML5 and cut straight to what matters to accessible, standards-based designer-developers. And he does it in this book, using only as many words and pictures as are needed.
Watch Jeremy Keith discuss HTML5 with Dan Benjamin and me live on The Big Web Show this Thursday at 1:00 PM Eastern.
There are other books about HTML5, and there will be many more. There will be 500 page technical books for application developers, whose needs drove much of HTML5’s development. There will be even longer secret books for browser makers, addressing technical challenges that you and I are blessed never to need to think about.
But this is a book for you—you who create web content, who mark up web pages for sense and semantics, and who design accessible interfaces and experiences. Call it your user guide to HTML5. Its goal—one it will share with every title in the forthcoming A Book Apart catalog—is to shed clear light on a tricky subject, and do it fast, so you can get back to work.
4 May 2010
Jeffrey Zeldman, Publisher
A Book Apart “for people who make websites”
In Association with A List Apart
An imprint of Happy Cog™
The present-day content producer refuses to die.
And don’t miss…
- Read Chapter One free in today’s issue of A List Apart!
- The author, Mr Jeremy Keith himself, shares his thoughts!
- Creative director Jason Santa Maria discusses the design of A Book Apart!
- Editor Mandy Brown discusses the business side of A Book Apart!
Assume I retweeted Steve Jobs’s thoughts on Flash.
Note Steve’s concluding paragraph:
New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.
Except Steve Jobs’s subtext isn’t “web standards, web standards, web standards, told you so.”
Except it kind of is.
So I’ve wanted to use a condensed, bold Franklin typeface for my site’s headlines since, well, forever. So I bought Fontspring’s fine Franklin Gothic FS Demi Condensed and licensed it for @font-face use for a mere $2.99, an incomparable value.
It looks great in Safari, Chrome, and Firefox, but not so nice in the latest version of Opera, where it resembles the inside-out test monkey in Cronenberg’s “The Fly.” (Okay, okay, it looks like a ransom note, but the monkey simile was more picturesque.)
And this, my friends, is why Typekit exists. Because even when you find a great font that’s optimized for screen display and can be licensed for CSS @font-face use, guess what? There is almost always some glitch or bug somewhere. And Typekit almost always seems to find and work around these bugs. It’s the kind of grueling task designers hate dealing with, and Typekit’s team loves solving.
If this were a client site, I’d switch to Typekit, or try licensing a different vendor’s Franklin, or (if neither of those options proved satisfactory) dump web fonts altogether and use Helvetica backed by Arial instead. But as this is zeldman.com, I’d rather nudge my friends at Opera to look into the problem and fix it. This will make browsing zeldman.com in Opera a somewhat weird experience, but hopefully it will help all Opera users in the long run.
Implementation Notes and Details
- I haven’t made an SVG version yet, so the web fonts don’t work in iPhone or iPad.
iPhone and iPad see normal weight Helvetica instead of bold Helvetica, because if I leave “font-weight: bold” in the CSS declaration, Firefox double-bolds the font. This is not smart of Firefox.Fixed via technique below.- In order to match the impact of the previous Helvetica/Arial bold, I boosted the font-size from 25px to 32px. (This also helps smooth the font. Web fonts need more help in this regard than system fonts.)
- Camino ignores @font-face and supports the first system font in the font stack, Helvetica Neue (correctly styled bold).
Update: Problem solved. See Opera Loves My Web Font.
GEORGIA and Verdana, Lucida and (to a lesser extent) Arial and Times New Roman have served us well. For fifteen years, these cross-platform default fonts have been faithful stewards of our desire to read, write, design, and publish web pages. Yet we designers have always wanted more. As far back as 1994, we hoped for the day when we could brand our layouts as magazine and poster designers do, by setting our pages in Franklin or Garamond, our headlines in Futura or Rosewood. And since 1998, CSS2 has provided a standard way to embed any typeface, not just the fab five, on a web page.
In August, 2007, CSS co-creator and Opera Software CTO Håkon Wium Lie wrote CSS At Ten, reminding us that CSS provided a mechanism by which actual font files could be linked to and retrieved from the web. Soon after the article was published, “web fonts” discussions started popping up at interactive design festivals and my friend Jeffrey Veen got the idea for a product that would get web fonts happening without running afoul of inconsistent browser support, multiple format hangups, or type designer licensing agreements and piracy concerns.
Speeding up design acceptance
While browser improvements and web standards alone provided multiple partial solutions, Typekit offered a complete solution that just worked. And the people behind Typekit (including Bryan Mason and Jason Santa Maria) did everything right: they reached out to the type design, graphic design, and standards-based web design communities; they worked with vendor after vendor to offer as many fonts as possible; they spoke everywhere, marketing their venture one lecture and even one designer at a time.
Typekit excited the web design community about type and proved that licensing and hosting web type was a viable business, providing options and convenience for designers and their clients, while bringing new revenue to type designers and protecting their intellectual property.
Typekit is the tipping point
Publicly and truly, I support Typekit because it is getting us to the world of web fonts faster. We could wait indefinitely for type vendors to agree to industry-standard licensing terms and font formats. We could wait far longer for IE, Firefox, Safari, Chrome, Opera, Opera Mini, Mobile Safari, and the rest to support the same font formats. (Currently Firefox supports WOFF and TrueType, Safari and Chrome support TrueType, MobileSafari supports SVG, IE supports EOT, and on, and on.)
But with Typekit, we don’t have to bother our pretty little heads worrying about these inconsistencies, and we don’t have to sit on the sidelines, waiting for all font makers and all browser makers to support a single standard format.
Platforms and performance
Typekit works, and that helps web designers and type designers take “web fonts” seriously. Typekit’s success is even helping to make web designers and type designers more aware of platform problems that can make fonts hideous on various platforms. Georgia was designed for the screen. Garamond was not. Moreover, platforms vary the way they hint fonts (Apple throws out hinting altogether, Microsoft over-hints) and the way they render them (from purely pixellated to at least three varieties of sub-pixel anti-aliasing), making a font’s appearance on a given user’s system hard to predict.
If not for Typekit, we might have had to wait years for most or all type designers to license web fonts. Only then would we have discovered that body text set in anything other than Georgia and Verdana pretty much blows on many Windows OS, browser, and monitor combinations.
Thanks to Typekit, we all know about the problem, and type designers are re-hinting their fonts, and in some cases redesigning them for the screen.
For all this I and all of us can be grateful to Typekit.
They also understand that designers will only use “web fonts” if they have access to the fonts they need. Just as a huge selection enabled iTunes to dominate online music, Typekit’s makers know their service must offer pretty much every good typeface out there—and they are working on it.
Renting versus “owning”
All this said in Typekit’s favor, I have mixed feelings about their product because I’d rather buy a web-licensed font than rent it—and Typekit’s success at establishing the viability of a rental model means that individual type foundries will also rent their fonts—and those who succeed at renting their fonts to web designers may not be inclined to sell.
Of course you never really own the fonts you buy—you simply license their use. So the analogy of owning versus renting doesn’t exactly hold true. But a one-time font purchase as a line item in a design budget is easier to explain and sell to a client than an ongoing rental charge.
Web Standards and @font-face
My other qualm has to do with a preference for pure web standards over product-assisted web standards. I don’t know if my preference is ideological or just the way my mind works (or fails to). But, given my druthers, I’d rather see millions of websites using standard @font-face to link to self-hosted web-licensed fonts than see that same number of fonts using a service—even a brilliant service created by friends for whom I wish continued, deserved, great success. It must be a quirk of mind; there’s no other logical explanation for this preference.
For those who share this bias, possess the properly licensed fonts, and don’t mind using FTP and writing a little code, the CSS @Font-Face Generator by Font Squirrel provides an exceptionally easy way to automatically generate the font formats necessary to take all browsers (including mobile) into account—complete with automated Cufón backup and your choice of best-practice @font-face code strings.
See also FontSpring.
Read more
- Web Fonts and Standards (great place to start)
- Nicewebtype: How to Use @Font-Face (a great piece to read next)
- A List Apart: Tim Brown: Real Web Type in Real Web Context
- A List Apart: Jason Santa Maria: On Web Typography
- Web fonts at A List Apart
- Web fonts at zeldman.com
- Paul Irish: Bulletproof Font-face Implementation Syntax
- Kernest.com – CSS-based web font delivery service
- A List Apart: Real Fonts on the Web: I interview David Berlow
- New! Some facts about Web Fonts at Nice Web Type
Is it getting hot in here? Or is it just the flames?
In An Early Look At IE9 for Developers, Dean Hachamovitch, General Manager for Internet Explorer, reports on performance progress, web standards progress (border-radius, bits of CSS3, Acid 3 performance), and “bringing the power of PC hardware and Windows to web developers in the browser” (e.g. improved type rendering via Direct2D, a Windows sub-pixel rendering technology that replaces Cleartype).
The reported web standards improvements are encouraging, and better type rendering in IE is a consummation much to be desired. These positive notes notwithstanding, what is most interesting about the post is the political tightrope Microsoft team leaders are still forced to walk.
The world has moved to web standards, and Microsoft knows it must at least try to catch up. Its brilliant browser engineers have been working hard to do so. This web standards support is not optional: having just been spanked hard in Europe for anticompetitive practices, Microsoft knows it is no longer invincible, and cannot continue to use claims of innovation to stifle the overall market or drag its feet on advanced standards compliance.
At the same time, Microsoft’s marketing department wants the public to believe that IE and Windows are profoundly innovative. Thus efforts to catch up to the typographic legibility and beauty of Mac OS X and Webkit browsers are presented, in Dean Hachamovitch’s blog post, as leading-edge innovations. Don’t get me wrong: these improvements are desirable, and Direct2D may be great. I’m not challenging the quality of the hardware and software improvements; I’m pointing out the enforced bragging, which is mandated from on high, and which flies in the face of the humble stance other high-level divisions in Microsoft would like to enforce in the wake of the company’s European drubbing and the dents Apple and Google have made on its monopoly and invulnerability.
In short, the tone of these announcements has not changed, even though the times have.
Hachamovitch does an admirable job of sticking to the facts and pointing out genuine areas of interest. But he is stuck in a corporate box. A slightly more personal, down-to-earth tone would have come across as the beginnings of transparency—Web 1.1, if not Web 2.0—and a more transparent tone might have slightly reduced the percentage of flamebait in the post’s comments. (It could only have slightly reduced that percentage, because, on the internet, there is no such thing as a calm discussion of improvements to a Microsoft browser, but still.)
Although I disagree with the tone of many of the comments—rudeness to engineers is not admirable, kind, or helpful—I agree with the leading thoughts they express, which are:
- Getting IE fully up to speed on web standards is much more important than introducing any proprietary innovations. (Naturally I agree with this, as it is, in a nutshell, what The Web Standards Project told browser companies back in 1998—and it is still true.)
- Switching to Webkit might be a better use of engineering resources than patching IE.
On the other hand, Microsoft’s refusal to switch to Webkit gives Apple and Google a competitive advantage, and that is good because a web in which one browser has a monopoly stifles standards and innovation alike. By torturing the IE rendering engine every couple of years instead of putting it out of its misery, Microsoft contributes to the withering away of its own monopoly. That might not be good for the shareholders, but it is great for everyone else.
Must-read analysis at Daring Fireball anatomizes the “war” between Flash and web standards as a matter of business strategy for companies, like Apple and Google, that build best-of-breed experiences atop lowest-common-denominator platforms such as the web:
It boils down to control. I’ve written several times that I believe Apple controls the entire source code to iPhone OS. (No one has disputed that.) There’s no bug Apple can’t try to fix on their own. No performance problem they can’t try to tackle. No one they need to wait for. That’s just not true for Mac OS X, where a component like Flash Player is controlled by Adobe.
I say what Apple cares about controlling is the implementation. That’s why they started the WebKit project. That’s why Apple employees from the WebKit team are leaders and major contributors of the HTML5 standards drive. The bottom line for Apple, at the executive level, is selling devices. … If Apple controls its own implementation, then no matter how popular the web gets as a platform, Apple will prosper so long as its implementation is superior.
Likewise with Google’s interest in the open web and HTML5. … So long as the web is open, Google’s success rests within its own control. And in the same way Apple is confident in its ability to deliver devices with best-of-breed browsing experiences, Google is confident in its ability to provide best-of-breed search results and relevant ads. In short, Google and Apple have found different ways to bet with the web, rather than against the web.
Related posts, on the off-chance you missed them:
- Flash, iPad, and Standards (zeldman.com, 1 Feb 2010)
- [Untitled post on Tomorrow’s Computing Systems] (stevenf, no date given)
- Semantic Flash, Slippery When Wet (Daniel Mall, A List Apart, 26 February 2007)
- On The iPad (Alex Payne, 28 January 2010)
The first part of my post of 1 February was not an attack on Flash. It described a way of working with Flash that also supports users who don’t have access to Flash. I’ve followed and advocated that approach for 10 years. It has nothing to do with Apple’s recent decisions and everything to do with making content available to people and search engines.
It’s how our agency and others use Flash; we’ve published articles on the subject in our magazine, notably Semantic Flash: Slippery When Wet by Daniel Mall.
We do the same thing with JavaScript—make sure the site works for users who don’t have JavaScript. It’s called web development. It’s what all of us should do.
My point was simply that if you’re an all-Flash shop that never creates a semantic HTML underpinning, it’s time to start creating HTML first—because an ever-larger number of your users are going to be accessing your site via devices that do not support Flash.
That’s not Apple “zealotry.” It’s not Flash hate. It’s a recommendation to my fellow professionals who aren’t already on the accessible, standards-based design train.
THE SECOND PART OF MY POST wasn’t Flash hate. It was a prediction based on the way computing is changing as more people at varying skill levels use computers and the internet, and as the nature of the computer changes.
There will probably always be “expert” computer systems for people like you and me who like to tinker and customize, just as there are still hundreds of thousands of people who hand-code their websites even though there are dozens of dead-simple web content publishing platforms out there these days.
But an increasing number of people will use simpler computers (just as we’ve seen millions of people blog who never wrote a line of HTML).
THE THIRD PART OF MY POST wasn’t Flash hate. It was an observation that Google and Apple, as companies, have more to gain from betting on HTML5 than from pinning their hopes to Adobe. That’s not a deep insight, it’s a statement of the obvious, and making the statement doesn’t equate to hating Adobe or swearing allegiance to Google and Apple—any more than stating that we’re having a cold winter makes me Al Gore’s best friend.
(Although I like Gore, don’t get me wrong. I also like Apple, Google, and Adobe. My admiration for these companies, however, does not impede my ability to make observations about them.)
THE THIRD PART OF MY POST ALSO WASN’T a blind assertion that HTML5, with VIDEO and CANVAS, is ready to replace Flash today, or more adept than Flash, or more accessible than Flash. Flash is currently more capable and it is far more accessible than CANVAS.
We have previously commented on HTML5’s strengths and weaknesses (Exhibit A, Exhibit B, Exhibit C) and are about to publish a book about HTML5 for web designers. HTML5 is rich with potential; Flash is rich with capability and can be made highly accessible.
That it is unstable on Mac and Linux is one reason Apple chose not to include it in its devices; that this omission will change the way some developers create web content is certain. If the first thing it does is encourage them to develop semantic HTML first, that’s a win for everyone who uses the web.
Carry on.
Dan Benjamin and yours truly discuss the secret history of blogging, transitioning from freelance to agency, the story behind the web standards movement, the launch of A Book Apart and its first title, HTML5 For Web Designers by Jeremy Keith, the trajectory of content management systems, managing the growth of a design business, and more in the inaugural episode of the Pipeline.
My friend, the content strategist Kristina Halvorson, likes to call content “the elephant in the room” of web design. She means it’s the huge problem that no one on the web development team or client side is willing to acknowledge, face squarely, and plan for….
Without discounting the primacy of the content problem, we web design folk have now birthed ourselves a second lumbering mammoth, thanks to our interest in “real fonts on the web“ (the unfortunate name we’ve chosen for the recent practice of serving web-licensed fonts via CSS’s decade-old @font-face declaration—as if Georgia, Verdana, and Times were somehow unreal).…
Put simply, even fonts optimized for web use (which is a whole thing: ask a type designer) will not look good in every browser and OS.
Jeffrey Zeldman, Real Fonts and Rendering: The New Elephant in the Room
22 December, 2009
24 ways: The Advent Calendar for Web Developers
Short URL: zeldman.com/?p=3319
Bonne journée du chapeau bleu! Now you know how to say “Happy Blue Beanie Day” in French.
Monday 30 November is International Blue Beanie Day in support of web standards. Get your toque on, post a photo, and pop a beanie on your Twitter, Flickr, and Facebook avatars to help spread the word. Let’s take this viral, kids!
Short URL: zeldman.com/?p=3142