Maquetación y tipografía para web

Fracciones en tipografías web

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Hay muchas tipografías que disponen, entre otras muchas cosas, de la posibilidad de escribir fracciones correctamente. Aprendamos cómo utilizar esta característica OpenType también con nuestras webfonts.
03:46

Transcripción

Tenemos varios juegos de numerales: numerales proporcionales, estilo antiguo y tabulares. Pero ¿qué pasa si queremos poner una fracción? Bueno, pues muy sencillo, vamos a crear una sección dedicada a las fracciones: Fracciones, y le vamos a decir que la frase sea por ejemplo 'fracción' y vamos a poner 1/2 + 7/8, por ejemplo. ¿De acuerdo? Tendríamos estas fracciones que no son fracciones per se, sino que son como un quebrado, y que sabiendo que hay muchas tipografías, que han diseñado fracciones o que han diseñado un juego de numerales que pueden combinarse en fracciones, bueno, pues puede venir muy bien utilizar esta característica, que ya está disponible también para "web fonts", que se ha utilizado siempre en diseño "offline" y que ahora podemos aplicarlo a nuestros diseños "online". Para eso vamos a ver qué hacemos con la clase 'Fracción'. Vamos a crearla: 'fracción' y volvemos a hacer uso de la propiedad 'font-variant-numeric', pero esta vez con fracciones diagonales: 'diagonal-fractions', le damos a guardar y a ver cómo nos transforma esto. Pues no lo transforma en fracciones. Esto viene muy bien para cuando incluimos alguna fracción en mitad de un texto o, por ejemplo, cuando estamos hablando de una receta: "1/2 cucharada de azúcar". Vamos a dejarlo así y veríamos cómo encaja a la perfección y queda mucho más bonito que si lo hiciéramos con un simple quebrado, como veníamos haciendo hasta ahora en web. Vemos que aquí tiene una preponderancia demasiado elevada, que no tiene sentido. ¿Se entiende? Sí, por supuesto que se entiende, pero no se entiende como una fracción al uso, sino que bueno: uno entre dos, uno partido por dos, uno de dos... mientras que de esta manera, haciendo uso de las fracciones tal y como las ha ideado el diseñador de la tipografía en cuestión, podemos crear cualquier fracción gracias a 'font-variant-numeric: diagonal-fractions'. Cuando digo cualquiera, me refiero a cualquiera. Podemos poner aquí 9 y aquí podemos poner 8 8 8 y nos crea la fracción, porque está programado para que estos numeritos, que han sido diseñados a parte, han sido diseñados en pequeño y en la posición subíndice y lo mismo con estos que ha sido también diseñados en pequeñito y en la posición subíndice, perfectos para funcionar, como digo, en fracciones. Así pues, tendríamos ya las fracciones en uso, una característica más de los numerales que por fin podemos disfrutar también en las "Web fonts".

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.