What are XTRA, YOPQ, YTLC, etc. in CSS?

I'm reading a blog on Roboto Flex font which is a variable font, and I see mentions of

  • Parametric Counter Width (XTRA in CSS)
  • Parametric Thin Stroke (YOPQ in CSS)
  • Parametric Lowercase Height (YTLC in CSS)


What are XTRA, YOPQ, YTL, etc. in CSS? What do they stand for? I have never seen these properties before.


2 answers

  • answered 2022-05-06 21:09 Alohci

    They're font-variation-settings See Get started with variable fonts in CSS for an example of their use.

    They can be defined in and be specific to the individual font.

  • answered 2022-05-07 17:25 Peter Constable

    These are custom variation axes used in the Roboto Flex font. The blog you pointed to describes what each controls in the font.

    The variable font format is defined in the OpenType spec. A variable font has one or more axes of design variation, and each axis is identified with a four-letter tag. The OpenType spec allows for "registered" axes, which have conventional definitions that all implementers can recognize, or custom tags that are foundry-specific. Registered axis tags use lowercase letters; foundry-defined axes use uppercase letters.

    So, XTRA, YOPQ, etc. are variation axis tags defined by Google. The reference to "in CSS" is that the font parameters can be specified in CSS using the axis tags in conjunction with font-variation-settings, as mentioned in the previous answer.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum