calc() and Viewport Units – If you load up the Hero or Sticky Bars templates in the header builder, you will see this technique in use. The former utilizes
calc(4vw + 1em) as the
font-size while the latter utilizes
calc(12vmin + 18px). The basic idea here is that you combine a viewport unit along with a fixed unit to achieve text that responds in size based on the size of the screen in general (not the containing element like the “Responsive Text” feature, which is how it is slightly different). Essentially, by combining a viewport unit with a fixed unit, you are able to moderate the scaling effect from being so drastic. For instance, if you just make the
font-size of an element
10vw, that can potentially appear very large on larger screens and very small on smaller screens. The mixing of a fixed unit helps to make this ratio much more manageable, and you can play around with alternating between higher/lower values of the viewport units and the fixed units.
rem Units Along with Differing Base Font Sizes – With the latest versions of the theme, in Theme Options under Typography in the Root Font Size section, you can set different root font sizes for each breakpoint of the theme, which allows all text across your website to be responsive. Remember, you are setting the base sizes for your theme overall, so this will affect everything, but starting with larger numbers on desktop and going to smaller values on smaller screens will help the overall responsiveness of typography on your website. Then, you can utilize
rem units in the builders to scale text up and down based on the root
font-size of the overall theme at each breakpoint.
Display Options – If you have text that is very large and simply too expansive for a section on smaller screens, you can also look into hiding the large text at a certain breakpoint and have some copies for smaller screens that utilize a combination of smaller
font-size settings as well as different text potentially. This is a common technique utilized in these situations with large amounts of text. For example, you can see this in action on Framer’s website: https://framer.com/features/design/. The heading that starts with “Create responsive designs…” is hidden at a certain breakpoint and replaced by a much smaller sentence starting with “Easily create responsive…”.
Hopefully this helps to point you in the right direction. Cheers!