Tags: typography



Variable fonts

We have a tradition here at Clearleft of having the occasional lunchtime braindump. They’re somewhat sporadic, but it’s always a good day when there’s a “brown bag” gathering.

When Google’s AMP format came out and I had done some investigating, I led a brown bag playback on that. Recently Mark did one on Fractal so that everyone knew how work on that was progressing.

Today Richard gave us a quick brown bag talk on variable web fonts. He talked us through how these will work on the web and in operating systems. We got a good explanation of how these fonts would get designed—the type designer designs the “extreme” edges of size, weight, or whatever, and then the file format itself can extrapolate all the in-between stages. So, in theory, one single font file can hold hundreds, thousands, or hundreds of thousands of potential variations. It feels like switching from bitmap images to SVG—there’s suddenly much greater flexibility.

A variable font is a single font file that behaves like multiple fonts.

There were a couple of interesting tidbits that Rich pointed out…

While this is a new file format, there isn’t going to be a new file extension. These will be .ttf files, and so by extension, they can be .woff and .woff2 files too.

This isn’t some proposed theoretical standard: an unprecedented amount of co-operation has gone into the creation of this format. Adobe, Apple, Google, and Microsoft have all contributed. Agreement is the hardest part of any standards process. Once that’s taken care of, the technical solution follows quickly. So you can expect this to land very quickly and widely.

This technology is landing in web browsers before it lands in operating systems. It’s already available in the Safari Technology Preview. That means that for a while, the very best on-screen typography will be delivered not in eBook readers, but in web browsers. So if you want to deliver the absolute best reading experience, look to the web.

And here’s the part that I found fascinating…

We can currently use numbers for the font-weight property in CSS. Those number values increment in hundreds: 100, 200, 300, etc. Now with variable fonts, we can start using integers: 321, 417, 183, etc. How fortuitous that we have 99 free slots between our current set of values!

Well, that’s no accident. The reason why the numbers were originally specced in increments of 100 back in 1996 was precisely so that some future sci-fi technology could make use of the ranges in between. That’s some future-friendly thinking! And as Håkon wrote:

One of the reasons we chose to use three-digit numbers was to support intermediate values in the future. And the future is now :)

Needless to say, variable fonts will be covered in Richard’s forthcoming book.

The typography of a web book

I’m a sucker for classic old-style serif typefaces: Caslon, Baskerville, Bembo, Garamond …I love ‘em. That’s probably why I’ve always found the typesetting in Edward Tufte’s books so appealing—he always uses a combination of Bembo for body copy and Gill Sans for headings.

Earlier this year I stumbled on a screen version of Bembo used for Tufte’s digital releases called ET Book. Best of all, it’s open source:

ET Book is a Bembo-like font for the computer designed by Dmitry Krasny, Bonnie Scranton, and Edward Tufte. It is free and open-source.

When I was styling Resilient Web Design, I knew that the choice of typeface would be one of the most important decisions I would make. Remembering that open source ET Book font, I plugged it in to see how it looked. I liked what I saw. I found it particularly appealing when it’s full black on full white at a nice big size (with lower contrast or sizes, it starts to get a bit fuzzy).

I love, love, love the old-style numerals of ET Book. But I was disappointed to see that ligatures didn’t seem to be coming through (even when I had enabled them in CSS). I mentioned this to Rich and of course he couldn’t resist doing a bit of typographic sleuthing. It turns out that the ligature glyphs are there in the source files but the files needed a little tweaking to enable them. Because the files are open source, Rich was able to tweak away to his heart’s content. I then took the tweaked open type files and ran them through Font Squirrel to generate WOFF and WOFF2 files. I’ve put them on Github.

For this book, I decided that the measure would be the priority. I settled on a measure of around 55 to 60 characters—about 10 or 11 words per line. I used a max-width of 27em combined with Mike’s brilliant fluid type technique to maintain a consistent measure.

It looks great on small-screen devices and tablets. On large screens, the font size starts to get really, really big. Personally, I like that. Lots of other people like it too. But some people really don’t like it. I should probably add a font-resizing widget for those who find the font size too shocking on luxuriously large screens. In the meantime, their only recourse is to fork the CSS to make their own version of the book with more familiar font sizes.

The visceral reaction a few people have expressed to the font size reminds me of the flak Jeffrey received when he redesigned his personal site a few years back:

Many people who’ve visited this site since the redesign have commented on the big type. It’s hard to miss. After all, words are practically the only feature I haven’t removed. Some of the people say they love it. Others are undecided. Many are still processing. A few say they hate it and suggest I’ve lost my mind.

I wonder how the people who complained then are feeling now, a few years on, in a world with Medium in it? Jeffrey’s redesign doesn’t look so extreme any more.

