Responsive font sizes in Elementor

Updated on May 14, 2019


How to apply different font size based on different screen sizes?

Sometimes the headlines and texts look great in Desktop, but in smaller devices they are too big. 
You can set a different font-size for different mobile devices. You can change the Line-Height and Letter Spacing for smaller devices as well.


In order to change font-sizes based different screen sizes:

1. Add a new page or edit an existing one.

2. Click on Edit with Elementor button.

3. From the left dashboard, drag and drop any widget with Typography option to your layout, such as HeadingText Editor or Button.

4. A new dashboard on the left will open with the element’s settings. 

5. From the Style tab, edit the Typography option.

6. Set the font size from Size option. Click on Desktop icon and two more device sizes mode will appear where you can set a font-size for each of them individually.

7. You can use this responsive option for Line-Height and Letter Spacing properties as well.

8. Update the page.

responsive font size Jupiter X
Did this answer your question?