![Eichhorn212](https://vmapp.org/images/player/000default.jpg)
: 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
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.
More posts by @Eichhorn212
2 Comments
Sorted by latest first Latest Oldest Best
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2025 All Rights reserved.