Using different text naming conventions instead of H1 - H6 for design

Even if you use tokens for text sizes you should know which HTML tag it relates to if you want to keep your project accessible. You need to make sure that the information hierarchy can still be understood without CSS and by a screen reader.

Hi Fernando,
What I mean is a text-lg might be h1 on one page but h2 on another. Designing the layout we don’t think H1 here and that’s a h2 but whoever is putting the code together should tell by the layout which text-lg or xl2 and related.

I don’t agree that the developer should guess which HTML tag you intended each style to be, but you could have a string variable called xl4, and in different modes its value represents a different HTML tag, if you need to reference that to the developer, maybe? I just can’t see why you wouldn’t have a style pertain to a certain html tag and have they completely change from page to page using the same token.

Hi Fernando. What I meant is the first image shows a layout with an h1. On second image the original h1 would be too large so, the h2 becomes the h1 for that page (put tagged as h1). Am I overcomplicating this.

We use the Axe for Designers Figma plugin to label what heading level something is (and don’t forget sometimes screens may have invisible headings). Best practice is to have text sizes independent of heading tag, as @S.T rightly points out.

“Best practice is to have text sizes independent of heading tag” I totally agree with that! @gilgongo & @S.T