Design, typography and legibility

Design and typography – two very different things but at some point they are going to come together when it comes to designing your way out of a paper bag.

Sometimes design won’t involve type and you will have a whole lot of different problems to solve but when design meets typography there are certain things to consider when working with them as a whole and legibility is one of them. How will the type contrast against a background colou?, how easy is it to read?, is it big enough to read? – these are some of the things designers should be thinking about.

I’ve seen some poor examples where a designer will squeeze text to fit in a space especially in traditional print design, the same goes for traditional static website designs. Its easy to just make text smaller and take line space out but then it becomes illegible. These issues are not so easy to resolve in traditional print unless you have a good copywriter to work with.

Squeezing text into a wide measure (the maximum width of a block of text) will increase the amount of words in a single line, making it difficult for the eye to track from the end of one line to the beginning of the next. If you work on a ratio of no less than 10 and no more than 15 words on a wide measure then you’re on the right track. Same goes for narrow measures no less that 5 words is a good ratio.

The length of a block of text is another thing to consider, squeezing text into shallow spaces will take the breathable space out between the lines. If it’s too tight or there isn’t enough white space between each line of text it makes it incredibly difficult to read and the text just becomes a texture. When working with blocks of text give your “leading” or “line-height” enough space for the type to breathe. Working to at least an x height of space between lines is a good ratio to work to.


When it comes to web design those days of squeezing type into small spaces are gone – enter responsive design! Responsive design has helped designers to have more control over the variations that are involved in designing in a space for the web. You could just make a website fit in a mobile device but then the user has to pinch and expand to zoom in, then flick left and right to read the text because the measure doesn’t fit the width… yada yada…! These are problems we all face as designers. Consider your audience, they might be in the 50+ age bracket where using larger type will benefit the legibility. For instance the size of body text on a desktop computer might be 12px but on a small mobile device there is no reason why you can’t make it 14px and open up the line space a little, oh and the measure fits the device too! So no pinching, zooming and flicking when reading something, just up and down scrolling.

responsive design

Paying a little attention to the little details will inevitably pay off when it comes to design, type and legibility, your audience will have a better experience and your designs will look great. It’s especially satisfying when someone recognises it too.

This article is open to comments so feel free to leave your thoughts below or hit the tweet, like or +1 buttons at the top of this article.

Leave a Reply

Your email address will not be published. Required fields are marked *