2

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?

2

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:

  • iPhones (all except Plus models): 163 points per inch.
  • iPhone Plus models: 153 points per inch.
  • iPad Mini: 163 points per inch.
  • iPad (non-mini models): 132 points per inch.
  • Macs: About 110 to 140 points per inch.
  • Apple’s external displays: 110 points per inch.

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:

1

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.