Category: Typography

Running ragged

In my fourth article for 24ways over the years, I wrote about typesetting the right rag.

One of the first little typesetting trips I was taught – in my internship at an advertising agency – all those years ago, was how to make text fit within a given space, but still read well. This involved a dance of hyphenation, letter-spacing, leading and type-size. But a crucial ingredient of this recipe was the soft-return.

Scanning a piece of text I was looking for certain criteria – or violations – that needed a soft-return (or, in Quark XPress, shift-return). Using those violations, I would typeset the right-rag of the piece of text, and then use hyphenation, and what-not, to tease the rag into as smooth a line as possible. All whilst ensuring the content was pleasurable to read. In a perverse kind of way, I always enjoyed this part of the typesetting process.

My article on 24ways is about how we can apply this thinking to the web, where the inherent lack of control on the medium means we have to apply things in a slightly different (read: clumsy) way.

Emma read the article this morning and pretty much summed up the way I feel when I read text sometimes.

“Another article by @markboulton which gives me a glimpse into how broken the world looks through his eyes” – Emma Boulton

Just like a musician listens to music, I view text in a different way to most people. I just forget that I do it most of the time.

I can hardly believe that 24ways has been running since 2005. In the web years, that’s like 72 years ago. It’s a credit to Drew, Brian, Anna, and Owen. It’s not easy running this year in, year out, on a daily publishing schedule for a month. Hours and hours of work go into this, and we should all be thankful for their time and effort. Oh, and let’s not forget Paul, who has given 24ways a lovely redesign this year (you can read more about that on his blog)

UI is visible. Type is visible.

In 1955, Beatrice Warde gave a presentation to the Typographer's Guild in London (now, the International Society of Typographic Design) which later became an essay titled: 'The Crystal Goblet, or Printing Should Be Invisible'.

A wonderful piece of writing in which Warde describes the role of typography – or rather the role of the designer - in printing. The general premise is that good typographic design shouldn't be seen.

When you listen to a song in a language you do not understand, part of your mind actually does fall asleep, leaving your quite separate aesthetic sensibilities to enjoy themselves unimpeded by your reasoning faculties. The fine arts do that; but that is not the purpose of printing. Type well used is invisible as type, just as the perfect talking voice is the unnoticed vehicle for the transmission of words, ideas.

Let's take that last point. Morgan Freeman has a memorable, wonderful speaking voice. One that adds colour and weight to the words. His words are not just audible, and understandable, but they are rich with personality. His voice adds to the words he speaks.

I disagree with Warde. Type should not always be invisible, it should be appropriate. Sometimes, it's a typeface's job to be overt, loud and suggestive, in order to communicate the content in the best way. But, yes, sometimes typography has to melt away into the background. To support the content and the reader. To help them.

On the web, because we're quite often presented with long-form text (and by that, I mean more than a few paragraphs), we get a little obsessed with body copy. Good typesetting of body copy should be like that of setting a novel; the type should disappear. But, not all typography is body copy, and to consider it in these narrow terms is to do the practice of typographic design a huge disfavour.

Whenever we design with words, we're designing with type. And words are not always long form paragraphs designed to be very easy on the eye. Sometimes it's a logotype, a button, a richly designed layout, a data table or form. The application of typographic design is just so broad that to say it all has to be invisible is to imply the goals of typographic design are the same across the board.

Legibility is a baseline requirement for typesetting anything. It's like edible food. It shouldn't really be a measure of what is good or not. Just like audibility and comprehension are baseline requirements for speech. There is more flavour in words; spoken or printed. There is more flavour in type, that if applied well, transcends content from being merely legible, to that of being pleasurable. After all, that's why we have different typefaces: each brings with it characteristics that flavour the words.

Nick Cox says in his article, 'Typography should be visible':

In my opinion, there is merit to visible typography because in the hands of a competent typographer, a text can truly sing. Not because they have left their mark out, but because they have worked their art on the words.

I agree which him completely. It's the difference between something edible and exquisite. The difference between average and better. Which is why all this invisible, reductionist UI approach is starting to grate on me a little because it suggests we have the same goal for all our work; to make it invisible. It's more complex than that. It's an over-simplistic measure of success that is put far more eloquently than in this post from Timo Arnall.

Of course, I say all of this under the one big caveat that, in typography, there are no rules. Just good decisions. But, let's make some decisions shall we? Not make everything invisible because, apparently, that's the way it should be.

Open letter to W3C CSS Working Group re CSS Grids.

Since I'm knee-deep in grids at the moment – both the book and Gridset – the theory, and thoughts on how it could and should apply on the web, is very much at the front of my mind. Last night I had a reminder on Twitter of the upcoming CSS3 Grid Layout draft. I recalled I wrote about it last year proposing some slight amendments regarding the addition of the module attribute. This would be a big change. It'd be great if it were considered, but I'm not hopeful.

However, that change not withstanding, one thing that really needs to change in this draft is the terminology used. Terminology (with some slight interchangeable differences) that has not really changed for many years in grid and layout design. Why reinvent it? Why define existing terminology to that more suited to spreadsheets and tables?

So, this morning, I emailed the working group to consider these changes. I'm posting this here for those who are not on the working group who may have opinions on this who can get in touch with me. I'd love to hear your thoughts, concerns and questions regarding this draft and how it fits with the established graphic design theory. I am of course on Twitter, or you can email me on this site.

In reference to:

I'm confused as to the need to invent new terminology with regards to grids that have existed for centuries. I'm also a little concerned that the mental model this terminology builds is one more similar to tables and spreadsheets (where these terms could be interchangeable) than to grids and layout.

Specifically on the terminology:

  • Grid Lines are known as Gutters.
  • Grid Cells are known as Modules (or Units – the term is interchangeable). They represent the smallest building block of the grid.
  • Combinations of modules vertically are Columns *if* they run the full height of the grid.
  • Combinations of modules horizontally are Rows *if* they run the full width of the grid
  • Combinations of modules both vertically and horizontally are Fields.

There's a lot of great stuff in this draft, but some of the theory of designing grids has been around for centuries. If we could start to align CSS with existing terminology, and existing mental models of how layout is designed, then all the better.

Just a thought…

For more information on this, I wrote a blog post last year that expands on some of this thinking:

Thanks for your time and consideration,

Mark Boulton

The making of FF Tundra | I love typography, the typography and fonts blog

A wonderful story about the creation of FF Tundra on I Love Typography. Such a great insight into the design decisions, and motivations behind them, when crafting a typeface design.

A Richer Canvas

In 1927, Jan Tschichold published his seminal manifesto: Die neue Typographie. As with all manifestos, it's a work of vision, new ways we should think; a work of unwavering principles on how we should design printed material. Abandonment of serif typefaces aside, one of the guiding principles was pointed out to me by my university lecturer regarding designing the perfect layout:

‘‘Though largely forgotten today, methods and rules upon which it is impossible to improve have been developed for centuries. To produce perfect books these rules have to be brought to life.’

The methods and rules Mr Tschichold is talking about are realised in Canons of Page Construction. Geometric systems that create beautiful text for books. Text that belongs. Text that feel connected to the physical form in a binding manner that should make it invisible. It's about comfort. Creating a comfortable, invisible reading experience.

Binding content to the book is what all good book designers do. To do this, they use Canons of Page Construction, or other principles to design grid systems that, when populated by content, create that connection. But with all paper-based design, they start with paper. Paper that has edges, ratios that can be repeated. A canvas. And here's the thing. Creating layouts on the web has to be different because there are no edges. There are no 'pages'. We've made them up.

A richer canvas

If we take that basic desire of creating layout systems: binding content for a comfortable (read: native) experience. On the web, we have to abandon this notion of a page. Let's look at this practically. To design a layout system for a website we now have to consider:

  1. Screen resolution ranging from 2560px wide and above, down to 300px wide and less and, quite literally, everything in between.
  2. Different devices all with potentially different pixel densities.
  3. Context and usage. We have mobile, tablet, laptop, desktop, TV, fridge, car... etc.

To my mind, it's becoming increasingly unrealistic to impose a best-fit 'page' when the variables are so far-reaching and are only getting more so. This isn't going to get any simpler anytime soon, folks. It's my belief that in order to embrace designing native layouts for the web – whatever the device – we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.

Content out

Grid system design should begin with a constraint. Something that is knowable and unchangeable. This constraint is used to build the modules of your grid. In book design, that constraint is defined by the page through subdivision. Book designers take the page, divide it up into a modular grid of spaces. These spaces (called modules) are then combined to create rows and columns. These are then filled with content (images and text). The text feels like it belongs because the columns are related to the physical object: the page.

How should we do it on the web? Remember the goal is connectedness and this feeling of belonging. We do that by defining the constraint from your content. The constraint could be derived from an advertising unit, or from a thumbnail image from tons of legacy content. Whatever it is, start there. Don't start from an imaginary page.

Think responsively

Ethan's superb article, talks and upcoming book have given us the tools to make this approach a reality. We can now design effective adaptive layouts that respond to their environment. If these layouts are based on a system that defines its ratios from the content, then there is connectedness on two levels: connectedness to the device, and connectedness to the content. The layout isn't just 12 columns because that's what my CSS framework gave me to use.

The time is now

The conditions are right.

With Responsive Design, CSS3 & browsers, we have the tools. Thanks to people like Kristina Halvorson and Relly Annett-Baker and all the other content strategists out there, we're taking content by the scruff of the neck and we're able to determine what is knowable much earlier in the design process. Above all, we have the desire and the ability to re-write the rules that have matured over literally centuries of graphic and book design practice.

Embrace the fluidity of the web. Design layouts and systems that can cope to whatever environment they may find themselves in. But the only way we can do any of this is to shed ways of thinking that have been shackles around our necks. They're holding us back.

Start designing from the content out, rather than the canvas in.

For those who may want a little bit more than this rather high-level blog post, I'll speaking about this very topic - with plenty of practical application - in my upcoming talk at An Event Apart in Boston in May, and my book which will be out this summer.

Oh, and incidently, the blog post is in response to Chris Shifleft's call for more blog posts. His Ideas of March post has already prompted many people to blog more than they could ever do through Twitter. I too pledge to blog more in 2011 than I did last year. Promise.

Explorations in Typography

A great looking book by Carolina de Bartolo and Erik Spiekermann out in April 2011:

Explorations in Typography: Mastering the Art of Fine Typesetting (A Visual Textbook for Intermediate to Advanced Typography) is a vast collection of beautiful typesetting examples. Page after page, a brief article by Erik Spiekermann has been set in hundreds of different ways in hundreds of different typefaces, creating an extended visual taxonomy of typesetting that allows you to “learn by looking."

Interestingly, the site has 'key features' of the book listed in the same way you would list features of an electronic product or web app.

Ampersand · The Web Typography Conference

