http://blog.typekit.com/2013/05/01/hi-dpi-typography/
What makes a device “hi-DPI” or not. In general, a device is hi-DPI if it has both of these things:
- A display with a (relatively) high pixel density, say, over 200 pixels per inch (PPI) for mobile devices or over 150 PPI for laptops.
- Pixel scaling, where the on-screen graphics are rendered using extra physical pixels so that they appear sharper and clearer than on a standard display.
In hi-DPI displays lighter font-weight works better, this gist is useful to set it:
https://gist.github.com/ddemaree/5470343
If you use Bourbon you can use the included mixin:
http://bourbon.io/docs/#hidpi-media-query
Start with 100% (16px) and grow it for wide displays:
$font-size: 100; // percentage value (16 * 112.5% = 18px)
@media screen and (min-width: 1200px) {
$font-size: 112.5;
}
Use percentage or even better, rem (bourbon have a px to rem function):
http://gregrickaby.com/using-the-golden-ratio-and-rems/
Use unit-less line height to avoid unexpected results:
http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
- Device pixel ratio: http://bjango.com/articles/min-device-pixel-ratio/