Readable Web » CSS

The Look That Says Book – On AListApart

Richard Fink — Tue, 07 Sep 2010 12:34:24 +0000

An article I wrote about Hypenation & Justification in web design was published on AListApart today. Titled: The Look That Says Book.

Please visit the comments page and weigh in on how you feel about the current level of support for hyphenation and justification in browsers.
Do you think H&J is important? Not? OK, then what? I’d like to hear what you think.

Sidenote: Editors – Wow, What A Concept!

Unfortunately, the nature of blogging is such that input from an editor just isn’t feasible except in rare instances. So it’s incredibly refreshing to work with sharp, technically astute editors like those at ALA.
Much thanks.

Destination Web At ATYPI

Richard Fink — Sun, 05 Sep 2010 17:34:28 +0000

As someone who writes a lot about fonts and typography, I joined some professional associations. In addition to SOTA, which I joined last year, I am also a new member of ATYPI, the Association Typographique Internationale. ATYPI’s annual conference is being held in Dublin, Ireland. I proposed giving a talk on Web Font formats, and the decision makers at ATYPI graciously accepted. I’m looking forward to it greatly.
Here’s what I pitched as the topic of my talk:

Destination Web: Preparing Fonts For The Browser

For the past fifteen years, web authors have been restricted to a handful of “web safe” fonts provided by the underlying operating systems like Microsoft Windows or Apple’s OS X within which web browsers are installed. This has now changed.

As of early 2010, the five major Internet browsers – Internet Explorer, Firefox, Opera, Safari, and Chrome – have all implemented various means and levels of support for “web fonts”. That is, fonts that are supplied, not by the underlying operating system, but by web servers.

This is an unprecedented development in the history of type. For the first time, there is a nascent mass-market for type, without a publisher or some other entity, acting as intermediary. Even in the past few decades of digital technology, the font-design community as a whole has remained print-oriented and the peculiar problems of creating fonts for the low-resolution environment of computer display screens have been left largely to the makers of operating systems such as Microsoft. But now, with the change in capabilities of web browsers, over the coming years, font designers will increasingly find their fonts making their way onto web pages. And this new usage, this new destination, brings with it new challenges to which font-designers, if their work is to remain relevant, need adapt.

As the sophistication of display technology and devices like the Kindle and the iPad improve, and as the demand for paperless green technology grows, the assumptions under which the type industry has worked since Gutenberg’s time, will undergo a radical change.

There will be a great need to provide fonts that are browser-friendly and work well in a low-resolution environments as opposed to the high-resolution environment of print. In addition, web browsers demand connectivity – fonts are sent digitally, on demand, and therefore need to be specially prepared for travel. The need to prepare fonts for speedy delivery and in browser-friendly formats is, once again, an unprecedented development.

Eventually, screen usage will most certainly come to dwarf print. But oddly, with the advent and continued sophistication of one-off and short-run print technology, browsers are poised to do double duty – not only as viewers but as more traditional desktop publishing applications, as well. Even today, if the number of web pages printed out on any given day were taken into account, it would amount to a significant portion of printed output, in total.

The presentation will include:

1) A brief overview of how fonts are linked to web pages with a special emphasis on backwards-compatibility issues regarding Internet Explorer 6, 7, and 8 about which I am uniquely informed.

2) Current formatting options such as: EOT, EOT “Lite”, WOFF, SVG, and Data URI’s

3) IP Protection/Obfuscation Techniques such as: File Splitting, font renaming, and sub-setting

4) Tools: The current state of the tools available for preparing fonts for the web 5. Print: The current state of browsers as a desktop publishing platform for print.

Typedia: A Font Resource In The Making

Richard Fink — Mon, 30 Aug 2010 22:29:32 +0000

Last year sometime, Typedia showed up on the radar here at Readable Web. I wasn’t quite sure what to make of it, frankly. No tag line. What’s the focus? What’s the angle? But the people behind it had gravitas in the world of web so I figured maybe I was missing something. I kept an eye out.

Lately, that’s been paying off. The posts on the Typedia Blog by Erik Vorhes have been top notch, by my lights. Enlightening reading with enriching links. This son-of-a-gun is puttin’ me to shame, really. And so……. may we have a drumroll pleeeeeeese……. I have added Typedia to the Linkworthy blogroll here at Readable Web.

What’s Typedia? Well the font loving folks who created it say this:

In a nutshell, Typedia is a community website to classify typefaces and educate people about them. Think of it like a mix between IMDb and Wikipedia, but just for type. Anyone can join, add, and edit pages for typefaces or for the people behind the type.
We love type, and we have a burning desire to learn as much as possible about typefaces: where they come from, who made them, and why they look the way they do. We want everyone to be able to share in that rich knowledge and enjoy the art and artists of type design. Over time, we think Typedia could grow into a great educational resource for people to learn about their favorite typefaces and discover new ones.

Got A Yen For A Yin, Yang?

If you’re into fonts, web fonts, type, typography, web design and stuff like that there, check it out and get involved. Typophile is a great and unique resource, too, let’s not forget. But for every Yin there’s gotta be a Yang.

Dang!

WOFF Support In Chrome Starts Up

Richard Fink — Sat, 28 Aug 2010 21:45:00 +0000

WOFF web fonts are now live in Version 6 Beta of Chrome for Win XP, Win 7, and MAC OS X, as well.

Days away? A week away?

Version 6 Beta seems pretty stable.

A simple test page.

Here is an image of what you should see in any browser if WOFF support is there:

John Daggett On CSS3 At TypeCon, 2010

Richard Fink — Sun, 22 Aug 2010 17:10:03 +0000

John Hudson of Tiro Typeworks and Christopher Slye of Adobe arranged a briefing – a guide to the perplexed – by Firefox developer and editor of the W3C CSS3 Fonts Module, John Daggett.

John Daggett has kindly posted his slides.
Dave Crossland has kindly posted his notes.
Photos of the event are posted in an album on Readable Web’s Facebook photo gallery.

California Dreamin’

As Simon Daniels of Microsoft put it on the TypeCon feed, these links are the closest thing to having been there “minus the element of spending a sunny afternoon in an underground bunker with a bunch of geeky web font geeks”.
This is true. But we emerged from the bunker with good tidings: the CSS3 Fonts Module has come a long way and Daggett says there’s a possibility it will move to Candidate Recommendation status by the end of this year. Truly impressive and unusually speedy work by the WG and its panel of Invited Experts. Many parts of the draft will be implemented in IE9 and Firefox 4. With other browser makers expected to follow. As John Hudson said during the Web Fonts panel discussion a few days later, “The standards process works.”
Considering the pessimism last year, quite amazing.

Web typography and a standards process that works. Wow++.

Playing Up WOFF At TypeCon, LA

Richard Fink — Wed, 18 Aug 2010 19:14:30 +0000

[Los Angeles, CA]
The W3C is seizing the opportunity to publicize WOFF – the Web Open Font Format – in conjunction with TypeCon here in LA.

Here are some relevant links:

W3C Opens Typography on the Web
WOFF Frequently Asked Questions
W3C Leads Discussion at TypeCon 2010 on New Open Web Font Format (WOFF)

The Lions Get Down With The Lambs

In the legal wrangling surrounding font licensing, WOFF is a kind “settlement” between browser makers and commercial font producers. The hoopla reminds me of the settlement between Google Books and the publishing industry. On a technical level, WOFF doesn’t do much except provide compression and a small barrier to installation in an OS like Windows, but at least it puts an end to the acrimony and that’s a lot in and of itself. We can move on. And so the W3C, major font producers like Microsoft, Adobe, Monotype Imaging, and others are hailing it as a big achievement.

It is. And congrats to all who made it happen.

Last night there was a “WOFF” party sponsored by Microsoft held at the Otis School of Art and Design. I was jet lagged and kept a low profile. I did vow, however, to find the person responsible for the eccentric vegetarian cuisine and make them pay. As font designer Juliet Chen said, maybe it was just a trendy West Coast/LA thing.

