While working on a new site using a responsive design, I discovered that fonts render quite a bit differently on Retina and non-Retina displays. In particular, I had to adjust letter spacing for retina displays that appeared way more spread out than on a standard display. I was using the Avenir webfont for my headers when I ran into this issue. You can see the results in my images below:
![non-Retina Display](https://www.koolkatwebdesigns.com/wp-content/uploads/2013/07/ipad-nonretina-223x300.jpg)
non-Retina Display
![iPad Retina Display](https://www.koolkatwebdesigns.com/wp-content/uploads/2013/07/ipad-retina-220x300.jpg)
Retina Display
As you can see the increased letter spacing really messes up the layout as well as spreading out the headers too much. The cure? A simple CSS fix:
1 2 3 4 5 6 7 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { letter-spacing:-1px; } // end of media query |
The final results of the CSS changes can be seen here:
![iPad Retina with letter-spacing correction](https://www.koolkatwebdesigns.com/wp-content/uploads/2013/07/ipad-retina-with-letter-spacing-correction-219x300.jpg)
iPad Retina with letter-spacing correction
-0 Comments