Retina fonts

when using multi-weights fonts family (e.g. Source Sans) in a site, the hairline maybe looks good in retina display but blur in the normal one. so my solution is setting different weights for normal and retina.

Like this:

$font-weights: lighter, normal, bold, ultra
$font-weight-map: 300, 400, 600, 700
$font-weight-map-retina: 200, 400, 600, 900

And a little media-query:

=mq-retina
  @media screen and (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution:192dpi), (min-resolution:2dppx)
    @content

And the mixin for font-weight:

=font-weight($weight)
  $index: index($font-weights, $weight)
  $weight: nth($font-weight-map, $index)
  $weight-retina: nth($font-weight-map-retina, $index)
  font-weight: $weight
  +mq-retina
    font-weight: $weight-retina

Then, you can use it in your project like:

.lighter
  +font-weight(lighter)
.normal
  +font-weight(normal)
.bold
  +font-weight(bold)
.ultra
  +font-weight(ultra)

See the Pen Retina-Specific Font Weight by naiting (@sliiice) on CodePen.

ps: also you can store the setting in a map if you use sass 3.3+

Retina fonts smoother with css media query