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 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.
Line spacing is the vertical distance between the lines. It should be 1.2 to 1.4 times the font size. The default single-line option (1) is too tight; the 1.5 line option is generally too loose. In CSS, this is how you can specify line spacing:
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 usually means not allowing 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.
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