Resilient Web Design will be on the web for a very, very, very long time. I’m curious to see if its type size will still look shockingly large in years to come.

Full Meaning Ampersand

In the space of one week, Brighton played host to three excellent conferences:

  1. FF Conf on Friday, November 6th,
  2. Meaning on Thursday, November 12th, and
  3. Ampersand on Friday, November 13th.

I made it to two of the three—alas, I couldn’t make it to Meaning this year because it clashed with Richard’s superb workshop on Responsive Web Typography.

FF Conf and Ampersand were both superb. Despite having very different subject matter, the two events have a lot in common. They’re both affordable, one-day, single-track, focused gatherings.

Both events really benefit from having a mastermind overseeing the line-up: Remy in the case of FF Conf, and Richard in the case of Ampersand. That really paid off. Both events were superbly curated, with a diverse mix of speakers and topics.

It was really interesting to see both conferences break out of the boundary of what happens inside web browsers. At FF Conf, we were treated to talks on linguistics and inclusivity. At Ampersand, we enjoyed talks on physiology and culture. But of course we also had the really deep dives into the minutest details of JavaScript, SVG, typography, and layout.

Videos will be available from FF Conf, and audio will be available from Ampersand. Be sure to check them out once they’re released.

Marcy Sutton FFConf 2015 Playing to be different marks with Marcin

100 words 043

It wasn’t that long ago I mentioned a new book about learning HTML and CSS from scratch, published online for free. Well, now there’s another one. This time the subject is typography on the web.

It’s called Professional Web Typography by Donny Truong. It’s a fairly quick read but it squeezes in plenty of handy practical advice with chapters on delivering web fonts, selecting body text, setting type in the browser, choosing headings, picking type for UI, seeing typographic details, and practicing typography.

Needless to say, the book is itself very nicely typeset. And you can pay what you want.

Billboards and Novels by Jon Tan

Jon is at An Event Apart in Atlanta to talk about Billboards and Novels. That means: impact vs. immersion.

Who in the audience has ever had to explain layout and design decisions? And who has struggled to do that? Jon has. That’s why he wants to talk about the differences between designing for impact—to grab attention—and immersion—to get out of the way and allow for absorbing involvement.

Jon examines the difference between interruption and disruption. You want to grab attention, but the tone has to be right. This is how good advertising works. So sometimes impact is a good thing, but not if you’re trying to read.

The web is reading.

Understanding how people read is a core skill for anyone designing and developing for the web. First, you must understand language. There’s a great book by Robert Bringhurst called What Is Reading For?, the summation of a symposium. Paraphrasing Eric Gill, he says that words are neither things, nor pictures of things; they are gestures.

Words as gestures …there are #vss (very short stories) on Twitter that manage to create entire backstories in your mind using the gestures of words.

A study has shown that aesthetics does not affect perceived usability, but it does have an effect on post-use perceived aesthetics. Even though a “designed” and “undesigned” thing might work equally well, our memory the the designed thing is more positive.

Good typography and poor typography appear to have no affect on reading comprehension. This was tested with a New Yorker article that was typeset well, and the same article typeset badly. The people who had the nicely typeset article underestimated how long it had taken them to read it. Objectively it had taken just as long as reading the poorly-typeset version, but because it was more pleasing, it put them in a good mood.

Good typography induces a good mood. And if you are in a good mood, you perform tasks better …and you will think that the tasks took less time. Time flies when you’re having fun.

What about type on screens?

  • David Berlow describes the web as “crude media.”
  • Jonathan Hoefler describes how he produces fonts differently for different media: the idea (behind the typeface) gives rise to a variety of forms.
  • Matthew Carter designed Bell Centennial to work at one size in one environment: the crappy paper of the telephone book. He left gaps in the letterforms for the ink to spread into.
  • The Siri typeface was redrawn anew as SiriCore specifically for the screen.

When Jon is evaluating typefaces, he is aware that some fonts are more optimised for the screen than others. He tests the smallest text first, in the most adverse environment: a really old HP machine running Windows XP. He also looks at language support, and features and variants like lining numerals: what are the mechanics of the font?

We take quiet delight in the smallest details of a typeface.

Legibility is so important. Kevin Larson analysed how we read. We take a snapshot of a bunch of letters, and our brains rearrange them into a word. We read by skipping along lines in “saccades” with pauses or “fixations” that allow us to understand a group of letters before reading on.

Jon tells the story of how Seb was fooled by a spoof Twitter account for the London Olympics. The account name was London20l2 (with a letter L), not London2012 (with the letter one). Depending on the typeface, that difference can be very hard to spot. Here’s a handy string:

agh! iIl1 o0

Stick that into Fontdeck and you’ll get a good idea of the mechanics of the font you’re looking at. You’re looking out for ambiguities that would interrupt the reader.

The same goes for typesetting: use the right quotes and apostrophes; not primes. Use ligatures when they help. But some ligatures are just showing off and they interrupt your reading. Typesetting should help reading, not interrupt or disrupt.

You can use text-rendering: optimizeLegibility but test it. You can use hyphens: auto but test it. You can add a non-breaking space before the last two words in a paragraph to prevent orphans. It will improve the mood.

A good example of interruption is the Ampersand 2012 website. There’s a span on the letter that should receive a flourish. But you can also use expert subsets. You can use Opentype features. There are common and discretionary ligatures. Implement them wisely. Use discretionary ligatures when you want to draw attention, like in a headline.

Scantastic readability. We wander around the page or screen in the same way as we read with saccades: our eyes jump around the place. Our scan path is a roughly Z-shaped pattern. You can design for this scan path: deliberately interrupt …but not disrupt. Jon uses the squint test when he is designing, to see what jumps out and interrupts.

Measure (line-length) is really important. Long lines tire us out. Bringhurst mentioned 45-75 character measures. But the measure is also bound to the prose: the content might be very short and snappy.

Contrast can give you careful, deliberate interruptions. Position, density, size …these are all tools we can use to interrupt without disrupting. The I Love Typography article on The Origins of ABC is a beautiful example of this. Compare it to the disruption of faddish parallax sites.

But there are no rules, just good decisions.

It’s all so emotional. Sometimes there are no words. Think of the masterful storytelling of the first twenty minutes of Wall-E.

We react incredibly quickly to faces. We can see and recognise a human face in 40 milliseconds, before we even consciously process that we’ve seen a face.

When we try to write about music, the result can be some really purple prose.

We have an emotional reaction to faces, colour, music …and type.

Jon demonstrates the effect on us that a friendly typeface has compared to a harsh typeface …even though the friendly typeface is used for the Malay word for “hate” and the harsh typeface is used for the Malay word for “love.” Our amygdala is reacting directly. It’s a physiological, visceral reaction we have before we even understand what we’re looking at.

Fonts are wayfinding apps for emotions. There’s a difference between designing places and designing postcards of places.

The Milwaukee Police News website is very impactful …but there’s no immersion. It doesn’t communicate beyond the initial reaction.

Places are defined by type and form: New York, London, Paris. A website for Barcelona or Brooklyn should reflect the flavour of those places.

All these things combine: impact, immersion, contrast, colour, type. We can affect people’s experiences. We can put them in a better mood.

Type shapes our experience. It paints pictures that echo in our memory long after we’ve left.

Eric Spiekermann said:

Details in typefaces are not to be seen, but felt.

Those details have to work in the greater context (of colour, contrast, layout).

Bruce Lee said:

Don’t think; feel.


Remember when I said that the Ampersand conference was going to be great? Yeah, well, I wasn’t wrong. If anything, I underestimated how great it would be.

Tim Brown Vincent listens to Jason John Daggett Mark

Make a venn diagram of web nerds and type nerds; Ampersand was all about the intersection of those two circles. There was something special about having so many domain-specific nerds in one place at one time. It made for a very special atmosphere. It also helped that all the speakers were excellent. I particularly liked the fact that Ethan’s book was pimped in four different talks.

You can read more about the individual talks in an article over at Eye Magazine called Web typography comes of age at Brighton’s Ampersand conference.

All in all, it was an excellent day. The only bittersweet note came from the fact that it marked Sophie’s last day at Clearleft—she’s off to Lanyrd. But Sophie left us on a high note: she and Rich put together one hell of an event.



What with all the overseas travelling I’ve been doing lately, I’m quite looking forward to going to some conferences here in the UK. I’m definitely looking forward to Web Directions @media in London later this month and DIBI in Newcastle next month although there’s something about both events that troubles me: they’re both double-track conferences, splitting the talks into “design” and “development” categories.

Don’t get me wrong—I think the line-ups look great. But that’s just the problem. I know I’m going to have make some very hard choices when two excellent speakers are on at exactly the same time. It’s a guarantee that I’ll have strong feelings of FOMO.

Personally, I’d rather not have to make those decisions. That’s one of the reasons why I really like the single-track format of dConstruct and An Event Apart. I think that the playlist-like curated single-day line-up of events like Build and New Adventures In Web Design really contributes to their special atmosphere.

The single-track single-day format works especially well for tightly-focused conferences like the JavaScriptastic Full Frontal.

If you’re looking for a single-track, single-day conference devoted entirely to typography on the web, then you simply must get along to Ampersand right here in Brighton on June 17th.

Yes, I am biased: we at Clearleft are organising it, but if you’ve been to any of our other events—dConstruct or UX London—you know that we kick ass when it comes to crafting conferences.

To say that I’m excited about Ampersand would be an understatement. I mean, come on! A day of font geekery with speakers like Jon Tan, Tim Brown, David Berlow and Jonathan Hoefler …it’s going to be typography heaven! It’s also a good excuse for you to come on down to Brighton at the start of a Summer weekend …and you could stick around for the typography tour around town with Phil Baines the next day.

There are some other reasons you should register for Ampersand:

Oh, and if you’re a student …it’s half price. Not that the price is much of a limiting factor: a mere £125 is pretty excellent value for such a great line-up.

So book your place and we can get together for a beer—either at the pre-party or the after-party—and we can geek out about typography on the web together.

Tweaking Huffduffer

Because I was so busy, the two-year anniversary of Huffduffer passed unnoticed back in October. Two years! It’s hard to believe. It seems like just yesterday that I launched it. It’s been ticking along nicely for all that time and I’ve been tweaking it whenever I get the chance.

I recently added oEmbed support. I’m very impressed with the humble little format. It’s basically a unified API onto the multiple embed codes provided by so many websites. You request a URL from an endpoint such as https://huffduffer.com/oembed?url= and you get back a JSON (or XML) file with the details of the HTML you need to embed the content—video, photo, whatever. Something like https://huffduffer.com/oembed?url=https://huffduffer.com/adactio/32454

YouTube, Flickr, Vimeo and a whole host of other sites support oEmbed and the Embedly service provides easy access to all of them. Now Huffduffer is listed amongst the 160 oEmbed providers supported by Embedly. Maybe if I make the right ritual sacrifices, perhaps Huffduffer players might start showing up in New Twitter: it uses a combination of oEmbed and a whitelist to display third-party content in the side panel.

I made some tweaks to the front-end of Huffduffer recently too. For starters, you might notice that the body copy font size has been bumped up from fourteen pixels to sixteen. While fourteen pixels is perfectly fine for Helvetica or Georgia, it’s just that little bit too small for .

While I was in there messing around with the CSS, I took the opportunity to tweak the small screen rendering.

Huffduffer on iOS

For a start, I changed the way that the media queries are executed. Instead of beginning with the wide-screen “desktop” layout as the default and then undoing the widths and floats for smaller screens, I’m now using the same technique I’ve tried out here on adactio.com: begin with a linear layout-less flow and only add widths and floats within media query blocks. That way, mobile devices that don’t support media queries will still get the linearised view.

The elephant in the room is, once again, Internet Explorer (below version nine, anyway). While I can quite merrily say “screw ‘em” here on adactio.com, I need to make more of an effort for Huffduffer. So I split up my CSS into two files: a global.css file that contains all the typography and colour rules, and layout.css that contains a default wide-screen “desktop” view followed by media queries for narrower widths. This is how I’m calling both stylesheets:

<link rel="stylesheet" href="/css/global.css" media="all">
<link rel="stylesheet" href="/css/layout.css" media="all and (min-width: 30em)">
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/layout.css" media="all">

See how the layout.css file is being called twice? Once for browsers that support media queries (with a browser width wider than thirty ems) and again for Internet Explorer less than version nine.

Mobile devices that don’t support media queries or conditional comments will never load the layout.css file. Browsers that do support media queries, be they mobile or desktop, will only execute layout.css if the viewport is at least thirty ems wide. Legacy versions of Internet Explorer will always load layout.css because of the conditional comment. It’s entirely possible that Windows Mobile 7 will also load layout.css because the browser is currently using an IE7 codebase (Trident 3.1, to be precise). Screw ‘em …at least until Microsoft bring out an update.

The disadvantage of this technique is that my CSS is now split up into two separate files. I’d much rather keep HTTP requests to a minimum by having just one style sheet, but I think that, in this case, the reward in cross-browser compatibility is worth the expense of that extra hit.

While I was testing the changes, I noticed something interesting on my iPod Touch when I was at the Clearleft office, where we have the stereo connected to the WiFi network. The most recent iOS update allows you to stream directly from your device to your stereo or television. What I didn’t realise was that this is true of any media, including HTML5 video and audio content in a web page. Nice!

Huffduffer on iOS


Twitter doesn’t allow for much verbosity but sometimes it’s possible to squeeze some code into 140 characters or fewer. I particularly like Simon’s piece of JavaScript. Paste this into the address bar in Safari:

javascript:(function(){var d=0;setInterval(function()
'rotate('+ d +'deg)';d+=1},10)}());

Earlier today, I wrote:

Writing <abbr title="and">&amp;</abbr> in my markup and abbr[title='and'] { font-family: Baskerville; font-style: italic; } in my CSS.

This is something that Dan has written about in the past, citing Bringhurst; In heads and titles, use the best available ampersand. Dan suggested wrapping ampersands in a span with a class of “amp” but in a comment, I proposed using the abbr element:

<abbr title="and" class="amp">&amp;</abbr>

But really, you don’t even need the class because you can just use an attribute selector:

abbr[title='and'] {
 font-family: Baskerville, Palatino, "Book Antiqua", serif;
 font-style: italic;

But, asks Mat Marquis, what about a certain browser that can’t even handle the simplest of attribute selectors? Won’t IE666 still need a class attribute?

Well, it turns out that you can’t style the abbr element in the Browser of the Beast with or without a class attribute. That’s because Internet Explorer didn’t support the abbr element until version 8 (and yet people scoff at the 2022 date for two complete HTML5 implementations). If you want to slap some sense into earlier versions of IE, you can always use a smattering of DOM Scripting.

Bruce wonders:

Is there not some JS that can quietly add class=”and” when it sees an ampersand in a text node ?

Turns out that Ted has already written a script to do that.

If you want to be a real stickler, Erik Vorhes keeps his tongue firmly in cheek with this suggestion:

<abbr title="et" lang="la">&amp;</abbr>


As you can probably tell from the Huffduffer logotype, I like .


Most ligatures are formed by the combination of the lowercase letter f and a subsequent letter—although the gorgeous includes a few more unusual ones.

There’s an old letter that looks a lot like the lowercase f and that’s .


Up until the 19th century, this was the default way of writing the letter s at the beginning or in the middle of words. Our letter s—called the short s—was mostly used when a word finished with an s or when an s followed an s (the word Congress on The Declaration of Independence matches both criteria).


I was in Warwick last weekend, the day before Richard’s wedding. While Jessica and I were exploring the crypts, I found some ligatures that were new to me.


This looks like a regular ft ligature but actually it’s a long s followed by a t—look at the way the crossbar on the long s doesn’t go all the way across the vertical stem like it would on an f. Another dead give-away is the fact that the word being spelled is Christian.

Christian ligature

On another headstone I found a ligature formed by the combination of a long s and the letter b, used to spell the word Husband.

Ligature Husband ligature

While there is a corresponding f-based ligature, I can’t remember ever seeing it in the wild. The combination of f and b is rare in the English language. The only examples I can think of are compound words like halfblood or halfbreed; words more often spelled with a hyphen separating the f and the b.

My photographs of the subterranean ligatures didn’t turn out great—my little point’n’shoot camera isn’t very good with low-light conditions—so I whipped out my sketchbook, put a page in front of the letters and recorded some pencil rubbings for posterity.

Thinking Small

Jason Santa Maria, AKA Stan, is the man. Here’s here at An Event Apart in Boston to talk about Thinking Small. He’s my warm-up man.

He begin in the 1980s; Christmas day in the Santa Maria household—Jason gets Castle Greyskull. One Christmas, his parents played a cruel joke on him. Instead of getting him toys, they got him books. But these books were better than regular books. They were choose-your-own-adventure books; classics like You Are A Shark and War With the Evil Power Master. The best part is that they are interactive. Of course you cheat. You go back and see what would have happened if you had made a different decision. Let’s look at the decisions we make when we are building website. Jason will show us seven small decisions that change the outcome of a finished website.

Be a thinker

Don’t just dive into moving shit around in Photoshop. Stop and figure out the problem before trying to come up with a solution. Take a look at the Enterprise car rental site. It’s not terrible but it’s also not exciting. It’s just bland.

Take a step back. Start with sketching. Sketching isn’t about being able to draw, it’s about being able to think. Jason started a Flickr group for people to upload one page from their sketch book, no matter how crappy it looks.

At the beginning of a project, get acquainted with it. Get a feel for the content.

Find the message

The difference between good design and great design is intelligence.

Sum up a website with a message, as if you were introducing a friend at a party—what’s important? Everything on the site should communicate that message. The White House website does this. So does A Working Library.

Be a reverse engineer

Come at things from a different angle. Jason played Layer Tennis recently with Derek Powazek. They decided to play around with the format by introducing three truths and a lie. This prompted new ways of thinking about what they were producing.

Take lessons from improv. Play the “yes” game in brainstorming sessions. Take what people are offering and add to it.

Plot it out

Jason comes from traditional graphic design background of grids and systems. Cue obligatory Vignelli quote. But how big should your grid be? Just because you can go to 960 pixels doesn’t mean you should. Don’t blindly approach grids from a set size. The space on the screen is a valuable design tool. You can use for your grid but you can also use it for whitespace. Brockman says:

The grid system is an aid not a guarantee.

There are other kinds of grids, not just columns. It’s about choice. How do you choose to fill that space? 960 pixels is not right for everyone. Stop and consider. Big Cartel feels small and approachable because it doesn’t go full width. That fits the message it wants to communicate.

Grids don’t necessarily have to be uniform. Yet most grid tools start from that assumption. It seems like a small decision but it effects everything further down the line.

Think horizontally, then vertically

Thing of the page as a delicious parfait. The design of Jason’s own site can adapt to the content. His grid is just some horizontal strips. The different sections can then work together or stand alone. Within each layer there are then sub-layers. Only then does Jason think about how things line up vertically.

Design systems, not pages.

Stop, modulate and listen

Jason wrote a 24 Ways article on modular layout systems. You can narrow page elements down to identifier, size and placement: what it is, how big it is and where it goes. You can then apply those things to class names. Have classes for identification, size and placement. Then combine those classes e.g. class="pic two left" or class="pic seven right". Clients like the self-documenting nature of this.

Be a matchmaker

The state of type on the web today is still questionable. The choice isn’t large. It’s as if Netflix only offered four films for you to choose from. But type on the web is going to change soon. The conversations are already happening. In the next six months to a year, you will see more of a push for understanding of type and how to use type. Jason has some rules of thumb when choosing typefaces:

  • Don’t use two script typefaces together. Or two sans-serifs together (or two serifs together), for that matter. One of each is a good rule of thumb.
  • Pair fonts from the same designer. Perpetua and Gill Sans go great together because they were both made by that loony Eric Gill.
  • Find harmony and structure. Bedoni and Futura are very different; one is serif and one is sans-serif. And yet they share geometric forms.
  • Conversely, look for contrast. Caslon and Garamond are too similar to use together.

Step by step, all those decisions add up. It’s like Stewart Brand says in How Buildings Learn. People don’t begin building a house and plan for adding an addition but over time, bit by bit, you add to the house. Buildings adapt over time. So do websites.

The small decisions add up even if you don’t realise it at the time.

Hyphen Nation

Lionel Schriver’s piece in the Standpoint called Dashed Bad Form is a witty affair, comparing and contrasting the and the . Alas, the self-describing nature of the article is completely lost in the online version—though presumably not in the print edition—having suffered the all-too-common fate of emdashculation; every instance of an em dash in the article has been converted into a plain ol’ hyphen. Oh, the irony! …proper irony too—not that confused Alanis Morissette kind.

It’s probably a CMS issue. But, hey, it’s as good an opportunity as any to point to the classic article on A List Apart, The Trouble With EM ’n EN (and Other Shady Characters). It’s almost eight(!) years old now and I’d still consider it required reading.

The article makes a brief mention of the soft hyphen (&shy; or &#173;) but back then, browser support was pretty shoddy. Browser support was still pretty shoddy when Richard wrote Hyphens a soft problem three years later.

But now the situation isn’t too shabby. Richard’s test case is faring a lot better now in Safari, Firefox and Opera. Internet Explorer (surprisingly) has been doing it right since version 6.

Admittedly, using a soft hyphen is a royal pain in the ass compared to having a browser just figure it out automatically but until hyphenation is sorted out in CSS3—which might be quite some time—we’re stuck with inserting the entity by hand.


My geek social calendar has been quite full over the past few days. On Saturday, I—along with half of the web developers in the land—went to Maidenhead for Drew and Rachel’s wedding.

Just as with Norm!’s wedding a few weeks ago, ‘twas a lovely, heartwarming affair. The pièce de résistance was the wedding “cake”: a tower of the finest British cheeses. Needless to say, I took many pictures and dutifully tagged them with the official wedding tag.

The weekend’s shenanigans extended into the start of the week. Rather than spending Monday at work, the Clearleft team made an outing to Ditchling Museum.

Despite its small size, the village of Ditchling looms large in the world of typography. and both lived and worked there. As a result, the museum’s collection is veritable treasure trove of typey goodness.

But we didn’t just spend the day ooh-ing and ah-ing over the wonderful pieces on display. We rolled up our sleeves and started using the printing press for ourselves, under the tutelage of Phil Baines. You may remember him from such websites as Public Lettering and such books as Penguin by Design.

It was a lot of fun. I can only echo what Stan said of his experience with the tactile inkiness of movable type:

I adore the way I can touch the past through the old metal type and really appreciate typography on a new level. I really can’t recommend classes like this enough. If you are a lover of type, you really owe it to yourself to spend some time with letterpress printing.

I was practically giggling with glee as I set 60pt Baskerville with Richard—my font of choice for Huffduffer. Handling the metal, smelling the ink, operating the printing press …it was simultaneously rough and sensual.

If you share my fetishism for the printed word, feel free to browse through my stash on Flickr. More delights are on display from Relly, Cennydd and James.

Typing up

I’ve been making some tweaks to the CSS for the default skin here at adactio. If you only ever read via RSS then you won’t have noticed but I’ve been adjusting the vertical rhythm.

I also wanted to get some horizontal alignment: I wanted to make sure that the bottom of the first heading in the main column lined up with the baseline of the first heading in the sidebar.


My basic unit is 20 pixels: a font size of 12 pixels with a line height of 1.6667. Whatever sizes I made the headings, I wanted to be sure that they were multiples of this basic unit.

body {
 font: 12px/1.6666 Helvetica,Arial,Verdana,sans-serif;
body * {
 font-size: 1em;
* html body {
 font-size: 76%;

Because Internet Explorer refuses to resize text specified in pixels, I’m using the * html hack to give it a percentage value. Using any kind of hack—or filter—makes me feel slightly icky. Once I’ve established the base font size using pixels, percentages, or any other unit, I can use ems to scale up and down from here on out.

The level two heading in the main content takes up 40 pixels in total (twice the basic unit). The font size is 24 pixels, the top padding is 8 pixels and the bottom padding is also 8 pixels.

h2 {
 line-height: 1;
 font-size: 2em;
 padding-top: 0.3333em;
 padding-bottom: 0.3333em;

level 2 heading

So while the overall size is 40 pixels, the descent is at 32 pixels: 40 minus 8 (the bottom padding).

I wish I could accurately calculate the baseline but as far as I can tell, font-size is calculated from the ascender height to the descender height. In the absence of any reliable way to pinpoint the baseline, I’m going to have to work with where the descent begins instead.

Level three headings also take up 40 pixels in total but the space is apportioned differently. The font size is 18 pixels, the bottom padding is still 8 pixels but the top padding is 14 pixels.

h3 {
 font-size: 1.5em;
 padding-top: 0.7778em;
 padding-bottom: 0.4444em;

level 3 heading

The descent is still at 32 pixels: 18 plus 14.

The same pattern follows through for level four headings. The font size is 16 pixels, the top padding is 16 pixels and the bottom padding is 8 pixels. So the overall size is still 40 pixels (twice the base unit) and the descent remains at 32 pixels (16 plus 16).

h4 {
 font-size: 1.3333em;
 padding-top: 1em;
 padding-bottom: 0.5em;

So far, so good. With a little bit of addition, it isn’t too hard to ensure that everything slots nicely into the rhythm established by the base unit.

It gets a little trickier with the content in the sidebar. There, the basic unit has been scaled down to 15 pixels: a font size of 10 pixels with a line height of 1.5.

.box {
 font-size: 0.8333em;
 line-height: 1.5;

I wanted to make the bottom of the level three heading in the sidebar line up with the baseline of the level two heading in the main content, but I still wanted everything in the sidebar to follow its own vertical rhythm.

The font size of a level three heading in the sidebar is now scaled down to 15 pixels (18 pixels multiplied by 0.8333). I’ve changed the top padding to be 17 pixels and the bottom padding to 8 pixels.

.box h3 { padding-top: 1.1333em; padding-bottom: 0.5333em; }

level 3 heading in the sidebar

This gives me the descent at 32 pixels that I wanted. Unfortunately, the overall size of 40 pixels isn’t a multiple of the base unit of the sidebar (15 pixels).

Further down the page, there are so many factors influencing the positioning of all the elements that it’s almost impossible to guarantee any kind of horizontal alignment between both columns. Still, I was happy to get things lining up at least at the beginning of the page.

all the headings

You can peruse the style sheet if you like. You’ll see that I’ve also made some changes to the fonts I’m using. Gone are the headlines set in Verdana with body copy in Trebuchet MS. Instead, I’m using the oh-so-hip Lucida Grande for the body with some negative-spaced Helvetica for the headlines… the same kind of headline style I’ve been using in my presentation slides.

I really ought to tweak the vertical rhythms on all the other skins too but I’m not sure I can face all the maths just yet.

In the meantime I’ll be doing my homework by re-reading Richard’s classic 24 Ways article and Mark’s trials with incremental leading.

all the headings, animated

Typography at South by Southwest

I had a very blasé attitude towards attending the talks at South by Southwest this year (though I had a strict regimine of parties to attend). The only presentation I really didn’t want to miss was Web Typography Sucks by Richard and Mark.

So it was that, despite a late night after the Great British Booze-up and South by Northwest, I made sure to get to the conference centre for the 10am start. I’m so glad I did. The presentation was absolutely amazing.

Mark and Richard had a fantastic rapport and the three months of preparation really showed. They packed in a ton of information and presented it all in an engaging and easy-to-digest way.

Yeah, I know I’m biased because I work with Richard but ask anyone who was there: these guys were on fire. You can go ahead and download the slides but you won’t get quite the same effect. Once the audio is released on the SXSW podcast you can follow along as you listen.

The typographical fun continued after lunch. I went to the world premiere of Helvetica, the movie. The screening was open to both flim and interactive attendees and the interest in it was phenomenal: the queue to get in stretched most of the way down the convention centre.

I loved this documentary. I wasn’t sure how well it could hold my interest—especially given the late night I’d had—but it had me gripped. I know it’s hard to imagine a gripping film about a typeface but that’s exactly what this was. It was also thought-provoking and funny. And the soundtrack was pretty cool too.

The director was on-hand to take questions afterwards along with David Carson who said some typically inflammatory things.

My only regret was that Joe wasn’t there. He would have loved hating it.

If you find out that Helvetica is coming to a screen near you, don’t miss it.


Tired of Helvetica? The FontFeed lists some alternatives you can try.

Personally, I’ve never outgrown the honeymoon period with the world’s most versatile typeface. That’s why I’m so excited about Helvetica: the movie. There just aren’t enough films about Swiss type design.

Now I’m really excited since I found out that the Helvetica film will have its premiere at this year’s South by SouthWest. Whaddya say, fellow type-geeks; shall we organise an outing to the cinema?

Fun with type

The Clearleft office is a nice place to work. It’s a nice place to hang out generally. That’s by design. We’ve had interior decorators work their magic to come up with a cool set-up.

We’ve got a nice comfy sofa, obligatory Aeron chairs and bespoke desks graced only by shiny Macs. It all makes for a very nice environment in which to sip lattés.

The decorators mentioned something about getting giant letters made for us. Splendid idea, I thought, as did fellow type-fiend, Richard. So we ordered a batch of letters to spell out the company name.

Today we unpacked those letters. They look kind of Eurostile-esque so they’d look good in a space station from a ’70s sci-fi movie. They looked pretty good on our shelves, spelling out Clear Left.

Of course five minutes later we re-arranged them into some more interesting combinations:

The Clearleft Office

Typographical tip for hCalendar

I was updating my schedule over on the DOM Scripting site and I thought I’d share a little tip for any microformateers who savour typographical correctness.

Most hCalendar events have both a start date (dtstart) and an end date (dtend). Both use the abbr pattern:

<abbr class="dtstart" title="20061122">November 22nd</abbr>
<abbr class="dtend" title="20061123">November 23rd</abbr>

Date ranges like that are often written as:

November 22nd–23rd


22nd–23rd November

Either way, that piece of text features a range of dates. The correct punctuation for a closed range is the en-dash. If you’re marking up an event in hCalendar, try to to use the corresponding HTML entity:

<abbr class="dtstart" title="20061122">November 22nd</abbr>
<abbr class="dtend" title="20061123">23rd</abbr>

The HTML entity is &ndash;. In decimal that’s &#8211;.

For more information on en-dashes (and em-dashes), read The Trouble With EM ’n EN (and Other Shady Characters) over on A List Apart. For more general typographical tips, try Reading Design by Dean Allen and Typography Matters by Erin Kissane, both of whom are great writers. And, of course, there’s Richard’s excellent practical guide to web typography.

If I come across any other typographical titbits for microformats, I’ll be sure to flag them up.

Wordridden revisited

Jessica’s site, WordRidden has been tweaked, redesigned, realigned, reiterated; call it what you like.

Like this site, WordRidden had been running on a crufty old CMS I wrote four years ago. It did the job fine but it was a bit of a pain to edit entries and comments. It’s now been switched over to the same home-rolled blogging framework that powers adactio, the DOM Scripting blog and Principia Gastronomica.

The hierarchal structure of the site has been flattened. Previously, there were separate areas for journal entries and articles, with the articles themselves being broken down into four categories. Over time it became clear that these distinctions were fairly arbitrary so they’ve been swept away. Now there’s simply writing.

The visual design is a bit of rush job but I’m quite pleased with how it has turned out. Graphically, it’s very, very minimalist. There’s a slight gradient on the page background courtesy of a 4K .gif. Then there’s an RSS icon, also 4K. That’s it. Everything else is text… in a liquid layout (what else?).

I aim to add to the design over time, perhaps introduce some wear and tear or the occasional graphical flourish. For now though, I’m enjoying the simplicity of a handful of fonts, ample proportions and some tried and tested typographical techniques. Needless to say, such a text heavy site looks its best with nice font smoothing — Windows users, please, please turn on ClearType.

Mostly I was trying to get out of the way and let the writing take centre stage. The writing has been refined over the past seven years. Seven years! It’s practically a proto-blog.

Have a dig through the archives to unearth the gems. Some of my favourites include “Dog Lady”, “The Making of History”, “Moon” and “Dirkie” (make sure to read the comments on that one… especially this one).