I have to create mockups in Photoshop across all 3 devices (iPad, iPhone and Desktop).
Obviously 20px font size on a tablet is going to be a lot smaller then on a desktop so does anyone have any idea what the font size guidelines are for mockups across all devices?
Font size will be different across different devices, due to the differing pixel densities of the screens, but it can be surprising how well the same or similar sizes work across them all. This is largely due to viewing distances. Here’s the pixel densities for the devices:
As you can see, the densities typically get a little lower as the devices get bigger. This means the smallest comfortable text size (for me, anyway) is around 10pt on all devices. Around 14pt is pretty good for body text. Bigger sizes are less of a concern for legibility, provided there’s enough contrast. Checking your design for colour blindness support is also a good idea.
Apple’s iOS and macOS HIGs don’t have much to say on the topic, but they might be worth reading:
The simplest answer is 16px at minimum. The simplest explanation for this is that anything under 16px is too small to be legible on mobile devices.
Here are some links that should clarify why this best practice is used for things that are viewed on desktops, tablets, and phones:
Best practice for email font size is said to be 16px: https://templates.mailchimp.com/design/mobile-friendliness/
Google recommends a base font size of 16px: https://developers.google.com/speed/docs/insights/UseLegibleFontSizes
Most CSS frameworks default font size is 16px: http://foundation.zurb.com/sites/docs/global.html
Hope this helps!
