Tengo que crear maquetas en Photoshop en los 3 dispositivos (iPad, iPhone y escritorio).
Obviamente, el tamaño de fuente de 20 px en una tableta será mucho más pequeño que en una computadora de escritorio, así que, ¿alguien tiene idea de cuáles son las pautas de tamaño de fuente para maquetas en todos los dispositivos?
El tamaño de fuente será diferente en diferentes dispositivos, debido a las diferentes densidades de píxeles de las pantallas, pero puede sorprender lo bien que funcionan los mismos tamaños o tamaños similares en todos ellos. Esto se debe en gran parte a las distancias de visualización. Aquí están las densidades de píxeles para los dispositivos:
Como puede ver, las densidades suelen ser un poco más bajas a medida que los dispositivos se hacen más grandes. Esto significa que el tamaño de texto más pequeño y cómodo (para mí, de todos modos) es de alrededor de 10 puntos en todos los dispositivos. Alrededor de 14 puntos es bastante bueno para el cuerpo del texto. Los tamaños más grandes son menos preocupantes por la legibilidad, siempre que haya suficiente contraste. También es una buena idea verificar que su diseño sea compatible con el daltonismo.
Los HIG de iOS y macOS de Apple no tienen mucho que decir sobre el tema, pero vale la pena leerlos:
La respuesta más simple es 16px como mínimo. La explicación más simple para esto es que cualquier cosa por debajo de 16 píxeles es demasiado pequeña para ser legible en dispositivos móviles.
Aquí hay algunos enlaces que deberían aclarar por qué esta mejor práctica se usa para cosas que se ven en computadoras de escritorio, tabletas y teléfonos:
Se dice que la mejor práctica para el tamaño de fuente del correo electrónico es 16px: https://templates.mailchimp.com/design/mobile-friendliness/
Google recomienda un tamaño de fuente base de 16 píxeles: https://developers.google.com/speed/docs/insights/UseLegibleFontSizes
El tamaño de fuente predeterminado de la mayoría de los marcos CSS es 16px: http://foundation.zurb.com/sites/docs/global.html
¡Espero que esto ayude!