But like anything Photoshop has its weak points. And since we humans tend to focus on those tiny grains of imperfections I decided to sum up the troubles you can encounter when converting a Photoshop document into to a real website.

Line height between paragraphs

One thing that definitely can be confusing is the line height of text. When increasing the line height in Photoshop by setting the ‘leading’, the extra space is added above the text. In HTML That extra space is distributed above and below the text. Below you can see the differences next to each other.

A large line-height in Photoshop adds space above the text

A large line-height in HTML/CSS adds space above and below the text

Activate this window in the menu throught Window > Character

Many designers use line-height to create paragraphs. So if you want to know how much margin you have to set on paragraphs, you have to look at line-height of the first line in a paragraph. In short: Line-height of the first line – default line-height = the margin between paragraphs. That’s why I never look at the line height of the first line of text in a paragraph in Photoshop.

Line height of the first line in a text box

Another thing to be aware of is that the line-height has absolutely no effect in the first line of a text box. So it doesn’t matter if you set the line-height to 20px or 40px. No extra white space is added on top of the text. HTML does not follow Photoshop’s behaviour.

Because of that you have to be aware that different styles with different line heights in a website can push the whole text box up or down. That’s especially important when the first line of a text box should align with some box or image on the left or right as you can see in the examples below.

The solid box and the text box are aligned (line-height: 20px).

...but when a heading is added with 40px line-height it does not align anymore.

You could fix the problem above with this CSS:

.textBox h1:first-child {
    margin-top: -10px; /* only half of the extra line-height has to be compensated */
    font-size: 20px;
    line-height: 40px;
}

The first-child selector ensures us that the negative margin is only used on something that’s on the very top of the text-box. As already said, the line-height is distributed above and below the text. So we only have to compensate for the extra space on the upper part of the line. So:

40px (line-height) - 20px (font-size) = 10px (the value for our negative top margin).

Related posts:

1. Do you create your design in Photoshop or Notepad?
2. 3 Tips for making CSS sprites in Photoshop