Today John Daggett of Mozilla and editor of the CSS3 Fonts Module, will be briefing attendees about the work of the W3C Fonts working group and the CSS3 Fonts Module. This was arranged and sponsored by Tiro Typeworks (John Hudson and Ross Mills).
A great idea and thanks in advance. Readable Web will be there.

I think I’ll bring along a bag of Doritos, just in case.

Microsoft WOFFles On SVG Web Fonts In IE9

Richard Fink — Sat, 07 Aug 2010 20:56:11 +0000

In a post on the IE Blog, the following excuse was given for not supporting SVG Fonts:

“As IE9 has implemented more of the standards that developers use and value, IE9’s Acid3 score has continued to rise. The remaining points involve two particular technologies (SVG Fonts and SMIL animation of SVG) that are in transition.

Support for SVG Fonts in the web development and font communities has been declining for some time. There’s already been discussion without objection of dropping SVG fonts from the Acid3 test. The community has put forth a proposal in the SVG Working Group to give SVG Fonts optional status.

Instead, developers can use the Web Open Font Format (WOFF, supported in IE9 Platform Preview 3 as well as other browsers) for both HTML and SVG content. It works well in conjunction with the CSS3 Fonts module and has broad support from leading font vendors (e.g. here, “a majority of font makers have already settled on WOFF or services like Typekit as their format of choice”). WOFF fonts are a better long-term solution for many reasons discussed previously.

Here is my reply as it appeared in the comments:

I find this post’s explanation for tossing SVG Fonts under the bus completely unpersuasive. I don’t know what to make of it. You’ve written nothing about the technical merits or the lack thereof of SVG Fonts at all. Just excusy dance-arounds.

“Support for SVG Fonts in the web development and font communities has been declining for some time.“

To what kind of “support” are you referring? Actual implementations or enthusiasm about the technology? If the latter, who’s enthusiasm has waned?

Did somebody do a poll?

Chrome, Safari, and Opera all have running code for SVG Fonts.

“There’s already been discussion without objection of dropping SVG fonts from the Acid3 test. The community has put forth a proposal in the SVG Working Group to give SVG Fonts optional status.“

First, I object. So now you have an objection.

Second, so what? Are you in favor of SVG Fonts or not? Does it give developers valuable options that they would not otherwise have, or not?

“Instead, developers can use the Web Open Font Format (WOFF, supported in IE9 Platform Preview 3 as well as other browsers) for both HTML and SVG content.“

Huh? Excuse me for being a little in the dark here, but could you be specific about where and how WOFF – which is a wrapped TTF or OTF file and works no differently than the system installed web-safe fonts – can be manipulated via script in the way SVG fonts can be? Are you saying WOFF is *the same* as SVG Fonts?

“It works well in conjunction with the CSS3 Fonts module and has broad support from leading font vendors (e.g. here, “a majority of font makers have already settled on WOFF or services like Typekit as their format of choice”).“

This has the standards process backwards and it isn’t even true. If it’s true, prove it.

“WOFF fonts are a better long-term solution for many reasons“

Says you. What are the differences, why are you declining to suport SVG Fonts, *that* is the point.

Some elaboration would be appreciated.

Regards,

Rich

I think everybody deserves a truthful and rational explanation for any decision that effects digital publishing as profoundly as the display of fonts. From any browser maker. And especially from Microsoft who writes so many rules of the game.
Whatever disagreements there may be between some font producers and myself there is no disagreement on this: type is important, it’s fundamental. If questions are raised and the answer is, simply, “Suck it up. This is what we’ve decided to do.”, that may or may not be OK – it depends upon what we’re talking about – but I’d rather hear that, than jive posing as reason supported by wishes presented as facts.

What’s WOFF Got To Do With It?

Tina Turner sang that, right? What’s WOFF but a second hand emotion…♫♪♫♫
Anyway, to end, here’s an example of SVG fonts at work. Viewable in Opera, Chrome, and Safari:
http://devfiles.myopera.com/articles/593/webfonts_in_svg.svg

