āœ… EASY - Fluid (responsive) modular font size + spacing

The new responsive engine is great but I was sorely disappointed when I discovered that it does not make text size responsive at least NOT YET. So I read everything I could find about fluid and responsive font sizes, and the use of modular scales for headings, and refreshed my rudimentary CSS knowledge.

I discovered that most people online discuss ways to make the font size fluid based solely on the device/viewport width. Others add a slight improvement by also considering the size of the font. Few consider that the height of the device should also impact things a little too. My solution takes all three into consideration and it ensures that evey bit of text is relative in size to every other bit so once the base body font is defiend everything else scales in ratio to that. The bit of CSS code Iā€™m using is below. Feel free to modify to suit your personal taste.

To use this simply paste it into a HTML element and put that element on every page. Alternatively, you can paste it into a Page Header or your SEO App Settings if you are using a paid version.

Please note that I am neither a UI designer nor a coder so this is a result of lots of reading and trial and error. I think it will save others time but it would no doubt benefit from a little polish that understand what they are doing better than I do.

3 Likes