Readable Web » Readability

When The World Shifts Beneath Your Feet

Richard Fink — Tue, 06 Dec 2011 22:19:03 +0000

Garrick Van Buren, my taskmaster at Kernest/Konstellations, sent me over a link to an article about how different publishers are dealing with DRM and, just as importantly, the Walmart of online publishing – Amazon.
Cutting Their Own Throats on Charlie Stross’s blog.

Uh, there seems to be a notion floating around that somehow there’s something people in the publishing biz can do to “avert the evil decree”.
(To grab an apt phrase from Jewish liturgy.)
But, like drowning in a tsunami, or any other deluge of “Biblical” proportion, there is no averting – or avoiding – the devaluation of anything that can be converted to bits and bytes.

Back in mid January, I wrote that this year already “felt” different. And it’s been. And today I’ve been musing about the people in publishing who are going to lose their jobs. Yes. They – maybe you – are going to lose your job. And no purchasing of an act of Congress like SOPA or an outfoxing of Amazon is going to prevent this.

“Teach Me To Dance, Will You, Zorba?”

“There are people who fall hard and do not find their feet for a long time, if ever — a condition some psychiatrists call complicated grief. And the depth of the economic collapse has unceremoniously stripped thousands of far more than money: reputations have reversed; friendships have turned sour; families have fractured.”

In reality we are all like beggars selling apples or pencils on a street corner. But that reality gets masked over time and people feel safe and secure. The beggars huddle for warmth within things called “industries”. After awhile, the idea that people will continue to prefer buying from “us” over the other beggars begins to look and feel like a law of nature. Life can be good, even for a beggar.

I used to work in apparel manufacturing in the United States – an industry that crumpled to nothing in the face of lower-priced foreign imports. We knew that no matter how loudly we begged, no one was going to buy from us any more.
The auto workers who used to populate Detroit know all about this, too.

When the market says to you: “We can’t pay you anymore for what you do”, you move on.

But when the world shifts beneath your feet like that, don’t just stand around flat-footed, dammit. Instead, with a fresh start, focus on the possibilities and ask Zorba to teach you how to dance. If you’re lucky, he’ll oblige.

Practical Font Design, Third Edition

Richard Fink — Thu, 01 Dec 2011 17:29:12 +0000

Practical Font Design
3rd Edition

In Digital Publishing you need to co-ordinate your efforts with many people. Web designers, developers, server techs – the list goes on and on – and the more you know about how those people go about their work, the better off you will be.

With fonts, the “collaboration” might take the form of a purchase, or a free download, or just a link to the font in your HTML. But there is a font-maker somewhere on the other end of that transaction. And the more you know about how that font came to be, the better off you’ll be. And unlike a lot of things in today’s fast-paced environment – where it’s hard to separate the side-shows from the main attractions – a knowledge of fonts and how they’re made won’t be obsolete in just a few years. Changes in font technology come at a snail’s pace, and what changes do come, are incremental. So what you learn about fonts will pay dividends for as long as you live. Really.

Have A “Practical” Christmas

David Bergsland’s Practical Font Design is now in its Third Edition. It’s greatly improved in many, many ways from the Second Edition. (Bergsland not only listens to reader feedback, but he acts on it, too.) It’s still the only book of its kind, and it does a simple thing: it tells you, in a friendly and to-the-point manner, how one experienced font designer and teacher – David Bergsland – goes about his work. It’s a must-buy for font designers. It’s a should-buy for any web designer, graphic designer, or anybody involved with digital publishing.
Not much interested in the technical details? – It’s worth the price just for the “history of type” section and as a flip-through reference. If you’ve ever used Adobe Illustrator or CorelDraw, you already know more than you necessarily need. And a demo download of FontLab Studio – the professional level font editor referenced in the book – is available for Mac and Windows free.

Here’s a little piece to give you an idea of the tone:

“My plan is to go through my decision making process so you can do the same as you develop your fonts. There is no right or wrong here. All you have to guide you in the process is your personal sense of style – what’s right and wrong.”

Practical Font Design, The Links:

Amazon Print and Kindle

Lulu PDF

Lulu Paperback

David Bergsland sells his fonts at:

Hackberry-Fonts

And blogs here, dispensing technical tips and helpful font-making tools:

Hackberry-Fonts Blog

