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
Shifta

Añade emoción y funcionalidades

Nuevas formas de interacción

Rendimiento

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

Por Componente

Serifa

Peso

Contraste

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
Usar solo en caso de emergencia

-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

WEB1

SKETCH1

PRINT1

SKETCH2

Recursillos
para tod@s