Web Typography Takes A Big Step Forward With Stéphane Curzi’s Baseline


Stéphane Curzi’s Baseline website


The noise-to-signal ratio on FaceBook is pretty high, but it’s worth keeping up. Once in a while a real gem arrives, something you might otherwise have missed.


Earlier this week, Jackie Goldberg in LA shared a link to a project by Montreal-based designer Stéphane Curzi using baseline text alignment on the Web.

It’s very impressive. This is the nicest-looking typography I’ve seen on the Web using HTML and CSS, because it has the consistency only an underlying grid can provide. Most websites you see – even if the designer has tried to take pains with the typography – somehow still end up looking as if they’re missing something. What’s missing is typographic harmony, which can be achieved only by integrating all the type on the page – headings, captions, body text, etc. – using matching grid units.

Take a look at the page below. Notice how stable and harmonious it seems (look at the website to get the true picture).


The underlying grid creates harmony. Baselines are aligned between columns, and headings are harmonically spaced from the text.

Stéphane has created a download on his site so you can go and get all the CSS, Javascript etc. and start experimenting for yourself. I’m looking forward to seeing what others can do by building on top of this great work. There are both PC and MacOSX versions, and the code will work with most browsers (but not IE6).

So far, it doesn’t work with the CSS3 multicolumn attributes. But I’m hoping someone can figure this out. Stéphane’s made his work free under Creative Commons. All you have to do is give him a credit.

It ought to work with any font, just by editing the CSS.

Exciting!

Advertisements

3 thoughts on “Web Typography Takes A Big Step Forward With Stéphane Curzi’s Baseline

  1. dan

    i love love love love this. the 4 column format works best for me. this long scrolling down with very ver wide margins is for the birds. Like you told me, Bill, the Web world took a wrong turn 16 years ago, screwing up readability. This new idea seems great. I love it.DannyPS: by the way, i have given up my campaign to coin a new word for reading on screens, i wanted to call it screening, remember. After a long summer fishing expidition, and listening to experts far and wide, all over the world, from Anne Mangen to Bill Hill, yes, you, sir, I have given up my quixtoic venture and come back down to Earth and am calling reading on a screen as just "reading." You were right. No need for a new word. It was an interesting quest. Over now. Reading is reading.

    Reply
  2. dan

    Billi have a question: why can't we have 4 column grid reading things on the Web now with pagination? Why do we HAVE to read long and wide screenages and scrool down to Timbucktoo? Why can't we have this 3 col or 4 col reading grid online NOW? WTF? pleas explain to dummie me

    Reply
  3. Bill Hill

    We can't have it because there isn't a browser yet which has the capability of doing on-the-fly paginated layout of multicolumn content.You can do multicolumn using CSS3, but it's still a bit of a hack. You can do pagination of database search results, but not of multicolumn content with text and illustrations.There's no browser which can look at the content and the window size, make a decision about the optimum column count, resize pictures to fit and flow the content, creating new pages as each fills.It's complex. but it's not rocket science. Applications like InDesign will do autoflow, creating as many pages as it needs to place all the content.So we can do all of this already, there are no unknowns. The WPF-based New York Times Reader app did it quite successfully.It's just a question of which browser team gets off its ass and does it first.IMO the one that does will dramatically change the Web forever. But what do I know?

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s