Normas tipográficas en el diseño

En el momento de diseñar una app, tanto para una versión móvil como para una versión de escritorio, debes tener en cuenta ciertas reglas que te ayudarán a presentar una UI práctica que le permita al usuario interactuar sin inconvenientes con dicha app y tener una buena UX. Por ello, en este post, te hablaremos sobre las normas tipográficas en el diseño y algunas recomendaciones de Apple y Google respecto a este tema.

Aspectos generales de la tipografía en el diseño

En diseño gráfico existen dos tipos de fuentes más usadas, debido a que su forma se presta para ser muy legible y no pierde calidad al modificar los tamaños. Estos tipos de letra son:

• Serif
• Sans serif

De acuerdo con esto, cuando estamos diseñando una app debemos tener en cuenta unos tamaños específicos que se relacionan con el uso que vamos a dar a la tipografía que elegimos. Por ello, es recomendable no utilizar tamaños menores a 11 pt, puesto que, en ocasiones, cuando la letra es muy pequeña no logra verse con claridad y el usuario puede sentir que nuestro producto no sirve.  

Siguiendo esta directriz, podemos decir que lo más adecuado es que los encabezados estén en un rango de 25 pt a 50 pt. En el caso de los subtítulos, lo ideal es un tamaño entre 15 pt y 25 pt. Por último, el cuerpo puede ir de 13 pt a 20 pt. En general, podemos considerar que el tamaño óptimo para la lectura es de 17 pt.

En todo esto se tiene en cuenta que el usuario siempre será nuestra prioridad, debido a que es la persona que va a calificar o determinar la funcionalidad de la interfaz que le estamos presentando. Por esto, debemos ofrecerle algo fácil de manejar e interpretar que se adapte a sus necesidades.

Probablemente, en la web encuentres mucha información acerca de este tema y te puedes sentir abrumado por no ver unanimidad en las recomendaciones; por esto, hoy te hablamos de elementos y recomendaciones de desarrolladores de apps a las que debes prestarles mucha atención porque responden a unas normas tipográficas en el diseño.

Normas tipográficas iOS y Android

En la industria existen grandes desarrolladores de apps, como Apple y Google, que tienen sus propias recomendaciones respecto a las normas tipográficas en el diseño. Estas recomendaciones responden a las jerarquías visuales que facilitan la lectura y guían al lector a través de los diferentes bloques de texto, con el fin de que sienta que el contenido que le estamos presentando tiene una armonía visual.

Por ejemplo, Apple utiliza la familia de tipografías San Francisco para sus dispositivos y Google implementa Roboto para su sistema operativo Android. Estos desarrolladores recomiendan un tamaño para las fuentes de acuerdo con las heading tags o etiquetas de encabezado.

Por esto, Apple aconseja el uso de tamaños de tipos dinámicos que tienen la característica de permitirle al usuario organizar el tamaño según su comodidad. Es así como sugiere el manejo de letra grande, distribuyendo el tamaño de las heading tags más utilizadas de la siguiente forma:

• Large titular, 34 pt
• Title 1, 28 pt
• Title 2, 22 pt
• Title 3, 20 pt
• Headline, 17 pt
• Body, 17 pt

En el caso de Google, nos presenta una escala tipográfica de ejemplo donde se hace uso de la fuente Roboto en todas las heading tags; en esta se quiere representar la diferencia que debe existir entre los encabezados. La principal característica es que varía el tamaño, el espaciado entre letras y el peso de la fuente. Los tamaños recomendados para algunas heading tags son:

• H1, 96 pt
• H2, 60 pt
• H3, 48 pt
• H4, 34 pt
• H5, 24 pt
• H6, 20 pt
• Subtitle 1, 16 pt
• Subtitle 2, 14 pt
• Body 1, 16 pt

Si quieres aprender más sobre los aspectos qué debes tener en cuenta al diseñar una app, te aconsejamos leer nuestro post Guía para diseñar apps iOS y Android, en el que encontrarás varias recomendaciones para diseñar apps tanto en iOS como Android.

¿Por dónde seguir?

Si la normas tipográficas en el diseño han despertado tu interés y quieres aprender más sobre el desarrollo y el diseño de aplicaciones, te invitamos a continuar con tu formación en nuestro Desarrollo de Apps Móviles Full Stack Bootcamp. En unos pocos meses te habrás convertido en un desarrollador profesional y dominarás todas las herramientas necesarias para el diseño de apps móviles. ¡Apúntate ya!