Trevor Burnham » design

Flicker-free Typekit

Trevor — Fri, 29 Jan 2010 01:26:22 +0000

[Update: On May 14th, 2010, Typekit finally announced an official solution to the “flash of unstyled text” problem. So, the fix below should be considered obsolete.]

I’m a fan of Typekit. Being able to go beyond the old Arial-Verdana-Times-Georgia paradigm, on any modern browser, without Flash (unlike sIFR), and with selectable text (unlike Cufón), is a dream come true.

One problem, though: It takes a few milliseconds to load up and render those fonts. That’s not so bad in itself; what’s bad is that the browser renders everything in non-Typekit fonts first, creating an annoying flicker every time the page loads as the text gets replaced by fancier fonts.

Fortunately, there’s a fairly easy solution (though not an officially supported one—see below). Just add this to your site body:


  
  <script type="text/javascript">
    document.getElementById('domain-com').style.opacity = 0;
    setTimeout("document.getElementById('domain-com').style.opacity = 1", 1000);
    Typekit.load('KIT_ID', {
      afterLoad: function(data) {
      	setTimeout("document.getElementById('domain-com').style.opacity = 1", 1);
      }
    });
  script>

Then substitute your actual domain for domain-com, and (important!) your site’s unique Typekit ID for KIT_ID. You can get this ID by logging in to Typekit, launching the Kit Editor, and clicking the “Embed Code” link; it’s an 8-letter alphanumeric combination.

Here’s a breakdown:

The ID on line 1 isn’t just a good selector; it’s good form. The most common convention is to use your domain (with a dash instead of a dot), which makes things easier for the Greasemonkey types.
The script include on line 2 brings in the Typekit description of your site’s kit. You can move this line up to your section if you want.
Line 4 makes your entire site disappear. Because this is at the top of your body, nothing is going to get rendered. It’s important that this line be here, rather than in another file or even at the foot of your body.
The call to Typekit.load does the actual loading of the fonts, and the afterLoad callback will be executed right after that happens. That’s when we want to make the body opaque again, right? Well, not quite. It seems that there’s a small delay between the callback and text refresh. Fortunately, using setTimeout to add a tiny delay (1ms) seems to eliminate this, finally ridding us of the dreaded flicker.

Caveat: The afterLoad event is currently considered experimental. An official solution for avoiding flicker is likely to be added in the future.

Sloppy Notation Costs Lives

Trevor — Wed, 13 Jan 2010 01:24:54 +0000

I had a grotesquely familiar experience in an econ class today: The prof drew up a simple example of a simple concept, yet no one—myself included—understood it. Why? Multiple inconsistencies. A variable name meant one thing in the premises, and something else in the conclusion; a vector was used interchangeably with its distance; the matrix dimensions didn’t match up. Individually, each of these small errors could have been caught and corrected. But taken as a whole, they destroyed every trace of coherence. As a result, half the lecture was spent with the frazzled professor trying to clarify things, only to confuse the audience further, to the point that students were yelling, “Enough! Forget it! Let’s move on!” These are PhD-level students at one of the top econ programs in the world. Yet the situation was so agonizing that it drove them to pandemonium.

When will people learn? If you’re addressing an audience, it is your moral imperative not to waste their time. In particular, there are three goals you must pursue:

Accuracy: Check your facts, and be rigorous
Clarity: Address points of possible confusion
Density: Convey as much information as you can in as little time as possible

This doesn’t just go for mathematical lectures. It goes for any interaction with your fellow human beings, with the imperative growing stronger in proportion to the size of your audience. No matter how much you value your time, if you’re giving a talk that hundreds will attend or writing a book that thousands will read, you owe them your most stringent efforts. Think about it numerically: If you save 3,600 people one second each, you’ve just saved someone an hour.

The desire not to waste other people’s time has always been one of my defining traits. Not that I always succeed, but at least I’m embarrassed when I fail. Sometimes I worry that this mentality is not widely shared.

Calculus: The Videogame

Trevor — Sat, 09 Jan 2010 18:38:16 +0000

Last semester, I took a graduate-level course called Videogames and Learning, taught by Barry Fishman of the UMich Education department (who also teaches an undergrad version). Needless to say, the class is widely beloved, despite its dense syllabus of readings on the theory of learning and motivation. I decided to write my final paper on the question, “Why aren’t there any games that teach calculus?” (At least, not any successful ones.) There are some terrific games, like the Zoombinis series, that teach basic logic; and there are some compelling games, like the free online Lure of the Labyrinth, that teach arithmetic and algebra; but no one seems to have made a game that goes past the 8th-grade level. At the same time, no one has made an educational game as rich and immersive as, say, Mass Effect, a game so slick and well-written that it’s like living in the best sci-fi movie since The Empire Strikes Back.

