Changing Fonts

I’ve decided to shift the preferred font on this site from Helvetica Neue to Jim Lyle’s Bitstream Vera Sans. If you don’t have that font installed, (though you really should, it’s pretty and free) you won’t notice any changes. If you do, please let me know what you think.

The actual CSS rules for the body font are now:

body {
  font-size: 100%;  
  font-family: 'Bitstream Vera Sans', 'Deja Vu Sans', 'Helvetica Neue',  
                Helvetica, 'Lucida Grande', Verdana, Arial, Sans-Serif;
  background-color: #e8e8e8;
  line-height: 140%;

I discovered the Bitstream Vera family while working on my next book. The book will be self-published so I’m doing all the layout and design work I’d normally have a professional do. I wrote the book in DocBook so most of the details are handled by the DocBook XSL stylesheets, perfect for a left-brained type like myself. I just have to specify the fonts, page sizes, and a few other details.

I chose Garamond for the body text, but Vera Mono for the code. Good looking monospaced fonts are really hard to come by, especially for print as opposed to the screen. More than one author has simply given up and decided to go with a nearly-monospaced font instead. The code font here is just a boring Courier, but I think I’ll experiment with changing that to Vera Mono too, especially since in Bitstream Vera (unlike Gill Sans) it is possible to distinguish an l from a 1.

On the down side, I don’t think Vera makes very nice headlines. I’ll have to change that to something else. Maybe just Times or Helvetica? I’m not sure why, but on the Web the usual rules about Serif fonts for body text and sans serif for headlines seem to be reversed. It probably has something to do with the lower resolution of a computer screen.

P.S. I’m also mucking with the layout on these pages right now so things may look a little funky. It shouldn’t affect the fonts too badly though.

5 Responses to “Changing Fonts”

  1. robert Says:

    The best, so far, was Constant Willison used by O’Reilly (you’ve heard of them). When Frank died, so did their use of the font. I never saw anything that he was the owner of the font. Perhaps it was all a coincidence.

  2. Andreas Schödl Says:

    After installing the Vera fonts, the text looked very washed-out. Employing Windows anti-aliasing in “default” setting was found to be guilty for this. When switching to ClearType things improved for the site, but other stuff on the desktop took on a fuzzy look. Switching anti-aliasing off altogether solved it for my Dell’s notebook screen.
    Fine font, thanks for sharing that!

  3. lefty Says:

    Why are you specifying fonts in your stylesheets at all? I know what font I’d like to use to read text, and it’s not any of the ones listed in your CSS. I shouldn’t have to tell Firefox to always override a site’s fonts or uninstall Helvetica and Arial from my machine to have a pleasant web browsing experience. I’m not saying there’s never a reason to specify a font, but for a site that is basically a long text file (presentation-wise) it seems kind of pointless.

  4. Elliotte Rusty Harold Says:

    Au contraire, this is exactly how CSS is supposed to work. The site chooses what it likes, and if you prefer something else you override that choice. User preferences win of course.

    I’ve noticed when reading the blogs of some people with better taste than me that their fonts really jump out, and far more legible than what I picked. I’ve also noted the reverse on many occasions. In picking the fonts I’ve used here, I’ve tried to copy the best examples I’ve seen elsewhere.

    I’m curious what font you prefer, if it’s not listed in the list anywhere. Maybe a serif font?

  5. lefty Says:

    I just realized that I never answered your question. I’m fine with using CSS to specify a couple of unique fonts for a website, absolutely. I am totally pro-CSS. But your stylesheet lists seven fonts! And two of them are pretty much guaranteed to be installed on every computer that can browse the web. If I don’t want to use those fonts, I’m forced to either uninstall them or set an all-or-nothing preference that will be enforced on every single site I visit, whether I want that or not.

    I don’t design sites for a living, but it seems to me like the guideline ought to be that you shouldn’t specify any font unless your site has a real functional need for one, or at most you should specify either “serif” or “sans serif”, and let the user’s settings win out after that.

    (For the record, my browsers at home are set up to use News Gothic as their sans-serf font, at least on websites that allow me the choice. Is it much different than many of the other sans-serf fonts around? No, not really. But that’s not the point.)

Leave a Reply