Web Standardistas - HTML and CSS Web Standards Solutions

September 2009 Archives


Quiz [Detail]

Ironic Sans presents So you think you can tell Arial from Helvetica?, a short, twenty question quiz designed to test the true typographer’s powers of observation. Ironic Sans’ David Friedman states:

I’ve taken 20 logos that were originally designed in Helvetica, and I’ve redone them in Arial. Some people would call that blasphemy. I call it a challenge: can you tell which is the original and which is the remake?

Think you’re up for the challenge?

1254353280 · Christopher Murphy · Follow Us on Twitter

Typography for Lawyers

Typography for Lawyers [Detail]

Matthew Butterick is a lawyer. Before embarking on a law career, however, Mr Butterick graduated with a degree in graphic design and typography from Harvard University. Butterick states:

Even though the legal profession depends heavily on writing, legal typography is often poor. Some blame lies with the strict typographic constraints that control certain legal documents, but the rest of the blame lies with lawyers. To be fair, I assume this is for lack of information, not lack of will. This website tries to fill that void.

The result is Typography for Lawyers. Although primarily designed with lawyers in mind, the site is a fantastic resource for anyone embarking on a career that uses type, covering the fundamentals of typographic in a well-written and easily accessible style.

1254261180 · Christopher Murphy · Follow Us on Twitter

Crispin Finn

Crispin Finn [Detail]

Crispin Finn, “make design and ephemera,” which - though to the point - is an accurate and succinct summary of their output. Their embossed, two colour screenprint on 120 gsm 100% recycled white colorset (1000 x 700 mm) comes folded and sealed in a screenprinted brown kraft bag. It’s lovely and just ordered.

You might also like their witty ‘25 a Day’ and ‘Hello My Name Is’ T-shirts. It would appear that their entire output is designed using only red and blue.

1254250380 · Christopher Murphy · Follow Us on Twitter

Sempiternal Conundrums

Cheese [Detail]

There are many age-old questions out there that have been debated for centuries; questions that have preoccupied generations of brilliant minds, eternal questions which in their very essence somehow seems to define us as human beings.

Is it a Font, or is it Cheese? is not one of those questions.

Regardless, with 268 rounds, Cheese or Font looks like it could be set to preoccupy the minds of Typographers and Cheesophiles alike, for a long time to come.

1254228720 · Nicklas Persson · Follow Us on Twitter

The Golden Ticket

The Golden Ticket [Detail]

In a nod to the classic competition tiebreaker – “Complete the following phrase in no more than twenty words…” – we’re delighted to be running a competition to win a golden ticket for this year’s Build Conference.

The conference features presentations by, among others, Eric Meyer, Andy Budd, Mark Boulton and Tim Van Damme. In addition, over three, action-packed days attendees can avail of a variety of workshops, masterclasses and screenings. In short, there’s something for everyone.

A full conference pass retails at £200 and we’re delighted to have one to give away for free. A golden ticket if you will. So, what do you need to do to win?

Simple, just like the classic tiebreaker, we’d like to you complete the following phrase using 140 characters or fewer, follow @standardistas and post a tweet:

I deserve @standardistas Golden Ticket because…

We’re looking for something creative so get your thinking caps on (here are some tips to get you started). In addition to the one lucky, golden ticket winner, we’ll have two runner up prizes of a copy of our book. We’ll announce the winner on Friday afternoon.

Get started!

1254168240 · Christopher Murphy · Follow Us on Twitter

Kern in Space

Kern in Space [Detail]

Pride yourself on your typographic attention to detail? Veer’s Kern in Space allows you to showcase your typographic wits… in space. Using the arrow keys to control the thrusters, showcase your kerning prowess, but be warned, it’s addictive.

1254168120 · Christopher Murphy · Follow Us on Twitter


Standardistas [Detail]

We’ve been delighted with some of the recent feedback we’ve been getting on our book and our presentations and workshops. If you’re thinking of getting our book or attending a workshop, don’t take our word for it (clearly we’re a little biased), check out the following reviews and feedback.

Jon Tangerine, one of the talented team behind the forthcoming Fontdeck, and a noted typographer and web designer we have a great deal of respect for, states:

Every design school on the planet should make HTML and CSS Web Standards Solutions a required textbook. As well as a perfect primer for students, there’s many a formally-trained graphic designer, or self-taught web designer, who might find it useful.

Lee Munroe, a talented designer (and one of our former Masters students) behind a number of innovative and beautifully designed services including Lookaly and TweetNI, writes:

It’s an easily read book, clearly laid out with lots of code examples to help you get started. After reading this you’ll be able to build web sites with your eyes closed.

Shelley Bartlette, a university lecturer in digital media at Canterbury Christ Church University (who have adopted the book as a key text), states:

I can honestly say that I’ve read practically every book on the subject of web standards but not one of them offers the quality of explanation the Standardistas’ approach does.

Finally, Ryan Carson of Carsonified, the organisers behind the excellent Future of Web Design, Future of Web Apps and FOWD Tour (on which we recently featured) writes:

The Standardistas have made a huge name for themselves in the web industry and it was a real honour to have them speak on the Future of Web Design Tour. They’ve built up a lot of goodwill and value in their brand name and they’re doing an impressive job of training up new web professionals and we look forward to working with them in the future.

Their forthcoming book on ‘Beginning HTML5 and CSS 3’, if anything like their last book, looks set to be a huge success. I can’t wait to tell our audience about it!

Needless to say we’re delighted by all the positive feedback. We strive to ensure our teaching and books are not only inspiring, but accurate and we very much appreciate your comments. If you’ve read our book or heard us speak, we’d love to hear from you.

If you haven’t read our book and would like to download a sample chapter, download Chapter 10, A One Column CSS Layout absolutely free.

1254162360 · Christopher Murphy · Follow Us on Twitter

Letterhead Fonts

Letterhead Fonts [Detail]

Looking for examples of lovingly hand-crafted typography to set your next project apart from the competition? Look no further. Letterhead Fonts have gathered a veritable cornucopia of typefaces - old and new - all available at a reasonable price.

Their extensive collection, easily sampled with their versatile TypeTester, is home to some real beauties. Current favourites include Tom Kennedy’s stock certificate inspired Firehouse and Factory by Dave Smith, the creator of Letterhead Fonts’ lavish new web site.

1254159960 · Christopher Murphy · Follow Us on Twitter

Friends of Type

Timing [Detail]

Friends of Type is, “a sketchbook, an archive, and a dialogue.” A collaboration between Aaron Carambula, Erik Marinovich and Jason Wong, Friends of Type are looking for other friends of type.

Interested? Get in touch.

1254151980 · Christopher Murphy · Follow Us on Twitter

A New Home

Redesigned iPhone Home Screen [Detail]

Geoff Teehan of Toronto based user experience company Teehan + Lax has some interesting ideas on giving the iPhone A New Home. You might prefer your 20 icons, but Mr Teehan’s argument and visuals offer an alternative, and functional, glimpse at what the all important iPhone home screen might offer. Mr Teehan states:

[It] doesn’t require you to scan for red dots with numbers inside of them. Instead it displays information and notifications of things that are new and relevant to you.

The demand for this has been too great to ignore. We’re building a working version of this. More details and screens to follow.


1254151740 · Christopher Murphy · Follow Us on Twitter

Daily Drop Cap


The Daily Drop Cap is an ongoing illustrative project by Brooklyn based typographer and illustrator Jessica Hische. Hische states:

Each day (or at least each work day), a new hand-crafted decorative initial cap will be posted for your enjoyment and for the beautification of blog posts everywhere.

Hische posts examples of each drop cap in use and licenses them for free use under a Creative Commons license.

1254146400 · Christopher Murphy · Follow Us on Twitter

HTML5 Sites - Isa Costa

Isa Costa [Detail]

Whilst undertaking a little background research for our forthcoming book on HTML5 and CSS 3 we discovered a lovely HTML5 business card site by Portuguese web designer Isa Costa. Great concept, minimal markup; well worth a ‘View Source’.

1253985360 · Christopher Murphy · Follow Us on Twitter

Creative Characters

Creative Characters [Detail]

Once a month the talented people at MyFonts publish an interview with one of a number of Creative Characters – type designers extraordinaire or, as they cleverly put it, “The faces behind the fonts.”

This month’s interview is with one-man foundry (and typographic perfectionist) Jos Buivenga. Mr Buivenga’s typefaces, including the lovingly crafted, versatile and increasingly popular Museo, have one thing in common: ruthless attention to detail.

We used Calluna, another favourite, when we demonstrated @font-face in action at our Refresh Belfast presentation ‘The State of Typography on the Web’. Find out more about the man behind the face in Creative Characters’ September interview.

1253977860 · Christopher Murphy · Follow Us on Twitter


Artwiculate [Detail]

Discover your inner wordsmith with Artwiculate, a fiendishly addictive ‘word of the day’ game delivered via Twitter. Courtesy of our supremely talented friends at Atto and Johnston North it’s just out of beta and is causing quite a cacophony.

1253899260 · Christopher Murphy · Follow Us on Twitter


Lettercase [Detail]

We’re not quite sure what a ‘social font manager’ is, but Lettercase promises to offer one very soon and that, “it will revolutionize how you work on your fonts.” If its beautifully designed trompe l’oeil web site is anything to go by, it will doubtless be immaculately crafted and application to watch.

[Via Mr Tangerine.]

1253898000 · Christopher Murphy · Follow Us on Twitter

The Smart Vinyl Laboratory

The Smart Vinyl Laboratory [Detail]

The Smart Vinyl Laboratory offer a dizzying array of lovingly crafted vinyl stickers, perfect for sprucing up your unadorned walls. No need to tell regular Standardistas’ readers that our favourites are the Cocktail Information Graphics. Tasty.

1253896920 · Christopher Murphy · Follow Us on Twitter


Notepod [Detail]

Available in packs of three, Notepods are designed with the iPhone developer in mind. 100 page iPhone size sketchbooks, Notepods are printed on one side with a fine pixel grid and on the reverse with a pre-printed blank iPhone screen, ready to be filled with content.

If you’re developing for the iPhone get yourself a three pack, you won’t regret it.

1253655600 · Christopher Murphy · Follow Us on Twitter


LESS CSS [Detail]

LESS is an open source extension to CSS which allows variables, mixins, operations and nested rules. Put simply LESS allows you to write more powerful CSS, enabling you to nest rules, assign and re-use variables, use simple calculations in your style sheet and create mixins (essentially variables, but for entire classes).

The authors - Alexis Sellier and Dmitry Fadeyev - describe LESS as an extension to CSS and its syntax is designed with a look and feel that mimics CSS. Sellier and Fadeyev state:

LESS embraces CSS and any additional functionality it comes with is integrated in such a way as to make it as seamless as possible. Better still, LESS uses existing CSS syntax. This means you can rename your current .css files to .less and they’ll just work

So how does it work? Essentially you create your style sheets and save these files as .less files, these files are then compiled (using a Ruby gem) into an actual CSS style sheet using some good old fashioned command-line magic before use.

LESS looks like a powerful means of extending your CSS tool kit and is well worth taking a look at.

1253650440 · Nicklas Persson · Follow Us on Twitter

You're killing me, Zappos.

You're killing me, Zappos. [Detail]

You’re killing me, Zappos. is an open letter from Andrew Wilkinson, Founder and Creative Director at MetaLab, to Zappos’ CEO Tony Hsieh, asking, “Why is your web site a confusing mess?”

Wilkinson goes on to state:

Your new ‘Zeta’ design is definitely an improvement, but you’re taking the site from 1999 to 2003. You constantly stress your focus on the customer, yet create web experiences that are so unsightly and confusing that they border on sadism.

In a move similar to Dustin Curtis’s recent exchange with American Airlines, Wilkinson offers a Zappos’ makeover, remixed the MetaLab way, along with a few key details on the importance of clear iconography and visual hierarchy.

Brian Kalms, Director of User Experience and Web Strategy at Zappos responds:

I agree, our site plainly needs to evolve more than it has. It will, but evolution is a process. I am proud of the work my team has done in bringing the site from 1999-2003 as you described it, and all within a year.

You will soon see something closer to 2010 and eventually you will see an evolution that turns into a revolution. But it will take some more time and it certainly does not nor ever will include a ‘redesign’.

His response, also in an open letter, along with comments from the Zappos user experience team, makes a number of valid points about the complexities of the design process within a large organisation and announces, in case you missed it, that “the shoe fit” and Happy Cog have just been appointed Zappos’s web design agency.

Both Wilkinson and Kalms make interesting points, not least highlighting the need to acknowledge and address the difficulties that exists in business that affect the design process. There are two sides to every story and, in this case, both are well worth reading.

1253302320 · Christopher Murphy · Follow Us on Twitter

Pr*tty Sh*tty

Pr*tty Sh*tty [Detail]

Pr*tty Sh*tty is based on a simple premise:

The primary goal is to showcase good design, and bad design. One of each. Daily.


1253292600 · Christopher Murphy · Follow Us on Twitter

Build Workshop

Built [Detail]

We’re delighted to announce that we’ll be part of the line up for the forthcoming Build Conference which hits Belfast in early November. We’ll be running a full day workshop on HTML5 and CSS 3 with a hands-on emphasis, aimed at the adventurous designer with a firm grasp of web standards.