Fixing Web Fonts, A Case Study

Richard Fink — Tue, 03 Aug 2010 17:07:49 +0000

Zoe Gillenwater writes about web design, especially Cascading Style Sheets. She’ll be speaking at John Allsopp’s Web Directions USA in Atlanta on Sept 21 in a presentation titled Efficient and Effective Design With CSS3.
A few months ago she announced a new book in the works called Stunning CSS3. I went to the book’s dedicated page to have a look.
Web fonts were being used. But in IE I didn’t like the way they looked at all:

Recreation of the page here.

The fonts used were Fertigo and Museo by Jos Buivenga.

Here’s what I did to fix:

1) I downloaded the fonts fresh. (They are available only in OTF format. Why? I don’t know. One would think that – as a promotional giveaway – making sure the fonts look good in every browser would be important. And at least one font designer – Peter Bilak at Typotheque – seems to grasp this reality. Good looking font rendering requires what it requires. And telling users of IE 6 through 8 to go take a hike is not a nice or smart thing to do. Bad for business.)

2) I subsetted the fonts (deleting unnecessary characters) to match the original files I got from Zoe’s site.

3) I converted the OTF files to TTF using the Font Squirrel Generator with auto-hinting enabled.

4) I re-did the TTF to EOT conversions using EOTFAST to get a compressed file. (Smaller files, quicker page load.)

Note: Auto-hinting is a hit-and-miss proposition – it works great for some fonts, not so well for others. But it worked very nicely for Museo and Fertigo, so I sent Zoe the improved fonts.
Here’s the result:

Recreation of the page here.

This was all one-click stuff that anybody can do. The worst that could happen is that the TTF wouldn’t look any better than what you had before. Was it worth the time spent? Absolutely.

Looks Bad Delivered By Typekit, Too

On Jos Buivenga’s site, I noticed that Typekit was listed as a source for Museo so I went and took a look there, too. Unfortunately, it looked as scraggly as the original on Zoe’s site:

Now, one of the arguments I’ve heard in favor of FHOS (Font Hosting and Obfuscation Services) is that they relieve web authors of the burden of taking different browsers into account. Well, what’s happening here? What’s up with this?

Don’t Deny What’s In Front Of Your Face

Recently, in a thread on Typophile, font designer Karsten “Cool Hand” Luecke wanted a piece of me for, according to him, putting ideas in people’s heads, for the notion that there are lots of fonts that look like crap onscreen. Fonts that need fixing. Fonts that could use improvement. It seems I’m an instigator for suggesting that web designers take matters into their own hands and mash, slash, and smack the font around until it looks right. Well, I plead guilty as charged. Please excuse me for suggesting that upholding some minimum level of aesthetic quality might be a good thing for users, web authors, and font designers alike.

Incidentally, Zoe G is using the web font Nadia from the free font service Kernest on her blog, and it looks very very good across the whole browser spectrum. (See if you can spot it.)

So here we have one case of free delivering better than paid, and a DIY derivative performing better than what could be purchased. (The single “normal” weight of Museo is free, the rest of the family you pay for.)

Make of this what you will.

FontCONF In Minneapolis/St. Paul

Richard Fink — Fri, 18 Jun 2010 11:53:43 +0000

It’s Tomorrow, And Free. Please come.

If you’re in the Minneapolis/St. Paul area and you’re into design, web design, web fonts, fonts, typography, or anything at all like the forementioned, please come to FontCONF tomorrow, Saturday, June 19th at:
CoCo – Coworking and Collaborative Space
213 4th St E., St Paul, MN

FontCONF

Organized by Garrick Van Buren of the font service and download site Kernest, a great time is guaranteed for all.

In the morning, font designer Chank Deisel will be leading a session where an entire font will be constructed as a collaborative effort. As part of a team, I’ll also be facilitating a session in the afternoon. There will be surprises. Fun. Laughter and learning.

Greatly looking forward to it. Hope you can come.

Addendum To Conference:

