bienvenid@s

News

Print

Digital

Tipografía
variable
Ventajas
de la

Potencia y mejora
la experiencia de usuario
y usabilidad

DIGITAL & PRINT

Esto es un texto muy largooooooo

Este es corto


Esto es un texto muy largooooooo

Este es corto


Nuevas formas de hacer marca

PRINT

DIGITAL

WINRAR
WINRAR
.RAR

Añade emoción y funcionalidades

Rendimiento

0 %
de ahorro
- 0 %
en código
Clasificación
Tipografías
variables

Por Componente

Por funcionalidad

Mutantes
Emocionales

😄
emotion
😩
❤️‍🔥
sensation
❄️

Y esto pasa cuando eres super creativo

a

Responsive
accesibles

Ambiente, cansancio...

Adaptables al color de fondo

Problemas de visión

+

Legibilidad

Perspectiva VR

Perspectiva VR

Contexto del usuario

Creativas
experimentales

TÉCNICA
¿Cómo funciona?
Destrípame

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: white;

				
					@font-face {
 font-family: 'MyVariableFontName';
 src: url('path/to/font/file/myvariablefont.woff2') format('woff2-variations');
 font-weight: 125 950;
 font-stretch: 75% 125%;
 font-style: normal;
}
				
			
				
					#miTipoVariable {

font-variation-settings: 'wght' 375, 'GRAD' 88, "slnt" 1, "MONO" 1, "EjeCustom" 288;

}
				
			
				
					.quieroModificar {

/* el que quieres modificar? */

}
.quieroModificar:hover {

/* el que quieres modificar cuando pases el raton? */

}
				
			
Neurona
				
					

let enableHandler = true;

timer = window.setInterval(function() {
  enableHandler = true;
}, 50);

jQuery(document).on("mousemove", function(e) {
  if (enableHandler) {
    let factor = e.pageX / jQuery(document).width();
    let wght = 200 + 600 * factor;

    jQuery(".testing").css("font-variation-settings", "'wght' " + wght)
    enableHandler = false;
  }
});

				
			
Neurona
hello futures
Repaso
de lo que ya se está haciendo
Recursillos
para tod@s