The conference features presentations by, among others, Eric Meyer, Andy Budd, Mark Boulton and Tim Van Damme. In addition, over three, action-packed days attendees can avail of a variety of workshops, masterclasses and screenings. In short, there’s something for everyone.

Tickets are limited and going quickly, get yours before they go. We’d love to see you there. We have one free conference pass to give away and will be devising a competition to identify one lucky, golden ticket winner shortly. Follow @standardistas on Twitter to find out when the competition goes live.

1253207820 · Christopher Murphy · Follow Us on Twitter


CodeSmith Community Support Forum [Detail]

Cracker requests a serial number for CodeSmith Professional in the CodeSmith Community Support Forum. One of Codesmith’s software development engineer duly obliges:



[Via Mr Donnelly.]

1253201700 · Christopher Murphy · Follow Us on Twitter

HTML5 vs. HTML 5

The WHATWG Blog [Detail]

In case you missed it, the age old question, “What’s the right way to spell ‘HTML 5’?” has finally been resolved.

Until now, there were two schools of thought: the first, championed by the W3C HTML WG, favours ‘HTML 5’ (with a space); the second, championed by the WHATWG, favours ‘HTML5’ (without a space). Those trained in the use of the English language will naturally prefer the former; sadly, the latter won out.

It’s official, as outlined in Spelling HTML5, it’s HTML5 from here on in. Ian Hickson, in the comments states:

I cannot believe how much time has been spent talking about the space in ‘HTML 5’. Seriously, don’t we have better things to worry about?

Perhaps the worries expressed stem from the fact that we’ve grown to appreciatetheuseofspacesasanintegralpartoflanguage. No big deal though.

1253201460 · Christopher Murphy · Follow Us on Twitter

Subpixel Typography

Bees Knees [Detail]

Like BASE jumping, subpixel typography isn’t for the faint hearted. An extreme sport for the hardened typographer it nonetheless has its followers.

With an x-height of just three pixels, Bees Knees by Miha, takes the craft to new levels, using subpixels to create what is a surprisingly legible, albeit extremely small, typeface. Miha states:

It can be used for favicons and for… well, one reason is enough.

Two pixels anyone?

1253149980 · Christopher Murphy · Follow Us on Twitter

Rendering Fonts in Today's Browsers

Typekit [Detail]

Typekit’s Ryan Carver on rendering fonts in today’s browsers:

When experimenting with linked fonts, we have noticed that there can be a delay between when a page loads and when a font displays. It’s by no means ideal, and as designers we cringe when it happens. But why does it happen, and what can we do about it?

In short, not a great deal. With different browsers’ philosophies about what to render and when, coupled with the additional download time for the fonts themselves, the result can be an uncomfortable … pause … before the content … is fully styled.

The good news? Typekit are working on it.

1253104680 · Christopher Murphy · Follow Us on Twitter

Hunstruct Regular

Hunstruct [Detail]

Hunstruct Regular is a contemporary blackletter typeface created by Fontstruct aficionado John Skelton. Available as a free download, samples are available at Typography Served.

1253060580 · Christopher Murphy · Follow Us on Twitter

Make Photoshop Faster

Tweed [Detail]

Courtesy of Dan Rubin, Make Photoshop Faster is a beautifully designed single serving site with just one purpose in mind. To make Photoshop faster.

“View Source” recommended.

[Via Mr Gruber.]

1253057460 · Christopher Murphy · Follow Us on Twitter


Tweed [Detail]

The initiated will be aware of our penchant for tweed and beards. For those blessed with access to the BBC’s iPlayer, Tweed - a documentary on the history of tweed - is well worth watching.

[Via Mr Burns.]

1253047860 · Christopher Murphy · Follow Us on Twitter


Dots [Detail]

Looking for a little iPhone app inspiration? First & 20 is a collection of iPhone home screens from a cross-section of very talented designers, developers and writers. Featuring, amongst others, Mr Gruber, Ms Pieters and Mr Van Damme, the site offers an interesting glimpse into how others organise their home screens and, along the way, uncovers the occasional unexpected app.

Interesting that the current top three apps on the scoreboard are Twitter clients.

1253044080 · Christopher Murphy · Follow Us on Twitter


Helvetimail [Detail]

Not content with Helvetwitter? Josef Richter, its creator, has created Helvetimail, a minimalist Gmail skin. Mr Richter’s quest to style all things Helvetica, goes on.

1253039100 · Christopher Murphy · Follow Us on Twitter

The State of Typography on the Web

Refresh Belfast [Detail]

We’ll be presenting at Refresh Belfast on Monday, 21 September, discussing ‘The State of Typography on the Web’.

