Four Simple Tips To Improve Your Site’s Typography

I’m a writer, so naturally I think that all web design ought to start with my text; the rest of the page should be be built to complement what I have written. That way of thinking puts typography front and center. I’m not the only one who thinks so, but it’s an opinion that doesn’t hold much sway among web designers; it has even less traction with businesses and bloggers. And so typography doesn’t get the attention it deserves.
Typography matters because it is what makes a site pleasant to read. You might think you have written the most informative, moving, or hilarious article that ever saw the light of day, but if the typography is so bad that people go cross-eyed when they look at it, your brilliance is going to be wasted.

Typography is a complex art-science, but a few simple tweaks to a web page’s typography can make a huge difference to readability. I’m going to give you four tips and then point you in the direction of the web’s best typographic resource.

Stick To A Couple Of Typefaces

If you’re an experienced designer, you can do crazy things with font combinations and it’ll look great (probably). If you’re not a designer, don’t risk it. Stick with a couple of typefaces: preferably one for headings and one for body text. Using a serif for one and a sans serif for the other is a common choice — it’s not important if you use the serif for headings and the sans for body text or vice versa, both can work. Don’t try to be too smart with font combinations — two well suited fonts look great together; three poorly chosen fonts will ruin a page.

Consider Appropriate Sizes

Font sizes appropriate for print are too small for the screen. If you want people to read your content, for the love of Garamond, don’t make the text so tiny they have to zoom in or put their noses against the screen to see it.
Take a look at the text sizes on Medium for a approximation of how large your text should be, although be aware that the ideal size differs depending on the typeface, screen size, and screen resolution.

Line Spacing And Line Length

It’s not just the size of the text that matters, it’s the distance between the lines of text. Cramming the lines close together makes them difficult to read. Line spacing is controlled by the line-height CSS property, which should be set to a minimum of 1.2 times the height of the typeface and probably somewhat higher, but not much higher than 1.5 or the lines will look disassociated. Line length — the distance between the first and last characters of a line of text on the screen — should be somewhere between 50 and 90 characters. It should not stretch too far across the page and certainly not from one edge of the screen to another. Shorter lines are easier to read.

Only Underline Links

This one isn’t such a big deal, but it’s a personal irritation of mine so I’m going to include it. Underlining is not a useful habit except for links. Links should be the only text that is underlined. Underlining should not be used for emphasis — that’s what bold and italics are for. It shouldn’t be used for headings, where bolding, centering, altering type size, and altering typeface are all better options.
These four tips will do wonders for your site’s readability: use conservative font combinations, increase the type size, optimize line height and length, and remove underlining. But, there’s a lot more to typography than that, most of which you’ll find in Matthew Butterick’s excellent Butterick’s Practical Typography.