Use `rem` for Global Sizing; Use `em` for Local Sizing

Richard Rutter’s guide for setting the font-size of an element is interesting: he argues that we should use both emand rem units depending on the relationship it might have with other elements on the page:

Take the example of a pull quote containing two short paragraphs. The spacing between the paragraphs will depend on the size of the paragraph text, so you could feasibly set that spacing in either rems or ems. Should you decide during your design process that the pull quote should be set a bit larger, then the spacing between the paragraphs must also be increased. Therefore the paragraph spacing is directly related to the paragraph text size and therefore be considered local sizing within a component. Hence you should use ems in this case.

Continue Reading...