4

I am a web developer. What happens is that the Client sends a PSD (Photoshop designs) to the company. Then the designer needs to create a HTML page from the PSDs

What happen every time is that the designer does not create the HTML with same fonts ie the boldness goes away and the font does not look similar as per the PSD means the quality is too degraded.

And the designer can convince my seniors that this is not possible i.e. The same font size, boldness cannot be achieved in the html while conversion

Can you please specify is it really true? or the designer is just fooling the developers.

I am really sorry if this question is not correct is this website

Improve this question
9
  • if the things goes wrongs in ie then take content as a image format do that if the content is static not a dynamic
    – jassi9911
    Apr 5, 2012 at 6:52
  • can you show the website link or image etc.
    – jassi9911
    Apr 5, 2012 at 6:55
  • boldness of fonts majorly depends on the resolution of the browser. To try this, install webdeveloper in firefox, and try different resolutions
    – mack
    Apr 5, 2012 at 6:56
  • ok tell me which font you are using .
    – jassi9911
    Apr 5, 2012 at 6:57
  • 1
    Richa - Please DO NOT CROSS-POST QUESTIONS. This copy was migrated from StackOverflow and there seem to be other copies posted here and at UX. This is unnecessary - if a question fits better on a different Stack, the mods can facilitate migration. There is no need for multiple posts. Thank you.
    – Farray
    Apr 5, 2012 at 22:49

7 Answers 7

Reset to default
6

the designer does not create the HTML with same fonts ie the boldness goes away and the font does not look similar as per the PSD means the quality is too degraded.
...
this is not possible i.e. The same font size, boldness cannot be achieved in the html while conversion
...
Can you please specify is it really true?

This is a fairly accurate statement. It is impossible for Photoshop text to look the same as text rendered by the OS. There is more detailed information in this answer, but to summarize: Photoshop has several different anti-aliasing options, and none of those options are the same as what your operating system's font smoothing will do.

For example, here is a comparison of 4 fonts using Photoshop's "sharp" AA with an HTML render using Windows ClearType (Font size set at 12pt in both Photoshop and CSS):

font comparison

With some manual tweaking, a designer can make the HTML CSS more closely approximate the Photoshop output, but converting a PSD to HTML is not as simple as copying font settings verbatim. Because of this, the results will always be an interpretation of the design and not a pixel-for-pixel recreation.

As Lauren and others have mentioned, it is part of the designer's job to explain this in a clear way so that the client does not maintain unrealistic expectations.

Improve this answer
1
  • Excellent answer. So many forget about the anti-aliasing Photoshop automatically renders. If the designer disables anti-aliasing, text will look much closer to live HTML text.
    – Scott
    Apr 5, 2012 at 20:00
4

PhotoShop and HTML are two different mediums. They will never and should never be expected to match visually down to the pixel.

In fact, the process of 'convert this PSD into a web page' is pretty much an antiquated methodology. It's not a practical way to do things anymore.

To answer your question, you will never replicate the rendering of type in PhotoShop to match the rendering of type in the browser. There's many variables:

  • typefaces. The PSD may be using typefaces not even available on the end-user's computer. You'd have to convert the fonts into web-font formats (provided the license allows for it) and then use CSS to declare them.

  • font size. You can only 'suggest' a font size in HTML/CSS. Even then, it may vary from screen to screen, system to system, end-user preference to end-user preference

  • font rendering. PhotoShop tends to use custom font-smoothing methods to render the type. These will all be quite different than the font-smoothing methods the browser and/or operating system is using to render fonts in the browser. Typically, fonts will look slightly bolder in PhotoShop than in the browser.

Improve this answer
1

CSS3 allows the use of @font-face with downloadable fonts. If the relevant fonts can be licensed for web use then the web page can use precisely what the client wants. I don't believe it's entirely cross-browser yet, but there are methods which allow it to work on all browser families.

As for size, it depends on a number of factors including the screen resolution and browser settings. A properly designed web page will allow the user to set font size within his own browser, so although the HTML designer might make everything look right with the browser's default settings there is no guarantee that it will look the same everywhere.

Improve this answer
1

from my experience some designers simply resizes the text as other objects. so the text may look different because it has no proper dimension (10px,12px..).

So you can set almost nearer size to that text but its your client's call to take it

Improve this answer
1

It's the job of whoever has contact with the client to manage client expectations.

Body copy which is set in HTML does not and never will match a Photoshop document. Thy are two different animals. Copy created as part of an image comes from the PSD and will therefore look the same on the website.

Text can certainly be bold, so I'm not sure why that's not happening. Is the designer using web-only fonts in the PSD? When the designer presents the comp to the client, is the designer explaining, "This is just dummy copy for you to get an idea of how it will look. The website isn't going to match exactly for the body copy"?

If the designer is using a font the website can't render, that's the designer's fault, and the designer shouldn't be shifting the blame to the HTML coders. If the client is demanding Palatino and not understanding that the website is going to display Times, that's the fault of whoever told the client they could have Palatino.

Improve this answer
0

It sounds possible - the same HTML tags will be displayed differently on different browsers and across operating systems etc. Perhaps the developers and the designers should get together to understand what the font limitations of standard and safe (in terms of being available and looking the same across browsers and operating systems) fonts to use.

If you want the page to look exactly like the PSD then yeah, you'll probably have to use images. But that is not a good idea. Rather use the limitations of HTML as a design guideline.

Edit: This goes further than fonts btw, common controls like buttons, radio buttons etc will also look different in different browsers. You shouldn't worry too much about subtle changes in the look of the controls and fonts of a website, so long as it looks good across all browsers, versions and OSs etc...

Improve this answer
0

If you have non-web fonts in the design and you want to keep the original look without using images, you can choose one of the following alternatives.

sIFR
Shaun Inman Flash Replacement is a reliable technique for implementing non-web fonts by substituting them with flash objects by the means of JavaScript. It allows using non-web fonts in the page. It does this without using images and without sacrificing accessibility for search engines and other browsers that don’t have JavaScript enabled or images disabled (like mobile phones often do). If either flash or JavaScript is disabled in a specific browser, the sIFRed objects will remain text-based.

Cufon
Cufon technique is a great option for non web fonts. Cufon provides text replacement with canvas and VML by the means of JavaScript, working natively with all browsers and keeping the nice look of the text. No support of flash objects or images is required to make Cufon work.

font-face
Font face works extremely well with non-web fonts. Those computers that don’t have a font will be able to download it and use it on the go. All we need is the font file in .otf format.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.