Search for ‘Elements of Typographic Style’

In December 2005 I launched the Elements of Typographic Style Applied to the Web, a practical guide to web typography using Robert Bringhurst’s book “The Elements of Typographic Style”. The site needs updating, so I’ve now open sourced it on Github.

An unedited extract from my forthcoming book, Web Typography. This chapter is quite technically focussed and hopefully stands well on its own. The other chapters I’ve written contain much higher proportion of typographic theory.

Your mantra for today: ditch divs and eliminate ids for leaner, more meaningful mark-up. Now before you turn away, branding me as a slave to semantics, I will explain some of the common misconceptions to show how the number of divs and ids can easily be reduced.

DOM scripting is much more than getElementById. Elements can be isolated and manipulated without having an id at all. To demonstrate this I’ve put together a simple script which redefines the styles of a class.

You are now looking at the new formulation of clagnut. The underlying HTML has swapped for more meaningful markup and the resulting style sheets completely rewritten. So far I’ve only tested on Mozilla and IE6 on Windows, so any further input from other platforms will be…

“You can’t get an XBox, it’s a big, ugly, tacky hulk of shit. Who cares about the technical stuff and what the games are like? What counts is what they look like when switched off
and stowed in the corner.”

To my surprise, Clagnut.com was last redesigned in September 2008. Well, it’s all change, with a new redesign launched today. It’s been created from the typography outwards, responsive from the beginning and elegant on huge as well as tiny screens.

Eric Meyer has created a rather nifty colour blending widget which calculates a palette between any two given colours. Fun (and funky JavaScript) and if nothing else, it’s useful for calculating the midpoint between two colours.
Matt has posted a list of online style…

Welcome all to 2003. Hope you’re all recovering from the excesses of Tuesday night! I’ve been a bit quiet recently, taking a break from all things computery, but normal service will now be resumed (unlike the poor unfortunate West Pier).

Web designers are forever sticking curves in their designs, particularly when smoothing corners of boxes. Designers have good reasons for this, but those of us charged with building the reality find it a pain in the bum, usually having to resort to tables to quickly get the job…

This week’s MCU web access tip recommends placing printable characters between adjacent links (such as in horizontal navigation). The tip suggests hiding the printable character using spans and inline styles. I show how to do it a little better.

I enjoy minimal design, and I also believe that, for the majority of commercial and otherwise meaningful sites on the Web, that is exactly what is required. But minimal design to me, does not mean no graphics, no Flash, etc. If these elements are seen to add to the experience…

Last week Digital Arts online featured me, among others, in a piece on web fonts in 2015. My main points were twofold: more interesting treatments are required, and type designers keep giving us more fantastic materials to work with.

The new W3C Validator has come out of beta and released unto the world. There is an improved UI and loads of links to the Specs, as well as help, documentation, tips and improved accessibility (accesskeys a-plenty).
There also seems to have been a few changes to the…

First off, the css-discuss mailing list now has a searchable online archive. It’s high traffic, extremely high quality and will almost certainly already contain an answer to your CSS problems.
Here are a few gems I discovered there regarding the problems with styling…

Brighton’s poor old West Pier is on fire. Yet more trouble for the beleaguered land mark. See the BBC webcam footage.
It’s now burnt down to the metal super-structure. I don’t know what can have caused the fire, but my guess is arson. The pier is…

This week’s ALA shows how to conceive and design print style sheets that automatically format web content for off-screen delivery. Includes tips on hiding inappropriate content, styling text for the printer, and displaying the URL of every link on the page.

“It’s not because he’s American and it’s not because the British are evil. Fundamentally, simply, basically, finally he’s just hated because he’s a twat.” On an unrelated note, get yerself over to Whitespace, a great new blog focussing…

Mozilla’s DOM Inspector (also available in Firefox) can seem daunting at first but is amazingly powerful. Amongst other things, it allows you to see which CSS rules are affecting any given element in order of cascade priority.

The new issue of Digital Web mag sees Peter-Paul Koch extolling the fine virtues of graceful degradation. That is the honourable action of building web sites that work† on all browsers without worrying if they are pixel perfect. With care, attention & experience this…

‘Cascading Style Sheets: Separating Content from Presentation’ has just been released. Published by Glasshaus, it is written by four seriously talented people: Owen Briggs, Steven Champeon, Eric Costello and Matt Patterson. On this information alone I can…

Text for the screen is sized with CSS in terms of pixels, ems or keywords. Pixels is easy, keywords are well documented. That leaves ems. I will now attempt to show you how ems can be as quick and easy to use as pixels.

Mozilla 1.1 is now out with some lovely new icons. It also claims to have improved application and layout performance, stability, CSS, DOM and HTML standards support.
Official news on the forthcoming all-new Opera 7.

So I’ve just downloaded iTunes for Windows and it’s lovely. Straight away, here’s three things it’s got over Windows Media player:
Music sharing with your local network.
Quick browsing – play an individual album in your library with one click.

Fixed versus liquid design is an emotive debate. Liquid layout seems more intuitive, appropriate and elegant but is not without issues. However many concerns can be addressed with little or no compromise.

Brighton’s other pier, the Palace Pier, has now suffered it’s own disaster, catching fire in a rather big way.
Sad as it is, I haven’t got quite as much sympathy with the Palace Pier as I do with the West Pier. The Palace Pier is nowhere near as old, and is…

I’m writing a book on Web Typography which I’m hoping to crowdfund on Kickstarter. It’ll be a handbook for designing beautiful and effective typography in modern websites, and I hope it’ll be available in time for Ampersand conference this year.

I’ve been following Simon Willison’s ongoing CSS Tutorials with great interest. He’s so far covered styling blockquotes with big quotation marks, a CSS version of jwz which gaves us a bunch of IE5 workarounds, a remake of scripting.com to introduce the…

Tomorrow lunchtime I’m off to Morzine for ten days of Alpine mountain biking, for the third year in succession. As usual I’ve multiplied the cost of the trip by getting my grubby hands on a bunch of spanking new kit: Hope Mini disc brake, Race Face riser bars and…

Small town (city actually) talk. I reckon there’s some catnapping going on around here. And I don’t mean folks snatching a quick snooze. Here are just two of the flyers popped through our door in the last few weeks:
I’ve seen at least 6 flyers and…

Why is the humble apostrophe so regularly misused and why are hairdressers
so often the culprits?
Ladie’s perm’s at half price
(As the Guardian readers’ editor points out, journalists who should know better
also get it wrong.)
Apostrophes have two…