I am mocking up a one page website using sketch in macbook pro retina with the resolution of 1440width and 5120height. I see everything perfect once my design is done, but when I start coding the html and css with my thunderbolt I see the font sizes are bigger than the one I am seeing in my retina display. So what would be the better solution to have a better design in normal window and as well as retina window. I use 1x and 2x images for retina and normal window but I am not pretty sure about font sizes. Any help would be appreciated.

  • 1
    If you need to halve the size of the images for "normal" size, then you would need to halve the size of the type to be proportional. If your retina display requires 2x pixel size images, then your retina display requires 2x (pixel size) type. – Yorik Sep 20 '16 at 16:09
  • Do you mean (for example) a font set to 24pt in your HTML/CSS looks bigger than a 24pt font in your design app? – Mysterfxit Sep 21 '16 at 11:08
  • @Mysterfxit yes that's the exact thing I'm facing – Benjamin Sep 21 '16 at 11:16
  • Which one seems like numbers match what you expect them to be? The layout or code? – Mysterfxit Sep 21 '16 at 11:52

If working @2x in your design program you can double the PPI setting for the document, but leave the pixel dimensions the same.

So if your document is 1440x1520 @ 72ppi change it to 1440x1520 @144dpi

That will leave everything looking the exact same but now your font sizes will more closely match what you will eventually code in CSS.

Or you can just divide all the font sizes by 2.

  • I tried dividing the font sizes by 2 but still in some places they are looking too small. I mean when I divide 20/2 it's 10 it's not visible 😔 – Benjamin Sep 21 '16 at 11:36
  • In your CSS what units are you using for font sizes? i.e. px, pt, or em – Mysterfxit Sep 21 '16 at 11:44
  • I do use pixels just as it was used in sketch app – Benjamin Sep 21 '16 at 11:44
  • Hmm...this is how I usually work in Photoshop and it works for me. I'm not familiar with Sketch. Maybe something else is wrong. – Mysterfxit Sep 21 '16 at 11:49
  • points are relative to inches, so you don't simply divide 24pt by two, you need to convert it to pixels. This is what you are doing by flagging everything at a higher dpi (the software is making that calculation for you) – Yorik Sep 21 '16 at 14:11

I have to view my files at 200% to see what images/text will look like in browser. This also caught me by surprise when getting retina display.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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