Category: simple-steps

Designing for the Web: Available to buy and download now

In the hubbub of the launch this morning, I totally forgot to blog about the launch of Designing for the Web. So, there, I’ve said it. It’s available and ready to download now. I hope you like it.

PS. If you signed up for a coupon, they’re trickling out over the course of today and tomorrow. We’ve had some mail server issues (typical!).

Managing expectations

Managing the expectation of the new book has been interesting. When I first announced it, I used to still blog quite a bit. People seemed excited – which was nice – so was I. Then, I stopped work on it for a while, all the expectation and buzz died down as the project did. Since we pinned a release date on the book, buzz has steadily increased once again, but with it the expectation. And I don’t mind telling you, that expectation is weighing a little heavy on my shoulders.

You see, this book isn’t really like a lot of other graphic design books. Most of them are coffee table ‘inspirational’ books filled with other people’s work. But, it’s not a typical web development book either. They tend to be task, or ‘lesson’ focussed - walking the reader through a series of case studies and examples – half of which require a computer to be next to you as you work through the chapters.

My book is a little of both, but purposefully unlike either.

I wanted more of a conversation. More informal, more of me. The content is still practical, but it’s not a lesson plan. Weaving through the book is a strong sense of traditional graphic design and how I think it applies to the web today. There are tips and tools to support the theories, but it’s not a ‘for dummies’ book. I’d like to think it’s written in plain english, and not magic-designer-speak. It’s about the practicalities of designing for the web, but only represents some approaches that I feel work.

So, it’s not meant to be a definitive guide to all that is ‘designing for the web’. As I say in the introduction to the book:’s a little book about graphic design and how it applies to the modern web. It’s not a book about CSS or usability… it’s aimed at people who want to learn some basics of graphic design and apply them to their web designs - producing more effective, polished, detailed and professional sites.

There. Don’t say I didn’t warn you.

Dipping a toe in the book production process

The interesting thing about trying something completely new is that you learn almost all the time. True, you make plenty of mistakes along the way. That’s how it’s been writing this book. But, it’s not just the writing you see. Book publishing involves a whole team of people, from editors and proof-readers to project managers and designers. I’m lucky that I have a semi-experienced team at Mark Boulton Design to help me get the book finished and out of the door.

Robert Mills is our Project Manager. He comes from a media research and journalism background, so is not scared of the written word. It was his job to really push the publication over the past four months or so. I asked him to pen a few words on our approach, and this is what he came up with…


A Practical Guide to Designing for the Web started out as a few blog posts. Though it has evolved significantly since then, those blog posts provided a great stepping-stone for Mark to write the book, and proved early on that people were interested in this subject and Mark’s thoughts on it.

The main thing was just to write, to get the majority of the copy down on the page. Until draft one is done there is nothing to edit, delete, proof read and add to. The key to writing is time and location, forming a timetable and isolating yourself may be useful, whatever works for you, but it takes dedication, sacrifice and many, many hours.

There were many hours spent researching and planning the book before pen could be put to paper or finger could be put to keyboard. Beyond the initial planning and discovery it was a case of writing, writing some more and then writing even more.


Mark had written the chapters. Next we were to turn them from bland word documents to impressive, visually stunning pages in a design book. Nick, the designer at MBD with a fair amount of publishing experience, was tasked with typesetting the copy under Mark’s art direction. This immediately created an issue as Nick was working out of Manchester and we were working out of Cardiff. Skype proved to be an invaluable tool at this stage of the process, not only for keeping each other in the loop with the latest developments but in order to design via webcam!

Some elements of the design were agreed early on before the process had even started (it was always going to be A5 and in full colour), but naturally it was a case of putting into practice the work method we adopt with clients – iteration and refinement. Some of the pages in the final copy are original versions, some have changed dramatically throughout the design process – it has been painstakingly tough at times as a book about design clearly had to be a visual feast.


Having an author who happens to be well known within his field, and a book that has been promised for the last two years, all helps build the publicity momentum.

We created a Flickr account. Throughout the process we uploaded sneak peeks of the various pages to give people a taster of the finished book but also to document some of the initial sketches and behind the scenes process.

A Five Simple Steps Twitter account was also set up. As I write this we have 874 followers! (Thanks to you if you are amongst that group) Again the purpose of tweeting was to publicise the book but also to connect to the potential readers. Our tweets ranged from quotes lifted straight from the pages of the book, links to the Flickr group, to more general news updates and countdowns to launch day.

Blogging was also a fundamental part of the process simply because the book idea evolved from one of Mark’s blog posts about five simple steps to better typography so we took the book right back to where it originated from and Mark has blogged about why he chose to self publish, and about the technical requirements involved in writing and distributing your own book.


Thankfully some elements were straightforward, all the information we needed on purchasing ISBN numbers was readily available online and it was nothing more than a simple application form outlining the content and specification of the book. Having to buy them in blocks of ten also ensured we have ISBN numbers for nine future publications (if we decide the publish more that is!).


p> getting to grips with the process, and our first ISBN number

Getting to grids with the process, and our first of 10 allocated ISBN numbers together with the bar code

Although not a necessity, there is the option of submitting a copy of the book to the British Library. For printed books this is a legal requirement, whilst they agree on the policy for electronic books, they recommend depositing the book in the interim.

Many hours also went into researching print on demand offerings, Amazon fulfillment, and other printing and distribution methods. There are many options and it is a case of finding one that meets all your needs. For us it was self publishing (please see Mark’s other blog posts for more information on this).

Looking forward

At the moment we don’t know if all the hard work, blood, sweat and tears has paid off. We hope so as we are immensely proud of the book but all we can do now is sit back and wait for the feedback and reviews to roll in.

Designing and building an eBook delivery system

When I first looked into writing Five Simple Steps to Designing for the Web, I looked at a bunch of options for delivering the PDF over email. I thought about building something myself or hosting it with various web applications used for delivering digital products. The first option just wasn’t an option at all in the end - I’m no programmer. The second option, although perfectly viable, saw the potential profit of the book undermined by a monthly, or per unit, charge. I made the decision, quite some time ago now, to commission the software to be built by the super-talented Steven Teerlinck, using the Code Igniter PHP Framework.

Five Simple Steps publishing back end

This isn’t a particularly complex bit of software, but Steven’s done a fantastic job in simplifying it to a number of core user and system flows:

The Requirements


p> So, I wanted to sell a PDF. Ideally, I wanted the following functionality:

  • Have a discount coupon, so people could redeem them for, say, £3 off
  • A discount period. For example, over the Christmas period.
  • Multiple licenses. From single user, to ten.
  • The delivery of the PDF itself.

The user flow


p> The user flow through the system is this:

  • User selects book, and fills in license details - they enter a code here if they have one.
  • The user is directed to Paypal where they part with their hard-earned cash
  • Upon a successful transaction, the user is redirected to a ‘thanks very much’ page.
  • The user receives an email from Five Simple Steps whereby they can download their PDF for up to 72 hours.

The system flow


p> The system does this:

  • Upon receiving an ‘order’, the system checks to see if the Paypal purchase is valid.
  • The system to generate a unique code for that sale
  • This all sits in a queue that is set up on a CRON to send every 10 minutes
  • The code is emailed, along with a handy link, so the user can download the book
  • Upon clicking, the code is checked against the user, license, and to see if they sale is valid
  • The code triggers a PDF stamper to dynamically stamp the PDF on every page

A large majority of initial sales will come from the money-off coupon that has been running on the site for a while. The coupon system works thusly:



  • I can create one-off coupons, or bulk import from a comma separated file
  • The coupons are queued up and processed every 10 minutes by a CRON job
  • A user is sent an email with a unique coupon code.
  • The user clicks a link which directs them to the purchase page and populates the coupon field.

That’s probably about it. The system is small, trim and effective for my needs. As time goes on, I’m hoping to add further functionality to support shipping physical books in addition to (possibly) more titles. We’ll see. Being involved in building a bespoke bit of software for the delivery of the book has been very interesting over the past six months or so. Not only has it shown what a flexible framework Code Igniter is, but also how important it is, as a (soon-to-be) publisher, to be in-touch with your distribution software and process.

Why Self Publish?

Two weeks today, I’ll be releasing the long-delayed self published book of mine, Five Simple Steps: Designing for the Web. Since I originally thought of writing my own book, producing it, and distributing it, I’ve been asked several times, ‘why not go with a traditional publisher?’

I’ve had several offers for this title, from big tech-book publishers, design publishers, through to smaller outfits and literary agents. I’ve turned them all down. Why? Well a few important reasons:

My Voice

Several of my good friends have written books, and I’ve design reviewed a couple, and written a a chapter in one. Not a massive amount of experience, granted, but enough to sour the taste of traditional publishing in my mouth. The biggest concern of mine was losing my ‘voice’. I want a book I’ve written to sound like me. Not some watered down, ‘internationally-toned’ amalgam of me, my editor, a proof-reader, and tech reviewers. I want it to sound like me, and I’m hoping, my readers do too.

The Process

