"font-family: monospace, monospace"

CssMonospaceNormalize Css

Css Problem Overview


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?

Css Solutions


Solution 1 - Css

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

Solution 2 - Css

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionArtisan72View Question on Stackoverflow
Solution 1 - CssKyle OView Answer on Stackoverflow
Solution 2 - CssBoltClockView Answer on Stackoverflow