Mobile app version of vmapp.org
Login or Join
Eichhorn212

: 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

@Eichhorn212

Posted in: #Css #Html #SketchApp #WebsiteDesign

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.

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Eichhorn212

2 Comments

Sorted by latest first Latest Oldest Best

 

@Tiffany317

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.

10% popularity Vote Up Vote Down


 

@Yeniel278

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme