Maquetación y tipografía avanzada para web

Seleccionar una fuente óptima para su lectura en pantalla

¡Prueba gratis durante 10 días

nuestros 1141 cursos !

Prueba gratis Mostrar modalidades de suscripción
A la hora de seleccionar una fuente para web, tenemos que tener en cuenta propiedades o características propias del medio. Así pues, vamos a ver en qué deberemos fijarnos a la hora de seleccionar una tipografía que vaya a leerse en pantalla.
07:26

Transcripción

A la hora de seleccionar una fuente para nuestra web, deberemos tener en cuenta algunos factores y el primero de ellos es que sea una fuente óptima para su lectura en pantalla, obviamente se diseñan de forma diferente las tipografías para su lectura en papel, de hecho depende incluso de la calidad del papel o si vamos a utilizarla en pantalla. La anatomía de la letra y la construcción de la letra es diferente. Por eso, bueno, vamos a ver unos ejemplos a través de Google Fonts y vamos a fijarnos en qué deberíamos tener en cuenta a la hora de seleccionar una tipografía. Lo primero es obvio: qué queremos transmitir, qué juego de caracteres, qué características grosso modo deben tener... y para ello Google Fonts nos provee de, pues primero de una clasificación: Serif, Sans Serif, Display, si es manuscrita o si es monoespaciada. Podemos aquí seleccionar, quitar, poner opciones e iremos filtrando entre el amplio catálogo de Google Fonts. Lo mismo pues con ciertas características donde podemos, mediante este deslizador, ir centrando nuestra búsqueda y algunas de las cosas más importantes también puede ser el sistema de escritura, por ejemplo si queremos que esté en griego. Como nuestra página web va a estar en griego, pues tendremos que buscar una tipografía que tenga juego de caracteres en griego. Vemos que tenemos varios sistemas de escritura, se ha molestado Google en crear o en encargar tipografías que estén preparadas para diferentes tipos de escritura, pues aunque podemos ser muy occidentales nosotros, pero el mundo es mucho más grande y por eso seguro que tienes algún proyecto que esté involucrado otro tipo de escritura. Hay que tener en cuenta estas cositas. A partir de aquí, ¿en qué hay que fijarse? Una vez que tengamos más o menos claro, como digo, qué queremos trasmitir, el juego de caracteres que queremos utilizar, qué características generales tiene que tener nuestra tipografía, pues vamos a fijarnos en cositas como, por ejemplo, vamos a ver... Primer ejemplo: Montserrat, de Julieta Ulanovsky, que tenga una altura equis generosa, que las proporciones entre ascendentes y descendentes sean las adecuadas para su lectura en pantalla. ¿Qué quiere decir esto? Bueno, ¿altura equis? La altura equis es la altura que hay entre la base de las letras y la altura de las minúsculas. Podemos tener unas proporciones en las que esta altura equis sea menor, por ejemplo llegará un poquito por aquí ,y las mayúsculas, las ascendentes superarán o tuvieran una proporción mayor con respecto a esta altura equis. ¿Qué ocurre con esto? Bueno, pues que en tamaños pequeños nos puede dar problemas, por eso vamos a intentar que, por ejemplo, como es esta Montserrat, tenga una cierta apariencia de condensación vertical, que no es otra cosa que, bueno, pues que tiene una altura equis mayor y entonces a tamaños pequeños vamos a ver que funciona perfectamente ¿Otro de los elementos que hay que tener en cuenta? Bueno, que tenga formas abiertas. He elegido precisamente este ejemplo, porque como digo tiene una altura equis generosa y esto es bueno, pero en cambio tiene formas como por ejemplo podemos ver en la 'e', que es muy cerrada, y a tamaños pequeños, bueno pues puede llegar a confundir y llegar a crear una mancha que no queremos, dado que aunque las pantallas avanzan a mucha rapidez, todavía no tenemos la resolución necesaria para renderizar las fuentes tal como se hacen en papel. Por eso es conveniente elegir una tipografía cuyas formas sean abiertas. ¿Qué quiero decir con esto? Vamos a fijarnos en la 'a' y en la 'e' nuevamente y vemos que aquí tenemos una apertura mayor que en Montserrat, donde vemos que casi se cierra la forma en la 'e' y en la 'a'. Y aquí, en cambio, en la Open Sans de Steve Matteson tenemos formas abiertas. ¿Esto en qué se traduce? En que cuando estamos en cuerpos muy pequeños como es este, que tal vez sea demasiado pequeño este ejemplo, vamos a tener mayor personalidad o mayor lecturabilidad en esta letra y van a ser más fácilmente leídas por el usuario. Vamos a ver otro ejemplo. Esta vez con una tipografía con serifa, más concretamente una de las Serif: Slabo de John Hudson, donde vemos que ha seguido la misma lógica dado que ha diseñado esta tipografía para pantalla. Vemos por ejemplo la 'e' y la 'a', que a pesar de esa Serif, ha conseguido que las formas sean lo suficientemente amplias. Vemos la 'c' también por ejemplo como para que, a tamaños pequeños, aquí de nuevo tenemos tal vez un tamaño demasiado pequeño, vamos a ampliar un poquito para entenderlo, vemos que la 'e', la 'c' funcionan perfectamente gracias a esa apertura de formas, que igual para ciertos casos en papel no haría falta. Así pues, recapitulamos: altura equis generosa –vemos las proporciones– apertura de formas, lo mismo para las tipografías con serifa, y el último paso obvio debería ser que haya sido diseñada para pantalla. Es decir, que la tipografía que elijamos para nuestra web haya sido pensada, que su función... porque en diseño lo más imporante debería ser la función por encima de la forma, y en tipografía más todavía, o vamos a seleccionar una tipografía que haya sido pensada para este nuevo medio. Tenemos Helvética, que es una de las tipografías más exitosas de la historia, no vamos a entrar en si está peor o mejor diseñada, vamos a entender que sí que está muy bien diseñada, que es una tipografía que es profesional por supuesto, y que tiene unas características formales muy interesantes, pero que fueron diseñadas a mitad de siglo XX y por lo tanto no había ninguna posibilidad de que esta tipografía fuera usada en pantalla. ¿Qué ocurre? Bueno, pues que ha habido actualizaciones y demás pero esta tipografía, como digo, ha sido diseñada para un medio distinto al de pantalla, con lo cual nos vamos a centrar en tipografías diseñadas. pues por ejemplo en la última década, en las que sí que el diseñador ha tenido en cuenta que esa tipografía va a ser utilizada principalmente en pantalla, y va a tener las características que comentamos de una altura equis generosa, formas abiertas, etc. Vemos que por ejemplo la 'a', pues está muy cerrada. Aquí tenemos una 'e', pues lo mismo, también casi se cierra del todo. ¿Por qué? Bueno, pues porque cuando fue diseñada para los medios de revolución que había entonces, eso no era un problema crítico como sí que podría ocurrir con el medio de la pantalla, como podría ser actualmente. Así pues, como digo, a la hora de seleccionar una tipo para pantalla, vamos a tener todas estas cosas en cuenta: hay que tener en cuenta lo que queremos transmitir, que tenga las características estilísticas que nosotros queramos de la tipografía pero, aparte, tenemos que ser conscientes del medio en el que vamos a trabajar, que es la pantalla.

Maquetación y tipografía avanzada para web

Aprende cómo seleccionar una fuente óptima para su lectura en pantalla y cómo exprimirla para aprovechar en tus proyectos web todas las posibilidades de las fuentes OpenType.

2:10 horas (25 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:30/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.