Pavilion Bosio Website with Variable Font

The Pavilion Bosio in Monaco is home of the École supérieure d’arts plastiques. For the corresponding website, the designers at Studio Fables used a variable version of Halvar to emulate the Dada art movement from the early 20th century.

With help of some jQuery, Studio Fables split each letter in the headlines into single <span> elements in order to access the CSS font-variation-settings “weight” and “width”.

Besides the switch between French and English, there is a dark mode too.