How do better typography with template literal ?

[junseinagao]

When using syntax: "template-literal", the styled-system/css outputs css() that works exclusively with template literals, but this approach prevents the use of the textStyles property.

I would like to define responsive typography using textStyles created with defineTextStyles(). However, I am unsure how to achieve this while using the template-literal syntax.

I need to define properties like font-family, font-weight, font-size, and letter-spacing individually, as shown in the example below. This approach results in verbose code, especially when dealing with responsive styles where overrides are common.

Is there a shorthand or a recommended way to specify typography in a more concise manner while using template-literal syntax?

Here is an example of what I currently have to do:

function App() {
  return (
    <div
      className={css`
        font-family: {fonts.lp.headline.xsmall};
        font-size: {fontSize.lp.headline.xsmall};
        font-weight: {fontWeight.lp.headline.xsmall};
        letter-spacing: {letterSpacing.lp.headline.xsmall};
        line-height: {lineHeight.lp.headline.xsmall};
        color: {colors.lp.text.high};

        @media (width >= 768px) {
          font-family: {fonts.lp.headline.small};
          font-size: {fontSize.lp.headline.small};
          font-weight: {fontWeight.lp.headline.small};
          letter-spacing: {letterSpacing.lp.headline.small};
          line-height: {lineHeight.lp.headline.small};
        }
      `}
    />
  );
}