Mark Hurrell

2010

A year in photographs

1941

Ten Mile Map of GB, Military Edition 1941

The full set is over on Flickr

London Transport Bus Map

London Transport Bus Map from 1947

More images

Updating the Helvetica font stack

For the last few years specifying Helvetica Neue followed by Arial in your CSS has been the favoured technique if you wanted Helvetica on your website. The aim is to present Mac users with Helvetica Neue, whilst Windows users see Arial (a Helvetica variant optimised for Windows). I don’t know who invented the technique, but I’ve seen it recommended by countless web luminaries and I’ve used it in many projects myself. Recently I’ve encountered a few problems with this method that have lead me to rethink this approach.

The first issue affects pre-Snow Leopard Macs with Adobe’s extended font pack installed. On these machines Safari renders Helvetica Neue Bold as Helvetica Neue Bold Outline, making it almost illegible onscreen.

Considering raw numbers alone this issue is quite rare, but unfortunately there’s a pretty notable demographic where this setup comes as default on every desk - large creative agencies. The same large creative agencies that commission websites by the hundred.

Another bug hits Windows users with a pirated version of Helvetica Neue installed on their system. This can cause some CSS styles to trigger Webkit into having… a bit of a breakdown.

These are the bugs I can consistently reproduce, I’ve had reports of others but I haven’t managed to replicate them myself. Either way, both bugs occur in modern browsers & render the page unreadable, which is enough reason for me to look into a different solution. As I was mid Wikipedia-ing some background information for the problem, I noticed that Wikipedia itself renders in Helvetica (on a Mac) yet doesn’t have the bug. Turns out that Wikipedia simply specify the following:

font-family: sans-serif;

A bit of testing revealed that for the most part, just specifying sans-serif will give Windows users Arial and Mac users Helvetica. The catch? Opera for Mac interprets sans-serif as Lucida Grande, whilst Linux browsers seem to pick an arbitrary font from a hat (but then as they don’t have Helvetica Neue or Arial installed, this was how they were behaving previously anyway).

We can reign in Linux by specifying a couple of open-source Helvetica derivatives that are installed on all the main Linux distros; Helmet & Freesans. Opera for Mac are planning to change their sans-serif output to Helvetica or Arial within the next couple of releases to benefit platform consistency.

So here’s the font stack:

font-family: Helmet, Freesans, sans-serif;

[Update]
I’ve had the opportunity to test this font stack on a few other devices recently, and have updated the table to show those findings.

Due to the limited selection of fonts available on many mobile platforms (and my unfamiliarity with many of them) I’ve added more options to the test page.

Aspen

…

When words cease to be physically set in the product

Oliver Reichenstein:

“Designing better news is a design, strategy and economic issue. I don’t have a solution… What motivates me is that with the liberation of information, we see a global transformation of societies toward more openness, more reason, less lethargy.”

Vignelli: A Celebration

The Design Observer’s week-long celebration of Lella & Massimo Vignelli has introduced me to some fantastic insights from the two designers. The republished interview of Massimo and Ed Benguiat brought up at several gems.

I’ve often tried to verbalise how I feel about differing pan-Atlantic attitudes towards modernism and the tech industry — usually after a few too many beers — but Massimo manages to explain it with far more restraint and historical awareness than I’ve even come close to:

“From my point of view, one of the most unfortunate things that happened in the ’30s was the exhibition called “International Style” at the Museum of Modern Art. It was the official introduction of modern architecture in the U.S. In Europe, however, the movement didn’t develop as a style; it was a revolt against the philosophical issues of the Victorian time — all the early stages of industrialization when profit was the only motivation for doing things. When the Modern movement was born in Europe, it was really to provide alternatives that were rooted in the essence of the new time. This was exactly the same kind of philosophical change that happened in the Renaissance. When the Modern movement arrived in the U.S., it came during the [Depression], and it came packaged by MoMA and put together by people who have throughout their life switched from one style to another. That’s what Philip Johnson has been doing. He went from classicism to Mies-things to gothics. Once, I visited his office and on one desk they were doing things in a neo-romanesque style, and on another a neo-gothic skyscraper, and on another a deconstructionist building. I thought I had made a wrong turn; I thought I was in Bloomingdale’s.
In other words, when industrial design was born in this country [the U.S.], it was born not as the answer to industrialization — not as a working things out according to the tools and the issues and the problems — but basically as an incentive to sales — exactly the same kind of thing which has been done by a lot of other people.”

And he explains his approach to typefaces (poignant perhaps that this interview has been republished just as custom typefaces are beginning to gain widespread support on the web):

“One of the things I always say is that, for me, typography has very little to do with typefaces. Typography is structure. We structure the page, centered or flush left, or on a grid. And the lines we draw in are just lines; they’re not type. Therefore, to put so much emphasis on the type is out of place.”

Designing Design

Kenya Hara:

“To design is to build a structure with an image inside the mind of the recipient. […] the materials are not only external stimulation but also massive amounts of memories awakened by stimulation. Designing highlights subtle differences between recalled memories and reality.”

Eye contact

Chris Ofili’s Blossom watches from under the chaos. Spotted on Cambridge Heath Road.

Dartmoor

Silence.

It’s a 90’s revival!

Neville Brody is challenging designers again. David Carson is at conferences again. Magazines are reinventing publishing again. It’s all like, totally wild.

To celebrate these momentous times I’ve put together a user stylesheet to bring those bleeding-edge 90s design ideals to our current snoozefest crop of mainstream web sites. You can download the stylesheet here (only tested in Safari/Chrome I’m afraid.)

Flickr

The New York Times

Facebook

Ive on design

“The best design explicitly acknowledges that you cannot disconnect the form from the material—the material informs the form”

I entirely agree. Which makes iBooks impersonation of a wooden bookcase and paper book just that little bit more grating:

It should not be played with

Extract from the Braun brand guidelines booklet on display at Less and More, The Design Ethos of Dieter Rams at the Design Museum.

Seduction techniques

Detail from Less and More, The Design Ethos of Dieter Rams at the Design Museum.