Fixing Issues With Pre-formatted Inline Text
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](https://github.com/necolas/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: ```css pre, code, kbd, samp { font-family: monospace, monospace; } ``` or change how you size your elements to use `rem` or other root-relative units