custom code to make my typograhphy/text more responsive

As the subject implies, I need custom code written to make my headings and overall text more responsive. For the most part my body text seems to resize, altough I would like it to be smaller as a percentage of the screen that it currently resizes to. The Big issue are my headings, which dont seem to resize much if at all. So Ive been using two headers on each page that only appear at certain screen size break points. I don't like this solution because I think google is penalizing me for this redundancy, especially for h1's. The site is [login to view URL] and bubblesoccerminnesota.net. Both are based on wordpress and the theme Tesseract. I use beaver builder for drag and drop elements, but their built in heading/text resizer either doesn't work or prevents google and other heading testing tools to not recognize the headings using this module (just show as there but blank) as opposed to the regualar "text module" set to heading #'s I choose, which are recongnized by google and the testing tools, but are not size responsive. So you can add you own custom solution or try to get Beaver builder or my theme to work they way in which I described.