Responsive design sketches

Responsive Font Sizing

Tags: Responsive, Fonts.

For years I have used "font-size: 62.5%" (10px) as my base font size. Text sizing was easy, 1.2em for 12px, 1.8em for 18px. Over time I have seen an increase in overall font size usage. I have been spending considerable time converting a desktop theme to be responsive. By switching to a base font-size of 100% (16px), the small increase in size makes readability much better and less elements need to be adjusted so there is also a decrease in font-size declarations.

I have read a lot of different suggestions for base font-size options and trying a few quick tests, settled on 16px. Sizing is not as quick but after a little usage, is not very difficult. Simply divide the target font size by 16 to see the value in ems. For example, I want a my footer text to be 12px: 12/16 = .75em. The decimals turn out to be fairly sane and there are probably only a handfull that you will use reguarly.

0.6875em 11px
0.75em 12px
0.8125em 13px
0.875em 14px
0.9375em 15px
1em 16px
1.125em 18px
1.25em 20px
1.375em 22px
1.5em 24px