Peso variabile delle lettere: textWeight()

I font variabili contengono in un solo file una gamma continua di varianti, ad esempio tutti i pesi dal più sottile al più spesso. Con textWeight() il peso si può cambiare durante l’esecuzione, come qualsiasi altro parametro.

    let font;
let parola = "respiro";

async function setup() {
    createCanvas( 670, 200 );
    font = await loadFont( "Raleway-VariableFont_wght.ttf",
                           "Raleway", { weight: "100 900" } );
    textFont( font, 120 );
}

function draw() {
    background( 255 );
    let x = 40;
    for (let i = 0; i < parola.length; i++) {
        let lettera = parola.charAt( i );
        let onda = sin( frameCount * 0.04 - i * 0.5 );
        let peso = map( onda, -1, 1, 100, 900 );
        textWeight( peso );
        text( lettera, x, 130 );
        x = x + fontWidth( lettera );
    }
}

Il secondo parametro è il nome con cui il font viene registrato, il terzo l’intervallo dei pesi disponibili. Senza l’intervallo il browser considera il font di peso normale, e textWeight() produce solo due varianti: il peso normale e il grassetto.

Il peso di ogni lettera oscilla fra 100 e 900, sfasato rispetto a quello della lettera precedente.

Le lettere più spesse sono anche più larghe: la posizione della successiva dipende dal peso.

Collegare il peso alla posizione orizzontale del mouse, ad esempio con let peso = map( mouseX, 0, width, 100, 900 );.

Su Google Fonts i font variabili si riconoscono dal nome del file, che contiene “VariableFont” e le sigle degli assi che variano, ad esempio “wght” per il peso. In p5.js 2.3 dai font variabili non si ricavano i punti dei contorni: textToPoints() si ferma con un errore.

Strutturazione dei file:

Approfondimenti: