Jump to content
Check out our typography channel on Instagram

Monospace font from Designing interactive web sites

Recommended Posts

As a kid, I did not have a computer at home, but plenty of books. One of the books I loved was "Designing Interactive Web Sites", published in 1997 by Hayden Books. The part I really liked was the font used for code samples in the text. I read this book, and many others from Hayden, so many times that the typeface has been etched into my mind, and I'm looking for the font so I can use it in my text editor. Commercial/paid fonts are fine.

I'm talking about the font used for the source code on the page. It seems to be a variant of Helvetica Monospaced or Monospace 821; the only difference that I can spot is that the book font has crossed zeros while Helvetica and Mono. 821 have plain zeros. Does someone know what this variant might be?

A scan of the book is available at the Internet Archive: https://archive.org/details/designinginterac0000unse_j6u2

Designing Interactive Web Sites.jpg

Link to comment
5 hours ago, Nikhil Dabas said:

the only difference that I can spot is that the book font has crossed zeros while Helvetica and Mono. 821 have plain zeros.

Having also checked Nimbus Sans Mono, I suspect this was an in-house customisation (or, in any case, a variant no longer available digitally).

As a curiosity, Helvetica World (not monospaced, alas) offers both a dotted and a slashed |0| alternates.

Link to comment
2 hours ago, Riccardo Sartori said:

Having also checked Nimbus Sans Mono, I suspect this was an in-house customisation (or, in any case, a variant no longer available digitally).

As a curiosity, Helvetica World (not monospaced, alas) offers both a dotted and a slashed |0| slternates.

Thanks, yes, it's possibly an in-house customization to make source code clearer (i.e. making the uppercase 'O' and '0' distinct.)

The thing about Helvetica Monospaced and Mono. 821 is that they have done the same sort of thing to some characters, so for example the uppercase 'I' has serifs in the monospace versions, while the rest of the Helvetica family does not.

Link to comment
47 minutes ago, Nikhil Dabas said:

an in-house customization to make source code clearer (i.e. making the uppercase 'O' and '0' distinct.)

The thing about Helvetica Monospaced and Mono. 821 is that they have done the same sort of thing to some characters, so for example the uppercase 'I' has serifs

In the case of Helvetica Monospaced (and its clones) the differences in the shape of the letters from the proportional version aren’t really intended for differentiating between similar characters. Rather, like in typewriter “fonts”, these differences serve to cover the gaps created around narrow letters by the fixed space assigned.

Looking around for alternatives, while there are neo grotesque programming typefaces, they tend to differ quite a bit from Helvetica in the details.

Link to comment
23 hours ago, Riccardo Sartori said:

In the case of Helvetica Monospaced (and its clones) the differences in the shape of the letters from the proportional version aren’t really intended for differentiating between similar characters. Rather, like in typewriter “fonts”, these differences serve to cover the gaps created around narrow letters by the fixed space assigned.

Ah, understood, thanks for the explanation!

23 hours ago, Riccardo Sartori said:

Looking around for alternatives, while there are neo grotesque programming typefaces, they tend to differ quite a bit from Helvetica in the details.

Indeed. I looked around quite a bit and while there's a whole cottage industry these days around fonts for programmers, there is no font (that I could find) which comes close to that Helvetica 'look.' Source Code Pro from Adobe is about the closest to my eyes.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Check out our typography channel on Instagram
×
×
  • Create New...

Important Information

We are placing functional cookies on your device to help make this website better.