Cross-browser fonts

One problem in web design is when you want the text on your page to look the same on every computer.

Personally I belong to the dwindling school that respects the user's preferences: if the user has chosen a certain look for their browser, why force your own choices on them? But I recognise that may not always work, and sometimes it's necessary to go with your own choices all the way.

The most thorough solution is to use a webfont: upload your own font to the server and let the user's browser download the font in order to display the page. In many cases, however, this is overkill; unless you are a font designer or you have other reasons to make absolutely, positively certain that every user of your site sees the exact same rendering of the page, down to the very subpixel, there are some more lightweight means to ensure that the look and feel is not too dissimilar.

  1. Specify the font size in pixels.
    Not everybody may have the same default font size as you. So if you don't specify a font size, or you make the mistake of setting only a size of 75% on body, it won't be the same everywhere.
    font-size:15px; /* Or your desired font size */
  2. Use a fallback font.
    For example, if you want to show a serif font, like DejaVu Serif, make sure they see at least a serif font if the font of your choice is not available on the user's computer.
    font-family:'DejaVu Serif', serif;
  3. Keep in mind that fonts may be named differently on the user's computer.
    Although the user may not have the exact same font by name, they may have a font that was designed to look the same, only with a different name for copyright reasons. Put those other names in the font family specification too.
    font-family:'ITC Bookman', 'Bookman Old Style', 'URW Bookman L';
  4. To make absolutely sure that your CSS will work everywhere, use the correct capitalisation. The specs say that font names may be case sensitive, so don't assume they're not. Write 'Palatino Linotype' rather than 'paLatino linOtypE'. And use quotes around font names. Leaving the quotes off may save two bytes, but it can possibly get you into trouble later.
  5. Now although many fonts were designed to look like other fonts, there are still variations in size. So if your browser supports it, use a font-size-adjust property to iron out those differences. Set this value to the relative x-height of the base font, i.e. the ratio of the height of lowercase letters to the font size. Specify the line height too, since different fonts have different default line heights.
    font-size-adjust:.5; line-height:1.2; /* fill in original x-height and line height */
  6. And for some extra fine-tuning, you can use the font-variant property. For example, to specify how numbers should look. Some fonts have "old style" digits, that are like lowercase letters in height, and if a font contains both types of digits, you can choose between the two:
    font-variant:lining-nums or oldstyle-nums;
So, here we go then. For proportional fonts:
Your fontSuggested font styles
Apple Garamond font:1em/1.17 'Apple Garamond', 'Noto Serif', 'Gentium Book Basic', 'DejaVu Serif Condensed', 'Times New Roman', serif;
font-size-adjust:.46;
Arial font:1em/1.12 'Arial', 'Nimbus Sans L', 'Liberation Sans', 'Helvetica', 'Lato', 'FreeSans', 'Trebuchet MS', 'Arimo', sans-serif;
font-size-adjust:.52;
Arial Narrow font:condensed 1em/1.12 'Arial Narrow', 'Liberation Sans Narrow', 'Helvetica Narrow', 'Roboto Condensed', 'Archivo Narrow', sans-serif-condensed, sans-serif;
font-size-adjust:.52;
Arial Black font:900 1em/1.41 'Arial Black', 'Archivo Black', 'Arial', 'DejaVu Sans', 'Cantarell', 'Lato Black', 'Roboto Black', sans-serif-black, sans-serif;
font-size-adjust:.52;
Avant Garde font:1em/1.21 'Avant Garde', 'ITC Avant Garde Gothic', 'Avantgarde', 'Century Gothic', 'URW Gothic L', 'Futura', sans-serif;
font-size-adjust:.53;
Baskerville font:1em/1.24 'Baskerville', 'Baskerville Old Face', 'Linux Libertine O', 'Century Schoolbook L', 'Georgia', serif;
font-size-adjust:.42; font-variant:lining-nums;
Bookman font:1em/1.21 'ITC Bookman', 'Bookman Old Style', 'URW Bookman L', 'Bookman URW', 'Clarendon', serif;
font-size-adjust:.49;
Calibri font:1em/1.22 'Calibri', 'Candara', 'Carlito', 'Segoe', 'Segoe UI', 'Optima', 'Nimbus Sans L', 'Selawik', sans-serif;
font-size-adjust:.47; font-variant:lining-nums;
Cambria font:1em/1.19 'Cambria', 'Caladea', 'Georgia', 'Sylfaen', 'Noto Serif', serif;
font-size-adjust:.47; font-variant:lining-nums;
Clarendon font:1em/1.2 'Clarendon', 'ITC Bookman', 'Bookman Old Style', 'URW Bookman L', 'Sentinel', serif;
font-size-adjust:.5;
Comic Sans font:1em/1.39 'Comic Sans MS', 'Comic Sans', 'TSCu_Comic', 'Chalkboard', 'Coming Soon', 'Comic Relief', casual, cursive;
font-size-adjust:.54; font-variant:lining-nums;
Copperplate font:1em/1 'Copperplate', 'Linux Biolinum O', 'Carrois Gothic SC', sans-serif-smallcaps, 'Arial', sans-serif;
font-size-adjust:.55; font-feature-settings:'smcp' on;
DejaVu Sans font:1em/1.2 'DejaVu Sans', 'Lucida Sans', 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Verdana', 'Geneva', sans-serif;
font-size-adjust:.55;
DejaVu Serif font:1em/1.2 'DejaVu Serif', 'Droid Serif', 'Bitstream Vera Serif', 'Verana', 'Baskerville', 'Sylfaen', 'Linux Libertine O', serif;
font-size-adjust:.52;
Franklin Gothic font:500 1em/1.13 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', 'Lato Medium', sans-serif;
font-size-adjust:.49;
Futura font:500 1em/1.29 'Futura', 'FuturaNDBook', 'Quicksand', 'ITC Avant Garde Gothic', 'URW Gothic L', 'BetecknaLowerCase', sans-serif;
font-size-adjust:.47;
Georgia font:1em/1.15 'Georgia', 'Gelasio', 'Gentium Basic', 'Linux Libertine O', 'DejaVu Serif Condensed', 'Times', serif;
font-size-adjust:.47; font-variant:oldstyle-nums;
Gill Sans font:1em/1.34 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Linux Biolinum O', 'Oxygen-Sans', sans-serif;
font-size-adjust:.45;
Gothic font:1em/1.24 'Century Gothic', 'URW Gothic L', 'Avantgarde', 'Avant Garde', 'ITC Avant Garde Gothic', 'Futura', sans-serif;
font-size-adjust:.54;
Helvetica font:1em/1.13 'Helvetica', 'Arial', 'Liberation Sans', 'Nimbus Sans L', 'FreeSans', 'Helvetica Neue', 'TeX Gyre Heros', sans-serif;
font-size-adjust:.52;
Impact font:1em/1.23 'Impact', 'Techno', 'Lato Heavy', 'Arial Black', 'Roboto Black', 'Anton', sans-serif-black, sans-serif;
font-size-adjust:.65;
Lucida Grande font:1em/1.17 'Lucida Grande', 'Lucida Sans Unicode', 'Verdana', 'DejaVu Sans', sans-serif;
font-size-adjust:.53;
Palatino font:1em/1.35 'Palatino', 'Palatino Linotype', 'Palatino LT STD', 'URW Palladio L', 'TeX Gyre Pagella', 'Noto Serif', serif;
font-size-adjust:.52;
Rockwell font:1em/1.18 'Rockwell', 'Roboto Slab', 'Sitka Small', 'Sylfaen', 'Georgia', serif;
font-size-adjust:.48; font-variant:lining-nums;
Schoolbook font:1em/1.29 'Century Schoolbook', 'Century Schoolbook L', 'New Century Schoolbook', serif;
font-size-adjust:.47;
Tahoma font:1em/1.21 'Tahoma', 'Liberation Sans', 'Verdana', 'Verana Sans', 'Segoe', sans-serif;
font-size-adjust:.54;
Times font:1em/1.15 'Times New Roman', 'Times', 'Liberation Serif', 'FreeSerif', 'Nimbus Roman No9 L', 'Tinos', 'Noto Serif', serif;
font-size-adjust:.45;
Trebuchet font:1em/1.16 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'Tahoma', 'Fira Sans', FiraGo', sans-serif;
font-size-adjust:.52;
URW Chancery L font:italic 1em/1.29 'URW Chancery L', 'ITC Zapf Chancery', 'Zapf Chancery', 'Apple Chancery', 'Monotype Corsiva', 'Dancing Script', cursive;
font-size-adjust:.41; font-variant:lining-nums;
Verdana font:1em/1.22 'Verdana', 'Geneva', 'Lucida Sans Unicode', 'Verana Sans', 'DejaVu Sans', sans-serif;
font-size-adjust:.55;
Zapf Chancery font:500 1em/1.24 'ITC Zapf Chancery', 'Zapf Chancery', 'URW Chancery L', 'Apple Chancery', 'Monotype Corsiva', 'Dancing Script', cursive;
font-size-adjust:.42; font-variant:lining-nums;
And for monospaced fonts:
Your fontSuggested font styles
Andale Mono font:1em/1.16 'Andale Mono', 'Liberation Mono', 'Noto Mono', 'Lucida Console', sans-serif-monospace, monospace;
font-size-adjust:.51;
Consolas font:1em/1.17 'Consolas', 'Inconsolata', 'Monaco', 'Droid Sans Mono', 'Lucida Console', 'Liberation Mono', sans-serif-monospace, monospace;
font-size-adjust:.49; font-variant:slashed-zero;
Courier font:1em/1.13 'Courier New', 'Nimbus Mono L', 'Courier', 'Courier 10 Pitch', 'FreeMono', 'Cousine', 'MathJax_Typewriter', 'Cutive Mono', 'Text Gyre Cursor', serif-monospace, monospace;
font-size-adjust:.43;
DejaVu Sans Mono font:1em/1.2 'DejaVu Sans Mono', 'Lucida Console', 'Consolas', 'Monaco', sans-serif-monospace, monospace;
font-size-adjust:.55;
Lucida Console font:1em/1.2 'Lucida Console', 'DejaVu Sans Mono', 'Consolas', 'Monaco', sans-serif-monospace, monospace;
font-size-adjust:.53;
Monaco font:1em/1.25 'Monaco', 'Consolas', 'DejaVu Sans Mono', 'Lucida Console', 'Noto Mono', sans-serif-monospace, monospace;
font-size-adjust:.55;

Do it like this in your webpages and it will go a long way towards a uniform look across platforms.

Now some of you may think, “but doesn't the operating system take care of that for you? Doesn't the system substitute known fonts for those that aren't installed?”
Well, yes and no. Don't count on it. The user's system may not know the names of some of the fonts you're suggesting. In addition, there have been browsers in the past that bypassed this feature of the system; Opera for instance, even if the system would use Times New Roman when the font said 'Times', Opera didn't use that. So it's best to play it safe.