Most sites today use rules that no longer apply in today’s world, rules that were conceived 20 years ago and did not take into account small smartphone screens or large smart TVs. We’re stuck with standards and mentalities that no longer make sense.

Larger font-sizes make it easier for older people – or anyone with a less than perfect eyesight – to read and consume content, while at the same time increase readability and the emotional impact of a post for everyone else. Using a larger font-size benefits everyone.

So why are we still using small font-sizes in the web? The answer is mostly tradition, and the fact that we’re used to it. We’ve been using sizes like 12px for years, then 14px, and only recently started using larger sizes.

Decades ago, in the typewriter era, typographers and publishers agreed that 12pt was about the right size to balance legibility and paper quantity costs.

Fast forward to the 1990s and the digital era; Apple and Microsoft both had the same problem: converting points (pt) to pixels (px) in order to establish a base for their platforms. As it turns out it’s not as simple as you may think. Apple decided to go for a 1:1 ratio, so 12pt were translated to 12px. Microsoft on the other hand calculated 12pt as 16px – which is why most browsers today use 16px as their base font-size.

Early on in the digital revolution, many designers were using Apple’s O.S. so for more than a decade we saw digital content – including websites – use 12px for their content. Additionally, a lot of people were using computers to write content that would then be printed on paper, and text editors like Word etc were using points (pt) to convey font-sizes. So the number 12 for body was engraved on our conciousness as the perfect size for body, ignoring the fact that the units that accompanied that number were different.

Fast forward to today: Print media is no longer the primary source of information and knowledge. We consume the majority of our daily content using our phones, laptops, desktops, smart-TVs and other digital devices. The size of the devices we use to consume content varies greatly, from 4-inch small smartphones to large 50-inch screens.

Using small font-sizes for our content no longer makes sense. The only reason most of us use small sizes is force of habit. We’re simply used to them. Designers for years believed that 16px looks too large because they were used to smaller sizes, and only in recent years have started to consider 16px as a minimum.

Another reason some opt to use a smaller font-size is because we’re trying to use a one-size-fits-all mentality: A large portion of our userbase uses mobile devices which traditionally have a smaller size and are held closer. So when designing with a mobile-first mentality we use a font-size of 15 to 18px. That however excludes larger screens and makes content harder to read when the user is not on a mobile device since the user sits further away.

Lately we’ve started seeing big sites opt for larger font-sizes. The Washington Post uses 20px, Medium defaults to 21px, Forbes uses 21px and there are a lot more that started going for bigger sizes. We’re starting to see sites use font-sizes that vary depending on the device used, ranging from 18px on a mobile device all the way up to 54px on large screens.

Our suggestion: use a responsive font-size. 16px should be the minimum size on a mobile, and preferably you’d use 18px. On a desktop you should consider using a font-size of 20px or bigger.

14px and even 16px may guarantee legibility, but they don’t guarantee readability. Don’t be afraid to use a larger font-size. It may look big to you at first, but while you’re contemplating on your design choices, your users and audience will be consuming your content a lot easier and effortlessly.

For a number of years pale grey text on a white background, or white text on a light grey background were something common. Before you decide what colors you’ll be using for your text background and your main text, we urge you to reconsider.

Text should have sufficient contrast with its background. Not everyone perceives colors the same way you may perceive them, so it’s important to take everyone into account.

You should not use a dark background with light-coloured text for your main content. It has been proven that a reversed color scheme decreases readability and focus, making it harder for the majority of users to properly concentrate and consume content. That’s not to say that you should never use a dark background with light text. A reversed color-scheme may be used in some areas of a website like for example menus since the volume of content there is limited and the change in contrast makes it clear that it’s a different section, not to be confused with the main site’s content area.

You may be tempted to use black text on white background. After all, it guarantees a high contrast and it’s what books have been doing for decades. However, there’s a huge difference between print and a screen; paper reflects a portion of the light it gets, while screens generate light. As a result, screens are a lot brighter. Bright light is annoying to many people and doesn’t help when it comes to allowing them to effortlessly consume content. For other people (including myself), bright light can triggers migraines.

So what are the perfect colors to use for background and text colors? Unfortunately there is no “perfect” solution. But you can use this as a guideline: Start with black text on white background, and then try to tame these 2 extremes and go for a light grey background and dark grey text. My personal preferences are #f2f2f2 for background and #222 for text but feel free to experiment and find a balance you’re comfortable with.

Choosing the right typeface can sometimes seem like a daunting task.

Many support that sans-serif fonts are easier to read in the web, but that is not always the case.

Serifs serve a purpose and solve a lot of problems with legibility. For example someone with dyslexia or some other reading disorder may find a sans-serif typeface confusing. The simplicity and minimalism of sans-serif fonts means that some letterforms are extremely similar (if not identical). For example the lowercase letter l, uppercase I and the number 1 are sometimes indistinguishable in sans-serif typefaces.

Making your text legible to people with dyslexia or other reading disorders makes your text pleasant to everyone.

It is a lot more preferable to have content that can be easily consumed by everyone – including people with reading disorders – than to alienate a part of your audience.

If you’ve ever tried to read a book that uses a sans-serif font and compare it to a book that uses a standard serif typeface you’ll soon realize that you can read the book that uses the serif typeface a lot faster and effortlessly.

We suggest you follow some simple rules to find the right typeface.

• The typeface you choose should support the language(s) you want to use on your site. It should support all styles you want to use (bold, normal, italics) and any special characters you need.
• Letterforms should have a uniform and consistent height.
• Letterforms should be unique and not confused with other letters or symbols.
• Avoid ornamentations that don’t contribute to the comprehension of the letterforms.
• Generous ascenders and descenders (like the vertical lines in b and p) increase legibility.
• The letters d and b should not be exact mirror images of one another to increase legibility.
• The uppercase I, lowercase l, as well as the number 1, should be clearly distinct.
• Make sure there is sufficient spacing between letters – particularly between r and n. This way rn can not be confused for an m.