When you preview or export a banner in Flexitive, you may notice that text on the banner looks slightly different in different browsers. The discrepancy in how the text appears in different browsers is the result of how browsers display webfonts.

When a webfont is displayed, the font is rendered before any text is displayed. The rendering engine for each browser was written independently, and not all necessarily under the same specifications. Because of this, each browser renders webfonts slightly differently. The most common concern that this causes is how it affects the line-breaks of text in a design. In the example below, a slight increase in the spacing of the text will result in a new line break being formed.

To overcome this, we recommend that you leave a buffer between the edges of your text and the bounding box when setting the bounding area of your text-box. This will make it so that if the width of the text slightly increases, the line breaks will not change.