Las tipografías variables llegan a Firefox 62

30 abril, 2019 11:36 por

Esta es una traducción literal del artículo publicado en Mozilla Hacks

Firefox 62 tiene un par de meses de haber sido liberado y esa versión añade soporte para Variable Fonts, una nueva y emocionante tecnología que hace posible crear una bonita tipografía con un único archivo de fuente. Las fuentes variables ahora soncompatibles con los principales navegadores.

¿Qué son las tipografías variables?

Las familias de fuentes pueden tener decenas de variaciones: diferentes pesos, anchos expandidos o condensados, cursivas, etc. Tradicionalmente, cada variante requería su propio archivo de fuente separado, lo que significaba que los diseñadores Web tenían que equilibrar los matices tipográficos con las preocupaciones pragmáticas sobre el peso de la página y el rendimiento de la red.

En comparación con las tipografías tradicionales, las variables contienen datos adicionales que permiten generar diferentes estilos de fuente bajo demanda. Por ejemplo, considere Jost, un tipo de letra de código abierto inspirado en Futura de tipo indestructible. Jost* viene en nueve pesos, cada uno con estilos regulares y cursiva, para un total de dieciocho archivos.

Jost* también viene como un único archivo de fuente variable que es capaz de generar no sólo esas mismas dieciocho variaciones, sino también cualquier peso intermedio en cualquier grado de cursivo.

Ejes de diseño

Jost* es un ejemplo de una fuente variable de «dos ejes»: puede variar tanto en peso como en cursiva. Las fuentes variables pueden tener cualquier número de ejes, y cada eje puede controlar cualquier aspecto del diseño. El peso es el eje más común, pero los tipógrafos son libres de inventar su propio tipo.

Un tipo de letra que inventó su propio eje es Slovic. Slovic es una fuente variable cirílica con un solo eje, estilo, que varía eficazmente la historia. En un extremo, los personajes se dibujan de manera similar a como aparecen en los manuscritos del siglo IX, mientras que en el otro, adoptan formas sans-serif modernas. En medio hay varios estilos intermedios. La tecnología de fuentes variables permite que el diseño se adapte y se transforme sin problemas en todo el rango del eje.

¡El cielo es el límite! Para ver otros ejemplos de tipografías variable, chequea v-fonts.com y Axis Praxis.

Mejores herramientas para una mejor tipografía en la Web

Las grandes características merecen grandes herramientas, y por ello estamos trabajando duro en la creación de un nuevo editor de fuentes en las Herramientas de desarrollo de Firefox. Aquí tienes un vistazo:

Puede encontrar el Editor de fuentes como un panel dentro del Inspector de páginas en las Herramientas de desarrollo. Si tienes suficiente espacio en la pantalla, es útil habilitar el modo de 3 paneles para que puedas ver el árbol DOM, las reglas CSS y el Editor de fuentes en paralelo.

Al hacer clic en un elemento del árbol DOM, el Editor de fuentes se actualiza para mostrar información sobre la fuente del elemento seleccionado, así como herramientas para editar sus propiedades. El Editor de fuentes funciona en todas las fuentes, pero realmente brilla con las variables. Por ejemplo, el control de peso cambia sutilmente de deslizador escalonado a continuo en presencia de una fuente variable con un eje de peso.

Del mismo modo, cada eje de diseño en una fuente variable tiene su propio widget en el editor, lo que le permite personalizar directamente la apariencia de la fuente y ver inmediatamente los resultados en su página.

El nuevo editor de fuentes ya está disponible desde Firefox 63, lanzado en octubre. ¡Nos gustaría saber lo que piensas! Tus comentarios son una guía esencial para continuar construyendo y perfeccionando las herramientas de diseño de Firefox.

Nota del editor: Atención usuarios de MacOS – las fuentes variables requieren MacOS 10.13+

The following two tabs change content below.
Colaborador de Mozilla Venezuela e Hispano en las áreas de desarrollo y medios sociales, entre otros. También soy desarrollador Web, Skateboarder, Profesor universitario, jugador de Playstation y PC, usuario Linux, Blogger, Geek, entre otros.

Compartir artículo:

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa