Reftests

Last tested: 04/16/2026

Interactive Demo

1.1 Axis Remapping

• avar2test-avar2

  • 
  • 
  • 
  • 
  • 

    Chrome on Windows does not implement avar2. Instead, you will see the same result as avar2test-variable-expected-mismatch, which is a variable font without an avar table. In this example, the avar table makes the lighter weights less light and the bolder weights less bold.

  • 

    Firefox on Windows does not implement avar2. Instead, you will see the same result as avar2test-variable-expected-mismatch, which is a variable font without an avar table. In this example, the avar table makes the lighter weights less light and the bolder weights less bold.

• avar2test-avar1-expected

  • 
  • 
  • 
  • 
  • 
  • 
• avar2test-variable-expected-mismatch

  • 
  • 
  • 
  • 
  • 
  • 

1.2 Axis Remapping Substitution

• avar2test-avar2substitution

  • 
  • 
  • 

    While the font weights are correctly distorted by the avar2 designspace, the glyph substitutions are not.

  • 
  • 

    Neither the font weights nor the glyph substitutions are correctly distorted by the avar2 designspace.

  • 

    The font weights are not correctly distorted by the avar2 designspace.

• avar2test-avar1substitution-expected

  • 
  • 
  • 
  • 
  • 
  • 
• avar2test-variablesubstitution-expected-mismatch

  • 
  • 
  • 
  • 
  • 
  • 

2.1 Kerning

• avar2test-avar2-kerning

  • 
  • 
  • 

    While Chrome on MacOS respects avar2 for glyph shaping, it does implement avar2 support for kerning.

  • 
  • 

    Chrome on Windows does not implement avar2. Instead, you will see the same result as avar2test-variable-kerning-expected-mismatch, which is a variable font without an avar table.

  • 

    Firefox on Windows does not implement avar2. Instead, you will see the same result as avar2test-variable-kerning-expected-mismatch, which is a variable font without an avar table.

• avar2test-avar1-kerning-expected

  • 
  • 
  • 
  • 
  • 
  • 
• avar2test-variable-kerning-expected-mismatch

  • 
  • 
  • 
  • 
  • 
  • 

2.2 Kerning Fences

• avar2test-avar2-kerning-fences

  • 
  • 
  • 

    While Chrome on MacOS respects avar2 for designspace fences, it does implement avar2 support for kerning.

  • 
  • 

    Chrome on Windows does not implement avar2. Instead, you will see the same result as avar2test-variable-kerning-fences-expected-mismatch, which is a variable font without an avar table.

  • 

    Firefox on Windows does not implement avar2. Instead, you will see the same result as avar2test-variable-kerning-fences-expected-mismatch, which is a variable font without an avar table.

• avar2test-static-kerning-fences-expected

  • 
  • 
  • 
  • 
  • 
  • 
• avar2test-variable-kerning-fences-expected-mismatch

  • 
  • 
  • 
  • 
  • 
  • 

3.1 Fences

• avar2test-avar2-fences

  • 
  • 
  • 
  • 
  • 

    Without avar2 support, the corner of condensed and bold weights can still be accessed by the user. Fencing off corners of the designspace allows type designers to restrict areas of the font that may be broken or ugly.

  • 

    Without avar2 support, the corner of condensed and bold weights can still be accessed by the user. Fencing off corners of the designspace allows type designers to restrict areas of the font that may be broken or ugly.

• avar2test-static-fences-expected

  • 
  • 
  • 
  • 
  • 
  • 
• avar2test-variable-fences-expected-mismatch

  • 
  • 
  • 
  • 
  • 
  • 

3.2 Fences Substitution

• avar2test-substitution-avar2-fences

  • 
  • 
  • 
  • 
  • 

    Without avar2 support, the corner of condensed and bold weights can still be accessed by the user. Fencing off corners of the designspace allows type designers to restrict areas of the font that may be broken or ugly.

  • 

    Without avar2 support, the corner of condensed and bold weights can still be accessed by the user. Fencing off corners of the designspace allows type designers to restrict areas of the font that may be broken or ugly.

• avar2test-substitution-static-fences-expected

  • 
  • 
  • 
  • 
  • 
  • 
• avar2test-substitution-variable-fences-expected-mismatch

  • 
  • 
  • 
  • 
  • 
  • 

4.1 Optical Size Default

• avar2test-avar2-opsz-default

  • 
  • 

    Safari has known bugs in their Optical Size opsz implementations. Selecting axis values that are not the default (e.g. "wght" 401, "wdth" 101, "opsz" 17) gives a much closer result than the default values (e.g. "wght" 400, "wdth" 100, "opsz" 16).

    Discussions include:

    • https://forum.glyphsapp.com/t/variable-font-display-issue-in-mobile-safari/23770
    • https://forum.glyphsapp.com/t/variable-optical-size-doesnt-work/27243/5
    • https://clagnut.com/blog/2423
    • https://bugs.webkit.org/show_bug.cgi?id=227353
  • 
  • 
  • 
  • 
• avar2test-static-opsz-default-expected

  • 
  • 
  • 
  • 
  • 
  • 
• avar2test-variable-opsz-default-expected

  • 
  • 
  • 
  • 
  • 
  • 

4.2 Optical Size Caption

• avar2test-avar2-opsz-caption

  • 
  • 
  • 
  • 
  • 

    Without avar2 support, windows does not correctly distort the designspace. When the optical size opsz becomes smaller, the font is supposed to become bolder and wider.

  • 

    Without avar2 support, windows does not correctly distort the designspace. When the optical size opsz becomes smaller, the font is supposed to become bolder and wider.

• avar2test-static-opsz-caption-expected

  • 
  • 
  • 
  • 
  • 
  • 
• avar2test-variable-opsz-caption-expected-mismatch

  • 
  • 
  • 
  • 
  • 
  • 

4.3 Optical Size Cinema

• avar2test-avar2-opsz-cinema

  • 
  • 
  • 
  • 
  • 

    Without avar2 support, windows does not correctly distort the designspace. When the optical size opsz becomes larger, the font is supposed to become lighter and narrower.

  • 

    Without avar2 support, windows does not correctly distort the designspace. When the optical size opsz becomes larger, the font is supposed to become lighter and narrower.

• avar2test-static-opsz-cinema-expected

  • 
  • 
  • 
  • 
  • 
  • 
• avar2test-variable-opsz-cinema-expected-mismatch

  • 
  • 
  • 
  • 
  • 
  • 

5.1 Quadratic Rotation

• avar2test-quadraticrotation-avar2

  • 
  • 
  • 
  • 
  • 

    In this example, the ZROT axis controls two other axes with avar2. Without support, the other axes do not change and no rotation occurs.

  • 

    In this example, the ZROT axis controls two other axes with avar2. Without support, the other axes do not change and no rotation occurs.

• avar2test-quadraticrotation-expected

  • 
  • 
  • 
  • 
  • 
  • 
• avar2test-quadraticrotation-variable-expected-mismatch

  • 
  • 
  • 
  • 
  • 
  • 

5.2 Linear Rotation

• avar2test-quadraticrotation

  • 
  • 
  • 
  • 
  • 

    In this example, the ZROT axis controls two other axes with avar2. Without support, the other axes do not change and no rotation occurs. However, this test also checks that linear rotation (rotation with one axis, not two axes) does not occur.

  • 

    In this example, the ZROT axis controls two other axes with avar2. Without support, the other axes do not change and no rotation occurs. However, this test also checks that linear rotation (rotation with one axis, not two axes) does not occur.

• avar2test-linearrotation-expected-mismatch

  • 
  • 
  • 
  • 
  • 
  •