Maquetación y tipografía para web

Breve historia de la tipografía en la web

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aunque la historia de la tipografía web tiene apenas dos décadas, se han hecho grandes avances en este campo. Vamos a ver cuál ha sido esta evolución y qué trajo consigo cada paso dentro de la historia de las webfonts.
08:04

Transcripción

Vamos a hacer un breve repaso por la historia de la tipografía web, la cual es muy importante para la disciplina de la tipografía, dado que es un nuevo medio en el que cambian las cosas, cambian los formatos, cambia la forma de producir y de diseñar tipografías, pero también es muy importante para el medio en sí, para Internet, para las páginas web, para la informática, dado que se dice que el 95 % de la web es tipografía, el resto son vídeos, imágenes, etc. Pero el 95 % del contenido que podemos encontrar en Internet es texto. Por lo tanto, el arte de la tipografía debería tenerse tan en cuenta como cualquier otro. No se le ha dado la importancia que tiene hasta hace muy poco, pero esto vamos a verlo ahora. El 12 de diciembre de 1990 empezó todo, cuando Tim Berners-Lee publicó el primer sitio web de la historia, y este no es que fuera 95 % texto, era 100 % texto. Y se puede consultar aquí, en esta página que te dejó aquí: http://info.cern.ch/ hypertext/WWW/TheProject.html Y verás que es una página blanca, texto negro y algún que otro hipervínculo que es una de las bases de Internet y de las páginas web. A partir de aquí, no es hasta 1995 cuando Netscape introduce la etiqueta Font, la cual se incorporó como estándar en la especificación HTML 3.2. Un año después, en 1996, se incluye esta misma característica en la primera especificación CSS. En este momento, se podía definir la tipografía que querías utilizar en tu página web, aunque con la limitación de que tenía que estar instalada o en el sistema operativo del usuario o, si no, en su defecto, si no encontraba la que tú le indicabas de esas tipografías estándar, pues usaba la de por defecto del sistema, pero ya más o menos te dejaba elegir entre una tipografía Serif, Sans Serif, manuscrita, etc. Siguiente paso importante: en 1996, Microsoft publica Georgia y Verdana. Son encargadas por Microsoft al genio Matthew Carter, uno de los mejores tipógrafos o diseñadores de tipos de la historia. Y se lo encarga específicamente para páginas web y pantalla. Se dibujó por píxeles, mediante una rejilla de píxeles porque además las pantallas, antes, tenían una resolución mucho menor que las actuales, y luego se tradujo a vector. Para ello Matthew Carter, pues lo que hizo fue ampliar la altura de equis, hacer unas proporciones un poquito más condensadas en la escala vertical para que tuvieran más apertura en las formas, cosa que también tuvo muy en cuenta en letras como la 'e' y la 'a'. Vemos que los terminales no se terminan de cerrar, sino que se crean blancos, que igual en papel podrían considerarse excesivos, para que, a través de esa conversión, luego en píxeles no se empastaran las formas. Y además hizo que el espaciado fuera un poquito más generoso que para las tipografías que él había diseñado para otros medios de reproducción "offline" o analógicos. Así pues, en 1996, Microsoft empieza a tomarse en serio esto de la tipografía y hace un encargo que da como resultado Georgia y Verdana, que a día de hoy son dos de las mejores tipografías para pantalla. Saltamos un par de añitos y ya en 1998 la especificación CSS2 incluye la posibilidad de descargar una fuente a la máquina del usuario. Ya no le decimos solo que queremos, si se puede, que utilicemos esta tipografía, sino que le damos la posibilidad al usuario, de manera totalmente transparente, el usuario no se da cuenta, pero le damos la posibilidad a la máquina del usuario de descargarse una fuente para utilizar esa, en cuenta de las que tiene instaladas en su ordenador previamente. Internet Explorer 4 fue el primer navegador en soportar esta característica de CSS2, pero tuvo poca aceptación, hubo muchos problemas con las licencias de uso y la protección de las fuentes, así que durante una década ni siquiera se utilizó esta nueva regla o especificación de CSS2. Por tanto, a mediados de los 90, las posibilidades eran usar "Safe-fonts" –ahora veremos lo que es– o texto como imagen, es decir, nosotros escribíamos un texto, un titular, el título de nuestra web con la tipografía que más nos gustara de todas las que tuviéramos en el catálogo tipográfico de nuestro ordenador y exportábamos como JPG, por ejemplo, y lo poníamos en la cabecera de nuestra web ¿Cuáles eran las "Safe-fonts" que había entonces? Arial, Courier New, Times New Roman, Comic Sans, Trebuchet, Verdana, o Georgia que hemos mencionado antes, aunque no estaban en el 100 % de las máquinas del mundo, pero se supone que eran las fuentes más extendidas y que seleccionando esas, pues podríamos tener cierta seguridad. Con respecto al texto como imagen, sí que podíamos utilizar cualquier tipografía porque era una imagen –igual que una fotografía, podemos usar una fotografía de unas letras– pero no podía ser editado mediante código, teníamos que volver a subir otra imagen si queríamos cambiar cualquier cosa, ni puede ser leído ni por lectores de pantalla, ni por los robots de los buscadores, ni por nada de nada. Así pues, tenemos que esperar hasta 2008 cuando la regla "font-face", que es la que ya se había incluido de manera poco exitosa en CSS2, luego en CSS3 se amplía, y en 2008 "font-face" es implementada y soportada por Apple Safari y Mozilla Firefox. ¿Qué quiere decir esto? Bueno, pues que con el CSS3 y el soporte por parte de estos dos navegadores que entonces pues ya empezaban a tener una cuota de mercado muy importante, todo se dispara y ocurre lo inevitable en 2009: nace Typekit de la mano de Jeffrey Veen, que luego compra posteriormente Adobe. Y en 2010 ya es la locura, porque Google lanza Google Fonts, que ofrece un catálogo gratuito de tipografías, de fuentes tipográficas, lo cual es una gran ventaja. Frente a las 8 ó 9 opciones que teníamos antes más o menos segura, ahora tenemos 100 fuentes, por ejemplo, y Google nos asegura que se van a ver en todas las máquinas, porque las están sirviendo directamente desde el servidor de Google. Y así llegamos hasta el día de hoy que la regla "font-face" es soportada por todos o el 99 % de los navegadores actuales: Internet Explorer, Firefox, Chrome, Safari u Opera, y los navegadores móviles, como puede ser: Safari para IOS, Android... Además, ya no tenemos solo Typekit y Google Fonts, sino que las principales fundiciones tipográficas del mundo, o incluso uniones de ellas, ya ofrecen servicios de "web fonts" alojados en sus servidores, asegurándote que vas a poder utilizar fuentes tipográficas, una gran variedad de ellas, de fuentes tipográficas profesionales en tus páginas web como si fuera una publicación "offline" que tienes en tu ordenador, en la que tienes una página y una tipografía instalada en tu máquina. No, ahora, aunque sea una página web puedes utilizar la tipografía dentro de su catálogo que quieras. Hasta aquí pues, la historia de la tipografía web. Vemos que en pocos años hemos hecho grandes avances y todavía quedan muchos por venir.

Maquetación y tipografía 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.