Welcome to WebmasterWorld Guest from 23.23.46.20

Forum Moderators: not2easy

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)

5+ Year Member



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)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



Hi there drooh,

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

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

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month