Making Courier readable

[Dan Gayle]

This topic was imported from the Typophile platform

I'm working on a web project where I need/want to use a monospace as the primary typeface. This isn't a design question per se, but in general, what can be done to set text in a monospace in a way that makes it easier to read? And if there are specific suggestions to one of the primary monospace web fonts, that would be great too.

So far, what I am thinking is that leading should be greater than normal, since the extreme vertical orientation of the type creates a pattern that breaks up the left to right flow essential to ease of reading. But going too far is almost too easy since the x-height is so extreme.

If you were forced to use a monospace, what would you do?

[Dunwich Type]

I would do the same thing I do with any other typeface—design a dozen test pages with different points sizes and leading and then decide what works and what doesn’t.

[Frode Bo Helland]

I second James, but rely more on the difference between size and leading then actual point size. There are thousands of different screens with varying resolution.

As for choosing fonts, you'd probably want to style it like this: font-family: Consolas, Lucida Console, Monaco, monospace;, or this: font-family: Courier New, Courier, monospace;

http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

[Si_Daniels]

Note that Courier New has a really narrow stroke-width. In Windows it gets beefed up under ClearType rendering. That "fix" isn't in the iPhone or Mac OS, AFAIK, so might want to specify Courier before Courier New - or at least verify the site on Mac, Windows and iPhone.

Cheers, Si

[poms]

I think you will need real large leading (line-height), because of the huge word-spacing of the monospaced font, say 12px/20px, even for relatively narrow colums. You could try to reduce word spacing a bit, say -0.1em also …

[joeclark]

Outline version of Courier are terrible. In fact, they are the worst known renderings of a letterpress font (as IBM Selectric Courier actually was) in outline form. Really, avoid at all costs.

You’re advised to surround font names that include spaces with quotation marks in any CSS file: font-family: "News Gothic" not font-family: News Gothic.

—
Joe Clark
http://joeclark.org/

[Jens Kutilek]

Outline version of Courier are terrible. In fact, they are the worst known renderings of a letterpress font (as IBM Selectric Courier actually was) in outline form. Really, avoid at all costs.

You mean, like, all 20 of them? What's missing in them?

[Si_Daniels]

Courier, as Bud intended it, can only be acceptable when metal ball hits ribbon producing imprint on typewriter grade paper. You can digitize the image on the ball (as Monotype did) and produce an anemic hairline font. Or you can digitize the image on the paper, producing what amounts to a cliché. Or you can try for something in between.

What's missing is that they was not designed or intended for the screen, or for regular printing processes.

[Dan Gayle]

Does that make the conditions even harder to replicate, beyond the oft mentioned digital outlines of regular cold metal fonts?

[Si_Daniels]

That's the theory - that typewriter fonts are in a different category and have different issues to cold metal types. I’m sure other people have considered this.

[dberlowgone]

"...in general, what can be done to set text in a monospace in a way that makes it easier to read.."
Some monospaced fonts were digitized from an actual point size. Using a font digitized from a size and at that size, is the best you can do. So e.g., if a monospaced font says 10 pitch, use is usually best at 12 point. Bitstream's Courier 10 Pitch is based on the daisywheel plus a little if you are looking for accuracy to an original size/pitch for print... but you are doing a web project, so you're screwed in two dimensions — if the monospacing alone does not harm the type the rendering certainly will. The one way to make the rendering better on the web is to enlarge, and poke-in-de-eye! it's monospaced. I'd refuse on the grounds of "You hired me!", or at least distance myself from all and any credit. Hope this helps.

Cheers!