Some heading text that should be narrower and bolder

  1. And some body copy text that should be lighter and wider.

  2. Body copy text that should be in Roboto.

  3. And some body copy text that should be in Roboto and slanted.

  4. Body copy text that should let the strong tag still work (without having to specify a weight) - showing that normal browser defaults will still work correctly.

    5. Code behaving badly

  5. Text set in Roboto and slanted using font-variation settings with a bit of text in the middle set back to 0deg slant with font-style.

  6. Text set in Roboto and weight set using font-variation settings with a bit of text in the middle set using the strong tag with font-style.

    7. Optical sizing

  7. Text set in Amstelvar with optical sizing set to auto.

  8. Text set in Amstelvar with optical sizing set to auto.

  9. Text set in Amstelvar with optical sizing set to off.

  10. Text set in Recursive

    11. Separate Slant and Italic axes

    If a font has both axes, you have to set them with font-variation-settings

  11. Text set in Recursive with slant

  12. Text set in Recursive in italic, no slant

  13. Text set in Recursive with slant and italics