Extensis Brings Google Web Fonts Straight Into Photoshop

Richard Fink — Mon, 07 Nov 2011 23:42:10 +0000

Extensis, the company behind the WebINK web font service, today announced a plug-in that brings Google Web Fonts straight into Photoshop.

Free And Open-Source Fonts Served Alongside The Proprietary, In A Surprising Twist

Since launching the WebINK web font service, Extensis has concentrated on building a library of fonts drawn from the proprietary type community, building on long-standing relationships developed through Extensis’ other font and design products: Suitcase Fusion (a desktop font manager) and Universal Type Server (a server-based font library and font license manager for workgroups).
But they haven’t left it at just being another service operating in the shadow of (now Adobe) Typekit – as services like Fontdeck, WebType, and others have done. From day one, I’ve personally seen them strive to find new ways to meet the needs of web designers with innovative software tools that, in combination with their hosting service, make the use of a font service – as opposed to shopping the web for suitable fonts and then self-hosting – a much easier and useful proposition. They’ve continuously shown up at the major web conferences to promote, of course, but also to watch and learn and listen. What’s sets them apart is that they turn around and act on that knowledge in creative ways.

Riding Piggy Back On Google’s Web Font Initiative

[A developing story... more analysis, riding in on piggy-back, is on the way...]

Amazon Moves To HTML5/CSS3 For New Kindle, Leaves Mobi Format Behind

Richard Fink — Fri, 21 Oct 2011 15:50:10 +0000

Some folks I know are waiting for E-Pub to magically arrive and provide a comfy transition from print to screen. But anybody who’s looked into that closely knows it’s a fairy tale.

Ain’t gonna happen, and here’s the latest nail in the E-pub coffin:

Kindle Format 8

The List of Features Includes @Font-Face

Here’s a list of supported features on the way:
List of supported HTML tags and CSS elements

(Note to Amazon: It’s HTML Elements (but I’ll accept “tags”) but definitely not “CSS elements” CSS Properties, it is.)

Steve Jobs Role In Typography By Computer

Richard Fink — Mon, 17 Oct 2011 16:21:37 +0000

A few weeks ago, my eye doctor said to me, “I only know of two people who know anything about fonts, you and Steve Jobs.” Seemed Dr. Patel was re-doing his web site and had questions about the qualities of Trebuchet MS. But the line about Jobs raised an eyebrow, naturally, and it was as I suspected – Dr. Patel had read Jobs’ commencement address to the Stanford graduating class of 2005, the relevant portion of which follows:

“Reed College [where Steve Jobs enrolled for awhile] at that time offered perhaps the best calligraphy instruction in the country. Throughout the campus every poster, every label on every drawer, was beautifully hand calligraphed. Because I had dropped out and didn’t have to take the normal classes, I decided to take a calligraphy class to learn how to do this. I learned about serif and san serif typefaces, about varying the amount of space between different letter combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way that science can’t capture, and I found it fascinating.
None of this had even a hope of any practical application in my life. But ten years later, when we were designing the first Macintosh computer, it all came back to me. And we designed it all into the Mac. It was the first computer with beautiful typography. If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts. And since Windows just copied the Mac, it’s likely that no personal computer would have them.

Setting The Record Straight

A lot of people know that Benjamin Franklin did research on electricity. The silhouette of Franklin in a lightning storm with his kite flying and key dangling is emblazoned on the average American’s brain: the rugged individualist in pursuit of a dream, no matter the danger. But what almost nobody knows is that Franklin’s work on electricity was as a part of a team of co-equals. And that his signature was only one of several others’ that appeared upon publication of that work. But Franklin had the fame and got the credit. Sound familiar? History is a single-sentence thing.

A lone eagle, as an icon, works great. A flock of geese, not so much.

FinksLinks: Pre-Approved For Your Reading Pleasure

Here’s a couple of articles to help put it all in perspective:

The Impact of Steve Jobs on Typography

Steve Jobs and Type: Connecting the Dots

And here, on Typophile.com, a bit of additional insight, debate, and perhaps a few ruffled feathers: Steve Jobs 1955-2011

Adobe Announces Acquisition Of Typekit

Richard Fink — Mon, 03 Oct 2011 19:43:00 +0000

It’s fair to say that those close to the development of Web Fonts expected Typekit to be acquired by somebody. Well, today somebody did.