Over time, I realized that this was not a topic conducive to academic publishing, so the project drifted from a research paper to a design one. The result is an attempt to describe how a game could be made to teach calculus, proof methodology, and ways of mathematical thinking—all within the context of a gripping adventure. The paper is called Math Effect. I hope you enjoy it. And if you’re a game designer, I hope it gives you ideas.

Math Effect

Perfectionism

Trevor — Fri, 08 Jan 2010 00:03:14 +0000

Let me tell you the tale of a real perfectionist.

There once was a Yale professor by the name of Edward Tufte. He wanted to write a book about the presentation of statistical data. It was going to be rich in plots and graphs, accompanying the text on every page. Instead of tiny, clumsy footnotes, or pageflip-inducing endnotes, it would have wide pages with margins perfectly suited to his numerous citations and interjections. It was, alas, going to be an expensive book to print. And so, no publisher would take it in its intended form. They would cheapen it, separate the images from the text, make it just another forgettable academic treatise doomed to gather dust on library shelves. Rather than accept this fate, Edward Tufte decided to self-publish the book that would redefine his career: The Visual Display of Quantitative Information.

Now, when I say “self-publish,” you may have visions of Tufte uploading a PDF to iUniverse and ordering a dozen copies. No. This was 1983. Self-publishing was an arduous and expensive process—but Tufte was obsessed. So, he went all in, taking out a second mortgage and setting up a printing press in his garage.

Fortunately, the book was a smashing success, the first in a tetralogy of books that have come to define the intersection of design and statistics. The books are hallowed in both industry and academia for making one of the nerdiest subjects imaginable into an utter pleasure accessible to any reader.

Within this epic arc, there is a smaller story that may yet secure Tufte’s visage a permanent place in the dictionary next to the word “perfectionist”: When it came time for Tufte to convert his printing process to a purely digital one, it turned out that the digital version of the font he had been using, Bembo, was too spindly for his liking. Whereas an ordinary person would readily accept this minor deficiency (academics commonly publish in Euclid, one of the spindliest fonts ever devised), or switch to some other serif, Tufte worked with professional font designers to design a new and improved version of his beloved typeface. Such attention to detail is an inspiration to us all.

And so, if you pick up Tufte’s latest book, Beautiful Evidence, and turn to the colophon seeking elucidation on the book’s typography, here is what you’ll find: “Composed in ET Bembo.”

Re-Freshing

Trevor — Thu, 31 Dec 2009 20:04:36 +0000

The conventional wisdom says that winning a micro VC competition like Y Combinator or TechStars takes a bold new idea, something no one else is doing (or, at least, not doing well). And that’s usually the case. But if you look closely, many of the projects they’ve funded—in fact, many of the most successful ones—are almost identical in concept to well-established rivals with massive brand recognition and deep pockets. The trick is that those older rivals aren’t just old; they’ve gone stale.

Posterous is a poster child for this category. Their idea: hosted blogs. Their biggest rival: Google’s Blogger, which has been around for more than a decade now—and barely changed in that time. In a way, it can’t: Blogger is one of the most popular websites around. Mess with the formula, and they might get New Coke’d. So Posterous comes in with their hip, clean, fresh design, seamless integration with Facebook and Twitter (and, yes, Blogger), and an emphasis on mobile devices, and they’re attracting users like crazy.

But Posterous didn’t just succeed with the same idea as the doddering, decrepit Blogger. They were also following the popular Tumblr by a meager two years, and the sites are in close competition for new features. But Posterous’ borderline preposterous devotion to simplicity distinguishes them from everyone else in a crowded field. Tumblr seemed fresh when it started, but guess what? It’s not 2007 anymore. If you don’t watch your back, staleness can catch up quick.

Posterous’ pitch is three words: “Dead simple blogging.” I’d cut it down to two: Blogger, fresher.

[Update, 1/19/10: A precisely contrary opinion may be found here. We fundamentally agree that design is extremely important, but disagree over which of the two top-notch sites has the better design. I believe that Tumblr’s popularity is mainly due to first-mover advantage. The truth will out.]