TCM
UoC crest

Responsive Font Sizes

At first glance this looks quite simple. Just place in the <head> section (or elsewhere in one's CSS) something like:

@media only screen and (max-width: 800px) {
  body { font-size: 12px; }
}
@media only screen and (max-width: 700px) {
  body { font-size: 10px; }
}
@media only screen and (max-width: 550px) {
  body { font-size: 9px; }
}

This leaves the font size unchanged if the window width is greater than 800 pixels, and reduces it in stages at lower widths. But, there is a problem if you ever use monospaced text (the <tt> and <pre> tags amongst others). Most browsers default to a 16px font, but 12px or 13px for monospaced. The above sets the monospaced and non-monospaced size to be identical. Try setting the font-size to 14px, and normal text will shrink, but monospaced text expand! One needs an extra line reading somthing like:

@media only screen and (max-width: 800px) {
  pre, tt, code, kbd, samp { font-size: 0.8125em; }
}

If this is not protected by the conditional, for sizes above 800px these will get set to 0.8125 times what they were before.