Pavilion Bosio website with variable font

The Pavilion Bosio in Monaco is home of the École supérieure d’arts plastiques. For 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 of Halvar Flex in a headlines into single <span> to access, style and animate the CSS font-variation-settings weight and width.

Type Mates Fonts In Use Pavillon Bosio Website Studio Fables 02 Type Mates Fonts In Halvar Variable Font

Beside a toggling between French and Englisch language, there is a dark mode too.

Type Mates Fonts In Use Pavillon Bosio Website Studio Fables 03 Type Mates Fonts In Halvar Variable Font
Type Mates Fonts In Use Pavillon Bosio Website Studio Fables 04 Type Mates Fonts In Halvar Variable Font
Type Mates Fonts In Use Pavillon Bosio Website Studio Fables 05 Type Mates Fonts In Halvar Variable Font