Adobe Buys Phonegap And Typekit for Better Web Tools

The Typekit Blog Announcement

And Adobe’s press release: Adobe Acquires Web Typography Innovator Typekit

A good thing? A bad thing? An inconsequential thing? Who knows?

ttfautohint – Support Web Typography

Richard Fink — Wed, 10 Aug 2011 14:10:43 +0000

There is a very promising open source tool by developer Werner Lemberg called ttfautohint which promises to make it a lot easier for font designers and also web designers working with free, open-source, and public domain fonts to get them looking good on Windows. Even the early versions have some experts in font software sitting it up and taking notice.

Help Improve Web Typography with ttfautohint is a quick and entertaining video explaining the problems ttfautohint is trying to solve.

Send Money

I’m kicking in a few bucks, and you should, too.

A Webfont Specimen Page Free For Download

Richard Fink — Sun, 10 Jul 2011 15:53:36 +0000

Tim Brown of Typekit put together a webfont specimen page awhile back. Originally introduced in Tim’s article for AListApart: Real Web Type in Real Web Context, and it does give a real nice view of a font in a variety of contexts.

I’ve incorporated a modified version of it into my suite of web font test pages. And, for those who might find it useful, you can take a quick look at it here, and download it here.

The Modifications

There’s two main differences between my version and Tim’s:

For test pages, I like to keep everything – the HTML, CSS, JavaScript, and even images – contained in a single file. As my webfont test pages have evolved, I’ve just found it simpler this way. At least to me. So everything is in one .htm file. The two images from the original – used for background – are included as Data URIs in the CSS. The only downside is that those images won’t show up in IE6 or 7: a situation that doesn’t bother me because nearly all the functionality remains intact and my IE testing is usually done on IE8. (IE6, 7, and 8 all require EOT, and Windows GDI is the rendering engine for all, and I’ve yet to see a font problem appear in IE6 or IE7 that didn’t show up in IE8.)
The @font-face syntax has been updated to use the “Fontspring”, single declaration syntax.
See: Further Hardening of the Bulletproof Syntax and Best Practices for Serving Webfonts to IE9 on the Fontspring blog for more information.

Pause Before You Say “IE Sucks”

An interesting glitch appeared while I was working on this. When displaying the font Ultra from Google Webfonts, there was a strange difference between IE8 and Chrome. In IE8, the glyph “j” was clipped off on the left like this:

But Chrome rendered the entire glyph and allowed the part that IE clips off to extend outside the bounding box to the left:

In both cases, it’s not what you want.
Which browser is doing the technically correct thing? And more importantly, what’s causing it? Since the clipped “j” in IE was more of an eyesore, the kneejerk response for most developers would be, I think, “Goddam IE! Again!”. But after opening the Ultra font in a font viewer, the real source of the problem revealed itself.
In the font itself, the position of the left sidebearing of the “j” was the source of the problem:
You can see that the font itself “clips” the “j”. (And this may or may not show up depending upon the layout.)

Over the past eight months I have cracked open many hundreds of fonts, one after the other. And I can tell you firsthand that even on carefully made fonts, stuff like this happens a lot. Ultra was designed by Brian J. Bonislawsky of Astigmatic who’s very experienced. But even so, stuff happens. So, before you go blaming the browser, if you’re using a webfont, remember that a new variable has been added to the mix – and the source of what seems like “buggy” behavior is just as likely to be there as anywhere else. Just what web developers needed, a new complication!

Some Cool Tools That Came Into Play

The CSS for Tim Brown’s page was originally in three separate CSS files. I brought them together within a single style tag using a nifty free tool – CSS Mixer – which allows you to select a bunch of CSS files, concatenate them into a single file, and minify the code using the Yahoo User Interface Library. After that, it’s cut and paste. Very handy. There is also a tool by the same developer, Sam Beauvois, for concatenating and minifying JavaScript named JS Mixer. (They’re .NET executables for Windows only. No Mac or Nix versions unfortunately.)

That’s it. Pay it forward.

Turning My Back On The New New York Times

Richard Fink — Wed, 23 Mar 2011 01:26:48 +0000

Ever since the New York Times announced that it’s moving from free online web access to a paid subscription I’ve been torn. And sad. I spent most of my life in New York, I grew up in Brooklyn, and the Times has been a part of my life for nearly as long as I can remember.

