Introduction

This article describes the use of CSS to control the font-size of large-sized text for different screen sizes. This is particularly useful for font size bigger than 50px. The description is based on Elementor but can be easily adapted to other page builders.

TheDesignOrder always provides two font sizes for text used, one for desktop at 1200px or above, and one for mobile device at 375px. Based on these two designed font-size, the CCS calc() function is used to determine the font-size at various window widths.

Procedure

• Set the font-size for desktop FS1 in the Elementor setting panel.
• Let the font-size for width 375px be FS2.
• Manually determine the font-size for width 320px, say FS3.
• In Custom CSS of the element, apply the code below.

@media (max-width: 1200px) {
	selector h2 {
		font-size: calc(max is FS1, min is FS2) !important;
	}
} /* @1200  */



@media (max-width: 375px) {
	selector h2 {
		font-size: calc(max is FS2, min is FS3) !important;
	}
} /* @375  */