2 Comments

Firefox: Defining font type and size

roystonlodge_Alternate_Mozilla_Browser_Icon

What a professional typesetter knows is the importance of a good font. For centuries typesetters have evolved fonts to provide ease of reading that we know today. Having the text look good in the web browser is a nice bonus, 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 some Linux systems only the basic fonts are installed. Installing the missing fonts adds nice touches to pages that one may not know one was missing before. This addon displays the font type and size of the selected text. Many sites define their fonts as Arial, or sometimes, Verdana, or Georgia; these fonts can be added by installing Microsoft’s core fonts; a few define theirs with Apple fonts, and a few less with others. These font packages contain the most popular fonts (for Arch Linux):

    arpa -i ttf-bitstream-vera ttf-dejavu ttf-google-fonts-git ttf-mac-fonts ttf-liberation ttf-win7-fonts

With MS Core Fonts installed (and a few others) most people will notice a more-expectant experience becoming available. Note: for the ttf-google-fonts-git package I choose to only use some of the more popular ones.

Font size

To get a good idea on good font size to use, look at a book. The size there that feels comfortable will likely feel comfortable on the monitor too. When choosing font size also think about making the various typefaces the same size (i.e. serif, sans-serif, and monospace).

Font type

Being able to define one’s own font can help readibility quite a bit as tastes differ. In Firefox, the settings that can be defined are typefaces: serif, sans-serif, monospace, and the minimum size. It should be known though, that many sites still force their own font type and size; however, the good news is that a greater number of sites are using typeface definitions. With typeface definitions this means that in the future, personalizing fonts will be of greater availability. When choosing a font type, keep in mind to pick one depending on what is easy on the eyes rather than one that grabs ones attention.

Font tests

Here is a basic test of what Firefox’s base-defined font types and sizes look like (click to view):

Font test: Type and size (based defined). (click to view)

Font test: Type and size (based defined).

Here are what a few of the common font groups look like (click to view):

Font test: Common webfonts group 1. (click to view)

Font test: Common webfonts group 1.

Font test: Common webfonts group 2. (click to view)

Font test: Common webfonts group 2.

What did I choose?

After adding all the new fonts and testing them, I found out I like a varied group; they read beautifully and scale good. Ultimately I came up with these:

Typeface Font Size
Serif Bitter 13
Sans-serif Open Sans 13
Monospace DejaVu Sans Mono 12
Minimum 10

DejaVu Sans Mono not Open Sans are good fonts and, for me, hard to beat. Rather than just define them in Firefox, I prefer to define my serif, sans-serif, and monospace fonts system-wide. This allows me to have a consistent overall look to me desktop. Here is my Fontconfig configuration (note: fonts are listed preferential/available first): fonts.conf.

For GNOME the fonts sizes are:

Setting Font
Window Titles Cantarell Bold 12
Interface Cantarell 11
Documents Cantarell 12
Monospace Monospace 10

What they look like:

Font type and size.

Font type and size.

Common webfont groups 1

Common webfont groups 1

Desktop

Desktop

Related

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
    Password:
    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

Follow

Get every new post delivered to your Inbox.

Join 52 other followers

%d bloggers like this: