Room 208

Elaborate Burn

Posts from #typography

Using custom fonts with Dichotomy

@abandonedsteel writes:

Just one question - do you, perhaps, have suggestions for alternate monospace fonts? And if so, how would I use them in this theme?

Certainly. The most important thing to note when selecting a typeface is that Dichotomy expects normal, bold, and italic styles to all have the same character width. For instance, links turn bold when the mouse cursor moves over them, and if the typeface you’re using has normal and bold fonts with different character widths, you’re going to end up with text jumping all over the place.

A small digression about browser font synthesis: If you ask for a bold font in a font family that doesn’t contain one, most browsers will fake one by simply doubling some pixels horizontally. Needless to say, this means that the mock bold font will not have the same character width as the original. Browsers will also synthesize italic fonts when needed by applying a uniform slant to the glyphs, but the character width isn’t affected by this process, and so it’s okay if the typeface doesn’t have italics. If it does, though, it had better also have a separate bold italic font, otherwise bold synthesis will ruin everything again.

Dichotomy uses Ubuntu Mono by default, which conveniently has regular, bold, italic, and bold-italic variants. Early versions used Lekton, which I liked but unfortunately committed the cardinal sin of having an italic without a bold italic.

Okay, okay, so how do you do it?

In short, head over to Advanced options, and enter something like the following in the Custom CSS box:

body {
    font-family: "MyFace", monospace;

You’d replace "MyFace" with the name of your preferred font family, of course, preserving the quotes. That monospace at the end is important to ensure that people who can’t use the font you specified still get something monospaced. Don’t leave home without it.

System fonts

It’d be great if we could pick a monospaced font family that’s already installed on everyone’s computers, so we wouldn’t have to add code to download the font files from elsewhere. Sadly, it’s slim pickings here. Consolas comes with Windows and Office these days, and may be your best bet on this route. OS X ships a decent version of Courier, but Courier New on Windows is thin and spindly and hard to read and I hate it. Don’t use it.

Web fonts

Okay, so let’s take a look at some downloadable web fonts. This option requires more work, but it carries the advantage that most browsers will automatically download the required font files, sidestepping the problem of default system availability. Ordinarily, I would point you to Google Fonts and say, “Search away!” But even though they provide options for searching by various font attributes, fixed width is not among them. Never fear, though, because I’ve compiled a shortlist of typefaces available there that satisfy our criteria:

(Yow, that really was short.) To use one of these fonts, you’ll need to follow the Open [font name] in Google Fonts link near the top of the specimen page. Check the appropriate styles to include – you’ll want at least Normal 400 and Bold 700, as well as any italic variants if they’re present – then scroll down to step 3. Select the @import tab, and copy and paste the code there at the top of your custom CSS, before any other declarations. Then change the font family name as I mentioned above, and save.

If you’re using Dichotomy with custom HTML, this won’t work properly due to an oversight in versions up to 3.0 – but in that case I trust you can read the diff fixing this problem and make changes to the code accordingly.

Any questions?

I hope this guide was reasonably clear, but if not, you can always send me e-mail or grumble to me via Tumblr asks.

Hong Seon Jang, "Type City"

A miniature urban landscape built from hundreds of old metal type blocks, on display at the David B. Smith Gallery in Denver.

The design of a signage typeface

Ralf Herrmann talks about what goes into creating type for signs, how reading at a distance differs from typical print settings, and how he got arrested in Norway in the pursuit of knowledge.

(I know I have at least one follower who’ll enjoy this. Yes, you.)

Slow decay, or playing around with Inkscape’s path simplification tool. “13” was simplified as part of a text node containing all the numbers from “01” to “13”; the other numbers were then deleted. The same goes for “12”, “11”, and so on down to “01”, which was simplified by itself. As more discontinuous paths are selected, the shape changes more and more radically as the algorithm attempts to beat the entire selection into something smooth.