Fix: Draw Your Text Layer (Paragraph)

Element width is calculated based on the size in Photoshop, use guide kit to ensure the element is the size you expect.

Use the text tool in Photoshop and click + drag the area/size you want the text to render (this will create a paragraph). Export Kit will use the text area of the paragraph to render your text. With text layers it’s a little tricky because of how Photoshop works. You MUST draw ANY size of the text box FIRST, then you can change the width and height on demand.

Reason: Clicking a Text Layer (Text)

If you click an empty layer in Photoshop and only type text, Export Kit will calculate the size of the text based on the character pixels. If you only click the stage to draw a text layer, then try to re-size - Photoshop will SCALE the text box, NOT RE-SIZE.

Text and Font Resources

Sometime the visual Photoshop condition of an element is not the same as the visual Output condition of an element (eg. hidden, overflowing and scaled elements). The next thing to note is that Photoshop will use a text engine to render the text content – HTML works very differently.

Take a look at Photoshop vs. Environment Rendering and Export Optimization. These examples will help you to understand how Photoshop treats text in various situations and environments. If you export and test that output, you will see very quickly that all browsers and devices render all fonts and text differently.