UI – Guía de tamaños de fuente

por Omar Benyakhlef | Diseño para móviles, Diseño Web, Fuentes, UI, Usabilidad, UX

Cuando hablamos de diseñar para web o app, una de las preguntas que me suelen hacer es ¿cuál es el tamaño correcto que debo usar?.

La proliferación de pantallas HD lleva tiempo dándonos dolor de cabeza a los diseñadores. Lo que en un principio sólo era un simple «Pixel (px)» ahora se ha convertido en  «puntos (pt)», «píxeles escalables (sp)» o «píxeles independientes de la densidad (dp)» como para no preocuparse !!
En este post no nos vamos a meter en temas de programación, vamos a enfocarlo sólo desde el punto de vista del diseñador, si se te escapan estos términos o la densidad de pantalla, o los factores de escala, lee este post de Densidad de pixel, tamaño de diseños para HTML, Android e iOS

Pues bien, para definir el tamaño correcto de fuentes, como es evidente, habrá que diferenciar si se trata de web, de web-mobile, de iOS o de Android, vamos a ello:

NOTA: Todas estas pautas están definidas por Google y Apple developer.

Pautas de tipografía de iPhone

Pautas de tipografía de Android

En este caso tomamos como referencia la fuente roboto

Pautas de tipografía para Web

Los títulos a partir de 20px, luego ya queda a criterio del diseñador si quiere usar títulos extra grandes.

Equivalencias entre pt, px, em, %, sp

Para ver la equivalencia de sp o dp con px, accede aquí: Equivalencias px dp

Nielsen sugería un tamaño mínimo de 10 puntos correspondiente a 13px o bien 12 puntos que corresponde a 16 px si el público objetivo eran personas mayores.

Si nos fijamos en alguno de los sitios más visitados, Twitter, Amazon o Wikipedia, utilizan 14px y Google 13px

Todas estas tablas y medidas significan más tiempo a la hora de desarrollar un trabajo, pero son indispensables si queremos que el resultado de nuestros diseños sea perfecto en cualquier pantalla. Pero además de los tamaños de fuente, hay otros factores que son muy importantes y que ayudan a que la usabilidad sea mejor, un ejemplo es el interlineado, de nada sirve utilizar buenos tamaños si luego hacemos denso el texto. Como norma general se usa un mínimo del 120% del tamaño de la fuente para el interlineado, siendo 1.5em, 150% lo ideal- Tenemos que hacer que la lectura sea fluida, que no cueste diferenciar el renglón, pero que tampoco haya que pegar grandes saltos de una línea a otra.

Otra de las recomendaciones, se refiere a la cantidad de texto por línea. El ancho óptimo va de los 45 a 75 caracteres, estableciéndose que una línea de 66 caracteres se puede considerar ideal para obtener una buena experiencia de lectura.

Si lo que te preocupa es el contraste, hay una herramienta muy útil que nos indica si es o no correcta la elección que hemos designado a nuestro fondo y tipografía. Contraste fondo-tipografía

Más abajo tienes más artículos que te pueden ayudar también a la hora de elegir la fuente correcta.

ARTÍCULOS RELACIONADOS:

Guía tipográfica para el diseño web móvil Diseño de interfaz, menú hamburguesa. Animaciones gratis !!! Tipografía digital. Guía rápida y descargas gratis. La importancia del rendimiento en una web o webApp Google te ayuda con el color en tus diseños para Apps Densidad de píxeles. Diseñando para móviles. Genial formulario con CSS y jQuery !!! 24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!! Tendencias Web. Responsive Design. UX, diseñando un slider, ¿qué no debo hacer?