Suitable font replacements for standard non free fonts on free operating systems
2010
When writing and testing stylesheets while working on a free operating system like GNU/Linux, you will most likely have to install the msttcorefonts package, as typical typefaces like Arial, Verdana, Times New Roman etc. are not included with the distribution of your operating system, as they are not free. Even worse, you may have to purchase fonts that are included with the Mac operating system, but expensive for anyone else in the world, like the Helvetica. Wait. Are we making websites only for Windows and Mac users?
Why use free software, write free software but conform to non free web design?
Consider a font style like this one:
font-family: "Helvetica", sans-serif;
On a freshly installed GNU/Linux system this will use the fallback « sans-serif » default font, which is most likely Bitstream Vera Sans. Although Bitstream Vera Sans is a very beautiful font, it is really much bigger and wider than Helvetica or Arial. Some designs may not fit anymore or lose their particular character, when viewed on systems without the « right » font.
The preinstalled fonts that come with both, the Windows and the Mac operating system, are : Arial, Arial Black, Comic Sans, Courier New,Georgia, Impact, Times New Roman, Trebuchet MS and Verdana, as you can see in the « safe list » on the indispensable typetester.org website. However, none of those fonts is preinstalled on a free operating system.
Included in free operating systems, you will most likely find the following typefaces, released under a free licence:
- Bitstream Vera
- DejaVu based on Bitstream Vera
- Liberation metrically compatible with Arial, Times New Roman and Courier New
- Nimbus Sans L based on Helvetica
- Nimbus Roman No9 L based on Times
- Nimbus Mono L based on Courier
- GNU Free Fonts based on Nimbus
I have created a comparison chart – which ou may visualize here in screenshots [sans-serif | serif | monospace] or download [HTML | PNG]. It basically boils down to the following replacement suggestions:
| Non free font | Replacement suggestion | ||
|---|---|---|---|
| Arial | Liberation Sans | ||
| Helvetica | Nimbus Sans L | FreeSans | |
| Verdana | Bitstream Vera Sans | DejaVu Sans | |
| Times New Roman | Liberation Serif | ||
| Times | Nimbus Roman No9 L* | FreeSerif* | |
| Georgia | Bitstream Vera Serif | DejaVu Serif | |
| Courier New | Liberation Mono | Bitstream Vera Sans Mono L | DejaVu Sans Mono |
| Courier | Nimbus Mono L* | FreeMono* |
* different line-height, that should probably be adjusted.
In conclusion, the example CSS of the beginning could become :
font-family: "Helvetica", "Nimbus Sans L", "FreeSans", sans-serif;
So, if the client has Helvetica installed, we use Helvetica, otherwise, we try Nimbus, then FreeSans.
Another example: A stylesheet like this:
font-family: "Verdana", "Arial", sans-serif;
could become:
font-family: "Verdana", "Bitstream Vera Sans", "Arial", "Liberation Sans", sans-serif;
You could also write this the other way round, if you prefer the GPL fonts on free operating systems…