From those busy Brighton lot, Clearleft, comes another UK web conference. This one's about Web Typography and with Richard Rutter at the helm, I'm sure it will be superb.

From Typedia: Cure for the Common Webfont, Part 2: Alternatives to Georgia

A great list of alternative webfonts to Georgia.

The Webfont Revolution Is Over, Let the Evolution Begin

From Typographica: With the imminent standardiszation of WOFF – a webfont file format – we'll be seeing webfonts become just part of a web designer's toolbox. Won't that be nice?

New Drop Caps

When I redesigned this blog a little while ago, the drop caps I used were always going to be a placeholder. Following an evening with my Sister-in-law--who happens to be a textile designer/illustrator by training--I commissioned her to produce a complete uppercase alphabet based on Georgia. I'm thrilled that two months later, they're live on the site. (if you're reading this on RSS, then pop on to the web to see what you're missing).

The brief was pretty simple. I wanted illustrative drop caps produced that were aligned to the inspiration for this design; namely Renaissance illustrations and carvings. They ended up being slightly broader in inspiration than that though. They're hand painted on thick, textured cartridge paper in black ink.

I planned on interviewing Helen (and I still plan on doing that), but I just couldn't sit on my hands until then. Here's a few letters that are particular favourites of mine. Interview coming soon...

Drop cap G

Drop cap S

Drop cap h

Drop cap o

Web Directions & Typographic Structure

Last week I presented at Web Directions South 09 here in Sydney, Australia on Font Embedding and Typography. It's a talk I gave at @media 09 in London over the summer. I enjoyed giving the presentation - despite AV problems which resulted in a ten minute reduction in time allowed and having to give the presentation without notes. But the show went on.

But despite that single hitch, Web Directions was quite possibly the best web conference I've been to. I was congratulating John and Maxine at a speakers BBQ on the Sunday following the conference, and it became evident it was down to their undying attention to every, single little detail, from the moment you register to the food you are served (which was excellent by the way). But the lasting memory for me was the buzz of the Australian web industry. It was very refreshing to visit a country not in recession and see an industry thriving on creativity rather than suffocating beneath a blanket of uncertainty.

But anyway, before this turns into a rant about politics, back to the presentation...

This was not a practical presentation full of hints and tips or a presentation about fonts. Or font embedding. Even though I touched on these two subjects briefly, this was a talk about typographic design and all of the aspects of the craft that I find important and how I relate to them in particular to this medium.

A core part of the presentation describes my understanding of typographic design and why font choice is only one of nine aspects that need to be considered when designing with type on the web. This is the third model of typographic design I've been working through now, and not only is it sticking, but as I'm beginning to explain it to other people, I'm not having to change it too much. It has almost passed the mother-in-law test. For me, it's working as a way to explain what I do and I'd like to share it to get your thoughts.

Typographic Structure

Typographic design, as I understand it, involves nine elements:


Language is entwined with typography. Type can be defined as the display and arrangement of language. As designers, we should care about this.


Typesetting is the process of taking raw text and marking it up. Making headings, lists, emphasised text etc.


The typographic grid is a foundation upon which layouts can be built.


Conceptually, content has levels of importance. Typographically, Hierarchy visualises this.


The font used to display the content.


How the arrangement and layout of the type aids reading.


Combining type with other graphic elements such as photographs, illustrations, video or other UI elements.


Colour, when discussed in typographic terms, can mean two things: red, green, blue etc. or dark or light typographic colour. Dark typographic colour is dense type--tight leading or line height, tight whitespace. Light typographic colour is the opposite.


One of the unfortunate things on the web is that, generally, we're designing not knowing what the content is. We have an idea of what the content might be, but when dealing with content management systems and the flow of data, it's very difficult to know. But content is an important part of typographic design and this connection is one of the casualties of the web standards mantra of separating content and presentation. When we do that, it's very difficult to tell stories with design.

Here's a diagram:

Typographic Structure

As you can see, your choice of font only plays a small part in the overall typographic considerations. Of course, on the web, we've had our choices here limited to the point of almost removing the element of choice. And don't forget that a number of these elements are also completely in the hands of the user to change at their will.

My point is this: font choice is only part of what makes good typographic design. The limitations that have been imposed on us--with only a hand full of fonts guaranteed on user's machines--have nurtured fairly good typographic craft on the web. Generally, we care about the content; we mark it up with the correct intended hierarchy; some us care about typesetting ampersands, or bulleted lists. I'm not sure that the same level of care and attention is employed by some of our print cousins (and I say this having spent quite a few years on that side of the fence). Why is this? Well, designers are like magpies; we get distracted by the shiny.

When I was in university, I sent off for every type specimen sheet I could get my hands on. I pestered everyone from Monotype to Emigré. Receiving the canvas bags stuffed with font supplements from T26 was certainly a highlight of my first year. Why? Well, firstly, type supplements are normally beautiful things. They didn't necessarily make me look at type any differently, but they made me want to collect type. I'm sure that mindset isn't that rare in anyone who cares about type, but it's a mindset that leads to a shallow understanding of the broader craft. You get distracted by the next beautiful typeface. You're constantly on the search for the typeface that is just right.

Font choice is not the most important decision you make when designing with type. On the web, currently, it is way down on the list because of the constraints of the medium. With commercial font embedding just around the corner, we stand on the edge of an incredibly exciting time for the typographic web. In eighteen months time, I think the web will be starting to look very different. And about time too, but let's not get distracted by the shiny.

