DEV Community

loading...

What to do about monospace font sizes?

yujiri8 profile image Ryan Westlund ・1 min read

Long ago I noticed the default font size in Firefox and Chromium for monospace fonts is much smaller than for normal text, which made code snippets on my website hard to read. I don't know why this is, but I applied font-size:1.2em to them. It made them about the same size, and it looked much better.

But recently I was setting up Firefox on a new computer and realized in the font settings, I could see that normal fonts rendered in size 16 by default while monospace rendered in 12. Then I realized something: if a user customized their browser settings to fix this issue, then code snippets on my site display as much larger than normal text, which looks awful.

What I want is to only make the correction if the user hasn't done it themselves, but I don't know how that's possible. If I hardcode the font size as say font-size:16px, then that will override user settings, which I don't want to do. I want people to be able to change their font size... but I don't want the code snippets to render smaller.

Advice?

Discussion

pic
Editor guide
Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Pretty sure I have seen a real solution somewhere, but for normalize.css, it seems to be

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
Collapse
yujiri8 profile image
Ryan Westlund Author

Whoa! That double monospace is the trick!