I'm working on a website in Sketch (but that doesn't matter). I want to be consistent in my text styles, but obviously a mobile H1 should be a different size than a desktop H1 for legibility purposes.

enter image description here

So H1 is 48pt, and it's mobile equivalent is 24pt. Should I just create an H3 that's 24pt or a H1-mobile instead?


For the hierarchy, SEO purposes and screen readers, it's a good idea to keep the H1, H2, H3 hierarchy for desktop and mobile. That way, users using screen readers can navigate easily.

I recommend you to read this article: https://www.smashingmagazine.com/2013/01/the-importance-of-sections/

So create the H1 for mobile. Make the sizes different for desktop and mobile. Just an example:

Desktop: h1: 48px - h2: 36px - h3: 24px

Mobile: h1: 24px - h2: 18px - h3: 14px

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.