text line height breakpoints

[syncopic]

Hello Forum, Hello Pablo,

i have a problem with text (with colored background) in different breakpoints.
In breakpoint 1200px (textsize 14) everything is fine.
In breakpoint 980px (textsize 13) and breakpoint 768 (textsize 12) the line height is to much and the background doesn´t cover the text.
Whenever i change the textsize, the line height will not be changed, depending on the textsize. Using a 'style' for text (with fixed size and line height) makes the text 'not responsive'.

examples:




The text is responsive and as 'Use <p> tags' formatted. Other settings are also wrong in publishing. The font ist set to 'manually @fontface' and the font (Opensans) is published with website. The failure appears in different browsers.

Is it my fault based on wrong settings ? I don´t want to create a single text for each breakpoint with correct settings

[Pablo]

Do you have a demo project?

Note that I do not need your complete project, I only need a simple page with the text object and styles so I can immediately see what you have done.

[syncopic]

Hello Pablo,

i´ve made a Project-Backup (ZIP) with reduced sites (only masterframe and one exemple-site):
https://www.pro-e-fact.de/downloads/SBHD_2020_D.zip

[Pablo]

When using absolute positions, it is usually difficult to get pixel perfect result because different browsers render fonts differently.
Also, the exact size of the font is different per font.

In your case I have found that using line height: '1.25' and font fine tuning '1.1' seems to give decent results.

[syncopic]

Hello Pablo,

thanks for your answer - i will try with your suggestions.

What i don´t understand ... in the year 2020 ... if i set a fixed font incl. publishing the font, set a fixed size and a fixed line height ... that the rendering in browser isn´t exactly - so i have to check every page in every breakpoint in almost 10 browsers ... drives me angry.
For sure that´s not a problem of WWB, but ... it´s unbelievable for todays (non)standards.

Greetings from Germany

[syncopic]

uuhhmm ... another question ...

The 'Fine Tuning' i can also set in 'style' ... but then ... if i let the textsize empty and the padding also ... can i set different values for each breakpoint ?

[syncopic]

Ah ... sorry ... my fault ... it´s available in the properties.

Thanks again

[syncopic]

Ok .. after trying and trying and trying ...
Best settings are:

Breakpoint 1200px = textsize 14, lineheight 1.0
Breakpoint 980px = textsize 13, lineheight 0.9
Breakpoint 768px = textsize 12, lineheight 0.9
Breakpoint 360px = textsize 14, lineheight 1.0

Used font: Opensans - checked with Firefox, Chrome, Opera, Edge, Safari

Maybe this helps other people to get almost correct results

Greetings !