Skip to main content
Question

What is your typography style hierarchy when separating desktop and mobile?


Sjeefr

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! 🙂

0 replies

Be the first to reply!

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings