Mobile app version of vmapp.org
Login or Join
Jamie315

: Font size for mockups across all devices 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

@Jamie315

Posted in: #AdobePhotoshop #Mobile #Mockup #Text

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?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Jamie315

1 Comments

Sorted by latest first Latest Oldest Best

 

@Carla748

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:


iOS Human Interface Guidelines
macOS Human Interface Guidelines

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme