Typography the way to make your website readable and appealing when display.


The arrangement of type involves selecting typefaces, font sizes, line lengths, line heights, letter spacing, and adjusting the space between pairs of letters.

And here’s how to use these properties in the correct way.

  1. Typeface — all of us like to have some custom fonts in our website, it changes a lot in look of the website, but we should do it wisely.

The default typeface of our website is coarse and boring, so we should change it to something more user-friendly.

There are tons of custom fonts available for free for example on https://fonts.google.com/ or http://www.fontspace.com/.

After we choose our basic font we should think about some other fonts which will take care about capitals headings and text we want users to pay more atention to, that should be some catchy but readable font face.

Using custom font faces is really helpful ,making our website more unique and looks better, but we should remember that too much amount of font faces is making our website unreadable and messy.

2. Font size — font-size of the text shouldn’t be too small or too large, users have to easily read the whole text without concentrating to read it, zooming in/out, or are begin noticing letterforms instead of reading the content.

Make sure that your website fulfils all rules mentioned above on all devices.

3. Line lengths — Amount of characters on each line of the text.

For desktop it should be around 60 characters and for mobile devices 30–40.

You can achieve an optimal number of characters per line by restricting the width of your text blocks.

4.Line height — also known as leading, controls the amount of space between baselines in a block of text.

Try to set line height not too low, which could cause to merge the text, while setting line height too high makes users to spend more effort to read it.

Avoid line height below 1, except if you want to make some custom heading, because line-height below 1 cause overlap on eachother.

5. Letter spacing — the space between letters.

For larger type sizes, such as headlines, use tighter letter-spacing to improve readability and reduce space between letters.

But for smaller type sizes, use looser letter spacing to improve readability as more space between letters increases contrast between each letter shape.

I hope my tips will help you to create legible and better looking websites.

Typography the way to make your website readable and appealing when display. was originally published in Qunabu Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.