What a professional typesetter knows is the importance of a good font. For centuries typesetters have developed fonts that provide ease of reading that we see in most books today. Having the text look good in the web browser is necessary, choosing the right type and size can make a big difference to how well we read, especially if used quite a bit.
font installation
To make a web page feel right (as was designer had in mind) the fonts should be on your system that a page requires. On many Linux systems the only webfonts installed are the DejaVu fonts which are also the common default Serif, Sans-serif and Monospace fonts for most distros. Adding missing fonts will make a difference to the pages’ look and adds a lot of nice touches to pages that one didn’t know one was missing before. This addon can tell from selected text that type of font that is required on a webpage and what its size is. Basically though most sites still define their fonts as Arial, or sometimes, Verdana, or Georgia that are a part of Microsoft’s core fonts. A few though define theirs with Apple fonts, and a few less with others. These are the most popular webfont groups. To install them (on Arch Linux):
pm i ttf-ms-fonts ttf-vista-fonts ttf-mac-fonts ttf-liberation ttf-google-fonts-distilled ttf-freefont
With MS Core Fonts installed (and a few others) most people will notice a noticably better browser experience becoming available.
Font size
To get a good idea on font size, look at a hardback books fonts and make it about 20% bigger as books are generally two feet away and monitor are a bit more. Also making the different font types about the same height is a good practice as this helps with what is called scanning-expectation (where one expects a font to be when tracking it).
Font type
Being able to select a font that appeals to the users taste is really nice. In Firefox’s settings one can define a preferred font of Serif, Sans-serif, and Monospace. However, it should be known though that many sites still force their own font type and size. The good news is that a greater number of sites are using generic Serif, and Sans-serif, and Monospace definitions so personalizing the look of fonts on a greater scale in the future should be possible. When choosing a font type, pick one depending on what is easy on the eyes rather than one that grabs ones attention (based on readability is what usually works best).
Font tests
Here is a basic test of what Firefox’s base-defined font types and sizes look like:
Font test: Type and size (based defined). (click to view)
Here are what a few of the basic webfont groups look like:
Font test: Common webfonts group 1. (click to view)
Font test: Common webfonts group 2. (click to view)
What did I choose?
After adding all the new fonts and testing all the varied ones, surprisingly I found out that overall the MS core fonts were the best. They read beautifully and scale well and just are a pleasure to look at. Ultimately I came up with these settings (font sizes are picked based on a 102 DPI monitor):
| Font type | Font | size |
|---|---|---|
| Serif | Droid Serif | 15 |
| Sans-serif | Arial | 15 |
| Monospace | DejaVu Sans Mono | 14 |
| Minimum | 11 |
And it feels great, wouldn’t trade DejaVu Sans Mono for anything. Also I should note that rather than just defining fonts to Firefox, I choose to define my system Serif, Sans-serif, and Monospace fonts (via font config) to point my preferred choices (that is, I don’t need to define them in Firefox). Here is my fontconfig config and it includes my choice of good font to best font in respective order: link.
For GNOME the fonts sizes are:
| Default | 12 |
| Document | 12 |
| Monospace | 11 |
| Window Title | 13 |
What they look like:
Font type and size
Common webfont groups 1
Desktop
yaourt -S ttf-ms-fonts ttf-vista-fonts ttf-mac-fonts ttf-liberation ttf-google-fonts-distilled ttf-freefont
Password:
error: target not found: ttf-google-fonts-distilled
where did you get those distilled fonts?
Do you use any patched fontconfig or freetype2 like infinality patches?