Micropattern: Optimise font weights for Retina displays using Sass

So you’ve got your typographic hierarchy defined. Colours set and your web page is looking crisp.

Now you want to take it one step further by tweaking those font weights for retina screens. I usually like to tweak font weights based on whether the device has a Retina display - thinner weights work really well on mobile devices but look terrible on others.

If you’re using Sass, Bourbon makes this easy. I usually define a mixin like:

@mixin gotham-header { font-family: 'Gotham A', 'Gotham B', sans-serif; font-weight: normal; @include hidpi { font-weight: lighter; } } 

Which sets the font weight to be a that little bit lighter on Retina displays.

I’ll usually use a separate mixin for body fonts which tend to be smaller and less capable of handling thinner weights at...

Continue reading