Boxis Test Page

Boxis (box + axis) is an OpenType Variable font designed for testing OpenType Variable fonts.

You can use it to create a visual difference between browsers that support variable fonts and browsers that do not. Boxis currently has 4 axes:

• wdth: The width of the box (0 - 1000, 750 default)
• hght: The height of the box (0 - 1000, 750 default)
• trac: The space on either side of the box (0 - 1000, 0 default)
• desc: Move the bottom of the box from the font baseline to the descent (0 - 250, 0 default)

Default: Horizontal Stripes

div {
    font-family: Boxis;
    line-height: 1em;
}

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Block

div {
    font-family: Boxis;
    line-height: 1em;
    font-variation-settings: 'wdth' 1000, 'hght' 1000, 'trac' 0, 'desc' 0;
}

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Squares

div {
    font-family: Boxis;
    line-height: 1em;
    font-variation-settings: 'wdth' 750, 'hght' 750, 'trac' 250, 'desc' 0;
}

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Rectangles

div {
    font-family: Boxis;
    line-height: 1em;
    font-variation-settings: 'wdth' 500, 'hght' 750, 'trac' 100, 'desc' 0;
}

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Vertical Stripes

div {
    font-family: Boxis;
    line-height: 1em;
    font-variation-settings: 'wdth' 750, 'hght' 750, 'trac' 250, 'desc' 250;
}

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Invisible

div {
    font-family: Boxis;
    line-height: 1em;
    font-variation-settings: 'wdth' 0, 'hght' 0, 'trac' 0, 'desc' 0;
}

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

This demo was made by David Jonathan Ross. Thanks to Alexandre Saumier Demers for his help figuring out how to arrange the designspace.