I’m redesigning our website and I’m separating font-styles desktop/mobile. A H1 of 53px is incredibly big on a mobile. Therefor, that same H1 will be 33px on mobile. That’s causing a lof of text styles and I’m unsure what the best way is to organise all these text styles.
Figma will only nest text styles by a single level. That means ‘Desktop / Heading / H1’ will actually become
Desktop - Heading
—H1
—H2
etc…
So I’ve currently come up with two options: Device / Element / Variation (i.e. ‘Desktop / Heading / H1’) or Element / Device / Variation (i.e. Heading / Mobile / H1). Feel free to suggest other options, but primarily tell how you organise your typography styles! 🙂