Growing up, there was the Sunday morning ritual of freshly bought bagels and, of course, the Sunday Times. What a bargain ! The Week In Review, the Arts section, and on and on. (And let us not forget the lingerie ads – a secret soft-core bonus for the boys of every borough and beyond.)

Also – and nobody but a New Yorker could possibly know about this – there’s even a special way to fold the Times origami-style, so you can read and yet not disturb the people pinched up to the left and right of you on the subway. I remember my Dad showing me how it was done when I started commuting to high school every morning from Brooklyn to lower Manhattan.
Rites of passage. Only in New York. Great memories.

The Last Time They Asked, I Paid

Back in 2005, the Times began charging readers for online access to its Op-Ed columnists in a program called TimesSelect. It was about $60 a year. I enjoyed the Op-Ed section a lot and, to some extent, I was grateful that the entire paper was online for free, and so I paid for the subscription partly as a show of support. $5 bucks a month, what the heck. However, TimesSelect didn’t work out for them – I’m assuming they lost too many readers and too much advertising revenue – and they did away with it after two years. They sent me and the other subscribers a pro-rated refund.
But now we’re not talking about $60 a year anymore.
Here’s the New York Times’ new take-it-or-leave-it proposition:

Once readers click on their 21st article [the first twenty for the month are free] they will have the option of buying one of three digital news packages — $15 every four weeks for access to the Web site and a mobile phone app (or $195 for a full year), $20 for Web access and an iPad app ($260 a year) or $35 for an all-access plan ($455 a year). All subscribers who take home delivery of the paper will have free and unlimited access across all Times digital platforms except, for now, e-readers like the Amazon Kindle and the Barnes & Noble Nook.

The New York Times Can Kiss My Ass

That’s my answer. I don’t have the patience for convoluted overpriced schemes like this. I’ve had it with ultimatums. This is just one more lopsided End User License Agreement. And it’s one that I can walk away from, so I’m walkin’. Besides, if this is where their heads are at, perhaps the “newspaper” as an organizational model for delivering news is not long for this world.
How the Times monetizes their site – which gets about 40 million hits a month, BTW – is not my problem, it’s their problem. I wonder if they’ve tried delivering any ultimatums to their advertisers lately?

My life just got simpler and probably a whole lot better. I stopped reading the Times three days ago. Cold turkey. And if the Times is out of the free stream, I won’t be linking to any of their articles unless I absolutely have no choice. I’m not going to be a salesman for the New York Times, for free.

Why Are They Doing This Anyway?

If you read their financial report for 2010, it’s hard to understand why the Times is doing this at all. There’s no tone of desperation. If anything, the report paints a fairly rosy picture.

“Operating profit increased to $234 million in 2010, more than triple the $74 million we reported in 2009, and operating profit excluding depreciation, amortization, severance and special items grew 20% to $384 million in 2010 from $320 million in 2009.

And why now? When so many people are jobless and the economy is struggling? It seems the Times has a new motto:
“All The News For Those With The Means To Pay Whatever We Ask“

There’s something about this that just feels wrong. The pricing, the timing, the tone of it. Not even a student discount? It turns out that the NYTimes site was shareware set to expire after fifteen years, and time’s up.

Here are the relevant links so you can read all about it straight from them:
The Times Announces Digital Subscription Plan
A Letter to Our Readers About Digital Subscriptions

And that’s the end of it. I move on.

New @Font-Face Syntax: Simpler, Easier

Richard Fink — Mon, 07 Feb 2011 17:51:59 +0000

I love it when a plan comes together.

Some months ago, in an an email exchange with Jeffrey Zeldman about the feasibility of a book about web fonts, I wrote that the turning point – the point at which enough would be known to establish best practices – would be around the time IE9 and Firefox 4 were released to market.

A Simple And Conformant Cross Browser Syntax

Now, with IE9 and FF4 nearing release, as if on cue, Ethan Dunham of Font Squirrel has revisited the problem of a cross-browser CSS @Font-Face syntax and found – a year and half after it first became an issue – a new and simpler solution. This was last Thursday.

Only on the web could change happen so fast. Knowledgeable eyeballs were on it immediately. And within hours of publication, it was tested and tweaked a few times. By the end of the day it was already being implemented at Font Squirrel, Font Spring, and Kernest, too.

