Firefox: Defining font type and size


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 ttf-droid

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)

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 1. (click to view)

Font test: Common webfonts group 2. (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

Font type and size

Common webfont groups 1

Common webfont groups 1



About these ads

About Todd Partridge (Gently)

Good times, good people, good fun.

2 comments on “Firefox: Defining font type and size

  1. yaourt -S ttf-ms-fonts ttf-vista-fonts ttf-mac-fonts ttf-liberation ttf-google-fonts-distilled ttf-freefont
    error: target not found: ttf-google-fonts-distilled

    where did you get those distilled fonts?

  2. Do you use any patched fontconfig or freetype2 like infinality patches?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

Join 51 other followers

%d bloggers like this: