() translation by (you can also view the original English article)
Fuentes variables fueron desarrolladas como el esfuerzo conjuntó de las cuatro mayores empresas de tecnología tipo diseño—Apple, Google, Microsoft y Adobe. Como su nombre indica, fuentes variables permiten a diseñadores obtener un número ilimitado de variantes de la fuente desde el mismo archivo de fuente. De esta manera es posible ajustar la tipografía a diferentes dispositivos, vistas, orientaciones y otras restricciones de diseño.
¿Por qué Utilizar Fuentes Variables?
Fuentes variables reducen significativamente las limitaciones de los actuales formatos de fuentes. Fuentes de la web de hoy son inflexibles y no escalan muy bien; sólo nos proveen de algunos estilos fijos con nombres como "Luz", "Negrita" o "Más audaz". Hay incluso tipos de letra que sólo tienen un peso o inclinación variante. Con fuentes variables, sin embargo, tenemos acceso a una infinita flexibilidad de peso, inclinación, x-altura, losas, redondeo y otros atributos tipográficos.
Mejor aún, fuentes variables mejoran el rendimiento. Fuentes web como lo conocemos necesitan cada variante de fuente que se almacena en un archivo separado. Por ejemplo, se trata de cómo se ve la carpeta de la fuente de la web de Roboto:
Fuentes variables utilizan un archivo de fuente soló que el navegador sólo tiene que cargar una vez. Sobre carga puede servir todas las variantes de justo uno binario.
Así que, aquí está una breve comparación:
- Roboto: doce ficheros, doce variantes.
- Fuentes variables: fuente de un archivo, ilimitadas variantes.
Como ya puede imaginar, las opciones tipográficas crecen increíblemente con fuentes variables.
El Formato de Fuente OpenType
Así que ¿qué formato de archivo variable fuentes utilizan? Según la documentación oficial:
"Las fuentes OpenType pueden tener la extensión .OTF o .TTF, dependiendo del tipo de contornos en la fuente y el deseo del creador de compatibilidad en sistemas sin soporte nativo para OpenType."
Para ser totalmente exactos, fuentes variables fueron introducidas en la versión 1.8 de la especificación de archivo de fuente OpenType. OpenType es una extensión del formato de fuente TrueType, por lo tanto la variable fuentes están disponibles como archivos .otf o .ttf.
Diseño de Ejes
La nueva especificación de archivo de fuente OpenType viene con una nueva tecnología llamada OpenType Fuente Variaciones que permite interpolar la fuente a lo largo de muchos ejes de diseño—hasta 64.000 según el Typekit Blog de Adobe.
La especificación de OpenType 1.8 define cinco etiquetas de eje registrado:
- peso
<wght> - ancho
<wdth> - tamaño óptico
<opsz> - inclinación
<slnt> - cursiva
<ital>
Por otra parte, tipo diseñadores también pueden definir ejes personalizados juntar con sus propias etiquetas de cuatro caracteres en el cuadro "nombre" del archivo fuente.
A continuación, puede ver una gran ilustración de cómo diseñar ejes de trabajo (del artículo de John Hudson sobre Medium.com, refieren a Typekit como el anuncio oficial no de fuentes variables). Demuestra una fuente variable de tres ejes con peso, anchura y tamaño óptico ejes:
El glifo rojo en el centro representa el conjunto de contornos en la fuente, los glifos verdes representan los extremos de los tres ejes, y los glifos naranja representan las posiciones de la esquina.
El cubo entero representa el espacio de diseño que tenemos acceso a si utilizamos esta fuente variable de tres ejes. Es un cubo porque la fuente tiene tres dimensiones (peso, ancho, tamaño de óptica). Con menos ejes, nos movería hacia abajo hacia un rectángulo (2 ejes) o una línea (1 eje) y con más ejes, se movería hacia arriba en un hiperespacio multidimensional.
Y por supuesto, una fuente variable de 3-ejes reales no necesariamente un cubo sino más bien un paralelepípedo rectangular, como los distintos ejes en la mayoría de los casos no tienen la misma longitud.
Instancias con Nombre
Fuentes variables permitan tipo diseñadores definir instancias con nombre—variantes de fuentes específicas entre el ilimitado número de opciones. Por ejemplo, el Prototipo de Fuente Variable de Adobe contiene dos ejes (peso y contraste) y ocho instancias con nombre (Luz extra, Luz, Regular, Semibold, Negrita, Negro, Contraste medio negro, Contraste alto negro).
Instancias con nombre son más importantes si queremos usar una fuente variable con programas de diseño como Adobe Illustrator. En la web, podemos generar fácilmente cualquier instancia (nombre o sin nombre) con CSS (por ejemplo, la fuente Variable de Adobe, la Luz Extra llamada instancia toma el valor mínimo del eje el peso y el contraste).
Agregar Fuentes Variables en una Página Web
Podemos añadir fuentes variables a un sitio web usando la regla de @font-face en la parte superior del archivo CSS.
Por ejemplo, podemos agregar la fuente variable de Avenir Next con la siguiente regla CSS:
1 |
@font-face { |
2 |
font-family: "Avenir Next Variable"; |
3 |
src: url("AvenirNext_Variable.ttf") format("truetype"); |
4 |
}
|
Usted puede encontrar fuentes más variables en el Eje Praxis sitio web (también tiene un parque infantil para fuentes variables), en las páginas de GitHub de empresas de diseño de diferentes tipos (por ejemplo, Monotipo, Tipo de Red), y
Typekit también ha comenzado a publicar las versiones de fuente variable de sus familias más populares de Adobe originales.
Nota: no es toda fuente de OpenType que encontrarás en la web es una fuente variable (fueron introducidos solamente con la versión 1.8).
Establecer Variaciones de Fuente con CSS
Para definir las variaciones de la fuente, podemos utilizar la propiedad CSS font-variation-settings introducidas con el CSS Fuente de Módulo Nivel 4. Esta es una propiedad de bajo nivel que nos permite controlar la variable fuentes especificando un valor para cada eje.
Ejemplo 1: Avenir Next
La fuente variable de Avenir Next contiene dos ejes de diseño: peso y anchura — ambos son ejes registrados. Avenir Next también tiene ocho instancias con nombre (Regular, Medio, Negrita, Pesada, Condensada, Medio condensada, Negrita condensada, Condensada pesada).
El CSS completo (que pertenece a una variación aleatoria de fuentes sin nombre) se ve así:
1 |
body { |
2 |
font-family: "Avenir Next Variable"; |
3 |
color: rgb(0, 0, 0); |
4 |
font-size: 148px; |
5 |
font-variation-settings: 'wght' 631.164, 'wdth' 88.6799; |
6 |
}
|
Podemos utilizar cualquier valor (incluso números flotantes) para los ejes entre los valores min y max. En el caso de Avenir Next, podemos utilizar el [400, 900] rango de peso y la [75, 100] rango para el eje de la anchura.
¿Dónde encontrar los rangos? Los archivos de fuente contienen las tablas de variación (fvar) de fuentes que contienen los datos necesarios. Sin embargo, para acceder a esa información, debemos ver el contenido del archivo de fuente con una herramienta como FontView. A veces, la documentación de la fuente contiene los rangos, pero lamentablemente esto no es siempre el caso. La buena noticia es que la página web de Praxis Eje contiene los valores de min-max para todos los tipos de letra variable cuenta.
Ejemplo 2: Decovar
Decovar es una de las fuentes variables más versátiles que existe actualmente. Usted puede encontrar en el Eje de la Praxis, en GitHub, y también tiene una página de demostración en sitio web del tipo. Decovar contiene un registrado (peso) y catorce ejes personalizados, y también ha nombrado diecisiete casos.
De docs de GitHub de Decovar, aquí hay algunas variantes que podemos lograr con esta fuente variable 15-eje:
El CSS que necesitamos utilizar es similar al ejemplo anterior. Aquí, tenemos que definir todos los quince ejes (en línea, esquilado, redondeado loso, rayas, terminal de gusano, esqueleto en línea, abierto en línea terminal, terminal en línea, gusano, peso, esqueleto quemado, redondeado, gusano, losa, bifurcado).
1 |
div { |
2 |
font-family: Decovar; |
3 |
color: white; |
4 |
background-color: rgb(0, 162, 215); |
5 |
font-size: 157.12px; |
6 |
text-align: left; |
7 |
padding-top: 20px; |
8 |
font-variation-settings: 'INLN' 285.094, 'TSHR' 346.594, |
9 |
'TRSB' 786.377, 'SSTR' 84.268, 'TWRM' 200, 'SINL' 84.268, |
10 |
'TOIL' 0, 'TINL' 91.983, 'WORM' 0, 'wght' 400, 'TFLR' 0, |
11 |
'TRND' 0, 'SWRM' 0, 'TSLB' 277.155, 'TBIF' 0; |
12 |
}
|
Nota: tenemos que especificar un valor para todos los ejes en la propiedad de font-variation-settings — incluso aquellos que no queremos usar.
En el caso de Decovar, podemos utilizar 0 como valor para los ejes que no nos interesa éstos se procesan con el valor predeterminado. Esto no es siempre el caso sin embargo, como depende de los rangos de la fuente se utiliza para los diferentes ejes. Decovar es fácil, ya que utiliza un 0-1000 para todos los ejes y 0 es el valor predeterminado para todos.
Puede generar similares declaraciones de font-variation-settings con Eje de Praxis, no tienes que calcular los valores por su cuenta. El CSS anterior genera la siguiente variante de la fuente:
Propiedades de CSS de Alto Nivel
La propiedad de font-variation-settings es una característica de bajo nivel y según las recomendaciones de W3C debe sólo utilizarse si no se dispone de otros métodos. ¿Qué exactamente significa esto?
Según las especificaciones de CSS 4, podremos controlar ejes registrados con propiedades CSS más alto nivel en el futuro, a saber:
-
font-weight(controlará el ejewght) -
font-stretch(controlará el ejewdth)
-
font-style(controlará los ejesslntyital)
-
font-optical-sizing(controlará el ejeopsz)
Las tres primeras propiedades existen desde CSS2, sin embargo las especificaciones CSS4 amplían su uso. Podremos utilizar no sólo con palabras clave predefinida (por ejemplo, normal o bold para font-weight) o alrededor de los números (por ejemplo, 400, 600, 800, etc.), pero también con todos los números en una escala predefinida (por ejemplo, font-weight oscilará entre 1 y 1000 y font-stretch será oscilan entre 50% y 200%).
Estas características están todavía en fase experimental, aunque. Así que por ahora, lo razonable esa mantener
font-variation-settings, como en la actualidad esta es la propiedad más estable para acceder a los ejes de fuentes variables.
Apoyo
Como variable fuentes todavía están muy ser nuevas, soporte de navegador no es aún perfecto. Las últimas versiones de Chrome y Safari ya apoyan, pero Edge y Firefox todavía rezagada (sin embargo variable fuentes ya están disponibles en Firefox Nightly y Firefox Developer Edition). Desde el lanzamiento de octubre de 2017, Photoshop e Illustrator también admiten fuentes variables.
Aprender Más Acerca de Fuentes Variables
Podemos esperar variable fuentes a traer cambios increíbles en el mundo de la tipografía web. Como se está haciendo cada vez más apoyo, es hora de dar un paso en el aprendizaje y la experimentación. Consulte los recursos siguientes:
- Video de anunciar de variable las fuentes en la conferencia de ATypI en Varsovia en el año 2016, con cinco altavoces notables.
- Mensaje de anunciar de Typekit Blog por Tim Brown, Hefe de Tipografía de Adobe, detalle de los problemas pueden resolver variables fuentes y planes para el futuro.
- Lea Verou tiene una gran zona de juegos en línea en Codepen; utiliza la fuente variable de Amstelvar.
- Nick Sherman de curada noticias las Fuentes Variables en Twitter @variablefonts.
