UI – Guía de tamaños de fuente

UI – Guía de tamaños de fuente

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

Títulos de página, títulos modales  (el mayor tamaño para título será de 34pt) 17pt
Texto de párrafo, enlaces 17pt
Texto secundario 15pt
Texto terciario, subtítulos, botones segmentados 13pt
Botones, entradas de texto 17pt
Barra de acciones (leyenda de iconos de acción) 10pt

Pautas de tipografía de Android

En este caso tomamos como referencia la fuente roboto

Títulos de página 20sp
Texto de párrafo, enlaces 14sp
Lista de títulos 14sp
Lista de títulos de elementos, fragmentos de texto importantes 16sp
Texto secundario, subtítulos 14sp
Botones, pestañas 14sp
Entradas de texto 16sp

Pautas de tipografía para Web

Títulos de página 20px –
Texto de entrada 16px
Tamaño de cuerpo 16px
Texto secundario 13 – 14px

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

Pt Px Em Porcentaje
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

 

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.

DUGAS, la fuente ideal para diseñar tus carteles

DUGAS, la fuente ideal para diseñar tus carteles

Dugas es una fuente ultra condensada y minimalista ideal para el diseño de carteles, títulos y titulares. Aquí os dejo unos ejemplos en los que podéis ver la fuerza que tiene.

Puede ocurrir que si utilizamos tamaños pequeños de fuente o poco contraste con el fondo, llegue a ser poco legible, pero para eso siempre hay solución. Bastaría con darle a la fuente un estilo de trazo interior de 1px y con el mismo color de fondo, de ese modo le quitamos espesor a la tipografía, pero a cambio es más legible, es cuestión de gustos 😉

Al final del post puedes descargarte la fuente DUGAS de forma gratuíta

DESCARGA GRATIS LA FUENTE DUGAS

 

 

¿Buscas un sitio donde inspirarte y con buenos recursos gráficos?

¿Buscas un sitio donde inspirarte y con buenos recursos gráficos?

Me gusta tener un listado de sitios a los que recurrir cuando tengo necesidad de encontrar algo distinto. Unas veces se trata de inspiración, otras alguna fuente que me sorprenda, ¿sabes de lo que te hablo verdad? 😉

Frebie es uno de los últimos que he añadido a mis favoritos y que hoy me gustaría compartir con vosotros.

AHHH !!!! Y ES GRATIS !!!!!

Aquí os dejo una muestra de alguno de los recursos que podéis encontrar, y al final del post el enlace para visitarlo, espero que sea de vuestro agrado.

VISITAR FREBIE
Fuente Facunda, retro-vintage. Descarga Gratis.

Fuente Facunda, retro-vintage. Descarga Gratis.

Facunda es una fuente gratuita creada por bybu.

Se trata de una fuente condensada ideal para titulares modernos con un aspecto retro-vintage. Cuenta con 5 estilos diferentes y es de uso público.
En principio os puede parecer que no hay diferencia en el estilo alternate, si os fijáis por ejemplo en la barra horizontal de la letra A, veréis que en la variedad alternate, en lugar de estar situada a mitad de altura, está un poco más alta.
A continuación os dejos una imagen para que podáis ver su aspecto y el botón de descarga.

(más…)

Tipografía digital. Guía rápida y descargas gratis.

Tipografía digital. Guía rápida y descargas gratis.

La tipografía siempre ha ocupado un lugar preferente en el diseño gráfico. Además de ser básica para destacar el mensaje que queremos comunicar, también nos sirve para establecer una jerarquía dentro de ese mensaje.

Esta guía pretende dar indicaciones básicas para poder hacer un uso correcto enfocado al diseño web y de web Apps.

(más…)

Guía tipográfica para el diseño web móvil

Guía tipográfica para el diseño web móvil

El año 2017 fue denominado por Google como“El año de los móviles” en base a su informe anual Consumer Barometer 2017.  Por primera vez en la historia, el uso de Internet en dispositivos móviles registraba un porcentaje superior al 50 % en los 63 países incluidos en el estudio.  España es en este sentido uno de los países más “adictos” a su uso, un 91% de los usuarios online se conecta a través de su Smartphone, los mismos que Hong Kong o en Singapore.Un 64% ve vídeos online y un 79% utiliza su móvil para realizar búsquedas, una de las cifras más altas del mundo, muy por encima de la media mundial que es del 65%.

Estos datos son suficientemente relevantes como para prestar una mayor atención al diseño web móvil, especialmente a las tipografías utilizadas.  Desgraciadamente nuestra labor como diseñadores web viene condicionada en la mayoría de las ocasiones por las guías de estilo establecidas por nuestros clientes.

El uso correcto de la tipografía en el diseño web móvil es fundamental en la usabilidad y experiencia del usuario, veamos lo que dicen los expertos sobre cómo mejorar este uso en dispositivos móviles. (más…)