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.
4
-
1If 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.– YorikSep 20, 2016 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?– MysterfxitSep 21, 2016 at 11:08
-
@Mysterfxit yes that's the exact thing I'm facing– BenjaminSep 21, 2016 at 11:16
-
Which one seems like numbers match what you expect them to be? The layout or code?– MysterfxitSep 21, 2016 at 11:52
Add a comment
|
2 Answers
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 😔– BenjaminSep 21, 2016 at 11:36
-
In your CSS what units are you using for font sizes? i.e. px, pt, or em Sep 21, 2016 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. Sep 21, 2016 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)– YorikSep 21, 2016 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.