Beautiful Web Typography (#5)

Really good typography presentation illustrating the current state of play.

Oh No! Not More Web Fonts!

Massive news from Font Bureau

Font-weight is still broken in all but one browser

Rich highlights the rendering inconsistencies across modern browsers. Shocking results.

CRW / Corporate Risk Watch

Simple effective design. Refreshing to see such companies go out on a limb design-wise.

Ten Crimes Against Web Typography (and how to avoid them)

Cardiff is finally getting its act together. Tonight, I’ll be speaking at the second Cardiff Geek Night, along with Dan Zambonini. It’s a ‘microslot’ that will last about 15 minutes, leaving plenty of time for questions.

When I spoke in November last year at the Web 2.0 Expo in Berlin, the feedback I got from my Typography presentation was generally positive. It seemed that most of the people I spoke to preferred the last 10 minutes, on Micro-Typography, and all the quick tips that you could use every day. Tonight will be more of the same, with a slightly different slant. I’m going to highlighting my top ten crimes against web typography, and how you can put them right. Ten crimes (and subsequent tips on correcting them) in ten minutes. I’m told the talks will both be recorded, so I’ll post up a link to them (and slides), when they’re all done.

If you’re at a loose end tonight, and fancy a pint, then feel free to come along. We’ll be at Cafe Floyd from 7pm.

Type in Berlin

Since Sunday evening, I’ve been in Berlin attending—and speaking at—the Web 2.0 Expo. I presented earlier today on the very ‘un-web 2.0’ topic of Typography. I think it may have surprised a few people as to how relevant typography is to designing UI—even to applications. As usual, I talked about type as being more than just choosing typefaces, which is where most designers, unfortunately, see typography begin and end.

On closing, I gave a URL which would link to a section of this site with the slides, notes etc. You can download the slides here.

Apologies for the delay, but the up-speed of the conference wifi was incredibly poor, so I’ve only just got around to doing it.

I’ve also decided to embed the slides here from Slideshare. I don’t normally do this, so apologies if Slideshare clogs things up, but I thought it might be nice to have the slides here whilst I break-down the topics I presented.

The slides

What was said

I’ll give you a quick run-down of some of the main points of the talk.

I started off with a quick introduction of placing typography within Web 2.0. Where does typographic design as a practice fit with designing applications and platforms for the ‘web of data’. The rest of the talk was then split into four main section: Structure, Process, Macro typography and Micro typography.

I presented the following points:




  • Typography is presenting information.
  • Information is language and language has structure.
  • Documents have a conceptual model and these need to be matched to the reader’s conceptual model of the content.
  • It’s the designer’s job to bridge this gap and present the content which fits both models. Incidentally, I feel this is one of the problems facing designers who want to art direct on the web.
  • Content and presentation.




  • Jesse James Garrett’s ‘Elements of User Experience’.
  • Wrongly interpreted as a linear process.
  • A process like this relegates design, and specifically typography, to the surface plane.
  • Greybox Wireframes.
  • Involving typographic design much earlier in the process.

Macro typography



  • The Big Stuff.
  • Creating spacial relationships.
  • The Golden Section.
  • The Golden Section as applied to the web.
  • The Rule of Thirds.
  • Grids and consistency of design across page types.

Micro typography



  • Hyphens are not dashes.
  • Letterspacing: negatively and positively.
  • Italic ampersands in headings.
  • Framing navigation items and lists.
  • Framing tables rows and columns

Those were the main points. It seemed to go down well, although, I still had the feeling the presentation stuck out like a sore thumb in a conference discussing some of the loftier aspects of designing for the web.

The rest of the time was spent in the pleasant company of friends old and new. Jeremy and Jessica, Simon and Nat were wonderful in arranging a variety of evening Berlin eating establishments. In truth, I met them in the lobby and we wandered around until we found a restaurant that could accommodate 13 people.

I ate some strange German food, and drunk some even stranger red beer. I said strange, not bad. I enjoyed sitting next to Jesse for two meals and discussing everything from washing machines and remote controls, to the waiter with the incredible memory (yes, he took a complete order—starters and main courses— without writing a single thing down! Impressive or what? I need to write a list if I need more than two things at the supermarket).

So, all in all, it’s been fun. But, it’s been tough trying to manage a conference, preparing a talk and running a small business that is ticking over at home. That has been challenging. I missed The Wife and am dying to see progress on my house extension.

I will say this for Berlin though, it’s a great place to come as a designer. I even found a design manual in a bookshop today on how to design forms, timetables and transportation tickets. How cool is that?

Incremental leading

There has been a lot said recently about Vertical Rhythm. Richard Rutter began the work on 24ways last year with the piece ‘Compose to a Vertical Rhythm’. This was built upon by Wilson Minor on A List Apart recently with his article on Baseline Grids. All sound typographic advice. If you haven’t read both of them, I’d urge you to do so now otherwise you know what I’m on about it in this post.

At @media this year, I presented ‘Five Simple Steps to Better Typography’. Step two in my presentation was was Vertical Rhythm where I reiterated some of the excellent points Richard made in his article and also the presentation we both gave in at SXSW in March. I also added something of my own: Incremental leading, or Incremental line-height.

Too much leading in the sidenote

Working through both Richard’s and Wilson’s articles, they both treat the sidenote in the same way. They align it directly to the vertical rhythm unit. This is correct of course. But, to my eye, the line-height in those sidenotes, as it’s a smaller type-size, is too large. 10px on 18px leading is stretching it. So, how do we reduce that line-height whilst still adhering to the vertical rhythm we’ve established. Once again, we look to print design for that answer.

In editorial design, there is a technique used for sidenotes and boxouts that aligns to the baseline grid, or vertical rhythm. It’s called incremental leading.

Incremental leading

Here we have a simple page of text based upon Richard’s example. There is an H1, some text, a sidenote and a footer. They all align to an 18px vertical rhythm shown in red.


p> A simple document set to an 18px vertical rhythm

A simple document set to an 18px vertical rhythm

To my eyes, there is too much line-height to the sidenote. So, how can we reduce this line-height, but adhere to the 18px rhythm?

Instead of aligning every line in the sidenote with the vertical rhythm, when you use incremental leading, you align, say, one in every four or one in every five.

Here’s an example with incremental leading set to align every fifth line of the sidenote to every fourth line in the main content.


p> Sidenote set to vertical rhythm using an incremental ratio of 5:4

Sidenote set to vertical rhythm using an incremental ratio of 5:4

Adding in the vertical rhythm grid once more we can see the line alignment.


p> Here you can see the ratio of 5:4 incremental leading

Here you can see the ratio of 5:4 incremental leading

But how do I do this in CSS?

Firsty, make sure you read Richard’s article and apply the rules to body of text. Once you’ve got the 18px rhythm set up and everything’s aligning as it should, then you can look at the sidenote.

As we’ve decided we want to align 4 rows of the main content to 5 rows of the sidenote, we begin by finding the value, in pixels, of 4 rows combined.


p> Four lines of the main content.
18px x 4 = 72px


p> Then we find the value for 5 lines of the sidenote.
72px ÷ 5 = 14.4px



To calculate what 14.4px is in ems (in relation to the body, and the type size for the sidenote)
14.4px ÷ 10px = 1.44em


p> We then add the values to the CSS for the sidenote.
.sidenote {

margin-top: 0.28em;


You can see this working in this example.

However, note the top margin. I really had to fiddle around with this manually to make sure the alignment was correct. I did try and work out the maths for it, but it proved to be very difficult as really I needed to find the cap-height value of the typeface in order to provide a margin.

Martyn, a bloke I now share an office with (who is also a Mathematics graduate), provided me with this diagram to illustrate my problems.


p> Diagram showing relationship between baselines, vertical rhythm and how line-height is applied in CSS

Diagram showing relationship between baselines, vertical rhythm and how line-height is applied in CSS

As you can see, the problem is I needed to find the value of ‘x’. In order to do that, I’d need to know the value of ‘b’. The difficulty arises from trying to align the baselines and the only way of doing it was aligning it by eye. But, if you can fathom it out, then I’d be grateful.

Now, all I need to do is find the time to apply to this site and the new business site. 

@media 2007: Third time’s a charm

atmedia 2007 in LondonThat’s @media done for another year. Patrick put on a great event. Again. Seriously, year on year the bar is raised and he delivers. The speakers were great, the venue, the food, but most of all the location; Islington is such a great place for an event like this.

I feel like I’ve lived with @media 07 for a while. I produced the conference printed matter for San Fransisco and London, so for the best part of a month I’ve felt the looming pressure of speaking. I was very nervous about it, but I think it went ok.

There were so many highlights of the two days. Firstly, it was so great to meet up with friends from home and oversees. This year saw, amongst others, Jason, Dan and Molly take the trip across the pond, along with Joe Clark (whom I finally met for the first time).

Secondly, it was equally great to see friends in the UK who I talk with all the time but very rarely get to share a beer with. Those jet-setting men of mystery from Clearleft were there in force (I have to thank Hannah for that term—personally I think it’s going to stick). Jeremy was, as usual, on fine form. Of course the Britpack were propping up the bar at any given opportunity. It goes without saying it was nice to see Colly out of his cave along with his other Erskine Design cave-dwelling work-o-holic Jamie (those chaps seriously work too hard). Great to see Steve again and to meet the inspirational Hannah Donovan from (who gave a stonking half hour talk along with Simon Willison).

The presentations were superb. Typically, I attended most of the design-focused talks and occasionally dipped into the tech-focused. Highlights for me were Simon and Drew, Joe, Hannah and Jason. Andy delivered an entertaining look at internationalisation which was also a cracker.

On Thursday, I presented ‘Five Simple Steps to Better Typography’ in the 3pm slot. The slides are here (along with a few resource links) It was my first solo presentation of that length and to an audience similar in size to the presentation Rich and I gave at SXSW in March. It went without a hitch and, on reflection, really wasn’t worth the nervousness before-hand. For those who didn’t catch it, I’m sure the podcast will be released shortly and I think Joe was live-blogging in the front row.

I talked about, you guessed it, Typography and how by applying some simple guidelines, you can create much better typography for your website. There was a twist though.

When I prepared the presentation a while ago, there was no story. Sure, the facts were there but on presenting them a couple of times, and various run-throughs, I felt there was no cohesive thread to tie it all together. Enter my dirty little secret: martial arts (which I’ll talk about shortly in another post). You see, Typographic design and martial arts have an awful lot in common. The presentation saw me compare Boxing to Vertical Rhythm and Ninjas to Hyphens.

That’s it for a while then. No d.Construct for me again this year as I’m away on holiday. Bit gutted about that as it looks like such a great event. I guess I’ll have to wait until March to get my next web conference fix.

Talking in Perth

Are you in Perth, Australia on the 11th April?

If so, and you fancy an evening of listening to myself and John Allsopp talk about web and type stuff, then pop along to Ideas3 hosted by Port80 at the Melbourne Hotel in the centre of Perth at 7pm. You can get your tickets here.

Five Simple Steps to Typesetting on the web: Dashes

{title}In this installment I'll be talking about three dashes which are often used, but frequently misused. The Hyphen, the En Dash and the Em Dash.

The Hyphen

{title}The Hyphen, or the 'hyphen-minus', is what you get when you press the key next to zero (standard qwerty keyboard, well mine anyway, for all those pedants out there). It's the shortest of the three and is often used incorrectly, I'll look at the most common correct uses of the hyphen first before moving on to the dashes it is often used, incorrectly, to replace.

There are two types of Hyphen: The 'soft' hyphen and the 'hard' hyphen. Sometimes they are different lengths, but this depends on the typeface.

Hard hyphen.

The hard hyphen joins two words together anywhere they are positioned on the same line. For example, 'run-of-the-mill'. It's set closed up (which means no space either side).

Soft hyphen.

The soft hyphen indicates where a word has been split at the end of a line. Arguably, there's very little use for the soft hyphen on the web when the user has so much control over the presentation of the type.

There are many grammatical rules associated with hyphens, which differ greatly from language to language. For British typesetting, and the English Language, I'd recommend getting yourself a copy of the Oxford Guide to Style (the old Hart's Rules).

The En Dash or En Rule

{title}The en dash is one en in length. It's slightly longer than a hyphen and half the width of an em dash. Em and en are typographic measures based on point size. An em is a equal to the size of the set type (eg. 12pt) and an en is half that.

  1. An en dash is used closed up in-between elements that show a range. Eg. Monday–Sunday, 1985–2005. It is also used when the end element is not known: Joe Bloggs (1984–)*.
  2. The en dash can be used to show the meaning of to and from. Eg. on–off switch.
  3. The en dash can also be used to join compound adjectives which include multiple words or hyphens already. In this case the en dash clarifies what is grouped with what. Eg. high–priority–high–pressure tasks.
  4. In Unicode, the en dash is U+2013 (decimal 8211). In HTML, the numeric forms are – and –. The HTML entity is –

The Em Dash or Em Rule

{title}The em dash, as it's name suggests, is one em in width. The em dash is perhaps the character that has suffered most over recent years. Frequently replaced by the hyphen, or the that relic from typewriter days, the double hyphen ( -- )**, I think it's about time we give this little fella the time of day.

Once again, there are differing grammatical usages depending on language. In British and North American typesetting there are a few simple rules:

  1. Use the em dash closed up in written dialogue to indicate an interruption. Eg. 'What a load of—', but his words were lost on her.
  2. It can also be used either side of an interruption—like this one—and is set closed up.
  3. In Unicode, the em dash is U+2014 (decimal 8212). In HTML, the numeric forms are — and —. The HTML entity is —.

It's worth noting that em dash usage is inconsistent, not only across languages, but also across house styles. The most common replacements are an en dash and the hyphen, both set with a space (or a hair space) either side.

* It's common practice in North American typesetting to use an em dash for this purpose.

** The usage of this is of course valid on a typewriter where, as with most monospaced fonts, the hyphens, em and en dashes all are similar length.

I want to thank Phil Wright for his help on this article. The man knows his type.

The next steps

When does print design matter on the web? When you use a print stylesheet of course. The next three articles will document production of a print stylesheet from a print design perspective.

Grid, measure, type size and leading, orphans and widows. The lot.

Typeface of the month: Gill Sans

Gill Sans lower case g'Gill Sans, is he mad?', I hear you cry.

Well, Gill Sans - as well as Helvetica - are perhaps the two typefaces I use the most. I have a love / hate relationship with them both, or rather with particular weights of both, but they are two typefaces which continue to surprise me with their beauty and versatility.

As we're all probably aware Gill Sans is a pretty standard font these days, used and abused as a result of being part of a default font installation on certain operating systems. Like Times New Roman, a lot of people have become tired of its expressive curves (yes, that's right, I did say 'expressive'). I'm hoping after reading this, at the very least, you'll look upon Gill Sans with fresh eyes.

A bit of history

Image showing Monotype's orginal poster for Gill SansGill Sans was designed by Eric Gill in the 1920's and issued by Monotype in 1928 to 1930. Eric Gill studied under the calligrapher and stonemason, Edward Johnston, at the Central School in London so therefore it comes as no surprise that Gill Sans is based on his teachers typeface for London Underground, Johnston Underground.

Due to it's legibility and its 'Britishness', Gill Sans has been adopted by many companies and organisations as their corporate typeface. Notable mentions are:

  • BBC
  • Royal Society of Arts
  • The Church of England
  • Network Rail

Not to mention the number of companies who have had typefaces designed which have been heavily influenced by Gill Sans.

The typeface itself and that horrible 'a'

Gill Sans is a beautifully designed typeface which, unfortunately, has suffered at the hands of software, and to a certain extent, its own popularity.

Image showing Gill Sans' basic alphabet

Gill Sans lower case aThe characters are hard, sculptured forms which clearly show Gill's education and artistic roots. There's the legibility of a serif face, balanced with the authority of a sans-serif. Gill Sans can seem friendly in its lighter weights, making it perfect for body text, and with its rounded letter forms and limited adornments, it's highly legible. The bolder weights are perfect for display or signage purposes, but then there's that 'a'.