Writing this book has been really difficult. Luckily, I’ve got a good team around me - a designer, a project manager, a proof-reader, and an editor to shape the book (that was particularly helpful early on). But, there’s just no way I could’ve written a book in the last two years if it hadn’t had been on my terms alone. My wife and I had a daughter, we built an extension on our house, and I’ve been building a business in challenging times. To fit a book around this has been tricky, and I needed to have the flexibility imposed by my own schedule, not someone elses.

The Design

Most web design books are terribly designed. I mean, really bad. If I was going to write a book, I was going to design it too. As it turned out, I’ve art directed the production of this book, rather than designed every single page and diagram. But, the point is, it will be a design I’m happy with. I know several designers who have written books who ended up doing the design for them for free!


Although not the motivation for the book, the financial potential of just one PDF book far outweighs the traditional process (if you have an audience that is). Most author royalties are miniscule compared to the profit the publisher makes. With a PDF distribution my only costs are the time taken to write the book, and the ongoing hosting and Paypal fees.

A Printed Book

Luckily we have the skills in-house at Mark Boulton Design to design, produce and distribute a hard copy book. Currently, we’re looking at producing a limited edition case bound (hard back), high-quality book. BUT, this will only be if the sales of the PDF can support the initial outlay in getting a print run done.

Of course, there are advantages for a more traditional approach. As much as the process of writing and editing is painful, you can be assured of a good product at the end of it – even if it doesn’t sound like you. You don’t have to design it, typeset, proof (again, and again), artwork, production, delivery, customer service. There’s a lot that goes into publishing and I’m learning the hard way. But, it’s fun. The book is coming along nicely, and two weeks today, will finally be released.

It may not be a work of beautifully crafted prose. But it will be me. Warts and all.

Five Simple Steps. Available 2nd February, 2009

A long time ago, two years ago in fact, I sort of announced I’d have a book ready the other side of Christmas. Ha! Embarrassingly, that deadline came and went as life, and work, got in the way. And, writing a book, especially a self-published book it turns out, is incredibly difficult. But, a few months ago, this project has had new life breathed into it, and I’m pleased to say, the book will be available on February 2nd 2009 in PDF format.

Not much has changed

During the last two years, the basic concept of the book hasn’t changed, even though the web has. This book is about practical graphic design theory, and how you can apply it to the web. As I said back in 2006 (!)

Like my Five Simple Steps articles, the book will be based on five steps you can work on to improve your design. These vary from very short and simple things like how to set a list correctly, to how to design a complex, modular grid system. They’re not meant to be a complete design lesson in the varying fields. More like a refresher for those people who have design schooling and a brief, practical lesson for those who don’t.

There’s a new website

We have a new website for the book: The release version of the site was beautifully built by Steven Teerlinck using the Codeigniter framework. There’s some clever stuff in there for me to manage sending coupons, timed discounts (eg a christmas sale period), and automated PDF licence encoding.

The new Five Simple Steps book website

I’m going to be blogging about it a little bit as I go, but mostly, you can follow the progress on Flickr, and Twitter.

Will there be a physical book?

Over the past two years, and more recently, this question has been asked a lot. The short answer is yes, but it kind of depends on sales. I’d like to produce a really special, beautiful limited edition hardback. But, the thing is, it’s a considerable investment for even a run of 1000. That’s not including storage and fulfilment. The plan is to have the PDF available through Lulu for those who want it, but, as it’s a full colour book, it probably won’t be that cheap.

So, yes, I hope there will be a hardback. I can’t wait to design a real, physical book again.

Can I still use my money-off voucher?

Yes you can. You’ll be emailed a unique code a few hours before the release of the book.

So, that’s it. The project is not dead, it’s very alive and I’m working feverishly to get it released in 9 weeks time. No doubt I’ll blog about it nearer the time anyway. 

A couple of books

A couple of books coming up which may be of interest. Firstly, Web Standards Creativity is up on Amazon for pre-order. It’s a sumptuous full-colour paperback covering topics like Typography, PNG transparency techniques and Grid Design from the likes of Ethan Marcotte, Simon Collison, Cameron Adams, Aaron Gustafson, Jeff Croft, Derek Featherstone, Dan Rubin, Andy Budd, Ian Lloyd, Rob Weychert, Andy Clarke, and me.

Secondly, Five Simple Steps: Designing for the Web is nearing completion. It’s not quite finished yet, and yes I’m going to miss the January deadline, but it will be worth the wait. To keep you going until then, here’s a few tasters…


Above. Example spreads from Chapter Two: Typography.


Above. Example spreads from Chapter Two and Three: Typography and Colour.

