Introducción a las fuentes variables
Bekah McDonald Compartir conocimientos
En algún momento entre la muerte de David Bowie y la elección de Donald Trump, todos empezamos a utilizar nuestros teléfonos móviles mucho más que nuestros ordenadores de sobremesa para acceder a Internet.
En 2016, un año que muchos han calificado como uno de los "peores de la historia" por su agitación política, atentados terroristas, catástrofes naturales y muertes prematuras de famosos, el uso de Internet móvil superó al de escritorio por primera vez. Y según el
En la actualidad, el 63% de todo el tráfico de Internet procede de móviles y tabletas. Con el despliegue de la 5G, es probable que esta cifra aumente exponencialmente.Tres segundosInforme KPI de Wolfgang Digital
Los sitios web deben cargarse rápidamente. Todos lo sabemos, pero Google ha investigado a fondo el tema. Querían saber cuánto tiempo de media está dispuesto a esperar una persona a que se cargue una página antes de darse por vencido e irse a otro sitio.
Resulta que es sólo
.Los sitios web se cargan aún más despacio en el teléfono, debido a la velocidad de procesamiento, los límites de memoria y, a veces, la velocidad de conexión a Internet. Así que ahora que la gente accede a Internet3 segundos
a través de sus teléfonos, es aún más importante tener un sitio rápido. Una página web que se carga lentamente puede costarle clientes.El tamaño importaprincipalmente
En Taylor/Thomas, siempre nos esforzamos por conseguir que los tiempos de carga de las páginas sean lo más cortos posible, utilizando cualquier herramienta que esté a nuestro alcance. Mantener el tiempo de carga por debajo de los 3 segundos recomendados por Google puede ser a veces un reto, sobre todo cuando el sitio utiliza una amplia gama de pesos o estilos de fuente. Esto se debe a que, para cada variante de una fuente utilizada en una página, el sitio web tiene que cargar un archivo de fuente distinto.
Si utilizas un par de pesos diferentes, además de las versiones en cursiva de cada uno, tu página web cargará bastantes archivos. Y va a llevar algún tiempo. No sólo eso, sino que si no se cargan lo suficientemente rápido, es probable que tus usuarios vislumbren un tipo de letra del sistema de reserva antes de que se cargue el archivo de la fuente preferida.
Variaciones de fuentes OpenType
En un esfuerzo de colaboración sin precedentes entre Microsoft, Google, Apple y Adobe, así como muchos diseñadores tipográficos y fundiciones, se creó la tecnología OpenType Font Variations.
Conocida por la mayoría simplemente como "fuentes variables", esta nueva tecnología permite a los diseñadores tipográficos definir los límites de un tipo de letra y dejar que escale entre ellos. Una fuente variable es aquella en la que el equivalente a varias fuentes individuales se empaqueta con un único archivo.
Cuando Fontsmith nos habló de sus planes para crear un micrositio de fuentes variables, nos entusiasmamos. Las fuentes variables son todavía muy nuevas, así que estábamos deseando poner nuestras manos en la tecnología, pero también queríamos ver hasta qué punto mejoraría los tiempos de carga de nuestro sitio web.
En lugar de cargar cada archivo de fuentes por separado, ahora podemos cargar sólo un archivo que contiene
de las variantes. Así, si antes necesitábamos cuatro archivos -por ejemplo, normal, cursiva, negrita y negrita cursiva-, ahora tenemos un único archivo de fuentes que nos da acceso a toda la gama de pesos, anchos y estilos disponibles. Genial, ¿verdad?Cómo funcionan las fuentes variablestodos
Las variantes de cada fuente se controlan junto con lo que se conoce como ejes. Cada eje tiene una "etiqueta", que es una abreviatura de cuatro letras por la que se conoce. Hay cinco nombres de ejes y etiquetas normalizados: peso (wght), anchura (wdth), inclinación (slnt), tamaño óptico (opsz) e itálica (ital). Los diseñadores tipográficos pueden incluir cualquiera de ellos, además de crear sus propios ejes y etiquetas personalizados.
La cursiva puede estar activada o desactivada, pero la mayoría de los ejes son una escala decidida por el diseñador tipográfico. Por ejemplo, la escala de pesos puede ir de 100 a 900. La inclinación puede ir de 0 a 10.
Así que no sólo tenemos ligeras, semiondas y pesadas, sino que tenemos todo lo que hay entre ellas. Ya no estamos limitados por pesos predefinidos, así que si negrita es demasiado negrita pero media no lo es lo suficiente, puedes encontrar ese peso intermedio perfecto.
Algunas de las fuentes variables de Fontsmith tienen ejes personalizados, lo que significa que podemos decidir exactamente cuánto queremos de
y el contorno, yFS Pimlicobrillo."El potencial para la selección dinámica de instancias personalizadas dentro del espacio de diseño de variaciones -o espacio de variaciones de diseño, por usar su nombre técnico- abre perspectivas apasionantes para el ajuste fino de la paleta tipográfica, y para nuevos tipos de tipografía responsiva que pueden adaptarse para presentar mejor el contenido dinámico al dispositivo del lector, la orientación de la pantalla o incluso la distancia de lectura."FS Kitty
- John Hudson, Introducción a las fuentes variables OpenType
Para saber qué ejes y escalas están disponibles para cada tipo de letra, deberás consultar la hoja de especificaciones de ese tipo de letra. También puedes echar un vistazo a la fuente en Photoshop, Illustrator, Sketch o las herramientas de desarrollo de Firefox, donde podrás ver y manipular los ejes disponibles.
Control de los ejes
Los ejes se controlan mediante CSS, utilizando la propiedad font-variation-settings*. Por ejemplo, aquí estamos estableciendo el tamaño óptico (opsz) para
fs-kim { font-family: "FS Kim"; font-size: 40px; font-variation-settings: 'opsz' 120, 'wght' 180; }*La especificación CSS4 implica que pronto podremos utilizar font-weight, font-stretch, font-style y font-optical-sizing para controlar los ejes. Aunque algunos navegadores ya empiezan a ofrecer esta capacidad, aún está en fase experimental y por ahora recomendamos usar font-variation-settings.
.fs-kitty { font-family: "FS Kitty Outline"; font-size: 40px; font-variation-settings: 'OUTL' 300, 'SHDW' 400; }También podemos animar los ajustes de variación de la fuente, utilizando animaciones o transiciones CSS. Así es como conseguimos la página de inicio del
He aquí un ejemplo básico de animaciónFS Peléde un extremo a otro de sus ejes.El futuro de las fuentes variablesMicrositio Fontsmith Variable Fonts.
@keyframes pele { 0% { font-variation-settings: 'slnt' 0, 'wght' 100'; } 100% { font-variation-settings: 'slnt' 10, 'wght' 900; } }
Las fuentes variables aún no son compatibles con todos los navegadores, y todavía hay algunos problemas de representación. Por ejemplo, hemos descubierto que Chrome muestra FS Pele y FS Kitty de forma incorrecta al animar, a menos que (de forma un tanto extraña) apliquemos text-shadow: 0 0; en el CSS.
Prevemos que estos problemas de renderizado se solucionen en las próximas versiones de Chrome y que la compatibilidad con los navegadores aumente rápidamente, aunque los navegadores heredados, como IE11, siempre necesitarán una solución alternativa.
Siempre nos entusiasma trabajar en un proyecto con Fontsmith, pero este ha sido especialmente divertido porque la tecnología es muy nueva y emocionante.
Vea lo que hemos construido juntos en
.Artículo escrito por Bekah McDonald, desarrolladora front-end enwww.variable-fonts.com
.Taylor/ThomasTaylor/Thomas