1. Home
  2. Website & Marketing
  3. DIY Website Builder
  4. Texts overlap each other on website 
  1. Home
  2. Website & Marketing
  3. DIY Website Builder
  4. Texts overlap each other on website 

Texts overlap each other on website 

The problem occurs due to the fact that different devices and different browsers can render text a little differently what can have impact on text height (and as a result – text overlapping each other). To fix this problem you can follow these recommendations:

1. Do not use 0 value for Line height option for fonts in Styles menu. Here “0” means “normal” and it can be interpreted differently on different devices and browsers. Set some value which would be similar as it was with “0” (e.g. if you use font size “16” then line height can be around “19-20” what would make text look more or less the same as with value “0”).
2. Do not forget to set style to text in Text widget. Double-click to edit text, select some text and look at what is chosen at left dropdown of text editor. It there is “Style” – it means that no style is set for selected text. Due to this any font can be used on published website depending on device and browser.
3. Avoid creating very huge Text widgets (containing a lot of text). If you have one just try to separate it to multiple Text widgets. Despite the fact that you did recommendation (1) and (2) some devices and browsers can continue render text a little differently. Most probably you will not see any difference in small texts but when there are huge text blocks on site the problem can occur.
4. Use Google fonts which are supported on majority of devices. Some default fonts may not be supported on different devices. They automatically replace font with a different one when you view site (it can be very similar) which can also contain small difference.

 

 

Updated on July 2, 2020

Was this article helpful?