Date : 2nd August 2024

For all the latest browsers

Font variation settings for Roboto Flex

> Optical size
> Weight
> Slant
> Width
> Grade
> Thick stroke
> Counter width
> Thin stroke
> Ascender height
> Descender height
> Figure height
> Lowercase height
> Uppercase height

ABCDEFG
bdfghjklpqty
1234567890
!£$%^&*( )

CSS Play!

Information

With the introduction of varaible fonts it is now possible to adjust many parameters to change to look of the font.

The current font with most parameters (13) is Roboto Flex. Or download .woff2 file from Fontsource as I have done for this demonstration.

To see the result of each parameter just use the range inputs which display the value of each parameter.

The range inputs start at the 50% mark and if you check the stylesheet you will see the range for each style.

It is now possible to animate font-variation-settings: as can be seen from the animation above.

Please consider making a donation, every little helps.