In this practical, hands on session we’ll be road-testing a few typography-centred services that have emerged recently, notably Typekit and Typotheque’s Web Font Service. We’ll also highlight a number of type-related web sites that audience members would benefit from bookmarking.

The emphasis will be on a show and tell presentation running through the practicalities of developing web sites with rich typography highlighting the pros and cons of some of the services emerging.

Tickets are nearly sold out (if that’s possible for an event that’s free). Get yours now.

1253036160 · Christopher Murphy · Follow Us on Twitter

Baseline CSS Framework

Baseline CSS Framework [Detail]

Although Baseline could be dismissed as Yet Another CSS Framework it has a few things going for it which looks promising enough to warrant a closer look. The support for HTML 5 alone could get you hooked, but interestingly, it’s its desire to be more than a simple grid system that could prove its most appealing feature. Cue the author, Stéphane Curzi of ProjetUrbain.com:

Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using a real baseline grid as it’s foundation.

The emphasis on CSS3 and HTML 5 technologies mean a progressive, forward looking browser is required – if you have the opportunity to work on a project where compatibility with last-century browsers is not on the agenda you should give Baseline a spin.

1252494060 · Nicklas Persson · Follow Us on Twitter

HTML 5 Visual Cheat Sheet

HTML 5 Cheat Sheet [Detail]

Not content with your pocket book of HTML 5 reference goodness (as covered in the Notes a few days ago) you can now, courtesy of Woork, print out a full-colour A3 wallchart that will serve as an aide-mémoire when crafting your newfangled HTML 5 designs.

All we really need now is a cheat sheet, pocketable or not, that gives us comprehensive browser support comparisons, updated hourly. Anyone?

1252456380 · Nicklas Persson · Follow Us on Twitter


Helvetwitter [Detail]

Meet Helvetwitter, a minimal, “stripped to the basics” Twitter client courtesy of Josef Richter. In his own words:

If you like Jon Hicks’ Helvetireader and Ad Taylor’s Helvetical, this is another attempt to build upon these designs.

Lovely. Though one has to feel for Mr Hicks who sums it up: “Dang. Should’ve copyrighted ‘Helvet…’. Now everyone’s making stuff red, black and white.”

1252449960 · Christopher Murphy · Follow Us on Twitter

A picture is worth a thousand words.

FOWD Tour [Detail]

The slides from our presentation A picture is worth a thousand words., at Carsonified’s FOWD UK Tour are - as tweeted earlier in the week - now uploaded.

We’ll be following up shortly with a post to the periodical on the importance of copy as an integral part of the design process, highlighting examples of effective macrocopy and microcopy.

Watch this space for details.

1252449240 · Christopher Murphy · Follow Us on Twitter

HTML 5 Pocket Book

HTML 5 Pocket Book [Detail]

If you’re thinking of dipping a toe in the HTML 5 water, you might want to print off a copy of Mr Jeremy Keith’s indispensable HTML 5 Pocket Book. Not only is it a useful aide memoir, but also serves as an elegant demonstration of Natalie Downe’s superb CSS.

[Via Mr Clarke.]

1252076940 · Christopher Murphy · Follow Us on Twitter

FOWD Belfast Redux

FOWD Tour [Detail]

Thanks to everyone for all the support at FOWD Belfast. It was an inspiring day and the event marked a great start to Carsonified’s four city FOWD UK Tour.

It was great to share a platform with the very talented Mr Andy Clarke and Mr Drew McLellan.

Mr Clarke’s presentations - an extreme typography makeover followed by a look at designing in the browser - were inspiring and the latter certainly sparked off a great deal of discussion at the after-party.

Mr Drew McLellan’s presentations - on the benefits of embracing microformats followed by ten cost effective web development techniques - showcased some admirable live coding and good old-fashioned common sense.

If you couldn’t make the event (or need to refresh your memory) Mr Clarke’s Extreme Makeover, Typography Edition and Mr McLellan’s Cost Effective Web Development Techniques are now available to peruse. We are, as we speak, in the process of uploading our slides. Watch this space for a note when they’re uploaded.

We’ll be talking type next at Refresh Belfast, running through a number of recently emerging (and rapidly developing) services for type on the web. We’ll post a note about what our presentation will cover shortly, for now though, thanks again to Louise, Keir and Greg of Carsonified for their hard work on ensuring FOWD Belfast was a success. Good hustle bro’…

1252075260 · Christopher Murphy · Follow Us on Twitter

@standardistas: Follow Web Standardistas on Twitter.