Maquetación y tipografía para web

Numerales: tipología y diferentes usos

¡Prueba gratis durante 10 días

nuestros 1201 cursos !

Prueba gratis Mostrar modalidades de suscripción
Vamos a ver tres juegos de numerales distintos y cómo aplicarlos en la web. Los numerales minúsculos que usaremos para texto corrido, los numerales mayúsculos que son los que ya conoces y los numerales tabulares que utilizaremos en tablas.
07:54

Transcripción

Existen varios tipos de numerales dentro de una tipografía y cada uno se debe utilizar para una cuestión. Así que vamos a ver cómo transportar toda esta sabiduría en torno a los números y su uso de la tipografía centenaria a la web. Para ello vamos a crear aquí una nueva sección de ejemplo, para ver cómo lo utilizaríamos. Primero vamos a ver cómo incluir estos diferentes juegos de numerales y luego veremos para qué sirve cada uno. Vamos a poner aquí, por ejemplo: 'numerales'... vamos a llamarlos 'mayúsculos', 012345678 y 9, y cerramos el párrafo. Tendríamos el primer juego de numerales llamados 'mayúsculos proporcionales de caja alta' o normales de toda la vida. Ese no es un nombre técnico, pero para que me entiendas. Estos son los numerales, los mayúsculos serían los que conoces, que todos tienen la misma altura y no presentan ningún problema. Vamos a poner una línea para los numerales minúsculos. Lo mismo. Estos también reciben varios nombres: minúsculos, elzevirianos, de caja baja o de estilo antiguo, que este es el nombre con el que nos tenemos quedar, pues es el que se usa en la propiedad 'CSS'. Y por último, los tabulares, que, como su propio nombre indica, tienen un ancho fijo para funcionar en tablas. Pero ahora, como digo, los veremos y los estudiaremos. Tenemos, pues: mumerales, mayúsculos –si no recuerdo mal, lo he llamado–, y la regla para utilizarlo sería 'font-variant', no "ligatures" como podría ser para "ligaturas", sino para números, y le diríamos que me use los proporcionales. Los proporcionales son los que suelen las tipografías llevar por defecto –porque, como digo, cada tipografía tiene varios juegos de numerales que se deben usar para cada ocasión– y por defecto suelen utilizar los diseñadores de tipos: los numerales proporcionales. Si no es así, si utiliza por ejemplos los de estilo antiguo y necesitamos por lo que sea proporcionales, pues bueno, así sería como llamaríamos a los numerales proporcionales. Vamos a hacer un poquito de reciclaje CSS: minúsculos, lo mismo, 'font-variant-numeric', pero en vez de 'proportional', 'oldstyle'. Como he dicho antes, tienen varios nombres. A mí el que más me gusta es el de minúsculos, porque es el que mejor sirve para entender, pero bueno, en este entorno o en este contexto: 'oldstyle', 'numerals' o numerales de estilo antiguo. Su nombre tal vez es más correcto, porque es como más se parece a la propiedad 'CSS'. que los llama. Y por último, vamos a copiar y pegar los tabulares, que esta vez, en vez de 'oldstyle', 'tabular', pero sin la 'o', que me la he dejado. Y ya tendríamos nuestros tres estilos definidos para nuestros tres juegos de numerales. Vamos al navegador, le doy a Recargar y a ver qué pasa. Bien, tenemos tres líneas con números y vemos que son una más diferente que las otras, pero son las tres diferentes. El primero son los proporcionales. Vemos que son numerales normales, los que conocemos de toda la vida, los que tenemos en el teclado del ordenador, todos de la misma altura y cada uno con su anchura. En la segunda línea, tenemos los de estilo antiguo o minúculos. ¿Por qué me gusta mí llamarlos minúsculos? Porque es una forma muy fácil de recordar para qué se utilizan. Lo vamos a ver ahora. Tienen la altura de una minúscula e incluso trabajan como algunas minúsculas, como por ejemplo la 'g', que tiene un rasgo descendente, pues aquí el tres exactamente lo mismo. O por ejemplo la 'f' que tiene un rasgo ascendente, pues el 6 o el 8, exactamente lo mismo. Es decir, estos numerales están diseñados para funcionar dentro de un texto corrido, dentro de un bloque de texto, para que las fechas las cantidades, etcétera, etcétera, etcétera, cuando van dentro de un bloque de texto, no destaquen. Igual que no destaca cualquier otra palabra de ese texto, con lo cual, siempre para texto corrido aplicaremos los numerales minúsculos. Y por último, tenemos los numerales tabulares, que se utilizan, como su propio nombre indica, para tablas. ¿Cuál es la diferencia entre estos y estos? Bueno, pues que aquí cada uno tiene su anchura debido a su morfología, como la tenemos todas las personas. ¿El cero es más gordito? Pues bueno, tiene su espacio para que esté cómodo. ¿El uno es más estrecho? Bueno, pues necesita menos espacio. ¿Pero qué pasa cuando los ponemos unos encima de otros y necesitamos que se sumen, que las unidades vayan con las unidades alineadas, las decenas con las decenas, centenas con centenas, etcétera, etcétera? Pues que necesitamos que todos estos números midan exactamente lo mismo. ¿Qué ocurre? ¿Qué hace el diseñador de tipos? Como puedes ver, le añade un poquito de blanco, un poquito de espacio a los caracteres más estrechos, incluso como aquí el uno –las serifas de abajo, las patitas de ese uno– son un poquito más cortas que en este otro. Ya que tenemos que hacer más ancho el número, aprovechamos para también cambiar un poco la anatomía. De esta manera, ¿qué pasa? Que pongamos el número que pongamos, uno encima de otro, todos van a ocupar lo mismo. Y esto se llama 'cifras tabulares'. Tenemos cifras tabulares tanto en mayúsculos como en minúsculos, aunque lo normal, cuando tenemos que trabajar con cifras tabulares, lo mejor es trabajar con mayúsculos. Así pues, tendríamos estos tres juegos de numerales principales. Tendríamos, como digo, mayúsculos –yo los utilizo lo menos que puedo, para titulares para algún sitio que vaya entre mayúsculas, para casos muy especiales– porque cuando sí que quiero usar números dentro un artículo, dentro de cualquier texto ya un poquito extenso de uno, dos, tres, veintiocho mil párrafos dentro de una web, hay que utilizar los números minúsculos para que no destaquen dentro de ese texto. Y ya si estamos trabajando con tablas, usaremos los tabulares. Tres tipos de numerales, tres juegos de numerales que siempre se han utilizado en diseños "offline" y que ahora podemos utilizar también con "web fonts" en nuestras webs. Hemos aplicado una clase y en esa clase hemos indicado, recordemos, la propiedad 'font-variant-numeric'. Para mayúsculos 'proportional-nums'. Para minúsculos 'oldstyle-nums'. Y para tabulares 'tabular-nums'. De esta manera tan sencilla podremos utilizar los juegos de numerales que disponen las tipografías de una manera correcta.

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.