How to Improve Typography in Your Web Design

How to Improve Typography in Your Web Design

Stuart Holmes

There’s far more to typography than font size and deciding upon a bold or regular format. Even for the most experienced designer, this key visual aspect can be a real challenge. Given the array of options and details to consider, this comes as no surprise.

For consistent and attractive typography, you must follow the fundamentals. Take a look at this handy guide which gives 5 easy ways to create show stopping typography.

Line length

Measure is also known as the line length. Make it too long and it becomes difficult to read as users struggle to focus on the next line. Make it too short and it becomes distracting with a lack of flow. Instead, you’ll want to choose the middle ground which is approximately 40 to 80 characters including spaces. Alternatively, use the Robert Bringhurst method which suggests multiplying the typeface by 30.

Leading

Space between the lines is called leading and makes a significant impact on the look and readability. Get it right and content should be easy to navigate with the eye. Some aspects can affect leading including the line length, word spacing, type size and so on. In simple terms, the optimum leading would be 2pt to 5pt larger than the type size. For example, if your type face is 10pt, 13pt leading should suffice.

Vertical space

The baseline grid affects the vertical rhythm of the page which is essential for that effortless flow which allows readers to easily go from one line to the next. Employing a continuous rhythm ensures all the text is placed on a consistent grid, despite changes in type size, measure and leading. The easiest way to keep a vertical rhythm is by making the leading and space between each paragraph the same size as the baseline grid. Therefore, if your line spacing is 13px, your baseline grid would have to be 13px.

Bold, italics and more

Putting emphasis on words within text is a great way to make content more captivating. There are plenty of ways to emphasise in text whether it be italics, type size, small caps, colour and so on. Done properly it can elevate a piece of content and make it more enjoyable to read. But overuse of text emphasis can appear try-hard and quickly loses its value. Be sure to limit your quantity to only several per 200 words and always use one feature only. Don’t make the mistake of mixing caps with italics and colour. It looks messy and ruins that all important consistency.

Quotation marks

These are a necessary part of most content, but the quotation mark can easily send everything out of sync. If you place one flush with the text, this will disturb the left margin, thus ruining the rhythm of the content. To avoid this problem, be sure to use hanging quotes which won’t impact the left alignment. It keeps everything balanced which sits at the core of good typography.

Stuart Holmes

Author Stuart Holmes

More posts by Stuart Holmes