Dublin Library

The Publishing Project

Fixing Issues With Pre-formatted Inline Text

  • 1 min. read

 

While researching about using resets as the basis for custom project defaults, I came accross this solution to a problem I was having.

pre, code, kbd, samp The font-family: monospace, monospace hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of monospace is intentional. Source.

Source: Normalize.css README

To me, this became evident when using code elements inside a header.

If the element that contains the code element is sized using em the different in font size is obvious. However, if you size the element using rem the change doesn't appear to happen or it's small enough not to be noticeable.

See the Codepen below for an example:

If you use Normalize, the font-family fix is part of the reset. If you don't, you may want to add this fix early in your stylesheets, The code looks like this:

pre, code, kbd, samp {
  font-family: monospace, monospace;
}

or change how you size your elements to use rem or other root-relative units

Edit on Github