Maquetación y tipografía avanzada para web

Ligaduras tipográficas: tipología y uso

¡Prueba gratis durante 10 días

nuestros 1145 cursos !

Prueba gratis Mostrar modalidades de suscripción
Hay ligaduras estándar y ligaduras decorativas. Estas últimas son especialmente interesantes y útiles para aquellas ocasiones en las que nos gustaría enriquecer un texto con un detalle de elegancia estética. Veamos, pues, cómo usarlas.
07:05

Transcripción

Una de las características más interesantes de la tipografía digital es que ya disponemos de ligaduras, tanto estándar, como puede ser la de 'fi', —ahora veremos lo que son, cuál es la diferencia— como decorativas, discrecionales, históricas o como quiera que las queramos llamar. Esto ya está disponible en la tipografía, como digo, digital, ya desde hace unos años. Y también, por fin, podemos hacer uso en nuestras páginas web a través de 'Web Fonts'. Vamos a ver primero qué son estas ligaduras, estos elementos, estos glifos con entidad propia. En primer lugar, tenemos las ligaduras estándar, que son aquellas que resuelven problemas de dibujo, de espaciado, etc. Por ejemplo, cuando juntamos una 'f' o una 'i', que es la ligadura más común, la gota de la 'f', según la anatomía de esta tipografía en cuestión, puede que haya otras en las que no haya tanto problema, pero si existe un problema entre la gota y el punto de la 'i', bueno se crea una ligadura en la que se junta la barra de la 'f' y de la 'i', y la misma gota de la 'f', sustituye al punto de la 'i' y hace a su vez función de punto de la 'i'. Por este lado, estarían este tipo de ligaduras, como digo, están la 'fi', 'ffi', 'fl', 'ffl'. Y bueno, esas serían la más comunes. A veces también incluye la 'fh' y la 'ffh', pero bueno, sobre todo tener en cuenta que son la 'fi' y la 'fl'. Y en la mayoría de tipografías, están activadas por defecto, y que de hecho los exploradores ya modernos empiezan a activarlas por defecto. Las que no están activas por defecto porque son decorativas, como esta que tenemos aquí, son, como digo, las decorativas, históricas, discrecionales, como esta 'ct'. Hay otras que pueden ser 'ch', 'st'... Hay varias de estas que son muy comunes e incluso podemos inventarnos todas aquellas que nos dé la gana. La cuestión es que podemos crear una ligadura para unir dos letras de una forma, ya no para resolver un problema como podía ser en la 'fi', sino como en este caso de la 'ct', para bueno, una misión gráfica, estética o decorativa. ¿Sirven para algo? Bueno, pues sirven para lo que sirven, es decir, para decorar, para hacer más bello un texto. Si tuviéramos un texto de 200 páginas, en que cada vez que se repite esta combinación de letras 'ct' tuviéramos este arco, estaríamos sacando al lector de la comprensión del texto, porque estaría todo el rato viendo algo que es extraño —bonito pero extraño— porque no es lo normal encontrar este tipo de unión entre la 'c' y la 't'. Así que pues hay que usarlo con mesura, hay que usarlo cuándo hay que usarlo: para algún titular, para algún título de página, para algún "banner", para algún anuncio, para eso son perfectas este tipo de ligaduras. Así pues, ahora que ya sabemos lo que son las ligaduras y que además sabemos que podemos utilizarlas en web, vamos a utilizarlas. Tenemos nuestra página de pruebas. Vamos a crear otro apartado, vamos a llamarlo 'Ligaduras', obviamente. Vamos a borrar esto de las comillas para dejarlo limpio. Y tendríamos este texto sin ningún problema compuesto en esta tipografía, que por desgracia no dispone de ligaduras, porque es más normal verlas en las tipografías con Serifa que en las Sans Serif. Así pues, vamos a crear una clase y vamos a llamar a una tipografía que yo tengo instalada en mi ordenador, que sí que contiene ligaduras, tú seguro que tienes más de una, de hecho, puede tengas incluso esta: Minion Pro, de Robert Slimbach, —una de mis tipografías favoritas—. Sí que tiene algunas ligaduras discrecionales, así pues vamos a llamarlas. Una las primeras cosas que deberíamos hacer, sería llamar a las ligaduras 'estándar', como decíamos, aunque como digo ya muchas veces está activado por defecto. Se llamaría así, sería 'font-variant', la propiedad CSS, con respecto a ligaduras, llamamos a las ligaduras comunes. Y por otro lado, como lo que queremos es llamar a las ligaduras decorativas, históricas o discrecionales, pueden recibir cualquiera de estos tres nombres —en inglés: "discretionary ligatures"—. Así pues, ya estarían llamadas, aplicadas a esta clase de ligaduras. Vamos a aplicar a este párrafo esta clase. Ligaduras aplicado a este párrafo. Recordemos que ligaduras, hemos tenido que llamar a Minion Pro, que la tengo instalada en mi ordenador, y le hemos dicho que aplique tanto las ligaduras estándar como las discrecionales. Vamos a darle a Recargar y vemos qué pasa. Voy a ampliar para verlo mejor y vemos cómo se activan, en este caso la 'ct' y la 'st'. 'Ct', 'st', vemos como se ha activado cuatro veces. No sé si tenemos algún 'fi' para ver, pero en un texto falso cuesta poco comprobarlo, 'fi'. Recargamos y aquí lo tenemos. Vemos que tenemos la ligadura estándar y las ligaduras discrecionales activadas. Vemos que ha sido muy fácil, que es muy útil, muy decorativo. Como digo, igual para el texto corrido —podríamos decirlo de forma categórica— no es lo más idóneo llenar un texto de ligaduras decorativas, pero para titulares y piezas un poco más gráficas, las ligaduras van a subir de nivel tu trabajo tipográfico. Y lo hemos hecho simplemente con 'font-variant-ligatures', 'discretionary-ligatures'. Y quedan así de bien nuestras ligaduras. Recordemos que no estamos trabajando en InDesign ni en un medio Flynn, sino que estamos trabajando con 'Web Fonts'.

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.