Responsive title with multiple lines and different font sizes

Creating a responsive text block with multiple lines and different font sizes is very easy in Elementor.

Step 1: Separate the different lines

In a « Title » widget, write the desired text and separate the different lines using tags and
. The text structure should look like this:

<span class="line-1">A responsive</span>
<br>
<span class="line-2">title</span>
<br>
<span class="line-3">with different</span>
<br>
<span class="line-4">font sizes</span>

Step 2: Adding and adjusting CSS

Once the text is correctly formatted, you must now set the default text size in a unit based on the width of the screen (vw). To do this, simply go to the « Typography » tab and set the character size to 5vw for example.
Then, you just have to open the custom CSS panel and set the character size of each line in « em » unit according to your needs. The « em » units being relative to the default unit, the different lines will always keep the same ratio to each other. The custom CSS should look like this:

/*In this example, line 1 has the default character size (1em is neutral)*/
.line-1 {
    font-size: 1em;
}
/*Line 2 is 2.75 times larger than line 1*/
.line-2 {
    font-size: 2.75em;
}
/*Line 3 is 0.875 times smaller than line 1*/
.line-3 {
    font-size: .875em;
}
/*Line 4 is 1.3 times larger than line 1*/
.line-4 {
    font-size: 1.3em;
}

Step 3: Adjusting the responsive

Now that these settings are done, just set the default font size for the other desired screen formats directly via the Elementor settings. The CSS settings will adapt themselves.