Here we look at body copy font size which in html is the <p>text goes here</p>. 

What

The body copy font size is what we look at most of the time so getting it right on different devices is crucial for that great user experience.

With the increasing use of mobile devices, ensuring appropriate body copy font sizes for smaller screens is crucial. Text that's too small on a phone becomes unusable, hindering accessibility and navigation issues.

The body copy font size will need to be different on each device. 

Why

In fairness font sizes are a correlation between the physical size which might be measured in pixels or rem and the font style. 

Some fonts are inherently more readable at smaller sizes than others.  

Text that's too small can be difficult to read, forcing users to squint or zoom in, leading to eye strain and frustration. It is really important to test on differenet devices.

From an accessibility perspective font size won’t make any difference for screen readers but it will electronic magnifiers and the elderly. However most assertive technology users will have their devices and equipment set up the way they want to integrate with a website

How

Most websites today allow the content manager to set the font size either in the admin panel globally or by use of a hipwig editor.

Some general guidelines:

  • Desktop: Most websites suggest a paragraph font size in the range of 18-20 px. This is a good starting point and balances readability with aesthetics.
  • Mobile: Due to smaller screen sizes, a slightly larger font size of 16-18 px is recommended for mobile devices.

This is just a starting point, you need to test test and then test some more.

This article uses body copy font sizes of 18pt on mobile and 20pt and font style Arial on iPad and desktop.

Overall, choosing the right body copy font sizes is a delicate balance. It's about creating a visually appealing and informative experience for everyone, ensuring your website is accessible and engaging for all users. Remember, a good user experience leads to a better website.

Further reading:

  • Line Length
  • Headings