Aral Balkan

Responsive typography with CSS Feature Queries

9 April, 2013 Soon, we will be able to use CSS Feature Queries to better match font rendering across different devices.

Web fonts render differently based on whether a device uses subpixel antialiasing or grayscale antialiasing (the latter is the only option on certain devices, like the iPad and iPhone).

The different way that fonts render depending on which rendering method is used has led to web developers tweaking the -webkit-font-smoothing setting for aesthetic effect and yet others decrying the practice.

Some believe that subpixel text rendering has no place in the future of computing. That may be, but it definitely has a place in the present of computing and it affects the typographical choices we can make.

Rendering affects font choice

Case in point: I am using Avenir Next Ultralight for a site I am currently designing/developing. It displays beautifully with subpixel antialiasing on my Mac’s Thunderbolt Display. It is illegible with grayscale antialiasing on the display of my Retina iPad. On the iPad, the skinniest I can go without sacrificing legibility is Avenir Next Thin. Of course, if I use Thin on OS X, it looks too thick. Ah, the joys of web development.

Thinking about this, I realised that what we ideally need is a media query for font smoothing. Something like this:

body
{
  /* Default assumes grayscale antialiasing and uses heavier font */
  font-family: 'Avenir Next Thin', sans-serif;
}

@media only screen and (font-smoothing: subpixel-antialiased)
{
  body
  {
    /* Use lighter font */
    font-family: 'Avenir Next Ultralight', sans-serif;
  }
}

When I tweeted about this, Arnout Kazemier wrote back saying that that’s what CSS Feature Queries — the @supports rule — is for.

My initial jubilant excitement was somewhat tarnished when I realised that it is currently only supported in Opera 10.10 and Firefox Aurora but it’s definitely one to keep an eye on.

Responsive fonts with CSS Feature Queries

Using CSS Feature Queries, you can use a different font weight depending on whether or not subpixel rendering is supported:

body
{
  /* Default assumes grayscale antialiasing and uses heavier font */
  font-family: 'Avenir Next Thin', sans-serif;
}

@supports (-webkit-font-smoothing: subpixel-antialiased)
{
  body
  {
    /* Use lighter font */
    font-family: 'Avenir Next Ultralight', sans-serif;
  }
}

I still feel it would be better as a media query though.

Looking forward to the day that we can use this across browsers. It will give developers the ability to better match how fonts render across devices without having to change the default font smoothing for the device.