I've tried
Use <div> for each line
Use <div> with position for each line
Include line-height in text styles
Use <p> tags
Apart from Use <div> with position for each line, the text never looks as intended (weird line spacings and the text overlapping the end of the footer)
All of my styles have the same line spacing setting, but often, a line with mixed styles will render with a weird smaller spacing than the rest. Other lines with mixed styles may not be affected; There is no real pattern I can see to when this will occur! The only way I have ever been able to get the site to look consistent is to highlight all of the text and set the line spacing to a fixed amount (the same amount that all the styles use).
I've now realised that this disconnects the text from their original styles (I assumed it would be an inherited CSS property) and now I have about 164 pages that look like they are using the styles, but are not anymore.
There must be a way of getting a consistent rendering of text without all of this extra effort.
This is how it looks in WYSIWYG Web Builder

Rendering with all styles set to 1.2 line spacing

Rendering after highlighting the paragraph and manually setting the line spacing to 1.2

And yes, before you ask, I've tried using the 'blue' style in the first paragraph. It makes no difference.