homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

How to make Photoshop text match HTML text
How to make Photoshop text match HTML text

 4:16 am on Jan 4, 2012 (gmt 0)

This has been a long ongoing problem that I have never figured out.

Ill get a design in PSD format, and when I go to code it into a website template. Its difficult to get the text to match exactly. It seems Photoshop wants to use pt sizes and on my sites we use px size.

Any ideas or suggestions?



 4:41 pm on Jan 4, 2012 (gmt 0)

You should be able to set your preferences to px in PS

Edit -> Preferences -> Units & Rulers -> Type (select pixels)

It also depends on the resolution of the file. If you work with 72 DPI files, it should be pretty close, at least, if you're using web-safe fonts.

It's really irrelevant - it will never render "exactly" the same. The anti - aliasing settings and rendering engine in Photoshop is independent of the operating system's type rendering in various browsers, so it will always be "just different enough" to make a visible mismatch. Pick one or the other and go with it. :-)


 4:42 pm on Jan 4, 2012 (gmt 0)

Hi there drooh,

this link will, hopefully ;), give you the required technique....



 7:21 pm on Jan 4, 2012 (gmt 0)

rocknbil has the best answer as to setting PS to pixel measure. I tend to design from the other direction, website first (in code) then adding any imaging necessary to finish. In my experience it is the underlying code that makes the site work, not the pretty design. :)


 11:12 am on Feb 29, 2012 (gmt 0)

Send it over to ImageReady, which I believe comes with every Photoshop installation. At the bottom of the menu is a quick jump button. From there you can save images straight into html files if I recall correctly. I'm not on a computer with it to check but I remember doing it.


 4:41 pm on Feb 29, 2012 (gmt 0)

The question is not how to get images into HTML, it's how to match text rendered by Photoshop with text rendered by HTML.


 10:12 pm on Feb 29, 2012 (gmt 0)

You can replace the word "Photoshop" with absolutely anything-- up to and including "my computer"-- and the answer will always be "Can't be done". Your Palatino is not my Palatino; your screen resolution is not my screen resolution; your browser defaults are not my browser defaults ... et cetera.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved