I just got a new Macbook Pro with Retina and I'm confused about how to attack my PSD's. If I'm designing a site which has 14px font size, should I be settings it to 28px in Photoshop to get what it will look like in CSS? Or if my website should have a 60px tall header, should I make it 120px in Photoshop?

I guess I'm confused because the CSS stays the same, but should I be doubling up on everything in Photoshop to get what it would look like in CSS?

  • 1
    First of all Photoshop is an image editing software and the main purpose is not for creating web designs. Having that said, there is no general rule how you have to set the font size in pixels, as this depends what resolution you set for the image and on which scale you look at it. – t.niese Apr 18 '14 at 17:35

For images, then yes you would want to version of the same image. One original size and the larger version being twice the size. There are a couple of ways you can get your image to work when zooming in. Javascript way, you will want to save the images like myimage.jpg and myimage@2x.jpg. You will then need to download retina.js from http://imulus.github.io/retinajs/ and then include

<script src="js/retina.js"></script>.

you can also do this with css

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
header h1 a {
    background-image: url(images/myimage@2x.png);
    background-size: 164px 148px; //original size image

I would stay away from slicing a PSD and trying to make everything "Retina".

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.