We’ve had a lot of comments about the font size used on Shropshire.gov.uk, (some good, some bad - it was even highlighted by a reviewer in this year’s SOCITM Better Connected survey) and I wanted to write a post in response to this. The size of the text is a conscious choice, based on some sound design principles.
Instead of writing a post solely to justify our choices, I thought it would be more useful to share the principles and practices that led us to arrive there. Let’s begin with some common myths: you accidently eat spiders in your sleep, chewing gum takes 7 years to digest and people don't read on the web.
The truth is that despite the generally horrible reading environment the web provides users have become very good at telling the difference between useless and useful information. They scan through pages disregarding the content that doesn’t interest them, and reading the content that does.
Although we can't ensure that what is written is engaging and captivating enough to keep the reader's attention, we should ensure that our design makes it possible, by creating a comfortable environment that makes reading easy.
User experience
When we design a website we think about the user experience on a site wide level, we should apply the same techniques to a single page.
Consider the experience of reading - being drawn in with the first few lines, followed by a period of solid reading, before the conclusion where there is opportunity for suggestion and further information.
Fonts & Typography
You can’t build a house on sand and you shouldn’t build a design on poor typography. Font choice is important; not all of us have the luxury of choosing our font, so where style guides dictate your fonts, get to know them inside out - play to their strengths and deal with their weaknesses. It’s not unusual for corporate style guides to be written without the web in mind, if this is the case then point it out and ensure you arrive at a web-friendly conclusion.
By complying with rules and best practices of measure (line length), leading (line height) and baselines (the vertical space between lines and paragraphs), it is easy to create a readable body of text, but that isn’t the whole story.
Content first
Let your typographical design inform the rest of your design. Resist the temptation to start with the homepage or the branding when you begin your design. Start with a content page and let that dictate your grid. Use existing elements if you have any (photos etc) as a basis for unit size and move on from there. This will give you a grid that supports your content and you will arrive at a design that feels more organic.
Now you have a beautifully crafted design, and your users are reading make sure you protect the content - resist pressure to place ads or distracting content within the article. Save these for the top and bottom of the page (if at all).
Write this stuff down
Use style guides and standards to share this amongst your designers, a lot of these standards and practices are subjective and can take a long time to figure out from scratch. Documenting the reasons for your design decisions can help maintain them throughout the life of a design.
Want to know more?
Read the following articles and blog posts: