Tipografía para diseño web: 9 cosas que debes saber

0
81

La tipografía tiene gran importancia, no por tratarse de un diseño para teléfono inteligente o tableta se debe descuidar.

Notas relacionadas
4 tipos de vídeos promocionales que hacen los diseñadores
3 tendencias que afectan a los diseñadores y creativos
La psicología de la geometría aplicada al diseño de logos
Cómo diseñar un cartel de manera sencilla: 6 pasos


Creative Bloq publicó un artículo sobre las reglas tipográficas para este tipo de diseños, por lo que sí estás en un proyecto relacionado con el diseño adaptativo, es importante que conozcas estos tips pues recuerda que la tipografía debe ser atractiva y efectiva. 

1. Primeras consideraciones. El margen de error en el contexto para dispositivos móviles es más pequeño, en comparación para lo hecho para pantallas más grandes. Además, varias tipografías pueden ser usadas en ambos tamaños, pero hay otras que no.

2. Cómo leen los usuarios en dispositivos móviles. La proximidad que los usuarios mantienen con sus dispositivos móviles es mucho más cercana de lo que crees, pues con frecuencia ellos leen muy de cerca sus dispositivos, además de que conviven más con estos aparatos. La clave en la tipografía para los dispositivos móviles es la legibilidad. 

3. Luminosidad y movimiento. Otro factor a considerar son las condiciones externas en las cuales los usuarios suelen leer, como por ejemplo la luminosidad, el movimiento y la conexión a internet. De hecho, la luminosidad es una variable que puede romper la lectura, pues esta influye fácilmente en como un lector es capaz de leer en la pantalla. En tanto que el movimiento es determinante, pues puede distraer, por lo tanto la tipografía debe atrapar la atención del lector. 

4. Contenido. Toma en cuenta que por el tamaño de la pantalla el contenido no debe mostrarse todo al mismo tiempo. Por lo tanto, debe editarse el contenido, pues pocas veces terminará de leer todo el contenido.

5. Básicos de la tipografía adaptativa. Puedes configurar el sitio con un estilo de tipografía que se adapte a cada uno de los tipos de pantallas (chicas y grandes). La tipografía web no necesita ajustarse a todas las situaciones del diseño adaptativo. CSS puede ser usado para cambiar los estilos visuales cada vez que sea visitado el sitio en diferentes dispositivos.

taco1

6. Diseño especfico. Las tipografías para sistemas móviles y responsiva fueron diseñadas de diferente forma que las creadas para soportes impresos y para las versiones de dispositivos de escritorio, sino basadas en los ems y rems, que son unidades más flexibles con el porcentaje basado en la estructura y más adaptable a los dispositivos. El objetivo no es crear consistencia es todas a las pantallas, si no hacer legible el contenido de acuerdo al tamaño de la pantalla.

7. Legibilidad. El desarrollo de la tipografía web tiene ciertas claves que deben considerarse para garantizar la legibilidad:
* Tipo de letra
* Estilos CSS (alineación, tamaño, longitud de la línea, etc.)
* Tiempo de carga

8. Tipografías móviles preferidas. Las fuentes que son demasiado intrincadas y delgadas no sólo son difíciles de leer, sobre todo para las personas con dislexia o discapacidades visuales, sino que también tienden a dejar de ser legiblesen tamaños más pequeños, sobretodo si la pantalla no es Retina. Para evitar esto, muchos diseñadores optan por utilizar fuentes sans-serif para los sitios web y aplicaciones móviles. Las formas de las sans-serif tienden a escalar mejor.

9. Tamaños. Considera si deseas que el sitio utilice las mismas fuentes en todos los tamaños de pantalla o si debe cambiar de fuente para las diferentes pantallas. Si usas las mismas fuentes, busca que escalen para las pantallas grandes o pequeñas. Si ajustas las opciones de fuente, puedes usar fuentes complicadas para pantallas más grandes y fuentes más simples para pantallas más pequeñas.

Versión de escritorio o pantallas grandes
Versión de escritorio o pantallas grandes

Fotos: Andrea Jasaui