The problem may arise because different devices and browsers may display the text differently, which can affect the height of the text (and, as a consequence, the text overlaps each other). To solve this problem, you can follow our recommendations:
- Do not use a value of 0 for Line Height for fonts in the Styles menu. Here “0” means “normal” and may be interpreted differently on different devices and browsers. Set some value that looks like “0” (for example, if you use a font size of “16”, the line height might be around “19-20”), which will make the text more or less like “0”).
- Don’t forget to set the text style in the text widget. Double-click to edit text, select any text, and see what is selected in the left text editor drop-down list. If it says simply “Styles”, it means that no style is set for the selected text. By setting the style on the published website, you can use any font, depending on your device and browser.
- Avoid creating very large text blocks (containing a lot of text). If you have such blocks, just try splitting it up into several text blocks. Although you have followed recommendations (1) and (2), some devices and browsers may continue to display text slightly differently. You probably won’t see any difference in small texts, but if you have huge text blocks on your site, you may have a problem.
- Use Google fonts, which are supported on most devices and browsers. Some fonts may not be supported on different devices. In that case, the browser automatically replaces the font with another when you view the site (it may be very similar), which may also contain a slight difference.
