Responsive Headings

Let’s consider a common example where the Responsive Typography Sensitivity is set to to 1, the Minimum Font Size Factor to 1.5, and the Body font size is left at the default size of 16px.

The Minimum factor will use 1.5 times the body font, so will lead to 16 * 1.5 = 24px. Our minimum viewport width is set to 360px for the calculations.

The Maximum font size, so the size set by the user to the heading, will be reached at and above the grid breakpoint size (1000px is the default).

So what happens with the calculations is that between 360px and 1000px viewport width, the font size changes from font size set by usersto 1.5 * body font size. As an example: a 680px viewport width is exactly in the middle of the two values, which means the font size would also be in the middle of its range, so if minimum is 16px and maximum is 48px, it would be at approx 32px. Reducing the sensitivity will just slowdown the scaling.

Step 1 – Adjust the Responsive Typography Sensitivity by dragging the slider to fit your needs. 0 will disable responsive typography, and 1 is maximum responsiveness.

Step 2 – The minimum font size is the value of the body font multiplied by the value set in the Minimum Font Size Factor area. Adjust the value by dragging the slider left or right to control the multiplying value of the minimum font size. For example, if set to 0, then there is no minimum font-size. If set to 1 then the minimum font-size will be the same as the font-size set for the body. If set to 2 then the minimum font-size will be double the font-size set for the body

Step 3 – Click the ‘Save Changes’ to save your settings.

Aside from the Avada Global Options, you can also set the Responsive Type options in each Avada Slider.

Located here -> Avada Slider > Add/Edit Sliders

Step 1 – Select an existing slider or create a new one. At the bottom of the settings you will see the Responsive Typography Sensitivity options.

Step 2 – Enter the Responsive Typography Sensitivity and Mininum Font Size Factor settings to suit your needs.

Step 3 – Click the ‘Update’ to save your settings.

This means that your responsive settings are probably not set correctly. Please check the Responsive Typography Sensitivity and Minimum Font Size Factor settings in the global options and ensure the values are correct. Responsive Typography Sensitivity will increase the amount of resizing. 0 will disable responsive typography, while 1 is maximum responsiveness. Minimum Font Size Factor is used to determine the multiplying factor for the minimum font size.