em

Emphasizing Emphasis

I think Facundo Corradini is right here in calling out our tweet. If you're italicizing text because it should be styled that way (e.g. using italics to display a person's internal thought dialog, as illustrated in our example), then that's an <i> and not an <em>, because <em> is for stress emphasis — as in, a word you would emphasize with your voice, if spoken, to affect meaning.

Plus, I'm always down for long-form articles about the nuances of a handful of HTML elements!

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 em and 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.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag