/ Visual Design πŸ‘€

The life-saving layout design setting (2/2)

Hello,

In my previous post, I introduced the importance of considering the hierarchy of information before you design your layout. Once you feel confident with this structure, the next step is choosing suitable font size for different levels of information. To help with this, you must consider the leading.

20180325_blog-06-1

Leading is the space between two sentences, measuring from their baseline:

20180325_blog-02

On average the human eye can read 76 characters on a line, before the eye loses track. Long line lengths can cause the readers eye to tire and in turn affect the quality of the reading experience. Therefore, it is important to set the right leading as it affects the legibility of a paragraph. The appearance can also vary wildly, depending on which typeface you use:


20180325_blog-01

When working for print


When working with print, you need to consider the dimension of the paper and the context in which your audience will be reading when deciding the font size. Is it a design for a broadsheet newspaper held in their hands to read? A A0 size poster that people will read from a distance? Or a pocket-size novel? Of course, the colour will affect the outcome too, you should always start working on a page first and print the layout in real size to test and see which setting works best.
The key is to experiment over and over to finetune and perfect. Just like wine tasting, gradually you’ll realise there is a huge difference even just for 0.5pt.

Don’t try to use the default leading that your computer provides!



Have a look at the image below. Which line height appears more comfortable to read? Which do you prefer for the title texts and the paragraph texts?

Can you explain why?

20180325_blog-03-1
20180325_blog-04-1

Different leading settings work differently depending on the length of the sentence and font size. In the example above, I used the same scale for two different line heights: one is 1 x font size, the other is 1.5 x font size. It looks nicer to have a tighter leading for the title font with 40pt size. But when we look at the paragraph texts, the tighter leading feels too compact.


When working for digital


The principles for digital typographic setting is basically the same as for prints. However leading is known as line height.
Line height gives us consistency and contributes to your layout looking good across different screen sizes and devices. By using line height, which is a multiple of the font size, the scale can change proportionately and no matter your font size, they will still sit comfortably within the row you set for your grid:

20180325_blog-05-1

Functionality is important in design; reliable and consistent measures are crucial when you work on a digital layout. You need to provide rules for your developer to bring your design to life accurately. A good rule of thumb is to set your base body text size to 16px, line height to a multiple of 1.5. For larger text, like headers a multiple of 1 should be sufficient.

Finally, the rules are not set in stone - design is artistic. There is never an absolute rule that can scientifically solve all typographic problems. It is the responsibility of every designer to make decisions according to the product and the context in which they are designing. It is important to set a scalable rule for your font size and line height and the information hierarchy will be clearly displayed and accessible.

Next time you're reading - keep an eye on the spacing between lines and paragraphs, and I am sure you will have more confidence in what makes the perfect typesetting on screen.

πŸ™‚