Maquetación y tipografía avanzada para web

Google Fonts, Typekit y similares

¡Prueba gratis durante 10 días

nuestros 1152 cursos !

Prueba gratis Mostrar modalidades de suscripción
A partir de la inclusión de la regla @font-face en algunos de los principales navegadores, no tardaron en surgir servicios que ofrecían un extenso catálogo de fuentes tipográficas de calidad que, mediante suscripción, podían ser utilizadas en la web.
09:52

Transcripción

En 2008, la regla @font-face fue incluida e implementada en Apple Safari y en Mozilla Firefox, por lo que cambiaba completamente el escenario de las fuentes para su uso en web. Por fin, íbamos a poder tener webs tipográficamente más complejas sin utilizar imágenes ni las fuentes por defecto del sistema. Aquí por ejemplo vemos esta composición tipográfica muy bonita y que está toda ella hecha con fuentes web, como haríamos en cualquier otro tipo de medio, como podría ser en el medio impreso en el que, simplemente, colocamos las tipografías y jugamos con ellas. Pues, desde 2008, que se introduce la regla @font-face, brindan a los diseñadores web la misma posibilidad. Así pues, no tardó demasiado en pasar lo que tenía que pasar. Y en mayo de 2009, Jeffrey Veen lanzó Typekit, que es este servicio que estamos viendo aquí de los cinco que vamos a ver. Hay muchísimos más, cada vez hay más, pero vamos a ver cinco en este vídeo. Y el primero de ellos es, como digo, Adobe Typekit, que fue lanzado en 2009 y que solo un par de años después ya fue comprado por Adobe. ¿Cuál fue la idea principal de Typekit? Bueno, pues ofrecer un servicio de hosting tipográfico en el que servir fuentes de gran calidad, de tal manera que, en este caso con un JavaScript, aunque hay otros métodos, te permite la posibilidad de incluir todas estas fuentes en tu página web sin preocuparte por la carga del servidor, ya que lo alojan en su servidorm y sobre todo por la compatibilidad entre navegadores, ya que mediante su JavaScript, que van actualizando continuamente, van implementando las mejoras necesarias para que todas estas fuentes se vean de la manera óptima en web. Vemos que hay diferentes propiedades, filtros... que se pueden filtrar por categoría. Bueno, hay un montón de opciones, además desde que lo compró Adobe, pues bueno, obviamente tiene mucha más potencia y la oferta de tipografías es una de las más completas del mercado, y de hecho ya no se limita solo como un servicio de fuentes web, de servir fuentes para utilizar en la web, sino que ya –integrado en Creative Cloud– sirve como una especie de Spotify o de Netflix de fuentes en la que tenemos un catálogo y vamos utilizando, vamos sincronizando tipografías según el plan que tengamos, y podemos utilizarlo tanto para trabajos "offline" como para nuestras páginas web "online". Vemos que tenemos tres planes: uno gratis en el que las opciones son menores, 50 dólares al año y 100 dólares al año, dependiendo de la cantidad de fuentes que puedes sincronizar o del número de páginas vistas de tus webs. Así pues, Adobe Typekit, es una de las opciones más interesantes que hay hoy en día para seleccionar y utilizar fuentes web. Esto pasó en 2009. Y en 2010, Google –que siempre está muy atento a estas cosas– lanzó su propia librería de fuentes, aquí la estamos viendo: Google Fonts, de manera gratuita, como la mayoría de servicios que ofrece Google. No hay que pensar que es una hermanita de la caridad siempre Google, aunque nos encante Google, porque de esta manera se aseguraba que iba a controlar todo el texto o una gran parte del texto que se escribiera en la web, gracias a las fuentes vio que había una manera, por fin, de leer y asegurarse que podía leer en cualquier idioma el contenido de un sitio web, que es lo que le interesa a Google para su buscador y para la publicidad y para todos sus servicios en los que se basan muchas veces en las recomendaciones y en la publicidad. Con lo cual, iba a controlar, como digo, el contenido gracias a las fuentes tipográficas. Así pues lo que hizo fue, como digo, lanzar Google Fonts. Empezó a contratar a diseñadores tipográficos y les iba haciendo encargos y a día de hoy hay cientos de familias tipográficas en el catálogo de Google Font, todas ellas accesibles de manera gratuita. Por ejemplo, aquí tenemos la Open Sans, vemos que tiene muchos pesos, muchos estilos, y simplemente seleccionamos los que vamos a utilizar en nuestra web, por ejemplo, vamos a utilizar el Normal, el Semibold Italic, el Semibold Normal y el Extrabold, y lo vamos a hacer pues en el juego de caracteres normal, pero además con griego. Bueno, pues simplemente te ofrecen tres métodos de incluir esta fuente también desde los servidores de Google en tu web y, simplemente, tú copias este código, lo pegas en este caso en la cabecera de tu web y ya podrías hacer uso mediante –bueno, pues la propiedad CSS Font Family, que lleva toda la vida, no hace falta complicarse más la vida– y ya podríamos usar esta fuente, servida directamente desde los servidores de Google Fonts. Esta sería otra gran opción, pero hay más opciones que también se basan en la misma idea, en que sirven estos servicios, las tipografías, las fuentes, directamente desde sus servidores, con lo cual, te aseguras la optimización de fuentes, que no te saltas o no incumples ninguna licencia y, sobre todo, compatibilidad con todos los sistemas y todos los navegadores. Por poner dos ejemplos más, bueno pues Fonts.com también es otra de las grandes de Monotype –que no es que su nombre sea premonitorio, pero es el gran monopolio de la tipografía actual– y lo mismo, tiene una solución completa de "web fonts". Todos se están sumando al carro, como es normal. Y que empieza desde los cero dólares al mes hasta los 100 dólares al mes, pues dependiendo del uso que le vayas a dar. Y tienes muchas fuentes, lo puedes usar también en InDesign, por ejemplo. Y aquí te cuentan todos los tipos de opciones que tienen, de cómo funciona, todas las tipografías que dispone en su catálogo, que al ser Monotype puedes utilizar desde Helvética hasta la Frutiger, la Gill Sans, DIN... Tienes, en realidad, las mejores fuentes del mercado. Esta sería, pues otra opción. Y otra que me gustaría comentar sería la de Typography .com que es el servicio de la maravillosa fundición norteamericana Hoefler & Company, que también ofrece todo su catálogo a través de Cloud Typography. Nos podemos meter a typrography.com/cloud y accederemos a estas funciones. Y lo mismo: bueno, funciona pues exactamente igual, nos ofrecen un código a través del cual se cargan desde su servidor todas las fuentes, asegurándonos que se va a ver todo correctamente, va a ser muy compatible, y además, a partir de todo el catálogo de tipografías que dispone esta magnífica fundición, con lo cual todo son ventajas. Lo mismo: tenemos distintos precios: 99 dólares por año, hasta 250.000 vistas de nuestra página web, y va subiendo según el éxito de nuestras páginas. Y por último, me gustaría comentar la opción de, por ejemplo, MyFonts, que por cierto también fue adquirida recientemente por Monotype acrecentando su leyenda de monopolio y que, bueno, es la mayor distribuidora de fuentes tipográficas, con lo cual, vamos a encontrar máximo catálogo, pero no ofrecen servicio –de momento– de Cloud Typography. Es decir, todo lo que compremos aquí nos lo descargamos a nuestro ordenador y, a partir de allí, si la vamos a utilizar en una web la tenemos que subir a nuestro propio servidor, pero si que nos ofrecen precios especiales para "web fonts". Nos ofrecen licencia para escritorio, nos ofrecen licencia para "web font" como algo aparte, y dependiendo del número de visitas o de páginas vistas de nuestra web. Así pues, tenemos también esta opción en la que ya no dependemos de una suscripción, sino que compramos la fuente para nosotros y la tenemos siempre para nosotros. Así pues, aquí tenemos cinco opciones. Como digo, hay muchas más, pero por fin podemos utilizar la fuente prácticamente que queramos en nuestros diseños web.

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.