Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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.
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
