Google Fonts + Variable Fonts

Google Fonts

+

Variable Fonts

Variable fonts are the latest evolution of fonts.

This new format allows users to create custom variations of a typeface from a single, small file instead of having a separate font file for every style, width, or weight.

This site's demos only work on desktop.

Amstelvar

In this demo, width & weight axis values vary by position.

Decovar

Unusual axes are used to create dissolving and appearing animations.

Silver mist suffused the deck of the ship

Roboto Delta

Size, optical size and grade are used to create a magnification effect on the grid.

Grid

Axes

Optical size & Grade

Optical size is used to give text a more natural appearance by optimizing the readability of letterforms for the font size.

Grade changes the thickness of text without changing the width.

Optical size & Grade

Optical size is used to give text a more natural appearance by optimizing the readability of letterforms for the font size.

Grade changes the thickness of text without changing the width.