Dynamically Changing Typography Styles for Web/Tab/Mobile

What is the suggested approach and best practice for having the defined typography settings change according to screen size?

So if I’m using H1 everywhere for H1 elements and it is 36 on Web, should be 28 on tab and 24 on Mobile, does a separate H1 need to be created and then manually changed on each screen size? Or would the same H1 be used and then conditionally changed via bound formulas?

I’d like to adjust these sizes by a couple of points for every text element.

Or am I just complicating this unnecessarily since I come from Bubble and in WeWeb we can just use rems instead of pixels but that still leaves the question of them dynamically adjusting as they traverse through different screen sizes.

Ok I have answered my own question and was so pleasantly surprised by WeWeb and how easy it is to work with Typography in WW.

I defined all of the various typography elements and set them in rems plus changed the font weight in accordance with the 3 major breakpoints. And when you change the Library Style enabled H1 or H2 or any of the other stored values in either the Web, Tablet or Mobile view, these become the default for that view, so one can use H1 or maybe the Web display and the tablet display but then switch to H2 for mobile, etc.

Or if for SEO purposes, H1-H6 hierarchy should be preserved, just manually set the desired font size/weight on the mobile display to make sure the letters don’t like they are from Jupiter.

1 Like

Nicely done! Thanks for taking the time to share the solution on here :slight_smile: