As we began building Responsive layouts—particularly layouts that use flexible em-based media query breakpoints—we’ve encountered several reasons that the practice of setting the body font-size is no longer such a good idea in our own work. We’ve observed that others have seemingly come to this realization as well, but hadn’t seen anyone document why they made the change, so here are the reasons we’ve found.
I have also added a new column of output to the modular scale calculator that essentially divides ideal text size by 16 pixels (the commonly held equivalent of font-size: 100%). Target ÷ context = result! I’ve been using this column, “Ems @ 16”, privately for a while to be sure it was worth adding to the calculator. I think you’ll really like it. Makes sizing with rems a lot easier.
This post from Filament Group is a big deal, and this notion in particular has been baking my brain for a while:
As we move into the browser earlier and earlier in our design processes, we’re finding that the very idea of an em value relating to pixels is becoming less relevant.