Self-publishing your own book is tough. I was naive to think I would get this finished by Christmas and ambitious to think it would be finished this month. These things take time, especially if you consider I’m writing, art-directing and designing and publishing this book. That said, it’s only a little overdue and I’m sure it’ll be worth it.

Thanks to everyone who has already signed up for the launch discount. There will also be a bulk licence available for £25 for five copies for you and your collegues. There is still time to sign up for the discount too if you haven’t done already.

Right, that’s enough talk, I’ve got a book to finish.

Five Simple Steps to designing with colour part 3: Colour combinations

Colours chosen from different spokes on the Colour Wheel will provide a variety of colour combinations. Deciding upon and selecting a colour combination that works for you will very much depend upon the job at hand.

Will it communicate what you want it to? Or are you just choosing them because you, or the client, like them? These are very difficult questions to answer because any designer or client will let their personal style and preference interfere with their decision-making. Colour combinations tend to evoke certain reactions either by cultural, or personal experience. Understanding these experiences will help you create colour combinations that tell a story. That is what good colour theory can give you; designs that tell a story.

I’m going to go over a few combinations here to demonstrate my thinking. But before I get onto that, it’s worth noting how palettes can be presented to potential clients or in design documentation.

I’ve always presented palettes in two different ways depending on the amount of colours. In a broad palette, with many colours, I display these left to right with dominance and usage being denoted by the size of the square, or block, of colour. For smaller palettes and combinations, I use the rectangle containing a line and a square. I was taught this simple device in university but it is similar to many other examples I’ve seen. You can use circles, blobs, lines, squares. It’s up to you. The important thing is to indicate the relative weight of colour.


Colour palette showing range of colours and relative weight.

The colours within this combination (I was tempted there to call this a Triad. However, if you think back to the Colour Wheel, this is not the case. Just because there are three colours does not make this a Triad combination) are given the following names:

  1. Subordinate, or Base colour. This is a visually weak, or subordinate, colour. It should contrast or compliment the dominant colour.

  2. Dominant. The main colour. It is this colour which defines the communicative values of the combination.

  3. Accent, or Highlight colour. The Accent colour can be two things: either sympathetic to the Subordinate or Dominant colour, or it can be visually strong and striking, therefore appear to be competing with the dominant colour. This can provide tension within a combination


Colour combination showing Subordinate, Dominant and Accent colours

Examples of colour combinations

Active / Vibrant


Active combinations are intense. They feature bright, often complimentary, colours on the colour wheel and are combinations of primary, secondary and tertiary colours. To many people, colour combinations such as this evoke feelings of noise, flamboyance and energy. It’s a young combination, although there will be cultural differences, aimed at young adults. Many of the hues are not really ‘natural’ colours, but they are more intense tones of the same colours, therefore they could be used for ‘natural’ applications such as the travel industry.

Muted / Calm


Muted palettes have a lot of white in the hues. This example uses blues and introduces lavender as the dominant colour. The resultant colourway is balanced and calming. Hues in the blue, green and violet areas of the Colour Wheel convey a visual quietness. The Accent is almost always used as sympathetic to the Dominant. Often used in the cosmetics industry, the visual softness of the colours often portrays a feminine quality.



A pastel combination is similar to the Muted combination in that is often based on colours containing a lot of white (or lack of white depending on your colour model right?). Where they differ is that Pastel combinations combine warm and cool tones readily. This combination can portray youth and innocence (babies!) and has a warmth that the Muted combination fails to deliver.



Natural combinations are those colour which are borrowed from the great outdoors. Rusty reds, browns, sky blues and warm pinks are the order of the day. I find the easiest way to create these combinations is to go outside, take a photograph and then choose some colours from that, you really can create some stunning combinations. When you need to communicate rustic charm or the feeling of walking through autumn leaves, then this is the type of combination you’re after.



This is a good one. Hues of royalty, tradition, often religious and above all; wealth. Rich colour combinations are perhaps the combinations which are so engrained in culture. True, the actual colours used may differ, but the overall effect is seen throughout the world. Maroon is often mixed with gold and full shades of green. They can be combined with Natural combinations for a fuller palette.

Part of the design solution

I hope I’ve indicated how important colour is in communicating part of the design solution. By selecting the best combination of colours you can go a long way to ensuring the success of your design. We’ve looked at some colour combinations here but what about the individual colours? They also have meanings and go a long way on their own to set the mood and tone of a given design. Next, I’ll move onto discussing colour and mood. What do different colours mean?

Five Simple Steps: Designing for the Web

This article is an extract from the upcoming book; Five Simple Steps: Designing for the Web. Available later this month.

PDFs: A quick poll

I need your advice. As you may know, I’m writing and self-publishing a little book on designing for the web. It will be published in two ways: initially, a pdf for download and shortly after, a printed version which you can buy from Lulu. These two media require different design considerations.

Firstly, pdfs are read on screen and can be printed out on individual sheets of paper and probably on a black and white printer. Secondly, the printed book (from Lulu) is bound and needs the margins adjusted accordingly. So, my question is this. Do you think it’s necessary for me to typeset two versions? One, a pdf with minimal flat colour (so as to not waste toner) and even margins. And two, a version which has facing pages etc for the printed book?

Five Simple Steps to designing with colour part 2: A few basics

The Colour WheelIn the last part of this Simple Steps series I talked about designing without colour. But before applying colour, it’s always a good idea to have a basic understanding of colour theory. There is a great deal of complex terminology surrounding colour theory, so in this part I’m going to outline some of the basics.

In any book on colour I’ve read, this chapter was without doubt always the most complicated: Colour Theory. At its heart, colour theory is concerned with the creation of colour combinations via relationships. The relationships are created by the position of the colours on the colour wheel. The complexity of colour theory really kicks in when you start taking into account different hues, shades and tones. It can all get a bit too much. So here, I’m keeping things very simple and I’m starting at the beginning with primary colours.

Primary colours


p> Primary colours

Primary colours

Primary colours can be divided into two different types: Additive and Subtractive. The additive primaries are those which are obtained by light; red, green and blue. They combine to form white and form the basis of colours on screen (your TV works in RGB, as does your computer screen). Subtractive primaries are those obtained by the subtraction of light: cyan, majenta and yellow. They form the basis for four colour printing and combine to form black, the K in CMYK.


p> Primary colours overlays

Primary colours overlays

The additive primaries combine (as shown in the diagram below) and where they overlap, the secondary colours, these are the subtractive primaries. The same happens when the subtractive primaries overlap.

The Colour Wheel

Now this little chestnut has been part of my life for about, ooo, twenty years. I remember painting my first colour wheel in secondary school. I had absolutely no idea why I was painting one (other than being told to) and how it would help me in my work. Even today, the practical use of colour wheels in every day design situations is questionable. However, the familiarity of a colour wheel will certainly help you understand where colour palettes come from.



The colour wheel

The colour wheel

The colour wheel not only helps understand the relationship of different colours but also the classification of colours. It also, as I said, provides a quick reference to the primary, secondary and tertiary hues.

Primary, Secondary and Tertiary colours

The primary, secondary and tertiary hues are shown in the diagram below. As you can see, it’s pretty straight-forward to see how each is produced; Primarys combined create Secondary colours. Tertiary colours are created by combining a Primary and a Secondary. Things start to get interesting when you isolate different combinations of colours and this is when we get into the realms of colour wheel selections.


p> Primary, Secondary and Tertiary colours

Primary, Secondary and Tertiary colours

Colour Wheel Selections

Colours, when selected from from the colourwheel in certain combinations, interact together. This is the basis of colour palettes; the interaction of colours. Knowing the basis of these colour combination types is essential in creating palettes. True, you can rely on gut instinct (as many designers do), but more often than not these decisions are based on experience of seeing these colour combinations everywhere in everyday life. Really, once you start to notice these different combinations, it will drive you bonkers.


Monochrome selections are simply one colour from the colour wheel.



Monochrome colours

Monochrome colours


Complementary colours are contrasting colours. Sometimes they look horrible, they can really not work. However, sometimes, they are just the ticket. I generally use them if I want a vibrancy in a palette or if I need to draw the readers eye to something. Hues of these colours work great as a highlight colour. They are defined by the colours opposing each other on the colour wheel.


p> Complementary colours

Complementary colours are opposing colours on the colour wheel


Triads are really interesting. They provide a real tension in a colourway as their strength is pretty much equal. Using triads in differing hues is where they come into their own though. Triad colours are any three colours which are equidistant on the colour wheel. As all three colours contrast with one another they can clash and this is where the tension is created.


p> Triads

Triad colour combinations provide tension in a design

Other colour wheel selections

There are other selections which can be used to form palettes: Analogous, Mutual compliments, near complements and double complements. However, practically, I rarely use these conciously. Analogous colours for example are colours which sit either side of a selected colour on the colour wheel. Choosing these colours for example, is a fairly unconcious decision for any designer as they appear around us naturally so often (think similar tones in nature for example).

Coming up

So, now we have designing without colour and training your eye to see just tone, and we have the basic terminology of colour theory. Next up, we’re going to apply them to creating colour combinations; the basics of palette creation.