As some readers of this blog know, an article I wrote about fonts on the web was published on AlistApart Magazine about ten days ago. Unfortunately, Bill Davis of font producer Ascender Corp, took issue with some of the things I wrote about Ascender’s new web font services.

As it turned out, Bill flew in from Chicago to a attend FontCONF, and I’m sorry to report that all the bad blood boiled over, things got completely out of hand, and there was a brawl. Luckily, someone had a camera and captured the incident:

Davis and Fink square off with scornful laughter, each confident of victory.

Witneses to this unfortunate confrontation included font designers Mark Simonson, Stu Sandler, and Chank Deisel. However, after a delicious dinner at a nearby steak house in St. Paul, both men declined to press charges.

Readable Web At AnEventApart, Boston

Richard Fink — Sun, 23 May 2010 16:05:23 +0000

Boston, Massachusetts Readable Web is getting out of the office this year. I’ll be attending and reporting on a wide variety of events.

Starting with:

AnEventApart, Boston

I’ve never attended one of Zeldman & Meyer’s traveling road shows before and I can’t wait. The event kicks off tonight with a meet and greet at the Westin Copley Hotel sponsored by Extensis who is here to preview their new web font service WebInk.

Over the next few days I’ll be posting pics, twittering, muttering, commenting about just how tall Jeff Veen really looks in person, and reporting on everything and anything that happens to spark an idea in my brain.

Details on this conference and upcoming Event Apart conferences here.

Update: After-Conference Thoughts

Call it what you want: web design, digital publishing, whatever – the problems exist on two levels.

Problem 1: Cutting The Bullshit

This problem is not unique to digital publishing but to all publishing: staying on message, staying focused, writing clearly, keeping it brief – all the trite truisms are just as true today as they were when David Ogilvy wrote Ogilvy On Advertising in 1983 and Rudolph Flesch wrote The Art Of Readable Writing in 1949. Nobody is going to give you or your product more than a passing glance. At least at first. Waste people’s time and they’re gone. Click.

This is why I perked up when Luke Wroblewski argued that you should design your small-screen mobile experience first and build your desktop experience from that kernel. I agree. Working from the inside out like that imposes a discipline that would probably not exist if you started with the desktop experience. And if you can’t seem to cut it all down to it’s essence for an iPhone or Android, it’s time to ask yourself why the site exists in the first place.

Problem 2: Re-Tasking Content For Different Devices And Screen Sizes

It used to be that the difference between user agents (browsers) was the thing that drove web authors crazy. Yes, there are still issues, but it’s easy to envision a time in the near future when that won’t be anything more than an occasional and minor annoyance. The monster facing us now is different devices and screen sizes. This is a tough one – and the mental tools publishers need are just beginning to coalesce.

Recently, on Typophile.com, designer John Hudson made the observation that, to him, websites in general resembled scrapbooks. For some reason I’ve been thinking about that comment a lot and finally realized why: minus the negative connotations of the word “scrap”, they are scrapbooks. Chunks of information being fed in and out from disparate sources on the network and placed together on the same “page”. The equivalent of taking chunks of five or six pages of a book or magazine and pasting them together. Even in an era of relatively high resolution screens this will still be the case. Content must be chunked so it can reflow into its container. And connectedness is a requirement – the idea of an “e-book” on an “e-reader” disconnected from the net is already preposterous – even though we’ll be living with that situation for some time to come.

I got a new TV delivered today. It’s connected to the network, too. A TV with web apps. A giant iPad. Who’d a thunk?

And, oh, yeah. Just to cap off AnEventApart, Boston:

How Tall Is Jeffrey Veen?

Meeting Jeff Veen in person was a bit of a shock, really. For a guy who writes and speaks about all this web stuff, turns out the guy’s tall enough to be my father!

Oops, Capped Off Too Soon

[A Bit More On An EventApart, Boston] Here’s a nice roundup of the event called Themes From AnEventApart Boston with a link also, to Luke Wroblewski’s extensive notes from the conference. Also, Luke and the concept of “Mobile First” gets a treatment on the Big Web Show.