Why is the text size in my Output different from my PSD?« Back to Questions List

Short Answer

Export Kit corrects the size in HTML to match your PSD design visually, this will allow your PSD to match almost pixel-for-pixel with Photoshop.

IMPORTANT: All browsers and devices render fonts and sizes differently so must – test, test, test!

Do Not Scale Text

A very common reason for this may be that your Text is scaled in your design, DO NOT scale text.

Redraw Text Layers

If your text layer is giving you trouble, a quick solution is to redraw the text layer:

1. Double click your current text layer
2. Select and copy the text inside your layer
3. Select the type tool
4. Draw a new text layer with the same size and position
5. Paste text contents inside the new text layer
6. Rename the new text layer to match the previous
7. Remove the previous text layer

Long Answer

Photoshop and HTML are not the same. Your PSD will render perfectly visually, while HTML will render perfectly via code. There are many graphical differences with your PSD and your Browser, so there are situations where your content will not render the exact same as your PSD.

Fonts are a major issue when rendering to devices as all devices including browsers will render fonts differently. There is no such thing as a "safe" font, even Arial will not render the same in various browsers.

We have a PSD template to test this specific issue: //exportkit.com/learn/psd-templates/basic-rendering/ek125_202_font_text_rendering.  Export and test in all browsers, you will quickly see that the same font renders differently in both style and size as you open the page in each browser.
ADVANCED USAGE: You can disable this feature anytime via the option Safe Text.  Use caution when you disable this as your Text may not output as expected.
Added November 2, 2015 3:01 am

Do you have the right answer? If you do other users will benefit from your contribution, share your knowledge with the community!

New *Text Scale Support*

You can now scale text normally and Export Kit will correct the text size to match your PSD design. Previously this was not possible but thanks to a user we were able to find a solution!

Answer by admin
Answered On February 29, 2016 2:43 pm #
Looking for another answer? View other questions in HTML Text Photoshop Output or get premium support for guaranteed results.
1 answer
Last Answered 5 years ago by admin

Recent Answers

asked by Mihaa_
asked by Fahad Malik
asked by sukantasaha
asked by Popo
[+] View All Recent Questions

Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.