How do I setup a project to have responsive text sizing?
I usually use px for text sizing but I’m in search of ways of making my websites more responsive so I don’t have to edit each breakpoint as much.
Any help and guidance would be great. Thanks in advance.
Hello.
This is nice video, a little old, about typography to start you up.
Thanks for sharing. Jason is suggesting using em’s and having the body text size be 100% and then using em’s for the actual text. I tried this but you still have to change the em sizing for each viewpoint. That’s exactly what I’m doing with px’s. I’m not quit sure how using em’s makes my text responsive when viewing different viewpoints.
You can always use VWs for your font-size, but you’re still probably going to need to modify the size based on your breakpoint to ensure the best experience for your users.
If you use EMs for all your typography and set your body text size to a base size (ex: 16px) then you’d only need to update that value on each breakpoint, eliminating the need to update each element type (h1, h2, p, blockquote, etc) individually.
I don’t think there is a ‘this fits all’ setting. So you have to check every breakpoint to see how it looks, and change it if necessary.