Clagnut

Whatever happened to font-stretch?

Tue, 19 May 2009 06:56:34 PST

The font-stretch property was introduced in CSS 2.0 over ten years ago, but was culled in the transition to CSS 2.1. It now languishes in the CSS 3 Fonts module. The property instructed browsers to select a ‘normal, condensed, or extended face from a font family’. Its removal from CSS 2.1 was due to a complete lack of implementation by browsers. Unfortunately this leaves us with a gaping hole regarding font support.

Many professional typefaces are designed with extended and condensed styles. This is particularly prevalent in sans-serif faces such as Myriad Pro, Futura, Univers and of course Helvetica. Another such font is American Typewriter, which is shipped with Mac OS X and comes with a condensed style.

So how does one specify text to be rendered in American Typewriter Condensed? Using font-stretch we would have done this:

p {
  font-family:"American Typewriter", monospace;
  font-stretch:condensed; }

The font-stretch property is well defined. As you can see it takes keywords, covering the range from ultra-condensed to ultra-expanded. But as stated earlier, it is no longer in the CSS 2 spec, and hence (and because) it is not supported in any browser at the time of writing.

Using the methodology I described for font-weight, there is a workaround based on font-family. We can specify American Typewriter Condensed as follows:

p {
  font-family:"AmericanTypewriter-Condensed",
   "American Typewriter Condensed",
   "American Typewriter", monospace}

As with specifying font weights in this manner, there is a caveat that any widened or otherwise styled text will require a further font-family rule. There is also the caveat – in this case – that it doesn’t work at all on Firefox 3. See for yourself in the test case.

Because Firefox 3 respects font-family rules properly; that is to say it goes by the font family name, not the individual font name; it ignores the ‘Condensed’ font names. This inherently eliminates the possibility of displaying the condensed style using the font-family workaround.

So how will this situation be rectified? If font-stretch were still in CSS 2, browser makers would be trying to support it. But Microsoft won’t implement anything from CSS 3 until it is nailed down to a Candidate Recommendation. Webkit and Mozilla have higher CSS 3 priorities. And the CSS working group won’t reintroduce font-stretch to CSS 2 until someone implements it. Catch 22.

As I see it, our hopes lay at the feet of someone attending to either Webkit Bug 12530 or Mozilla Bug 3512. I would if I could. Can you?

Read or add comments

Five minute chocolate mug cake

Fri, 08 May 2009 10:27:41 PST

Something for the weekend, or indeed any other time of the week; a version of this recipe seems to have achieved viral status. I made the recipe last night. It’s incredibly easy and it works a treat, although it’s better viewed as more of a steamed chocolate pudding than a chocolate cake as such.

So, yes, it’s a chocolate cake you make – from scratch – in a mug, which is ready to eat in five minutes. To serve two people, here’s what you need:

4 tablespoons plain flour
4 tablespoons sugar
2 tablespoons cocoa
1 egg
3 tablespoons milk
3 tablespoons oil (vegetable or sunflower)
1 tablespoon chocolate chips or grated chocolate
1 teaspoon vanilla extract
1 tablespoon liqueur of your choice (such as Cointreau or Kahlúa)
2 large coffee mugs
1 microwave oven

And here’s what you do:

Mix all the dry ingredients together in a bowl and divide between the mugs.
Beat the egg and mix in all the remaining ingredients.
Add the wet mixture to the mugs and stir well until it forms a chocolatey paste.
Put one mug on a plate in the microwave and cook on full power for 3 minutes (based on a 1000W oven – adjust accordingly if yours is more or less powerful).
Repeat for the second mug.

Your chocolate pudding is now ready eat. You can do so straight from the mug (need I remind you it will be hot?) or tip out onto the plate and serve with cream, or ice cream or whatever you fancy. Enjoy!

Update. It’s worth noting that some people use self-raising flour in this recipe. By all means give that a go – it will probably give you a more cakey, less pudding-like texture. It may also make a big mess inside your microwave. Me, I like this as chocolate pudding.

Read or add comments

But why, some say, the moon?

Fri, 01 May 2009 09:33:47 PST

This time last week I was on a United Airlines flight returning from Orange County, where m’learned colleague James Box and I were presenting at the UIE Web App Summit. We ran a workshop on Wireframing and Prototyping for Highly Interactive Web Apps in which we covered the various joys of Post-its, paper and jQuery, and presented on Using Interactive Prototyping for a Richer Web Experience in which we extolled the virtues of HTML as a design tool.

On the flight home we watched Frost/Nixon, a dramatic retelling of the post-Watergate television interviews between British talk-show host David Frost and former president Richard Nixon. As the credits rolled, we looked at each other and unanimously claimed the film to be ‘bloody brilliant’. Particularly marvellous were the superb portrayals of the protaganists by Michael Sheen and Frank Langella respectively. I heartily recommend it.

In the film, Nixon’s masterful handling of Frost’s early questioning brought to mind John F Kennedy’s famous 1962 speech at Rice University, in which he explained and defended America’s space effort, in particular landing a man on the Moon.

Kennedy manages to justify what could be viewed as an unconscionably expensive piece of paranoid Cold War propaganda – it was as much about getting there first as getting there at all – as an unprecedented exercise in engineering and exploration. His justification is beautifully simple:

But why, some say, the moon? Why choose this as our goal? And they may well ask why climb the highest mountain? Why, 35 years ago, fly the Atlantic? Why does Rice play Texas?
We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard.

I’m not making any point at all here, other than to be reminded of one of the great speeches of the 20th century. By the way, I challenge you to listen to the audio and not have a mental picture of Mayor Joe Quimby.

Read or add comments

Skillswap went typographic

Tue, 07 Apr 2009 08:45:19 PST

Back in January I was part of a double bill with Jon Tan, entitled Skillswap goes typographic. It went down really well so I thought I’d better tie it all together here.

My talk was on “Facing up to Fonts” the blurb for which went as follows:

Browser support for the typographical aspects of CSS is gradually increasing. Things are on the up. Richard will be trouncing the myth of web-safe fonts, demonstrating how to go beyond bold, detailing the technicalities of font embedding and exploring the commercial and ethical minefield therein. The introduction of font embedding in particular is a long-awaited step in the right direction. However it brings with it a host of complications; technical, ethical and aesthetic.

The take home points were:

Think about typefaces beyond the core web fonts
Make sure your font stacks make sense and are useful
There’s more than regular and bold
Font embedding is here and now

Jon’s talk was on “80% Science, 20% Art” and was described thusly:

Web typography is a toddler in the big bad world of competing displays, browsers and operating systems. Jon takes it by the hand, and discusses the science that comes before the art. It’ll be a celebration with lots of opportunity for questions and discourse. From exploring how fonts are rendered, to a quick refresher on typesetting and with a little history thrown in for good measure, it’s time to get your glyph on!

My slides are on Webtypography.net
My audio is on Huffduffer
Jon’s slides are on his blog
Jon’s audio is on Huffduffer

Read or add comments

Web Typography panel at SxSW

Mon, 30 Mar 2009 11:52:02 PST

I was proud to be a part of the Web Typography: Quit Bitchin’ & Get Your Glyph On! panel at SxSW 2009, along with Jon Tan, Ian Coyle, Elliot Jay Stocks and our super moderator Samantha Warren (photo above by Keith Muth). Thanks very much to all those attendees who tweeted and contributed to the discussion with some great questions (including Håkon Wium Lie, the inventor of CSS no less).

Apologies to the many folk who couldn’t get in. Typography panels are always really popular at SxSW, so it’s a shame we ended up in a relatively small room which had filled to capacity about 10 minutes before the start. Still, at least there was a choice of 18 other panels to attend at the time [ahem].

Anyway I thought I’d jot down some of the topics we discussed, and some we talked about beforehand but didn’t have time for. Samantha has put up a rather splendid page containing all the sites we mentioned, and I’ll link to the podcast entry as soon as it is up.

Illustration by Squared Eye

Why do designers bitch about web typography?

The transition from print (in particular, but also Flash and other mediums) to the web is hard because of the sense of giving up control. With the web, and HTML & CSS especially, designers no longer have any control of the medium. Will the reader be using paper? a laptop? their mobile device? There is no control or even knowledge of the size and shape of canvas, the typeface and size of the text. As a designer, if you can get your head around that you’re well on the way. You have to accept this limitation as a liberation, because it is the very nature of the Web.

It’s important to realise that readers control their own reading environment to a lesser or greater degree. But reliquishing control is not the same as giving up. You can still make assumptions about the medium, and make suggestions for how the material could be displayed. Stylesheets are nothing more than suggestions; suggestions which are often adhered to but sometimes ignored.

For example, an assumption you can make is that Times (New Roman) will be installed, about which Bringhurst had this to say:

When the only font available is Times New Roman, the typographer must make the most of its virtues. The typography should be richly and superbly ordinary, so that attention is drawn to the quality of the composition, not the individual letterforms.

This is the point. You work with what you’ve got, or what you’re likely to have. And you make that work hard. The classic example is Coudal’s design for the Seed Conference website, set entirely in Times.

Sketchnote by Mike Rohde

Discuss current techniques for pushing typography online

What is holding us back? Is it the lack of typefaces? Right now there are six faces you can almost definitely rely on for body copy: the core webfonts of Times New Roman, Arial, Georgia, Verdana, Trebuchet and Comic Sans.

And there are a further five excellent faces with good distribution. These are the Cleartype fonts of Calibri, Cambria, Candara, Constantia and Corbel. The Cleartype fonts are distributed with Windows Vista, which has a penetration of about 40%, as well as the latest updates to the two most recent versions of Microsoft Office on Windows and Mac.

That’s eleven typefaces, which should be enough for any designer. And it’s important to remember that, from a technical perspective at the very least, these are quality fonts. They are well hinted for the screen, and have a complete – and in some cases extensive – character set. The Cleartype fonts also come equipped with a handful of ligatures (the older fonts don’t need them).

Plus there’s a load more fonts installed with Windows and Mac operating systems, as well as those installed with Microsoft Office. These include such worthwhile considerations as Gill Sans, Rockwell, Lucida Bright, Bell, Garamond and Cooper Black(!).

So availability of fonts is probably no excuse, but quality typesetting means attention to detail, and that takes time. So perhaps time is the sticking point?

Font linking and the future

Will @font-face font linking be the death nell or renaissance for typographers? It has to be viewed as a renaissance for typographers. The possibilities are huge. From a browser perspective it’s not the future, it’s here and it’s now, with various implementations in Internet Explorer 4 upwards, Safari, Firefox 3.1 and Opera 10.

Only two things are really limiting the uptake of font linking. One is Microsoft’s insistence on EOT (embedded OpenType). But this is little more than a moral or ethical argument. However much EOT smells of DRM-lite, it doesn’t really matter. Converting files to EOT and serving them to IE is just a technicality. A big pain-in-the-arse technicality, but one that we can already deal with.

The most important hurdle is font licensing. Without appropriate licensing, we’re all criminals. Foundries need to catch up and view this as an opportunity not a threat. Licenses need to be easy to find, easier to understand, and more accommodating to sensible and ethical uses of font linking.

For example it’s possible to use .htaccess to protect a file from direct linking or downloading. I’m already doing this on one site and I believe I’m honouring the font license – more to follow on how and why. But we can’t expect every Tom, Dick and Helen to be able to protect the font in this way, so perhaps a better solution is delegate the hosting to a trusted third party, or for font publishers and foundries to host the files themselves. Whatever the result, font foundries and type designers have to view font linking, not as a threat, but as an opportunity to make money and for their fonts to be used on a wider stage.

Sketchnote by Mike Rohde

Read or add comments