If there's one thing about Gill Sans that puts me off is the lower case 'a'. Just look at it. Top heavy, unbalanced and well, just weird looking.

Live with Gill Sans for one year

Early on in my college days, when I knew nowt, one of my typography lecturers was having a bit of a rant about typefaces. His main gripe was that with so many fonts at our disposal, designers and especially students, are like kids in a candy store and generally, he said, it was to the detriment to the design.

'Learn to live with a typeface for one or two years, try to use nothing else but that face'. You can imagine the looks on our faces. However, due to corporate branding guidelines for the past three years I've been in that position in my day job. It was pretty tough to begin with, coming from a commerical company who specialised in branding with a 'new brand, different typeface this time' approach. Now, however, I sometimes struggle to use different typefaces when faces like Gill Sans and Helvetica answer the design problems so elegantly.

To wrap up. Classic typeface - overused and misunderstood - but next time you need to design a form, signage, or need to communicate something which is quintasentially British, then spare a thought for Gill Sans. 7 out of 10. (it would be 8, but that 'a'...)

Semantic Typography: Bridging the XHTML gap

In the Web Standards community we hear the words 'Semantic Markup' thrown around a lot as a concept—the right thing to do— but I know a lot of designers who are trying to learn this stuff are being confused by the whole 'semantic thing'.

It's a difficult task for a designer, who primarily thinks very visually, to relate to a concept like semantics in a document when all they want to do is create something.

After doing a ton of research over the past couple of weeks I've begun to notice links and patterns between typographic theory and Web Standards.

I'm going to keep this quite brief and hopefully practical from a design and development point of view.

First of all, I'll explain some of my thinking.

Typographic structure

In most documents there is a typographic structure and a hiearchy of elements, from letters up to chapters. Here's a list, which is by no means complete, that explains what I'm on about:

  • Words → Sentences
  • Sentences → Paragraphs
  • Paragraphs → Sections
  • Sections → Chapters
  • Chapters → Document

You could of course go more granular than this, but I think it illustrates the point.

From this you can see how, by looking closely at the content, that the language can be broken up into chunks, into bits of semantically functional elements. So, you could argue that:

  1. Documents have a conceptual structure
  2. Graphic structures can be made that reflect conceptual structures

This perhaps the key to successful typographic design. Making sure the graphical representation of the content matches the mental model of the reader, or conceptual structure stipulated by the author (or preferably both).

Bridging the XHTML gap

As I mentioned earlier, designers often struggle (in all the Web Standards malarkey) to make the connection between their design, the content and then the code. The code bit seems very abstract initially. Hopefully this next stage will help explain how the gap can be bridged painlessly.

We have our model for matching the semantics, or meaning, of our document to the design we create:

  1. Documents have a conceptual structure
  2. Graphic structures can be made that reflect conceptual structures

Now, add to that our step for XHTML:

  1. Documents have a conceptual structure
  2. Graphic structures can be made that reflect conceptual structures
  3. XHTML structures can be made that reflect conceptual structures


The graphic and XHTML structure of a document should reflect its conceptual structure.

Therefore our finished web page will:

  1. Be presented, typographically, to match the document's conceptual model
  2. The XHTML underlying the web page will also match the conceptual model
  3. The meaning, or semantics, of the web page will match that intended by the original document.

For the visually oriented amongst us...

I'm going to put this into pictures to help explain what I'm on about. If anything it might help me firm up this theory a bit.

So, let's put this in the realms of reality. Let's say you have a brief from a client, who happens to be an estate agent, to build a web site for him. Most of the content for that site will be house details. Currently he produces single sided documents with the house specs on and he wants you to build the bulk of the website using this information.

So, here's the house details:


As you can see, there's very little visual design been done to this document. The first task then is to establish the document's conceptual structure, its semantic elements, from there we can identify our typographic structure.


Once that is done, forgetting the design for the moment, we can (again, using the documents conceptual structure), label those elements with their corresponding XHTML tags.


The document conceptual structure is retained, we now have our XHTML structure (our semantic markup). Focussing then on the design we can make the typographic structure match the conceptual structure (still retaining our XHTML structure)


And there we have it. A typographic design, which has been tagged up with semantic XHTML, which retains the author's conceptual structure.

The benefits

The benefits of going through the process in this manner is that it's from a designer's perspective, there's less of a leap conceptually into the land of code where document structures are common place (OOP etc.) I've been following this model for a couple of weeks now and it works pretty well. It streamlines the process of assigning heading tags for example which have always been quite arbitrary in the past.

For those designers who are coming from a multi-disciplinary, or print, background and have trouble with this whole 'semantic markup' thing, please give this a go and let me know what you think. In fact designers who have been doing Web Standards for a while please give this a go and let me know how you get on with it. I'd be interested in knowing your thoughts.

Emigr? calls it a day

{title}This morning I received some sad news in my Inbox. After 21 years of being published, Emigr? magazine is finally calling it a day.

I don't really know where to begin when describing the effect Emigr? has on my path to become a designer. I'm sure I speak for a lot of designers when I say Emigr? deeply influenced my work throughout university - Not just in terms of how the magazine was designed, and the beautiful typography, but by the articles themselves.

Emigr? has attracted, over the years, some influential and intelligent contributors. It is these people, through this medium, that are challenging design at a fundamental level. Now that's gone, what's left?

Well, there's Eye, which is ok, although I've always felt that Emigr? had a broader editorial remit and therefore actually made it less of an industry journal and more of, well, a good read. Being a member, I also recieve the International Society of Typographic Designers journal, TypoGraphic, every quarter or so. Typographic is a bloody good read, especially focussing on the craft side of typographic design. It can be a little old skool at times, but if you get the chance, pick a copy up and judge for yourself.

So, there we have it, damn shame if you ask me. Better snap up those back issues quick. Where's my credit card....

Typeface of the month: Mrs Eaves

This is something I've been meaning to do for a while now. Every month, from now on, there will be a typeface of the month. They'll be chosen by me because either I like them, they're new, they're classics or I hate them. Should be fun. So, first up is quite possibly my favourite serif typeface: Mrs Eaves, designed by Zuzana Licko for the Emigr? Type Foundry.


Mrs Eaves is a revival typeface, a recreation of a classic, in this case Baskerville. Baskerville is a great typeface, although criticised, like a lot of serif faces designed at that time, for being too sterile - too hard. this, I feel, was a reaction to the poor printing processes and paper of the time. Times Roman (not 'New Roman') for example has hard serifs to allow for bleed onto poor qulity paper, therefore softening the serifs. Baskerville is no different in this respect. So, when Zuzana Licko set out to create a typeface inspired by Baskerville her main objective was to create a softer, more open typeface.

An aspect of Baskerville's type that I intended to retain is that of overall openness and lightness. To achieve this while reducing contrast, I have given the lower case characters a wider proportion. In order to avoid increasing the set-width, I reduced the x-height, relative to the cap-height. Consequently, Mrs Eaves has the appearance of setting about one point size smaller than the average typeface in lower case text sizes.

I think she achieved this and to my eye, a more feminine looking typeface (maybe I'm being influenced by the name there?). Mrs Eaves, when set in a large amount of body copy, is incredibly legible but, when compared to similar typefaces such as Caslon or Garamond, there is a feeling of lightness to the page, rather than the heavy appearance of the aforementioned typefaces.

Ligatures? Oh yes!

What makes Mrs Eaves stand head and shoulders above the rest is the Ligature Set available.


Mrs Eaves ligatures look superb when set at small or large sizes, either as body copy or headlines. they really add something very distinctive. Unfortunately, Mrs Eaves suffered the same fate in the late 1990's as Template Gothic did in the early 1990's - chronic, and often inappropriate, overuse. Shame really. I never stopped using it though - I even used it for my wedding invitations!

So, there we have it. A classic revival with some lovely ligatures. 8 out of 10.

Five simple steps to designing grid systems - Part 5

It's been a while, but this is the final part in my series 'Five Simple Steps to designing Grid Systems'.

Flexible vs Fixed. Which one to choose? Why choose one over the other? Well you won't find the answers to those questions here. What I'm aiming to do with this article is to investigate how the theory of grid design can be applied to a flexible web page.

Lets's start by briefly examining Fixed and Flexible, or Fluid designs.

They both have their merits.

Fixed width designs are, well, just easier to produce. The designer has control over the measure, and therefore the legibility (until the user increases or decreases the font size that is).

Flexible width designs scale to the user's resolution, and therefore the browser window. There is less empty space, typically at the side of fixed width designs.

However, they both also have the down sides such as fixed layouts generally scale badly and flexible layouts tend to look very wide and short. But, this article is not about the good and the bad and it's not really the place for that type of discussion, that argument is going on elsewhere and will continue to do so for quite some time.

Flexible grids

As discussed the first few parts of this series, grid system design deals in fixed measurements - the media size, the type size and ultimately the grid size. They are all fixed. So, along comes the Web and challenges theory which has been around for generations. All of a sudden the reader can resize the media, they can change the font size, they can do all this stuff that designers didn't have to think about before. Designers have had to adapt, both to the technology and to the opportunities that media offers.

I've been giving flexible width a lot of thought over the past few weeks in preparation for writing this article. I can see the merits in both, but I've been trying to base my recent thought within the realms of purest grid theory. How does that theory translate to flexible grid design? and I think the answer is, quite well actually.

Adaptive Grid Systems

Ideally grid systems should be designed around the type size. Column widths, and therefore the Measure, should be constructed in such a way to maximise legibility based on the number of characters (you can read more about that in my Five Simple Steps to Better Typography). This is all fine if the units of measurements are fixed, but what if they can change? But what does that mean?

  1. The user can change the font size
  2. The user can resize the browser window
  3. The user can change their resolution

The user can of course do this with all design, fixed or flexible, but the key to flexible grid systems is the grid must adapt to those changes. After a bit of thought I think the key components of an adaptive grid are:

  1. The grid elements adapt to the user's changes, and
  2. The grid must retain it's orginal proportions

I've never been comfortable with the desciptions of flexible grids - flexible, elastic etc. What I'm trying to convey with Adaptive Grid Systems or Adaptive Layouts is the thought process behind the grid design which reacts to the user's choices. I think it appeals to the purist in me! ;)

It's a question of ratios. Again.

In the first two parts of this series, I talked about ratios, both rational and irrational, in the construction of grid system design. But, for those who haven't read them, or have forgotten, here's a quick overview.

Grid systems can be constructed from ratios. Simple ratios such as 1:3, or 2:1 are called rational ratios. More complex ratios, such as those based on the Golden Section (1: 1.618) , are called irrational ratios.

Ratios are just the job for constructing adaptive grid systems because they are independent of any unit of measurement. They are just a ratio to the whole, whatever the whole may be. This whole, be a browser window or whatever, can change and therefore so does the ratio or the grid.

Let me put this into practice now with a working grid.

Divine measurements

If you've been following these articles, you should know by now that I like to start simple. Following on from several articles I've written about the golden section, I'll continue with that and construct this adaptive grid using the Golden Section which is an irrational ratio - 1:1.618.

So first off we construct a simple two column grid system with the content areas being defined by the Golden Section ratio.


Getting the right units

In order for a grid to be adaptive, we have to use scalable units of measurement such as 100% or Ems. Just a reminder: An Em (pronounced 'm' NOT 'e, m') is a typographic measurement equal to the point size of the typeface you are using. We also use percentages.

To give us our column width I convert the ratio's to percentages, which gives us 61.8% for the main column and 38.2% for the right column.


That's our grid as determined by percentages. Pretty easy really. Now, on to the implementation.

Constructing the grid in CSS

Before I move headlong into implementing this using CSS, I just wanted to point out that this tutorial is about grid design and not about web standards. XHTML and CSS just happens to be the tools I use to realise this design. You can of course use tables if you want (but you'd be wrong!). Oh, and I'm just not clever enough to stuff this example full of hacks for IE this, Mac that, weird linux browser version 0.6.1 etc. etc. This example is a Best Case Scenario example. If you want to add all that stuff to it, let me know and I'll add it. Like I said, it's the grid that interests me. Disclaimer over.

Oh, and there's a small change to the percentages of the columns to get round some browser bug or another, it's basically a couple of percentage smaller so the floats work correctly.

For those who can't be bothered going through this code, here's the example.

Here's the CSS, including all the global stuff such as links, typographic stuff and general body stuff which is applied to a pretty basic XHTML structure.

body {
margin: 0 auto;
padding: 0;
font-family: "Lucida Grande", verdana, arial,
helvetica, sans-serif;
font-size: 62.5%;
color: #333;
background-color: #f0f0f0;
text-align: center;

* {
padding: 0;
margin: 0;

/* Make sure the table cells show the right font */
td { font-family: "Lucida Grande", verdana, arial,
helvetica, sans-serif; }


a {text-decoration: underline; padding: 1px; }
a:link { color: #03c; }
a:visited { color: #03c; }
a:hover { color: #fff; background-color: #30c;
text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
font-family: helvetica, arial, verdana, sans-serif;
font-weight: normal;

/* approx 21px*/
h1 {
font-size: 2.1em;
margin-top: 2em;

/* approx 16px*/
h2 {
font-size: 1.6em;
margin-bottom: 1em;

/* approx 14px*/
h3 {
font-size: 1.4em;

/* approx 12px*/
h4 {
font-size: 1.2em;

/* approx 11/14 */
p {
font-size: 1.1em;
line-height: 1.4em;
padding: 0;
margin-bottom: 1em;

I then add the page structure css.

The columns are wrapped with a container div (called 'container'), this is defined as being 90% wide, with a minimum width of 84 em. What's that about? Well I got that number by doing this.

As mentioned earlier, our ideal minimum width for the measure is 52 em. This is the width of our main column and as determined by the Golden Section, the overall column widths combined is 1.62 multiplied by 52 em, which is 84 em. The right column is therefore 84 em minus 52 em, which is 32 em. Converting these to percentages gives us 62% and 38%, which is what you use in the CSS for each column.

There is also a minimum width of 84 em applied to the overall container, which when the user resizes the text, maintains the ratios.

Here's the CSS for the columns:

#container {
margin:0 auto;
text-align: left;
min-width: 84em;

#contentframe {
margin: 2em 0 0 0;
padding: 2em 0;
width: 100%;
text-align: left;
float: left;
border: 1px solid #ccc;
background-color: #fff;

/* 2 column layout c1-c1-c2 */
.c1-c2 #c2 {
float: right;
width: 36.2%;
padding: 0 0 0 1em;
margin: 0;

.c1-c2 #c1 {
float: left;
width: 61.8%;
padding: 0 0 0 1em;
margin: 0;

So, there we have it. An Adaptive Grid System based on the Golden Section.

Please feel free to abuse the hell out of this layout. Push it, stretch it, batter it into submission. Please let me know though what your findings are. Are Adaptive Layouts the way forward in flexible grid design for the web. Like I said, I'm interested in the grid, not necessarily in the implementation.

That wraps up another series

Well, there we are. Another series finished with. Hope you liked it, and thanks for all the comments and feedback. I've got a feeling this one's going to be interesting...

This is the fifth, and final, installment of this "Simple Steps..." series.

  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid

Five simple steps to designing grid systems - Part 4

Layout seems to be a hot topic at the moment, mostly prompted by the ALA redesign and the numerous discussions of the choice by Jason and the ALA team to go 1024 for a fixed width. I'm not going to go into my thoughts on ALA in too much depth here, there's been a lot of that already, but it seems like the right time to get this article out.

So, fixed width grid design for the web. What is it, how do we do it and how do we implement it?

For the purposes of this article, I'm going to be focussing on the theory of creating the grid rather than the implementation. I did mention in the last series that I would cover implementation using CSS, well I'm not going to. There are just so many resources and books available telling you how to create the CSS layouts you need—I'll touch on it, but I won't be going into too much detail.

The Measurements

A fixed grid for designing for the web is as close a translation from traditional grid design as there is. The designer is using fixed measurements, pixels mostly, to construct the grid and to position elements within the grid structure and a canvas which is based on a fixed size. See, everything is fixed.

The Canvas

Now things start to get a little less concrete. The canvas size for print design is determined by the media size - paper, signage, envelope, whatever. The canvas size for fixed grid design on the web is normally determined by the browser window size, which is in turn determined by the user's screen resolution. These are not fixed. Therefore a designer should design to the minimum requirement, which is normally the average screen resolution for the majority of users.

I'm not going to quote figures here, because I'll probably be wrong, but I don't think I'm wrong in saying that 800x600 pixel screen resolution has, for quite a few years now, been the screen resolution to design to.

As I mentioned, with the relaunch of ALA, and sites like Stylegala, there has been a renewed discussion about fixed width grids for 1024. So, what's my opinion on this? Well, in terms of the actual grid design it really doesn't matter what size the canvas is. What should be determining the decision to go 1024 is research into user's screen resolutions. If the user base of a certain site is shown to be using resolutions of that size and above, then a decision to use that size to design to is a valid one.

However, as some people have noted, even if you do run at a higher resolution than 800x600 does that mean your browser window occupies the entire screen? The answer to this is, generally we don't know. I personally think that not only is it platform specific, but it's also down to the individual and their experience level. Maybe more experienced users on a PC don't use their browser's at full screen. From my experience running user tests with a wide range of people, is that more novice users, particularly on a PC, run a browser at full screen because that is the default, whereas on a Mac the default isn't full screen.

What I haven't touched on yet is the device you are using. This of course could be a PDA, a mobile phone or a computer. Grid designs should be looked at for each of these devices.

That is all I'm going to say on the matter for now though. Once the final part in this series is up, fluid grid design, there can be a more informed discussion I think.

Nice, easy dimensions and thinking modular

Without further a do, let's get into this grid design.

As discussed in the rest of this series (part 1, 2 and 3), we will begin our grid design by 'shaping the page.

For the purposes of this simple (I am trying to keep it simple) article, I'll be using 800 x 600 as my default resolution to design to. For many years I've designed to a base minimum (based on 800 x 600) of 760px x 410px (410px being the fold). Don't ask me where I got these figures from, but it just stuck and seems to be ok for most platforms and browsers. Oh, you can of course go smaller than this and don't pay too much attention to the fold, in my experience most users don't have a problem with scrolling.

We begin by applying ratios to this canvas, in the same way we've done with designing grid system for print. The example I'm using for this tutorial is my own site, which uses a fixed grid and sits happily below 760px wide.


The design for my site is built around around a very simple grid system. Once I had my grid, I used photoshop to comp together the designs positioning any elements exactly on the grid lines. The grid was designed intially for a content and navigation area based on the Rule of Thirds (which is roughly approximated around the Golden Section), the dimensions of which are 250px and 500px respectively. The content area is then subdivided into two 250px columns.

See, nice easy dimensions. However, this only deals with horizontal measurement. As discussed in the other grid articles, vertical measurement is also important, but this is where we can run into problems with designing even fixed grid systems on the web.

When user's change the type size, elements move vertically (if we've fixed the horizontal widths). The vertical measurements that we've crafted suddenly disappear. Now, in the purist's eye, this is a real problem but it is something we have to design to. We really can't do anything about it when designing with fixed units such as pixels which can't be resized by the user.

Just a word about Gutters

Gutters are the gaps in between columns. They are there so text, or image, from different columns don't run into each other. In grid system design sometimes, depending on what theory you read, gutters are seperate to the columns. This creates practical problems for us when designing grid systems on the web because of the way we create the columns.

Generally the columns we create, using Web Standards, are 'divs' which are given widths and positioned and styled using CSS. So, ideally, if we're creating these columns, we don't want to be creating seperate ones for the gutters. We therefore deal with gutters as part of columns and they are implemented using padding, or creating margins, on elements positioned within them, or sometimes the column divs themselves.


Creating the design

The thing about designing to grids is that in order for the grid to work you must consistently align items on the grid lines. I know that sounds totally obvious but designing to strong grids means you have to take a step back from what you think the design should look like (and then adding things to the grid to suit), and instead concentrate on creating a harmonious design within the framework you've created.


The bulk of the design work, if you exclude sketching with a pencil, is done in Photoshop. First of all I take great care in drawing the grid accurately, to the pixel, and then I overlay content elements ensuring the alignment is precise.

From Photoshop to the browser

As I stated at the beginning of this article, I'm not going to concentrate too much on how you actually build a multi-column CSS layout, there are just so many other great resources on that topic.

One of the most useful 'tools' for creating pixel-perfect grid systems for the web is Khoi's superb idea of using a grid as a background-image element on the body tag. To summarise: Using the grid I designed in photoshop, I save it out as a gif and then apply that to the background of the body tag. This provides me, throughout the build of the site, the grid so I can align all the content elements accordingly.


As you can see from the diagram, this makes production of the design incredibly easy when you have a visual reference rather than having to remember your grid or interpret a sketch.

Implementation using Web Standards

This really could be a series all on it's own. Implementation of a multi-column grid using CSS is pretty standard practice nowadays, but there are some very useful resources out there which I have used for the past 18 months or so.

Doug Bowman at Stopdesign has pioneered a technique for producing flexible column layouts using CSS and controlling them by giving a class to the body tag. This is the techique I've used throughout this site. This means if I create a new section of the site or simply decide one day that I'd rather have my navigation on the right, all I have to do is change the class on the body element and everything switches over. Using this technique, along with Khoi's technique for sense checking the design against the grid, has been an excellent way to produce tight, grid layouts for me, give it a go and let me know what you think.

Up next: Fluid grid systems for the web.

Timely? Yes. Complicated? Yes, but they don't have to be. Fluid, or flexible, grid systems have a rightful place in grid system design for the web but they come with their own particular set of challenges. In the next installment I'll be having a look at flexible grids using relational measurements and also tying the grid design closer to the typography rather than the browser - flexible from a type perspective, rather than a browser perspective. Stay tuned.

The series

This is the fourth installment of this "Simple Steps..." series.

  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid

Five simple steps to designing grid systems - Part 3

The third installment to this series is going to be a little different. The previous installments have been talking through some of the basics of grid construction using ratios as the primary device. They've also dealt with grid construction for print media. Unfortunately, as designers for web media, we don't have some of the luxuries as our print designer collegues.

Rather than go through tutorials (I'll be covering these in the last two installments), I'll be using this installment as a platform to discuss some of the challenges and rewards of designing grid systems for the web.

A whole load of considerations

Designing grid systems for print is considerably more straight forward than designing grid systems for the web. First off,in print, the designer has a fixed media size - the paper size (or packaging, poster, whatever). Let's say a print designer has designed a magazine. The reader of this magazine can't suddenly increase the font size if they find it difficult to read - well they just move it closer to their eyes I guess. This is just one consideration, there are more but I'm sure you get the point.

So, that's media size. On the web you have other considerations such as the browser, the OS platform, the screen size and the actual devices that web sites can be viewed on, from PDA's and Mobile's to assistive technologies such as screen readers. How do you design a grid for all of this? It's a really good question and I'm not claiming I have the answer.

In an ideal world

We all know about the problems with websites rendering differently across different browsers, platforms, devices etc. But, just for a moment, let's forget about that.

Designing a grid for the web should not be difficult, in fact, it shouldn't be any different from designing a grid for an media. As discussed in the previous parts of the series, you can construct a grid in the same manner for screen as you do for print. Base it on ratios, experiment with form and white space etc. Use pixels as your base measurement and go from there in the knowledge that your design will look exactly the same in every browser. After all, you, the designer, knows best for your reader right? You know they want light grey, 10px verdana with a measure of 600 pixels.

In the real world

Good designers for the web know that the users who use their sites may want different, and know, with the web, they have the power to change things. The designer has lost, to a degree, the ability to control. For a lot of designers (including me), this has been a tough transition. We're taught for years to create the delicate balances of white space, the manicured typography and delicate colour palettes, all designed to create harmonious designs which do their job very well.

Then some short sighted user comes along and increases the text size... and... and... totally breaks your design.

I think you get the idea. We can't be upset when the user wants to change something like the text size. What we can do is design grid systems to adapt to those changes.

Not just columns

Over the past couple of years, coupled with the increase in CSS based sites, we've seen a rise in certain grid configurations which are all based on the amount of columns. 2, 3, 4 column layouts - float this, position that etc. Why, even this site falls into the '750 px, 3 column' category. These grids have quickly become a convention, and for good reason too. They are quick to create, fairly stable across many platforms and don't degrade to the same degree as table based layouts. This is all good. What isn't so good though is the general lack of understanding of grid systems when perhaps the question on most designers lips when they sit down to begin a design is, 'how many columns should I have'. This is not grid system design.

Grid systems for the web

The next two installments of this series will go through details of creating considered grid systems for the web and the implementation using CSS. I thought it would be useful to just go through some of the considerations before hand.

The series

This is the third installment of this "Simple Steps..." series.

  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid

Typography - a dying art form?

I received an email from today from this guy called Larry. He asked me if I thought typography is a dying art form. I'm sure he won't mind, but I thought it would be quite nice to get the opinions of other people as well to form a more general consensus. So, I'll kick it off.

I don't think typography is a dying art form, I think it's an evolving art form. In fact I'm not sure typography is an art form at all. It can be I guess, but in it's purest sense it's just part of the solution, part of graphic design.

As a member of the ISTD I still see a lot of enthusiasm and passion for typography. In some sectors of the industry, good typography is on the incline rather than the decline. One of these sectors is web design. If you compare where we were just a few years ago and where we are now, generally things have improved. That's not to say there's bad typography - there always will be - you have to have the ying with the yang right?

Anyway, in a nutshell. No I don't think it's dying, it's just changing and as we all know, some people don't like change. Some important things are being lost with the evolution, but that's just part of evolving - getting rid of dead wood. I don't think it's an artform generally, although it can be in some circumstances.

What are your thoughts?

Five simple steps to designing grid systems - Part 2

In part one of this Simple Steps series I talked about how to use a simple ratio, that of the paper size you are using, to create a symmetrical grid on which to create your designs. This, the second part in the series, will deal with other ratios and how they can be combined to create more complex grid systems.

Relating to grid systems

I've talked a few times about using the Golden, or 'Divine', Section in the grid systems you design. So, before you continue I suggest you read the background in this article and my article in Design in Flight. For those who don't want fork out your hard earned cash on the DiF article, I'll summarise:

The Golden Section is a ratio which is evident throughout the universe as the number Phi. You can use this ratio to good effect in design by making sure that elements of your grid conform to this ratio. Using the Golden Section can ensure a natural sense of correct composition, even though it is based in mathematics it will 'feel' right.

This is an important point and has been argued and debated for ages. Aesthetics can be measured and more importantly can be constructed. If you want something to be aesthetically pleasing there are steps you can take to make sure it is going in the right direction. Now I'm not saying that 'follow these rules and you will create something beautiful'. What I am saying is that by following a few of these guidelines can go some way into creating something compositionally balanced, which will inherently be more aesthetically pleasing.

Composition can make things more usable

This is a theory that exists called the 'Aesthetic Usability Effect'. I have written about this as well in the past, I find it a really interesting theory. This theory suggests that things which are designed to be beautiful are inherently more usable as a result. It is an interesting theory and can certainly challenge the usability field, which is often tarnished with the 'ugly brush'.

Composing grids using theory and balanced ratios (such as the Golden Section), which in turn enable the creation of beautiful, balanced designs. These designs then have a quality which will make them more usable, according to the theory. Perhaps I'm labouring the point here, but in short:

Well designed grid systems can make your designs not only more beautiful and legible, but more usable.

Putting it into practice

As in the first article I'm going to be desiging this grid in context. For those of you who are primarily web based I'm afraid this is going to be another print example, but that doesn't mean this theory can't applied to web. It can of course be applied to lots of different medium, from architecture and interior design to product design and art, you just have to apply it to a different 'canvas'.

So, as in the DiF article the brief is to design a book. Unlike the first article in this series, I'm going to be applying the grid to a double page spread rather than a single page, this is called an asymmetrical grid as opposed to the symmetrical grid I designed in the last article.

Shaping the page

For this grid, we're going to use the ratio of the page to define the main text, or content, area of the pages. There's a very simple way of reducing this page size down to make sure the ratio is correctly placed and balanced. See diagram.


We now have an area, shown in red, in which to construct the grid.

Applying the Golden Section

Now you've read the other articles you will see that applying the ratio to this area is pretty straight forward. The area is divided using Phi which gives us two columns, A and B.


Creating the system

So, we've got the columns, we now need to flesh out the grid to be able to cope with the different content and page types. First off, we extend the lines of the content area and the columns.


We then apply a horizontal rule cutting across content area creation lines. I call these 'hanging lines', not too sure what the correct terminology is. But anyway, the content 'hangs' from these lines giving us consistency throughout the book. It gives the reader a line, in the same place, to rest their eyes on page after page.


Using the extended lines we can then add areas for the access structure of the book—folios etc. These typically sit outside of the content area, usually with plenty of white space around them, as to show that they are different 'types' of content.


We can then add various designs to this grid comfortable in knowing that the individual elements of the design—text, images, access structure elements—will all have a relationship to each other and to the book size.

Relating to grid systems

Creating grid systems in this way—using ratios to create related lines on which to construct composition—ensures a balanced grid.

I'm afraid it isn't an exact science though. A lot of grid design is experimentation with ratios, it's experimentation with using white space and elements of content such as photographs and text. It's also about conventions. Don't reinvent the wheel needlessly, study the conventions used in magazines from all sectors—from architecture to nursing (seriously, some magazines from unexpected professional sectors have fantastic grid designs).

What I'm saying is, have a play with grid design. Just because I'm talking about ratios, subdivisions and modularisation, doesn't mean designing grids should be dull. Have a mind on the end product, but not at the expense of the process of designing your grid.

The series

This is the second installment of this "Simple Steps..." series.

  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid

Five simple steps to designing grid systems - Part 1

The first part of this Five Simple Steps series is taking some of the points discussed in the preface and putting it to practice.

Ratios are at the core of any well designed grid system. Sometimes those ratios are rational, such as 1:2 or 2:3, others are irrational such as the 1:1.414 (the proportion of A4). This first part is about how to combine those ratios to create simple, balanced grids which in turn will help you create harmonious compositions.

Starting with a blank canvas

It's always easier in these kinds of tutorials to put the example in context, in some kind of real world scenario. So, this is it. You've got to design a programme for a gallery exhibition. You know you want the size to be A4. You also know that there are going to be photographs and text, and the photographs will be of varying size. There you have it - your blank canvas.

Subdividing ratios

The grid system we are going to design is a simple symmetrical grid based on a continuous division of the paper size in the ratio 1:1414. Using the paper size as a guide we can retain the proportion throughout the grid, this will give our elements within the design a relationship to one another, the grid and the paper size.

This is one of the easiest ways to create a balanced grid. By using the size of the paper as a guide we can divide using that ratio to begin creating the grid. You can see this through diagrams 1 - 6 that we begin by simply layering division upon division to slowly build up the grid.



Diagrams kindly updated by Michael Spence

Getting creative

Many have said grid systems can stifle creativity, but I disagree. Grid systems can facilitate creativity by providing a framework and already answer some designers questions such as 'where should the folios go', 'how wide should the measure be?' etc. A well designed grid system will go some way to answer these questions and more.

So, we have our grid. We can now begin to experiment with type areas, shapes and composition. We can explore how type and image will work together on the various types of pages our publication will have.


Diagram 7 shows the text area with the first elements of the access structure - running heads and folios. Diagrams 8 and 9 show how adaptable the grid is to various design options.

Short but sweet

A simple step to begin with. Next we'll go onto to more complex ratios, such as the Golden Section, and combining multiple ratios across spreads instead of single pages.

The series

This is the first installment of this "Simple Steps..." series.

  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid

Five simple steps to designing grid systems - Preface

Following my article in Design in Flight I've received countless emails to elaborate, in some way, on how to correctly design grid systems. It's quite a complicated field and so distilling it into 'Five Simple Steps' has proven to be quite tricky, so much so that I thought I needed to write some sort of preface before we get on to the first part.

What is a grid?

Before we even begin to tackle designing grid systems we need to have a basic understanding of what they are, why we use them and where they came from.

In the context of graphic design, a grid is an instrument for ordering graphical elements of text and images. The grid is a child of Constructivist art and came into being through the same thought processes that gave rise to that art movement. Clear links can also be drawn between the Concrete-Geometrical art of the Zurich school in the 1930's and several notable artists of this movement made important contributions to typography through their fine art.

It was around this period that the grid system moved from the domain of art and into one of typography and commercial design.

It's about mathematics... mostly

First of all when talking about grid systems we have to mentally separate form and function. We have to think about aesthetics and proportions as a result of considered construction. This can be quite tricky for designers who have been schooled in the 'you'll know it's right when it feels right' school of composition. But as I've written about before, feel is an emotional reaction to construction, to mathematics.

Ratios and equations are everywhere in grid system design. Relational measurements are what defines most systems, from simple leaflet design to the complex of newspaper grids. To design a successful grid system you have to become familiar with these ratios and proportions, from rational, whole-number ratios such as 1:2, 2:3, 3:4 and those irrational proportions based on the construction of circles, such as the Golden Section 1:1.618 or the standard DIN sizes 1:1.4146.

These ratios are ubiquitous in modern society, from the buildings around us to patterns in nature. Using these ratios successfully in a grid system can be the deciding factor in whether or not a design, not only functions, but has aesthetic appeal too.

What is a grid system?

A grid system is a grid design which has been designed in such a way that it can be applied to several different uses without altering it's form. An example of this would be a grid system for a book whereby you have many different page types - part-opening, title, half-title etc. - and would need only one grid to use on all the page types.

The danger with designing a system to cope with many different varients is complexity. When you add complexity, you decrease usability and there is a danger the grid would become so complex the designer can't use it. This thought should always be running through your head when designing a grid system - keep it simple, but comprehensive.

Why design a grid system?

It is often said of grid systems that they limit the scope for creativity or leave no freedom. Karl Gerstner, one of Switzerland's preeminent graphic designers, was aware of this conflict with the designers adoption of grid systems.

The typographic grid is a proportional regulator for type-matter, tables, pictures and so on. It is a priori programme for a content as yet unknown. The difficulty lies in finding the balance between maximum formality and maximum freedom, or in other words, the greatest number of constant factors combined with the greatest possible variability.

The grid is a regulatory system which pre-empts the basic formal decisions in the design process. it's preconditions help in the structuring, division and ordering or content. I'm not saying a well designed grid will solve all of your compositional problems, far from it, but it goes some way in creating a coherent structure in design which in turn creates the aesthetic values all of us are after in our designs.

The Five Simple Steps

You should now have a clearer understanding of what grid systems are, where they came from and what they should do, if designed well. Within the next Five Simple Steps, I'll go through the elements which make a successful grid system and how these elements can be brought together to create simple and complex systems which can be applied to a number of media outputs.

The first in the series will be 'Combining Ratios'

  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid

Five simple steps to better typography - Part 5

{title}The final part in this series, I'm glad to say is a little more cut and dry than the last in the series. It's more about historical typographic theory but with a simple, practical guide to ensuring a balanced use of typeface weights.

Typeface weight, and the choice of weight, is perhaps one area of typography that to most designers is simply a matter of choice. That choice is dictated by answering a design problem which is aesthetically, or content, motivated. What many designers do not realise is that there are rules which should govern the choice of weight - a typographic pecking order - which when followed, aids the designer's typesetting and can produce stunning results.

Solving the design problem

Let's start by addressing the root of the decision to set type in different weights - solving a design problem. I mentioned that this problem stems from two main areas:

  1. An aesthetic problem. This is where the designer sets type differently to add style or solve some kind of visual or compositional issue.
  2. A content problem. The designer needs to set a different weight because the content dictates it. The language of the content may dictate special typographic treatment, the tone of voice may be different, it may be a quote, it may be a structural device such as folios.

There may be other reasons as well, but I believe these are the main cause.

First off a bit of history

I like these history bits, they really are informative. To research where the rules came from and why they should be followed goes a long way to ensuring they are used.

Uppercase and Lowercase, and the relationship between them, have been around for over twelve hundred years. Small Caps, ornamentals and arabic figures were early additions to the roman.

Italics were a strange bunch to begin with. They didn't associate themselves with lower case roman, as we usually see today, but with roman caps and small caps. It's only in recent times that usage of italic, within roman, was deemed to be typographically correct.

Some of the newest additions to the weights of typefaces came with bold, and condensed, as late as the early nineteenth centry. These were generally used in place of italics and small caps. Bold typefaces have now become a standard way of differenciating in typesetting, particularly on screen where italics are a little more difficult to read.

A type family with all of these weights forms a balanced series which is no only historically accurate but creates harmonious typography. If the setting of copy was reversed, so italics were used as body copy, Caps was used as pull-quotes and bold was used as access structure (folios, running heads etc) not only would the body of text look terrible, it was also be very difficult to read.

The practical bit

So, we have these weights of a typeface and they all relate to each other, and there's a hierachy. How is this practical in everyday use?

First off we need to show the different weights and how they are related to each other. Then we categorise them into a hierachical list, from primary to sextary. This is shown in the diagram below.


Execution of diagram inspired by Robert Bringhurst's 'Elements of Typographic Style'

This list, as it stands, may not be that useful. It does illustrate however the relative importance of certain typeface weights. It comes into practical use in the following diagram.


Execution of diagram inspired by Robert Bringhurst's 'Elements of Typographic Style'

Here you can see some of the weights set out and joined by lines. The red lines represent the core typeface family. Some typographers would argue that without these core weights, typefaces are reduced to being used for titles only. I'll leave that one open for debate!

The other lines show how designers can move along the lines when setting type. for example, if a designer has set type in roman and they need to add emphasis to a certain point in the copy. They would follow the lines to any on the second line - bold lower case, small caps, full caps, italic lower case or sloped small caps. If they were to jump to, say, bold italic lower case, or a more extreme example, bold sloped caps, the effect would be horrible.

If the designer is setting type in bold lower case they could go on to add bold caps, or bold italic lower case without much bother. You get the idea?

So, following this simple roadmap can ensure that your typography adheres to some simple hierachical rules and as a result your typography will take on a harmonious feel. don't just take my word for it though, set some type, use the rules and you'll see.

A final word

I've enjoyed writing this series. What initially started as a quick five tips turned into something a little more involved and has sparked quite a lot of debate. I'm pleased it's bringing traditional design stuff into the web standards realm, there really is so much more we can learn and put to good practice in this particular corner of the industry.

Typography is one of those things that has unfortunately suffered from the advent of technology (and i'm not just talking about computers here). Designers on the whole have divorced themselves from the letterforms and the setting of them. As a result they've forgotten, or not been made aware of, the simple typesetting rules which were core to the old system of printers apprentice.

Typography to me is about design. It's about words and the conveying of meaning. It's about setting words that people read. A certain amount of it is creative, a certain amount is expression and aesthetics, but mostly it's about people reading stuff. Do them a favour and don't make it difficult.

This is the fifth, and last, installment of this "Simple Steps..." series.

  1. Measure the measure
  2. Hanging punctuation
  3. Ligatures
  4. Typographic Hierarchy - size
  5. Typographic Hierarchy - weight

Five simple steps to better typography - Part 4

{title}I've struggled a bit with the latest addition to this 'simple steps' typography series. Mostly because it's not so simple and it's a bit more of a grey area than the previous three articles.

Typographic hierarchy, put simply, is how different faces, weights and sizes of typefaces structure a document. Some of these hierarchical devices are well-established conventions, such as cross heads and folios, so I'm not going to touch on them in this post. To keep it simple I'm going to concentrate on two things - size and weight. The first of which is size.

First off a bit of history.

Early typographers created their manuscripts by using one font, one size, one colour mostly, interspersed with hand painted illuminations. The products of such typographers has a flat quality to the information, almost mesmeric.

Take a look at some early manuscripts and the typefaces themselves, especially the older Black letter styles, appear similar - m's look like u's, y's look like p's and so on. As beautiful these manuscripts are, other than the illuminations, they are devoid of structure within the content. There is no typographic hierarchy.

Evolution of the scale

In the sixteenth century, European typographers developed a series of typeface sizes, a scale (the musical analogy is a good one - stick with me). As shown in the diagram they are sizes we're are all familiar with. Six point through to Seventy-Two point type has remained pretty much intact for over four hundred years. In fact, they are the default font sizes in many applications (give or take a few.).


So, what's so special about these sizes? Well, because this scale of sizes has been used for centuries, if set correctly, type set in this scale will appear more pleasing to the eye and therefore more legible.

An interesting point. Originally the sizes in the scale were referred to by name instead of by point size. here's a few examples of some of the older names:

  • 6pt: nonpareil
  • 7pt: minion
  • 8pt: brevier or small text
  • 9pt: bourgeois or galliard
  • 10pt: long primer or garamond
  • 11pt: small pica or philosophy
  • 12pt: pica
  • 14pt: english or augustin
  • 18pt: great primer
  • 21pt: double small pica or double pica
  • 24pt: double pica or two-line pica
  • 36pt: double great primer or 2-line great primer
  • New software, and modern methods of typesetting, has allowed character heights which fall outside of, and within, this scale. this freedom has resulted in a typographic free for all, allowing designers to pick sizes which may not be related to one another as according to this scale. Is this a bad thing? I'd argue that it is.

    Let's go back to the music analogy. It's like composing a discordant piece of music. Clashing notes, clashing type. but, if it's clashing you're after, that's fine. If, however, you're after harmony and melody that stands the hairs up on the back of your neck, stick to the notes in the scale folks!

    Application of the scale

    So let's put some of this into practice. I'm going to be using this very website as an example.

    I started off designing this website with something very specific in mind - typography. I wanted to make sure this site would work by a simple, clear hierarchy of typography set against a simple modular grid, with plenty of white space on which to 'hang' a number of design elements (in my portfolio for example).

    Following the typographic scale described in the previous section, I set about applying this to the CSS based design.

    These are the elements for the typographic hierarchy. Note, I'm using pixels as my base measurement, not points. And yes I do know the pixel's are different on different platforms.

    The thing about type sizes in CSS is if you want to remain true to typographic tradition, you have to specify em's or percentages based on an absolute unit of measurement, in this case a pixel. If you use the relative - small, x-small etc. - there aren't enough declarations to complete the scale and the sizing of each increment is fixed at 1.5 going up the scale or 0.66% going down. (apparently this depends and was also changed to somewhere between 1.0 and 1.2 in CSS2.) But anyway, I don't want to get fixated on the best CSS approach to this. This article is about typography.

    These are the pixel sizes for my main headings:

    1. 11px /16.5px - Body copy and leading.
    2. 24px - Main heading used as section headings on the Homepage, Portfolio homepage and entries.
    3. 18px - Headings for journal entries and portfolio subheadings.
    4. 16px - All navigational and content tertiary headings.
    5. 13px - All other headed elements.

    This would give me the following styles visually


    These translate into the following way into CSS, using percentages for scaling purposes.

    1. 11px /1.5em - Body copy and leading.
    2. 218% - Main heading used as section headings on the Homepage, Portfolio homepage and entries.
    3. 164% - Headings for journal entries and portfolio subheadings.
    4. 145% - All navigational and content tertiary headings.
    5. 118% - All other headed elements.

    So, within my CSS file, it looks like this:

    body {
    font: 11px/1.5em "Lucida Grande";
    h1, h2, h3, h4, h5, h6 {
    font-family: helvetica, arial, verdana, sans-serif;
    font-weight: normal;
    h1 {
    font-size: 218%;
    h2 {
    font-size: 164%;
    h3 {
    font-size: 145%;
    h4 {
    font-size: 118%;

    Using these values for the size of the headings creates a natural relationship between them. The typography is harmonious as a result and it only took about five minutes to implement. Not long at all.

    Size really does matter

    It really does. If you take anything away from this series, please let it be this. Stop and think about your type sizes, just for five minutes. Plan them, don't just choose whatever you feel like from the dropdown in Photoshop. Make sure they are 'in tune' and then apply the theory to whatever medium you are designing to.

    Next up the series we follow on from this with weight.

    The series

    This is the fourth installment of this "Simple Steps..." series. Next up we have Typographic Hierarchy - weight

    1. Measure the measure
    2. Hanging punctuation
    3. Ligatures
    4. Typographic Hierarchy - size
    5. Typographic Hierarchy - weight

    Five simple steps to better typography - Part 3

    {title}I'm pleased this series is turning out to be so popular and it's somewhat confirmed what I suspected. A bit of a thirst for simple typographic design theory.

    As I've been writing this series i've deluged by email and comments from people agreeing, disagreeing, asking for more information etc. What's great is designers are thinking and talking about typography again. Designers are questioning typography and not just letting the font and the software do the work. It's nice to hear. But enough back-slapping Mark, on with the next in the series...

    The third installment of this series is dedicated to just one typographic element - Ligatures.

    Ligatures are combinations of letters - some of them are functional, some are decorative. They are more commonly seen in serif faces, although ligatures in sans-serif faces such as Gill Sans and Scala Sans are important to the typeface and should be used.

    They are generally comprised of certain characters which are created to stop collision of elements of letterforms. Take the letter f of a serif typeface. In lower case, especially italic, the top and tail of the f move into the character space next to it. These overlaps are what typographers call kerns.


    It's when these overlaps collide with letters next to them that we have problems. Take lower case f and lower case i, probably the most widely used ligature. When set in Roman (A, above), the ascender of the f collides with the dot of the i, the effect is much worse when set in italic (B, above). Type designers therefore combined the character into the fi ligature. As you can see, the dot from the i is simply removed.


    Ligatures and language have been closely tied throughout typographic history. Typographers in the sixteenth century devised ligatures to cope with common occurrances of letters in latin - fi, ffi, fl, ffl, ff (shown above). You will find at least a couple of these in most fonts. But, as langage has changed to encorporate different words, especially english, the need for more obscure ligatures has grown.

    Take the word fjord for example. The ascender of the f will collide with the dot of the lower case j. This is resolved the same way as the fi ligature in that the dot is removed from the j. The trouble with less common ligatures like this is that they generally aren't in the standard character set of a font, so we kind of have to make do or if setting type in a program like Adobe Illustrator, make them by hand. And this brings me neatly onto practical usage of ligatures.

    Usage in print

    I tend to use ligatures specifically for headlines. Occasionally, if the job demands it, I will use ligatures for body copy as well but this does tend to make typesetting a little time consuming.

    If for example I'm creating a logotype for a coffee shop called "Flow's fine beans" (a convenient amount of ligatures present there!). The name could simply be set in a font which does not require ligatures, but this could make the logotype quite plain. The font chosen could be serif, but special care must be given to the kerning and overall appearance when setting logotypes that use ligatures.


    This logotype, shown above, is simply typed using Mrs Eaves. See how the ligatures appear too close to each other creating dense areas of type. The gaps between certain letterforms are also unsettling to the eye. This needs to be manually kerned.


    If the type is set carefully the ligatures add typographic interest to the words. They add character and begin to tell a story about Flow's shop - it's a classy place, nice coffee too!

    So, careful attention to detail at this stage can help define a logotype and go a long way to help define brand message - all through the simple use of ligatures.

    But what about on the web?

    Usage on the web

    Ligature usage on the web is a bit tricky. Functionally there are special characters for the following ligatures - these are needed for linguistic reasons.

    ÆÆCapital AE
    ææLower-case ae
    ŒŒCapital OE
    œœLower-case oe
    ÐÐIcelandic upper-case eth
    ððIcelandic lower-case eth
    ßßGerman double-s
    ÞÞIcelandic upper-case thorn
    þþIcelandic lower-case thorn

    They should be present in body copy and headline copy for those languages that require them. What HTML doesn't cater for is the use of the five main ligatures - fi, ffi, fl, ffl, ff within the special character codes. The fonts generally do have these ligatures present but it's debatable whether they needed to be used on screen or not.

    I tend to only use ligatures for on screen use if I'm creating logotypes, or graphical headers or elements that require them. In this instance all use of ligatures is fine. There are many people who disagree, stating that ligatures are a relic of by-gone age. I disagree. The use of ligatures in your typesetting, for print or on screen, shows a typographic maturity and an understanding of the craft.

    The series

    This is the third installment of this "Simple Steps..." series. Next up we have Typographic Hierarchy

    1. Measure the measure
    2. Hanging punctuation
    3. Ligatures
    4. Typographic Hierarchy - size
    5. Typographic Hierarchy - weight

    Five simple steps to better typography - Part 2

    Hanging punctuation is an area of typographic design which has suffered at the hands of certain software products. It's a term which refers to glyph positioning to create the illusion of a uniform edge of text.

    It's most commonly used for pull-quotes, but I feel the most neglected is that of bulleted lists.

    With the advent of desktop publishing it became suddenly very easy and cost-effective to produce bodies of text. The problem was these bodies of text work within a box. Every character in this box had to be within the box, Hanging Punctuation requires characters to be out of the box. This was a problem for the software and as a result was ignored. An important aspect of typesetting just swept under the carpet like that. It's a great shame.

    Things are now getting better with Adobe Indesign offering support for Hanging Punctuation, I think the latest version of Quark may do it as well. Not sure about Word - probably not.

    Well enough of the talk, let's get down to some examples.

    Examples of Hanging Punctuation


    Without Hanging bullets


    A ranged left body of type is pretty much destroyed, aesthetically, when punctuation isn't hung. The eye looks for straight lines everywhere, when type is indented in this way, it destroys the flow of text.

    With Hanging bullets


    With hanging punctuation the flow of text on the left hand side is uninterrupted. The bullets, glyphs or numbers sit in the gutter to highlight the list. This representation of a list is more sophisticated visually and more legible.


    Without Hanging Punctuation


    Nothing is more irritating than badly typeset quotes. The interruption to flow is considerable and the overall effect is pretty unsightly

    With Hanging Punctuation


    Quotation marks should be 'hung' - See diagram below. In this example the quotation marks are hung either side of the quote. Once again this allows uninterrupted reading for the audience.

    Hang it!

    So, in short. Hang lists and hang quotation marks, when using pull quotes and quotes within a body of text.

    And before you say "Mark, you don't hang your lists on this site", I will be, soon. The comments list is hung, I just need time to hang the bulleted lists... I get to it ok?

    The series

    This is the second installment of this "Simple Steps..." series. Next up we have Ligatures

    1. Measure the measure
    2. Hanging punctuation
    3. Ligatures
    4. Typographic Hierarchy - size
    5. Typographic Hierarchy - weight

    Five simple steps to better typography


    Typography, I find, is still a bit of mystery to a lot of designers. The kind of typography I'm talking about is not your typical "What font should I use" typography but rather your "knowing your hanging punctuation from your em-dash" typography. Call me a little bit purist but this bothers me.

    So, in an attempt to spread the word here's the first of five simple steps to better typography. To kick it off, part one is about the Measure.

    Measure the Measure.


    The Measure is the name given to the width of a body of type. There are several units of measurement used for defining the Measure's width. The three basic units are:

    • One point = 1/72 of an inch
    • One pica = 12 points
    • One em = The distance horizontally equal to the type size, in points, you are using. Eg. 1em of 12pt type is 12pt. (Thanks to Joe for correcting me on this.)

    But, with the advent of DTP packages and the website design the following are also now used:

    • Millimetres
    • Pixels

    There is an optimum width for a Measure and that is defined by the amount of characters are in the line. A general good rule of thumb is 2-3 alphabets in length, or 52-78 characters (including spaces). This is for legibility purposes. Keep your Measure within these guidelines and you should have no problem with legibility. Please note that this figure will vary widely with research, this is just the figure I use and it seems to work well as a generally rule of thumb.

    CSS and fluid?

    What is interesting here is fluid designs on the web. How can a Measure react to an increase and decrease in size. The entire grid would have to adapt to that change. An interesting discussion point and challenge.

    The Measure and leading.

    A simple rule is your leading should be wider than your word spacing. This is because when the balance is correct, your eye will move along the line instead of down the lines.

    If your measure is wider than the guidelines for optimum legibility then increase the leading, or line-height as it's sometimes wrongly called. This will have the effect of increasing legibility. Your leading should increase proportionally to your Measure. Small Measure, less leading. Wide Measure, more leading. It's a simple but effective rule.

    Reversing out?


    When reversing colour out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines.



    The general rule of thumb in tracking your words (not the characters) is that the shorter the line length the tighter the tracking, the opposite is also true.

    Your responsibility

    Following these simple rules will ensure your bodies of text will be as legible as they can be. These rules come from a typographic craft background which unfortunately, for our industry in particular, aren't being taught as much as they should be in the art schools around the world. As a result they aren't being practiced and correct, well-considered typography is taking a nose-dive.

    It's our responsibility, as designers, to embrace the rules which are born of a craft which goes back hundreds of years.

    Hopefully, this series of quick, sure-fire ways of improving your typographic craft will help in some way make sure computers and DTP doesn't kill it off. That would be a great shame.

    The series

    This is the first installment of this "Simple Steps..." series. Next up we have Hanging punctuation

    1. Measure the measure
    2. Hanging punctuation
    3. Ligatures
    4. Typographic Hierarchy - size
    5. Typographic Hierarchy - weight