It Comes In Two Flavors

Since one of the things I do like about the Mo’ Bulletproofer syntax is that, while the following is conformant:

     src: url('http://:/') format('no-ie-404')

it’s obviously odd and deliberately self-describing. Therefore it’s less likely to be left out once you’re in the habit of using it. And less likely to be deleted accidentally by someone unfamiliar with it’s purpose. So, the following is my version of the new syntax, in line with that practice. It’s the result of tests done with the IE9 Preview 7 build and many other desktop browsers and platforms over the weekend.

The Trick Is In The Question Mark

There are currently two variations. They are:

@font-face {
     font-family: 'fishyfont';
     src: url('fishyfont.eot?iefix') format('embedded-opentype'),
	   url('fishyfont.woff') format('woff'),
	   url('fishyfont.ttf')  format('truetype'),
	   url('fishyfont.svg#svgFontName') format('svg');
	}

With this variation, IE 6, 7, 8 and IE9 take the EOT file. But, of course, IE9 supports WOFF, too. So what if, for some reason, you want IE9 to take the WOFF file instead?

Follow The Bouncing Ball

Well, the ball that was set bouncing with Ethan’s original post on the Font Spring Blog bounced back again from Melbourne, Australia where Ryan Seddon of CSS Ninja posted a fix that overcomes this limitation:

@font-face {
     font-family: 'fishyfont';
     src: url('fishyfont.eot?iefix') format('ie9-skip-eot'),
           url('fishyfont.woff') format('woff'),
           url('fishyfont.ttf') format('truetype'),
           url('fishyfont.svg#svgFontName') format('svg');
	}

With this variation, IE9 will not take the EOT. Instead it takes the next font in the stack that’s in a format that IE9 understands. In this case the WOFF file. If there was no WOFF file, it would take the TTF. (That is, as long as the TTF has the hidden embedding bit set to “Installable” – if Microsoft is still sticking to that. I’m not sure what IE9 does in that case, we’ll see.)

It’s Still Being Tested

There’s no such thing as too many tests or testers. If you find a problem, please report it on the Font Spring Blog. Or here.

I’ll be posting more as I test more and to explain how and why all this works and what problems it solves.

Update: Feb 17 2011

Alert: In some quick-and-dirty tests of this syntax in IE9 RC1, a problem came up. If the page kicks IE9 into a “less than” IE9 Compatibility Mode, this technique fails and the fallback font displays. The word from Microsoft’s IE team is that this behavior will not be altered for IE9 RTM.

[Let's get it over with: insert, mentally, your expletive of choice here and now, and then let's move on....]

What this means is that, as of right now, the most comprehensive, failure-proof method – one that avoids the bug in Android, the innate strangeness of the local() descriptor, and bridges the gap between IE6, 7, 8, and IE9 – is the Mo’ Bulletproofer @Font-Face Syntax. However! However! If you prefer a single declaration solution and your pages don’t trigger one of the IE9 Compatibility Modes, barring any more unforeseen changes between IE9 RC1 and IE9 RTM, the Fontspring syntax seems alive and well. The problem won’t come up. Note also, that you can near-totally prevent failure and ensure your pages are running in IE9 “Edge” mode by using the X-UA-Compatible Meta Tag.

Update: March 02 2011

Alert: More changes, but I think we are finally at the end. Maybe. Ethan Dunham has “hardened” the syntax by adding in the EOT-only src descriptor that was a part of Paul Irish’s Bulletproof Syntax. And it works in IE9′s compatibility modes, too. (I can’t see a downside. In fact, adding that first EOT-only src descriptor was Microsoft’s recommended approach to bridging the gap between IE 6, 7, and 8′s proprietary implementation and IE9′s standards-based implementation from the very start.)
So, the following now works universally:

@font-face {
	font-family: 'fishyfont';
	src: url('fishyfont.eot'); /* IE9 Compat Modes */
	src: url('fishyfont.eot?iefix') format('eot'), /* IE6-IE8 */
	     url('fishyfont.woff') format('woff'), /* Modern Browsers */
	     url('fishyfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('fishyfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

Ralf Hermann is recommending it in an article on @font-face at Smashing Magazine.

Is it rock-solid? Looks like it. I would use it. But only IE9 RTM can seal the deal. Or not.
Stay tuned.