Category Archives: Web

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 the 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 missing fonts usually adds nice touches that may have not been realized before. To help discover missing fonts, the Context Font add-on will display font type and size of a selected font. 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 otf-bitter otf-exo ttf-bitstream-vera ttf-dejavu ttf-inconsolata ttf-lato ttf-liberation ttf-mac-fonts ttf-opensans ttf-win7-fonts

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 readability quite a bit; however,keep in mind, tastes differ. In Firefox, the settings that can be defined are generic typefaces of: serif, sans-serif, and monospace (additionaly, the minimum font size can be set). It should be known though, that many sites still force a specific font type and size; however, gradually, a greater number of sites are using generic typeface definitions. In the future this means that personalizing fonts will be of greater availability. When choosing a font type, keep in mind to pick one that helps improve readability 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 and 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 11
Interface Cantarell 11
Documents Cantarell 11
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

Firefox tuning

firefox-tuning

These edits I use to help Firefox ergonomics — basically they are only fine touches.

Configuration editor

For quick and accessible configuration editing, I like to use the configuration editor. It can be got to by typing about:config in the URL bar.

Session remember

    browser.startup.page
    3

New tab for a new page

    middlemouse.openNewWindow
    false

New tabs unfocused (when loading a new page)

    browser.tabs.loadDivertedInBackground
    true

Middle-click, accidental click, prevention

To protect against accidental middle-clicks that open new tabs with the contents of the clipboard:

    middlemouse.contentLoadURL
    false

Spell check in all entry fields enable

    layout.spellcheckDefault
    2

DPI set

Firefox assumes the monitor to have a DPI of 96. If the monitor has a different DPI this setting will adjust font sizes befittingly; the value is a decimal, the result of Monitor-DPI/96 (e.g. 102/96).

    layout.css.devPixelsPerPx
    X.X

Help rollovers disable

    browser.chrome.toolbar_tips
    false

Tabnails disable when rearranging tabs

    nglayout.enable_drag_images
    false

Mouse scroll speed

    mousewheel.default.delta_multiplier_y
    300

Source code editor define

    view_source.editor.external
    true
    view_source.editor.path
    /usr/bin/gedit

“Do Not Track” enable

Read more on this here.

    privacy.donottrackheader.enabled
    true

Font type and size

Many sites define font size depended on CSS values. Using these values can be helpful in define font size: Firefox: Defining font type and size.

Add-ons

Avoid add-ons that are unnecessary; add-ons contribute to the potentiality of creating an un-stable browser experience. These add-ons give nice bonuses and have a good reputation:

  • Adblock Plus — blocks annoying buy keep unobtrusive ads.
  • Clear Fields – adds a clear text button for URL and search text entries.
  • Omnibar — integrate location and search bar
  • Wired Marker — highlight text on a webpage and remember it.

References and tips

  • Firefox shortcut keys
    • F6: Focus toggle of browser window and URL bar.
  • Middle-clicking a tab will close the tab.
  • For spell checking be sure to add the dictionary (e.g. hunspell-en package for English…), enable by right clicking in text-entry field.
  • Reset Firefox if problems begin (keeps bookmarks, passwords…).
  • Firefox Tips and Tweaks.

Restore Settings on a Broken Firefox

Update: 09-29-11 – Using script to automate process, see end of post.

When people have a issue with Firefox I’ve seen many people will resort to deleting their old profile (or folder) and creating a new one. This works but doing this will get rid of any passwords, history, bookmarks… therein. Having used Firefox quite a bit creating a new profile from time to time is a good idea anyhow as cruft, bad extensions, … can slow down browsing.

Manually

Copying the Firefox configs can be done by:

cd ~/.mozilla/firefox/

Backup the old profile and profile list:

mv xxxxxxxx.default{,.bck}
mv profiles.ini{,.bck}

Create a new profile:

firefox -CreateProfile <profilename>

This command will return the name of the new folder. Copy the basic settings to the new profile:

cd *.default.bck
cp places.sqlite key3.db cookies.sqlite mimeTypes.rdf formhistory.sqlite signons.sqlite permissions.sqlite webappsstore.sqlite persdict.dat content-prefs.sqlite ../*.<profilename>

This will transfer the bookmarks, browsing history, form entries, passwords, personal dictonary changes, and page zooms. There might be a couple other things wanted to add (possibly your firefox preferences), take a look at Transferring data to a new profile for more information.

Follow

Get every new post delivered to your Inbox.

Join 53 other followers