Re­spon­sive web de­sign is a tech­nique that al­lows web lay­outs to re­flow to suit the scale and di­men­sions of the user’s screen (or view­port, in CSS parlance).

In this way, rather than try­ing to con­fect a one-size-fits-all lay­out, a web de­signer can spec­ify changes for small screens (e.g. tall-for­mat mo­bile phones) and large screens (e.g., wide-for­mat desk­top screens), and sizes in be­tween. For in­stance, re­spon­sive de­sign is used on many sites (in­clud­ing this one) to col­lapse a multi-col­umn lay­out into a sin­gle col­umn for mo­bile devices.

A rea­son­able idea, as far as it goes. But in prac­tice, de­sign­ers hop­ing to solve their screen-size prob­lem with re­spon­sive web de­sign have dis­cov­ered that they now have two problems.

The main chal­lenge, of course, is get­ting the ty­pog­ra­phy right. Early in the re­spon­sive web era, it was com­mon to see lay­outs with nav­i­ga­tion and im­ages care­fully en­gi­neered to scale up and down with the screen size. Mean­while, the body text was largely ig­nored—set at a fixed point size, and al­lowed to re­flow from edge to edge, re­gard­less of the screen width. Not good.

There­fore, for those em­bark­ing on a re­spon­sive-de­sign project, one key re­minder: the rules of good ty­pog­ra­phy don’t change with screen size.

In page mar­gins, I said that one shouldn’t treat the edges of a piece of pa­per as the bound­aries of the text block. Like­wise in re­spon­sive web de­sign—the edges of the screen are not the end. Just the beginning.

1. Start by con­sid­er­ing line length, be­cause it’s the hard­est to man­age in a re­spon­sive lay­out. Re­gard­less of screen width, the op­ti­mal line length is still 45-90 char­ac­ters. As you test your lay­out, make sure that text el­e­ments stay within this range.

2. The eas­i­est way to main­tain con­sis­tent line length is by scal­ing the point size and el­e­ment width at the same rate. These days, this is es­pe­cially easy thanks to the vw unit in CSS, which lets you spec­ify mea­sure­ments as a frac­tion of the cur­rent view­port width.

   What about the ch unit in CSS, which sup­pos­edly cor­re­sponds to char­ac­ter width? Skip it. Con­trary to the name, it sim­ply de­notes the width of the zero in the font. No, the zero’s width is not a use­ful proxy for av­er­age char­ac­ters per line.

3. Or, if you want text to re­flow in­side a lay­out el­e­ment, in­clude a max-width CSS prop­erty on that el­e­ment to en­sure that the line length is bounded. As above, the vw unit is your friend.

4. Be care­ful ty­ing mo­bile lay­outs to CSS me­dia queries based on pixel width. As mo­bile phones have got­ten big­ger, many sites are set­ting this thresh­old higher. (I’ve seen it as high as 1400 pix­els.) The prob­lem is that this causes the mo­bile lay­out to show up even in rea­son­ably sized desk­top browser windows.

   Un­for­tu­nately, CSS me­dia queries can’t dis­tin­guish desk­top from mo­bile de­vices. If you really want to serve a mo­bile lay­out to large mo­bile de­vices, con­sider us­ing JavaScript rather than me­dia queries to de­tect mo­bile vs. desk­top and load an ap­pro­pri­ate stylesheet.

This last sug­ges­tion will cause cer­tain re­spon­sive-de­sign purists to squeal in hor­ror. But due to dif­fer­ences in read­ing dis­tance, a pixel on a desk­top dis­play and a pixel on a mo­bile screen are not the same. See screen-read­ing con­sid­er­a­tions.