Whether you’re a budding developer or are a business owner maintaining your own website, don’t make the common mistakes that cost websites readers. The font a site uses can’t make that much of a difference, right?
You’d be surprised.
Font Sizing For Readability
Screen resolutions are growing. Long gone are the days of 800×600 screens where a 10 point Verdana font seemed standard.
These days that font size would be difficult to read, and that has a huge impact on whether a reader stays till the end of the page. Particularly with how much content people read on mobile devices, we have to be conscious of what content looks like on smaller screens.
Anything smaller than 16 pixels is too small nowadays. 18 is often better, especially if your readers are using laptops and tablets with 10-15 inch screens with high resolutions.
Here are some ratios that help keep everything in line:
- Page titles (H1’s) should be around 2.5x the size of body text. That means a big, bold 45 pixels with an 18 pixel body font.
- Subheadlines (H2’s) should be 1.5x the size of your body text. So if body text is 18 pixels, opt for around 28 pixels.
You can play with line width also for easy eye panning line to line. Too wide makes it difficult to find the beginning of the next line while reading. Visit Pearsonified for a great guide on sizes.
Line and Paragraph Spacing
Major content sites like Copyblogger teach people to use short, punchy paragraphs. In books longer ones make sense for description, but on the web long paragraphs make the content look dense.
It’s easier for the eye to scan the material and creates the psychological impression that the content is simpler to read.
Years ago studies on typography showed that, using the same text two places but one presenting as large blocks of text while the other was broken up with headings and short paragraphs, the shorter version showed much higher engagement. Users reported that version much easier to read and were far more willing to keep reading till the end.
Make sure to use a decent amount of spacing between each line, but not so much that it then becomes hard to contrast the gap with paragraphs. Generally line height should be 1.5x the height of the font. So if you’re using a 16px font you’d probably use a 24-26px line height to read well.
Typefaces Can Set The Tone
The biggest distinction in types of fonts is whether the font is serif or sans serif.
The serif is a small line that comes off of each stroke of a letter, and tends to give the typeface a formal look. You’ve seen it in newspapers and magazines, and would recognize fonts like Times New Roman, Georgia, Cambria, etc. This type of font was popular in books for a long time as well because printers felt the serif style was easier for the eye to read quickly and differentiate letters.
Sans serif fonts, such as Helvetica, Arial, Open Sans, tend to have a smoother and rounder appearance. This gives the fonts a more casual appearance in general. Bold, tall fonts used as titles with stark color contrast to other elements can still create a serious and dramatic look, however.
Before you get into whether you like Open Sans or Helvetica, or Georgia vs. Droid Serif, you should decide what sort of tone you’d like your site to take. For websites with a more serious presentation, such as lawyers or CPAs, serif fonts tend to be more common. Creative websites often opt for sans serif fonts, but that is by no means a rule.
Some sites, like Mark Manson’s blog, use a mix of both types in different areas to great effect. You’ll notice the titles are sans serif, giving the site a playful feel, but the body text is serif and reads a bit like a book. Appropriate since Manson is an author.
—
Practice these tips and you’ll create more readable content in no time. (We’ll create style guides on writing itself as well.)
