Introducción a la variable Fuentes
Introducción a la variable Fuentes
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, desastres naturales y muertes prematuras de famosos, el uso de Internet móvil superó por primera vez a desktop . Y según el informe Wolfgang Digital KPI Report de este año, el 63% de todo el tráfico de Internet procede ahora de móviles y tabletas. Con el despliegue de la 5G, es probable que esta cifra aumente exponencialmente.
Tres segundos
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 son sólo 3 segundos.
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 la conexión a Internet. Así que ahora que la gente accede a Internet principalmente a través de sus teléfonos, es aún más importante tener un sitio rápido. Una página web que carga lentamente puede costarle clientes.
El tamaño importa
En Taylor/Thomas, siempre nos esforzamos por conseguir que los tiempos de carga de la página sean lo más cortos posible, utilizando cualquier herramienta que podamos tener en nuestras manos. Mantener el tiempo de carga por debajo de los 3 segundos recomendados por Google a veces puede ser un desafío, especialmente cuando el sitio utiliza una amplia gama de fuente pesos o estilos. Esto se debe a que para cada variante de un fuente utilizado en una página, su sitio web tiene que cargar un archivo fuente archivo.
Si estás usando un par de pesos diferentes, además de las versiones en cursiva de cada uno, serán bastantes archivos para que tu página web se cargue. Y va a llevar algún tiempo. No solo eso, sino que si no se cargan lo suficientemente rápido, es probable que sus usuarios vislumbren un tipo de letra de sistema alternativo antes que el preferido fuente Cargas de archivos.
OpenType Fuente Variaciones
En un esfuerzo de colaboración sin precedentes entre Microsoft, Google, Apple y Adobe, así como muchos diseñadores tipográficos y fundiciones, el OpenType Fuente Se creó la tecnología de variaciones.
Conocido por la mayoría simplemente como 'variable fuentes', esta nueva tecnología permite a los diseñadores tipográficos definir los límites de un tipo de letra y dejar que se amplíe entre ellos. Una variable fuente es aquella en la que el equivalente de múltiples individuos fuentes es un paquete con un solo archivo.
Cuando Fontsmith se acercó a nosotros para hablar de sus planes para una variable Fuentes micrositio, nos emocionamos mucho. Variable fuentes todavía son muy nuevos, por lo que estábamos ansiosos por tener en nuestras manos la tecnología, pero también estábamos ansiosos por ver cuánto mejoraría los tiempos de carga de nuestro sitio web.
En lugar de cargar cada fuente archivo por separado, ahora podemos cargar un solo archivo que contiene todas las variantes. Entonces, donde antes necesitábamos cuatro archivos, digamos regular, cursiva, negrita y cursiva en negrita, ahora tenemos uno fuente archivo que nos da acceso a toda la gama de grosores, anchos y estilos disponibles. Genial, ¿verdad?
¿Qué tan variable? Fuentes trabajo
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 le conoce. Hay cinco nombres y etiquetas de eje estandarizados: peso (ancho), ancho (wdth), inclinación (slnt), tamaño óptico (opsz) y cursiva (cursiva). Los diseñadores tipográficos pueden incluir cualquiera de estos, además de crear sus propios ejes y etiquetas personalizados.
La cursiva puede estar activada o de descuento, pero la mayoría de los ejes son una escala decidida por el diseñador tipográfico. Por ejemplo, la escala de peso 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 también 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 el peso intermedio perfecto.
Algunas de las variables de Fontsmith fuentes tienen ejes personalizados, lo que significa que podemos decidir exactamente cuánto queremos de la sombra y el contorno de FS Kitty, y el brillo de FS Pimlico.
"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."
– John Hudson, Introducción a la variable OpenType Fuentes
Para averiguar qué ejes y escalas están disponibles para cada tipo de letra, deberás consultar la hoja de muestras de ese tipo de letra. Alternativamente, puede echar un vistazo a la fuente en Photoshop, Illustrator, Sketch o las herramientas de desarrollo de Firefox, donde puedes ver y manipular los ejes disponibles.
Control de los ejes
Los ejes se controlan a través de CSS, utilizando el comando fuente-variation-settings propiedad*. Por ejemplo, aquí estamos estableciendo el tamaño óptico (opsz) para FS Kim en 120 y el peso (wght) en 180.
fs-kim { font-family: “FS Kim”; font-size: 40px; font-variation-settings: ‘opsz’ 120, ‘wght’ 180; }Si el tipo de letra tiene ejes personalizados, sólo tenemos que utilizar las etiquetas correspondientes definidas por el diseñador tipográfico. Por ejemplo, FS Kitty Outline tiene un eje 'Outline' (OUTL) y un eje de sombra (SHDW). La especificación OpenType dicta que las etiquetas de eje personalizadas deben ir en mayúsculas, como se indica a continuación.
.fs-kitty { font-family: “FS Kitty Outline”; font-size: 40px; font-variation-settings: ‘OUTL’ 300, ‘SHDW’ 400; }*La especificación CSS4 implica que pronto podremos usar fuente-peso fuente-elasticidad fuente-estilo y fuente-Dimensionamiento óptico para controlar los ejes. Si bien algunos navegadores ya están comenzando a ofrecer esta capacidad, todavía se encuentra en fase experimental y recomendamos usar fuente-variation-settings por ahora.
También podemos animar el fuente configuración de variación, utilizando animaciones o transiciones CSS. Así es como logramos la página de inicio de laFontsmith (Variable) Fuentes micrositio. Aquí tienes un ejemplo básico de cómo puedes animar FS Pele de un extremo a otro de sus ejes.
@keyframes pele { 0% { font-variation-settings: ‘slnt’ 0, ‘wght’ 100’; } 100% { font-variation-settings: ‘slnt’ 10, ‘wght’ 900; } }
El futuro de las variables fuentes
Variable fuentes Todavía no son compatibles con todos los navegadores y todavía hay algunos problemas de representación. Por ejemplo, descubrimos que Chrome renderizará FS Pele y FS Kitty incorrectamente al animar, a menos que (algo extraño) 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 construimos juntos, enwww.variable-fuentes.com.
Artículo escrito por Bekah McDonald, desarrolladora de front-end en Taylor/Thomas.