Web designer Joshua Lane, currently best know for doing fancy web stuff at Virb.com, has overhauled his personal site in ways that are aesthetically pleasing and visually instructive.

Like all good site redesigns, this one starts with the content. Whereas the recent zeldman.com redesign emphasizes blog posts (because I write a lot and that’s what people come here for), Lane’s redesign appropriately takes exactly the opposite approach:

There is a much smaller focus on blog posts (since I don’t write often), and a much larger focus on the things I do elsewhere (Twitter, Flickr, Last.fm etc). Individually, I don’t contribute a great deal to each of those services. But collectively, I feel like it’s a good amount of content to showcase (as seen on the home page). And something that feels like a really good representation of “me.”

Not one to ignore the power of web fonts, Lane makes judicious use of Goudy Bookletter 1911 from The League of Movable Type, an open-source type site founded by Caroline and Micah, featuring only “well-made, free & open-source, @font-face ready fonts.” (Read their Manifesto here.)

The great Barry Schwartz based his Goudy Bookletter 1911 on Frederic Goudy’s Kennerley Oldstyle, a font Schwartz admires because it “fits together tightly and evenly with almost no kerning.” Lane inserts Schwartz’s open-source gem via simple, standards-compliant CSS @font-face. Because of its size, it avoids the secret shame of web fonts, looking great in Mac and Windows.

But considered type is far from the redesigned site’s only nicety. Among its additional pleasures are elegant visual balance, judicious use of an underlying horizontal grid, and controlled tension between predictability and variation, ornament and minimalism. Restraint of color palette makes photos, portfolio pieces, and other featured elements pop. And smart CSS3 coding allows the designer to play with color variations whenever he wishes: “the entire color scheme can be changed by replacing a single background color thanks to transparent pngs and rgba text and borders.”

In short, what Lane has wrought is the very model of a modern personal site: solid design that supports content, backed by strategic use of web standards.

Filed under: CSS, Code, Design, Fonts, Standards, State of the Web, User Experience, content, content strategy, creativity, style, type, webfonts, webtype

There’s a new Franklin in town. It’s TeeFranklin, designed by Tomi Haaparanta for T26. Haaparanta specializes in what we used to call grunge fonts, but you’d never know from his Franklin, which is classic and pure. In terms of available weights and styles (not to mention fanatical attention to detail), Haaparanta’s new font can’t compare to Font Bureau’s ITC Franklin, but TeeFranklin is a nice and clean, and comes in 14 weights, which may be enough. Better still, according to reader Ethan Dunham, it is licensed for @font-face embedding.

Filed under: Fonts, Web Design, Web Standards, type, webfonts, webtype

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

Filed under: Standards, State of the Web, Tools, Web Design, Web Design History, Web Standards, Zeldman, spec, webfonts, webtype, writing

This is a bookmarklet made for web designers who want to rapidly check how different fonts and font styles look on their screen without editing code and refreshing pages. 

Download the amazing and oh-so-practical Soma FontFriend bookmarklet.

Filed under: Design, Fonts, Tools, Typography, Web Design, Web Standards, software, webfonts, webtype, widgets

Real type on the web. All the kids are doing it. But maybe we’re doing it wrong. After testing several CSS @font-face syntax variants, including one used on this site, Paul Irish says the following is clearly best:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
         url('GraublauWeb.otf') format('opentype');
      }

Read more: “Bulletproof @font-face syntax” at paulirish.com.

Filed under: CSS, Design, Real type on the web, webfonts, webtype

FontShop announces that they are ready to deliver their font library as web type:

[S]tarting today, Typekit users can pick from dozens of FontFonts, including FF Meta, FF Dax, and FF Netto. Plus, the Typekit service lets you test any of those FontFonts on your page before you publish.

And tomorrow?

Typekit is just one piece of a holistic strategy for FontFonts on the web. The library should be licensable in a more traditional way too. That’s where WOFF fits in. … Soon anyone will be able to license and download for their website the same professional quality FontFont they use in desktop applications, but crafted specifically for the new medium.

Hat tip: Jason Santa Maria

This has been a belated part of Web Type Day.

Short URL: zeldman.com/?p=3023

Filed under: Fonts, Web Design History, Web Standards, Web Type Day, webfonts, webtype

Ellen Lupton and Jeffrey Zeldman talk about web fonts, part 2. That is all.

This has been a belated part of Web Type Day.

Filed under: Design, Web Type Day, Zeldman, webfonts, webtype

Today in Print, Ellen Lupton interviews Jeffrey Zeldman (that’s me) on web typography, web standards, and more. Part one of a two-part interview.

Ellen Lupton is curator of contemporary design at Cooper-Hewitt, National Design Museum in New York City and director of the Graphic Design MFA program at Maryland Institute College of Art (MICA) in Baltimore. She is the author of numerous books and articles on design, a frequent lecturer, and an AIGA Gold Medalist.

This has been a nutritious part of Web Type Day.

Short URL: zeldman.com/?p=2932

Filed under: CSS, Design, Fonts, Press, Real type on the web, Standards, State of the Web, Web Design, Web Design History, Web Standards, Web Type Day, better-know-a-speaker, creativity, industry, webfonts, webtype

Web fonts are here. Now what? In Issue No. 296 of A List Apart for people who make websites, Nice Web Type’s Tim Brown debuts Web Font Specimen, a handy, free resource to see how real fonts really look on the web; and Jason Santa Maria discourses on web type, showing how to avoid using fonts that don’t work on the web, and achieve graceful pairings of fonts that do.

Filed under: A List Apart, Design, Fonts, Formats, Jason Santa Maria, Real type on the web, Standards, State of the Web, Tools, Web Type Day, industry, webfonts, webtype

Real fonts on the web: House Industries supports WOFF format.

…a font format for the Web that satisfies the needs and concerns of browser makers, web designers, and type foundries. … WOFF offers compression to speed page load times, freedom from thorny legacy issues, and inclusiveness (font outlines can be Postscript or TrueType).

WOFF has the support of a wide spectrum of the type community; from peers such as Emigre, Hoefler & Frere-Jones, Commercial Type, etc., and larger foundries such as Linotype and Monotype. Today it has also gained the support of Mozilla in the their release of Firefox 3.6 (Mozilla has a full list of designers and foundries that support WOFF on that page). We hope and expect that WOFF will quickly gain support in other major browsers as we support, endorse and expect to license our library for use on the Web in the WOFF format in the future.

Read more

• The Problem: We have the fonts, we have the CSS and the workaround for IE. What we don’t have is beautiful, reliable, consistent cross-platform rendering of real fonts like Gotham, Franklin, Garamond, etc. — 29 October 2009
• Web Fonts and Standards: How real fonts work on the web via standard CSS. Making it work in IE. The licensing hurdle. Rise of the middlemen and their effect on the adoption of font embedding standards. — 17 August
• Web Fonts Now, for Real: David Berlow of The Font Bureau publishes a proposal for a permissions table enabling real fonts to be used on the web without binding or other DRM. — 16 July 2009
• Web Fonts Now (How We’re Doing With That): Commercial foundries that allow @font-face embedding; browser support; Cufón and SIFR, oh, my; Adobe, web fonts, and EOT; Typekit debuts; — 23 May 2009

Filed under: Fonts, Formats, Web Standards, webfonts, webtype