<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <style> pre { border: 1px dashed #AAA; background-color: #E0E0E0; color: #000000; margin: 1em 10%; padding: 0.5em; } blockquote { font-style: italic; } </style> </head> <body> <p> This page let you test the rendering font-family declaration for monospaced fonts. TODO: add some references here :-) </p> <p> Erwin Dokter had the following explanation on <a href="https://bugzilla.wikimedia.org/33496">Bugzilla #33496</a>: </p> <blockquote> By default, a (Windows) browser has it's default font-sizes set at 16px for serif and sans-serif, and 13px for monospace. Except in IE, where you cannot set any font-sizes... it uses 16px for all fonts. <br/> Vector has a base font-size of 0.8em, and most browsers *correctly* scale down all fonts, including the monospace font, accordingly. So monospace is shown at 0.8 x 13px = 10px (which is perceived as 'too small'). But when you assign any font besides just "monospace", those browsers will no longer treat it as monospace and use 0.8 x 16px = 13px instead. </blockquote> <p> Below are various rendering: </p> <pre style=' font-family: monospace;'> font-family: monospace; </pre> <pre style=' font-family: "Courier New";'> font-family: "Courier New"; </pre> <pre style=' font-family: Courier;'> font-family: Courier; </pre> <pre style=' font-family: monospace, monospace;'> font-family: monospace, monospace; </pre> <pre style=' font-family: monospace, "Courier New";'> font-family: monospace, "Courier New"; </pre> <pre style=' font-family: monospace, Courier;'> font-family: monospace, Courier; </pre> <pre style=' font-family: monospace, Verdana;'> font-family: monospace, Verdana; </pre> <pre style=' font-family: monospace, DOESNOTEXISTREALLY;'> font-family: monospace, DOESNOTEXISTREALLY; </pre>