Announcing: Five Simple Steps the Book

Five Simple Steps: Designing for the WebThis is a project of mine that has been kicking around for well over a year now, so I thought I’d stick my neck out and just go with it. I’m going to be releasing Five Simple Steps: Designing for the Web as a PDF download book in a couple of months time (around Christmas). It will cost $19. It will be stacked full of useful, practical information for applying graphic design principles to designing on the web.

How much will it cost?

It will be priced at $19, but you can get $5 off by signing up to the mailing list.

What’s it about?

Like my Five Simple Steps articles, the book will be based on five steps you can work on to improve your design. These vary from very short and simple things like how to set a list correctly, to how to design a complex, modular grid system. They’re not meant to be a complete design lesson in the varying fields. More like a refresher for those pople who have design schooling and a brief, practical lesson for those who don’t.

What’s in it?

There will be five chapters; Ideas and Research, Typography, Grid Systems, Colour, Layout and Form.

In each of the five chapters, there will be five steps. Simple really.

Aren’t they the same as your articles which are free on this site?

No. The new book will have rewritten articles following the same basic subjects. Not only that, but there’s two whole new chapters in there: Ideas and Research and Layout and Form (which won’t be available free. Yet.) The chapters will be rehashed, reordered and rewritten. I’ve risen the bar in terms of quality and the illustrations produced. I’m pretty chuffed with the results and I hope you will be too.

Is there a printed version?

Not yet. I’ve thought about Lulu and other self-publishing printers, but at this stage I’m focussing on the core product and initial delivery as a PDF from this site. If there’s demand for a printed version, then I’ll certainly consider it.

Why not just get it published?

There’s a few reasons and I’ve thought long and very hard about the whole self-publishing thing. The first is market value. This book, as it’s very niche, has limited market value (in the grand scheme of things). This would make the returns for any publisher lower than, say, a CSS book with a slant to simple steps. You see, CSS sells books. Fair enough. But being a bit of a control freak, this project is my baby and I wanted it produced and released on my terms.

Give me your email address

And I’ll give you $5 off when the books available. How’s that for a bargain?

When is it out?

Christmas 2006 (ish).

So, there you have it. Pop over to the site and sign up now for the discount. Keep tuned for the next installment of the latest Five Simple Steps article (colour), which is due to be posted some time over the weekend.

Five Simple Steps to designing with colour

{title}It’s been ages since I’ve had a stab at a Simple Steps series. So far we’ve had Better Typography, Designing Grid Systems and Typesetting. This one has been kicking around for a while so I thought I’d just publish the first couple and see where we go from there (of course there will be five, I just haven’t written the last couple yet).

Designing with colour is perhaps the element of graphic design which is the most difficult to get right. Why? Well, because it is the most subjective. For some, a palette of dark grey with splashes of bright pink will be just great; to others it would just be all wrong. Too many designers, whether schooled in colour-theory or not, end up making subjective decisions about colour and then when it comes to explaining those decisions to a client, things begin to unravel.

This first post in the series will be dealing with looking at tone and the value of limiting your palette.

Lowering the tone

Years ago now (ooo, about fifteen or so), I was in my first year on a Foundation Art and Design course here in Stockport in the UK. I wanted to be a painter (well, an illustrator to be precise). In the first week of this course we were all told to get rid of our nice new paint-brushes we’d bought for the course. We were told to leave all our new kit at home and to go outside and find some nice twigs and get some black ink from somewhere. I was not chuffed. How was an artist meant to create with these primitive tools?

The lecturers had us painting with twigs, our feet, blindfolded; the works. At the time I hated it; couldn’t see the point. Now, I look back and really see the value of this horrific couple of weeks. They were teaching us how to look and produce marks which weren’t dictated to by our tools. In other words, because we had colourful paints and lovely sable brushes, the temptation is to use them. Without the brushes, and the colourful paint, we were forced into trying to communicate colour with tone alone.

This is what I’d like to focus on to begin with.

Removing colour

One of the things I like about editorial design, specifically typographic design, is how there is an emphasis on black and white. True, colour is a very important part of any typographic exercise, but primarily I begin by looking at tone and form. I think there’s a lot of value in removing colour from the equation entirely and focusing on the tonal aspects of a design before applying the colour.

There are a few notable examples of how designing with just black make for a unique and attractive design:

Of course, no discussion about designing with black and white on the web would be complete without mentioning Khoi Vinh’s site, Khoi works with black and orange to harmonise with the Swiss undertones of the design.


p> Khoi Vinh's


p class="caption">Khoi Vinh’s

Form, a German design magazine, uses black and white typography (and a strong grid), to convey it’s brand to the users of the site. The effect of having a site like this in black and white, is the work that is showcased here, being in full colour, really stands out against the black and white framework.


p> German design magazine, Form


p class="caption">German design magazine, Form

Begin with Grey

Next time you start a design, try this. As simple as the heading says, start your design in grey and tones thereof. Don’t introduce any colour until the design is working in black and white. Chances are, your decisions on palette and colour will be made a lot easier because the design, or elements of the design, aren’t relying on colour for their function. This of course is very useful for designing with accessibility in mind. I’m not addressing any accessibility issues within these articles, as I’d like to focus on the graphic design, but it’s an important consideration that shouldn’t be overlooked. Designing with black and white first will ensure that the solution doesn’t rely on colour to work.

I often use colour to highlight specific elements of the design, but generally those elements have a function within the design solution, such as the horizontal lines on this site. Another example might be highlighting a search button, or elements of a navigation bar. Using colour to pick out key functional elements in the interface.


p> {title}

Solving tonal problems before applying any colour

The benefit of working this way, like other tools at the disposal of designers such as grid systems, is that it solves a certain amount of problems for the designer. I find it focuses my attention to tone and composition without worrying if this colour matches that. Focus on the composition tone, once that’s sorted, move on to the colour.

Moving onto mono and duo tonal palettes

In the next post, I’m going to focus on taking the grey a step further.

You know, us web designers have it quite lucky. We can use any colour we like (within reason). Print designers have had to deal with colour limitations since the press was built. This has made print designers very sensitive to designing with colour. There’s nothing quite like designing a one or two colour job, but over a wide range of material, to really get you thinking about how colour is used. I’d like to bring some of that kind of thinking (and restraint) to the next post.

Five Simple Steps to Typesetting on the web: Printing the web

The screen is just one of the media types for which we have to design for. Another media type, which I feel is often neglected as part of the design process for a web site, is print.

There are times when a web designer has to know about print design. Not just the values and aesthetics of designing for print, but the terminology, measurements and production values that are important in print design—including typesetting. I’ll be addressing these, along with a working examples over the course of the next three installments of this ‘Simple Steps’ series.

Print alternatives to web pages have been around for a while, we've all seen them, in one form or another. Usually, they are associated with a 'print version' button which upon clicking renders the page without any navigation and, if you're lucky, increases the font size. This is generally about it. Many sites offer this as functionality but I have to question whether users click this due to time constraints, or like me, they just print straight from their browser on the page they're on.

In which case they will get something like this (prints from Guardian Unlimited and The Times).


There is a way, other than 'print only' versions, of rendering this content for a printer. Print stylesheets. Or more specifically, a CSS file, which has been authored for print media and declared as 'print' in the 'media' attribute of the link tag.

The last to be thought about

It's been my experience, over the past few years, that despite being a very clear need for users to print out web pages, very rarely are those needs addressed by designers. Why is that? Do we think that print is important in a screen based environment? Jason Santa Maria, Graphic Designer, had this to say when I asked about this recently:

Many people still see the web as a temporary medium, one that is always changing and where content is potentially irretrievable. I know many people who love to print things they find on sites, from articles to recipes to photos, to view when they are away from the computer or or for their own personal archive. There's no reason that information shouldn't either support your brand or be designed with the same care as your site.

Khoi Vinh, Design Director of the NYTimes, agreed with Jason:

Having developed Web solutions for many text-heavy publications in my career, at least one user scenario remains: people like to print long passages of screen-based text for reading offline.

This then begs the question, if printing from the web is so important for users, then why do we see print based templates either being left to the last minute, or being developed by technical teams, rather than designers? In addition to implementation though, what else influences the decision for ofefring a print alternative?

Khoi makes some valid points about revenue generation, through advertising, in the print versions:

Designers are focused on the immediate, knowable and sharable result of what gets rendered on the screen, so it's natural to consider print media stylesheets an afterthought. But other factors contribute to this too, notably the monetization of 'printer friendly' versions of articles at many publication sites.

That is, rather than offer a print-based set of CSS rules, many sites will offer an alternative screen rendering of the same article, slimmed down to just the primary text -- we've all seen this. Very often, those print-friendly views are sold to advertisers for sponsorship, so in those cases at least, there's a financial reason *not* to create a print media style sheet.

This is something that I hadn't really considered when researching this article. When Khoi mentioned this, it did get me thinking about how advertising would fit in with print CSS. I'll discuss this later on the series though.

Jason also raised some interesting points about the medium:

