So you're working in your site, editing the text, everything looks great, and then you publish. But to your dismay, for some reason the text is rendering differently on live than in the TIME Sites Studio! If something like this is happening to you—
where the bottom text is nice and tight in TIME Sites but not in a published page, it's because you ran into a browser CSS limitation. The bottom block of text is set as an H6 value that had a line height defined in Global Styles, and an in-line text style was placed on the line height value in the text edit box to make the lines tighter.
In Global Styles the line height was set to 20px, and in this specific instance I wanted it to be less than 20px.
However, browsers don't respond well to this and will override your inline edits with the Global Style value, resulting in the difference you see in the first image.
So remember, if the text style has a defined line height in Global Styles and you want the line height to be smaller for a specific instance, your browser will not support that change via an in-line or element level edit.
The solution
You can make the Global Style line height value smaller, or delete it and let it inherit the website line height value.
You can set the text to be paragraph style (after making sure that there are no values entered for paragraph style and it's inheriting the website style values) and change the text via the text edit panel by selecting the text element, NOT by double clicking into the text box and highlighting the text.