"font-family: monospace, monospace"

Question

In normalize.css, the monospace font rules contain

font-family: monospace, monospace;

Is this different to

font-family: monospace;

?

There must be a reason for using that. Maybe it's a workaround for the behaviour of some browsers?

Answer 1

You are right. The font-family: monospace, monospace; declaration is a simple hack/workaround for some browsers which tend to reduce the font size of monospace fonts.

More info on this Github issue: https://github.com/necolas/normalize.css/issues/519#issuecomment-197131966

Answer 2

Yes, this is a workaround for a long-standing (I'm talking over a decade) issue with browsers' handling of the monospace generic family. Eric Meyer has a detailed write-up on this, and I explored this recently while answering this question that's specifically about Firefox's handling of monospace fonts.

Why does it work? How is monospace, monospace different to just monospace? Nobody knows. I made a guess based on Firefox's behavior, but it's just that: a guess. But one thing is clear: monospace, monospace is recommended over just monospace if you don't want to deal with this behavior.