Because print stylesheets are perceived as somewhat non-essential to most site creators. Their main focus is their website and the appearance of it in various browsers. I think many people see print as a secondary medium, like mobile phones, that is optional. And I suppose it is a secondary medium, as far as the web is concerned, but there is very little preparation involved in producing some simple styles for print.

Perhaps there is an assumption that print styles can be added at a later date as they are deemed 'secondary'. This can be true, but on developing the example for this series I found that in developing a print style there was the need to revisit the code in the template to make sure the content flow was correct and additional design elements could be added. So, in that sense, I'm not sure that assumption is true.

So, that was a bit of context. Next, I'll get into the design of the printed page.

The Example

I wanted to frame this remaining set of articles with an example. A text-heavy site, with a strong on and off-line brand which could benefit from print styles. I chose the British newspaper, the Guardian.

Why? Well, The Guardian has an established website. The paper version was recently redesigned and now there is somewhat of a gap, visually, between the website and printed material. The first task was to design what the printed page from the website would look like.

Design the printed page

I feel the process of designing the printed content of a website is as important as designing for other media; screen readers, mobile and small screen. The design process is the same as designing for any other media. You have to understand the context, the production and the delivery.

Luckily I chose an example with a very strong offline design on which to draw inspiration. I began by researching The Guardian's redesign and analysing the components which make it up; the grid, typography, colour and composition.


I chose a typical page layout, which included running heads, article headline, date, author etc. All the content which would go into the online version.

It was clear from this example which areas of the design I would need to replicate to ensure a quality reproduction for the print styles. I then began to shape up the design.

Shaping the page

I begin most design tasks by drawing thumbnails. This one was no different.


As you can see, I there were some important considerations I wanted to address even at this early stage. Width of the Measure is an important consideration for printing on an average desktop printer. I opted for a full width measure. Although this may hinder legibility due to the long line length, I feel this is acceptable considering the potential savings on paper and toner if the measure was narrower.

From this quick sketch, I worked up a larger, full-size, sketch to get an idea of proportion of type areas, rules and white space.


Working at this full size, in pen and paper, gives an immediate idea of the scale of the elements on the page. I really would recommend this for when you design print alternatives for your web sites. Draw it out on paper first. It's quick and will save you a lot of time in the long run.

Digitising and colour

I then took the sketch and worked it up in Photoshop (you could use InDesign or Illustrator if you like) to use the typeface I wanted and add colour.


Working at this full size, and then printing it out, gave me a template on which to base my CSS measurements. Remember, with the printed page we are dealing with absolutes again. You can define type size, leading and measurements which all exist in a finite space: a piece of paper.

I found that completing this stage of the process really helped in pulling the styles together later on.

The finished article

I'll skip ahead a bit and show you the finished article.


This shows the finished printed article page shown next to a open spread of the paper. As you can see, it shows a continuation of the brand and the content is presented clearly and legibly.

The Example

In the next two parts of this series I will be discussing the typography and colour, and creating the print media css files. For those of you who can't wait until then to see the example, here it is.

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.

Five Simple Steps to Typesetting on the web: Introduction

{title}It's been quite a while since the last Simple Steps series, but this new series of articles has been brewing for a while. Before I go into the first installment I'd like to clarify what exactly I mean by Typesetting and how that differs from Design, Typographic Design or Typography. Each 'Simple Step' will be just that, clear simple rule(s) to follow.

I feel that Typographic Design is such a large field in the practice of design that some of the constituent parts need a bit of attention. Take Type Design for example. The font industry is big business, and rightly so, but to many people this is what typography is; choosing a font. That's it. My typography is done, move on to the colours. Hang on one minute. You've forgotten Typesetting.

Typesetting, as defined by, is:

To set (written material) into type; compose.

Not very enlightening, but the word 'compose', used in this context is an important word.

Composition. Take a look at the definition. Typesetting is in some pretty impressive company, but I like this one: Arrangement of artistic parts so as to form a unified whole..

Typesetting has a rich history in the craft of the printing trade where compositors grafted, by hand and later by machines, to produce printed material. Then, along came desktop publshing and things changed slightly. The basic principles (I'll get onto some of them) remained the same, but something was lost in translation. Typesetting was no longer being done by skilled tradesmen—Compositors—But by Graphic Designers, who arguably didn't have the skills, but were cheap because they worked on labour saving computers. And so, from the late 1980's onwards, Typesetting suffered and as a result Typography suffered.

This all may be a little melodramatic for the print based world, but things are a whole lot worse on the web. True, there are technical constraints on which font you can have, but as I said, there's more to typography than the font.

Tomorrow, I'll get onto the first Step: The Right Glyph for the Job.

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

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 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