This help page is a how-to guide. It details processes or procedures of some aspect(s) of Wikipedia's norms and practices. It is not one of Wikipedia's policies or guidelines, and may reflect varying levels of consensus and vetting.

You can consistently use a monospaced font with well-designed characters for coding (e.g., to distinguish clearly between l, 1, and I, and between O and 0, and between -, −, –, and —).

Add something like one of the code snippets below into your Special:MyPage/common.css page, replacing "Roboto Mono" with whatever your preferred coding font is (Roboto Mono was picked as a freely-available coding font for this example).

If you don't want to manually add this code to your CSS page but would rather @import (transclude) it, see meta:User:SMcCandlish/codefont.css for quick instructions.

This code will do the following:

• Apply a consistent monospace font of your choice (and the fallback system-default monospace, should that font go missing or not have characters you need) to all the normally monospaced HTML elements like <code>, <pre>, etc.
• Do the same for the classes used by ((mxt)) and other monospaced templates in the ((xt)) family
• Do the same for additional site-wide classes (as identified so far, e.g. .monospaced) that output as monospace.
• Make the three most frequently encountered editing fields also use this font stack: the main editing window, the edit summary line, and the search entry box.

If you know of an additional class to add here, please update this page or mention it on the talk page.

Horizontal style

/* Use my font, when available, for code */
code, pre, samp, kbd, tt, .example-mono, .userlinks-username, .monospaced, .keyboard-key, .button, .plaincode { font-family: "Roboto Mono", monospace !important; }
/*  Make some of the editable stuff monospaced */
#wpTextbox1, #wpSummary, #searchInput, #searchText { font-family: "Roboto Mono", monospace !important; }

Vertical style

/* Use my font, when available, for code */
code,
pre,
samp,
kbd,
tt,
.example-mono,
.userlinks-username,
.monospaced,
.keyboard-key,
.button
.plaincode {
  font-family: "Roboto Mono", monospace !important;
}
/*  Make some of the editable stuff monospaced */
#wpTextbox1,
#wpSummary,
#searchInput,
#searchText {
  font-family: "Roboto Mono", monospace !important;
}

Cleanup efforts

If you'd like to help clean up instances of the <tt>...</tt> element – which has not been valid HTML since the 1990s, and should usually be replaced with <code>...</code> (this may vary by context) – you can add something like the following to your common.css to make <tt> stick out like a sore thumb:

/* Flag bad code for cleanup */
tt { color: DarkRed; background: Pink; }

You can also do this with <font>, <center>, <strike>, and other deprecated elements. For CSS you can just import for this, see meta:User:SMcCandlish/lint.css.