In this article, we’ll learn a few rules about typography. Typography is the art or procedure of arranging the letters on the web – it’s the things like fonts, sizes, and readability.

There are 4 things that you should look out for which will get you 90% of the way there:

Font size

Font size is the size of the letters. For the web, a range of 15-25 pixels works best for the body text. Remember that different font families may appear a little different for the same font-size.

font-size: 16px

Line spacing

Line spacing is the vertical distance between the lines. It should be 1.2 to 1.4 times the font size. The de­fault sin­gle-line op­tion (1) is too tight; the 1.5 line op­tion is generally too loose. In CSS, this is how you can specify line spacing:

line-height: 1.4

Line length

If the line is too short, and the reader jumps from line to line constantly, it makes it extremely difficult for the reader to absorb information. The same goes for if the line length is too long — the eyes get tired quickly. On a web page, this usu­ally means not al­low­ing the text to flow to the edges of the browser window.

Also, never center large blocks of copy. It’s much easier for us to read a block of text that is left aligned because the eye knows exactly where the next line begins.

Font choice

Legibility is the innate qualities of a typeface that makes each individual letterform distinguishable from one another. This is totally dependent on the typeface, so there’s nothing that you can do to make a typeface more legible, so pick appropriately.

In CSS, this is how you can specify font/ font-family:

font-family: "PT-Serif", serif

This covers the very basics of typography. Keeping these rules in mind will help you make your web pages look a lot more professional.

If you want to dive deeper into Typography, here’s one resource we highly recommend: Butterick’s Practical Typography