How to manage the font size between retina and the normal design


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.

9/20/2016 3:13:00 PM

Accepted Answer

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.

9/21/2016 11:34:00 AM