The Responsive Website Font Size Guidelines
Everything else I have to say about mobile web font sizes is basically a guideline:

Use a body font size around 16px. You want the body text on your phone (when held at a natural distance) to be as readable as the text in a well-printed book (when held at a natural – usually slightly farther – distance)

For secondary text, unimportant labels, and captions, use a size a couple notches smaller – such as 13px or 14px. I don’t recommend going down just one font size, since then it’s too easy to confuse with normal text. When text is less important, you want to style it so that you’re clearly communicating the lesser importance.

The gold standard will be viewing your designs on an actual device. I can’t recommend this practice highly enough, since the feel of an mobile app design on your laptop screen is way different than when you’re holding it in your hand. As a beginning designer, I was shocked almost every time I opened on mobile a page I designed on desktop. Font sizes, spacing… everything was off. So use Sketch Mirror or Figma Mirror or whatever app makes sense for you, but view your designs on-device.

Finally, for any other questions you have about mobile web font sizes, refer to the Material Design guidelines which are clear, consistent, and ingenious (though not concise). The older I get as a designer, the more convinced I am that even though Apple has all the design cred, Google is currently walking all over them. But don’t tell the design snobs I said so.

Desktop Web Typography Guidelines

When picking a base size for a desktop website or web app, you can break down most designs into one of two types:

Text-heavy pages. Articles, blogs, news, etc. These are pages where the primary purpose the user has on the page is to read. There is very little in terms of interaction – perhaps just clicking a few links.

Interaction-heavy pages. Apps that involve more hovering, clicking, searching for an item in a list or table, editing, typing, etc. There may be plenty of text on the page, but it’s not stuff you read straight through like a book.

Text-Heavy Pages
Long story short, for text-heavy pages, you want larger font sizes. If folks are reading for long periods of time, be nice: don’t make them strain their eyes. Now, each font is different, even at the same size, but we’re talking:

16px – absolute minimum for text-heavy pages
18px – a better font size to start with. You’re not printing out a single-spaced Word document; you’re writing for people sitting a couple feet from their decade-old monitors.
20px+ – may feel awkwardly large at first, but is always worth trying out in your design app. The best-looking text-heavy site on the web, Medium.com, has a default article text size of 21px.

The original article was published on learnui.design