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.
font-size:15px; /* Or your desired font size */
font-family:'DejaVu Serif', serif;
font-family:'ITC Bookman', 'Bookman Old Style', 'URW Bookman L';
'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.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 */
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 font | Suggested font styles |
Apple Garamond | font:1em/1.17 'Apple Garamond', 'Noto Serif', 'Gentium Book Basic', 'DejaVu Serif Condensed', 'Times New Roman', serif; |
Arial | font:1em/1.12 'Arial', 'Nimbus Sans L', 'Liberation Sans', 'Helvetica', 'Lato', 'FreeSans', 'Trebuchet MS', 'Arimo', sans-serif; |
Arial Narrow | font:condensed 1em/1.12 'Arial Narrow', 'Liberation Sans Narrow', 'Helvetica Narrow', 'Roboto Condensed', 'Archivo Narrow', sans-serif-condensed, sans-serif; |
Arial Black | font:900 1em/1.41 'Arial Black', 'Archivo Black', 'Arial', 'DejaVu Sans', 'Cantarell', 'Lato Black', 'Roboto Black', sans-serif-black, sans-serif; |
Avant Garde | font:1em/1.21 'Avant Garde', 'ITC Avant Garde Gothic', 'Avantgarde', 'Century Gothic', 'URW Gothic L', 'Futura', sans-serif; |
Baskerville | font:1em/1.24 'Baskerville', 'Baskerville Old Face', 'Linux Libertine O', 'Century Schoolbook L', 'Georgia', serif; |
Bookman | font:1em/1.21 'ITC Bookman', 'Bookman Old Style', 'URW Bookman L', 'Bookman URW', 'Clarendon', serif; |
Calibri | font:1em/1.22 'Calibri', 'Candara', 'Carlito', 'Segoe', 'Segoe UI', 'Optima', 'Nimbus Sans L', 'Selawik', sans-serif; |
Cambria | font:1em/1.19 'Cambria', 'Caladea', 'Georgia', 'Sylfaen', 'Noto Serif', serif; |
Clarendon | font:1em/1.2 'Clarendon', 'ITC Bookman', 'Bookman Old Style', 'URW Bookman L', 'Sentinel', serif; |
Comic Sans | font:1em/1.39 'Comic Sans MS', 'Comic Sans', 'TSCu_Comic', 'Chalkboard', 'Coming Soon', 'Comic Relief', casual, cursive; |
Copperplate | font:1em/1 'Copperplate', 'Linux Biolinum O', 'Carrois Gothic SC', sans-serif-smallcaps, 'Arial', sans-serif; |
DejaVu Sans | font:1em/1.2 'DejaVu Sans', 'Lucida Sans', 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Verdana', 'Geneva', sans-serif; |
DejaVu Serif | font:1em/1.2 'DejaVu Serif', 'Droid Serif', 'Bitstream Vera Serif', 'Verana', 'Baskerville', 'Sylfaen', 'Linux Libertine O', serif; |
Franklin Gothic | font:500 1em/1.13 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', 'Lato Medium', sans-serif; |
Futura | font:500 1em/1.29 'Futura', 'FuturaNDBook', 'Quicksand', 'ITC Avant Garde Gothic', 'URW Gothic L', 'BetecknaLowerCase', sans-serif; |
Georgia | font:1em/1.15 'Georgia', 'Gelasio', 'Gentium Basic', 'Linux Libertine O', 'DejaVu Serif Condensed', 'Times', serif; |
Gill Sans | font:1em/1.34 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Linux Biolinum O', 'Oxygen-Sans', sans-serif; |
Gothic | font:1em/1.24 'Century Gothic', 'URW Gothic L', 'Avantgarde', 'Avant Garde', 'ITC Avant Garde Gothic', 'Futura', sans-serif; |
Helvetica | font:1em/1.13 'Helvetica', 'Arial', 'Liberation Sans', 'Nimbus Sans L', 'FreeSans', 'Helvetica Neue', 'TeX Gyre Heros', sans-serif; |
Impact | font:1em/1.23 'Impact', 'Techno', 'Lato Heavy', 'Arial Black', 'Roboto Black', 'Anton', sans-serif-black, sans-serif; |
Lucida Grande | font:1em/1.17 'Lucida Grande', 'Lucida Sans Unicode', 'Verdana', 'DejaVu Sans', sans-serif; |
Palatino | font:1em/1.35 'Palatino', 'Palatino Linotype', 'Palatino LT STD', 'URW Palladio L', 'TeX Gyre Pagella', 'Noto Serif', serif; |
Rockwell | font:1em/1.18 'Rockwell', 'Roboto Slab', 'Sitka Small', 'Sylfaen', 'Georgia', serif; |
Schoolbook | font:1em/1.29 'Century Schoolbook', 'Century Schoolbook L', 'New Century Schoolbook', serif; |
Tahoma | font:1em/1.21 'Tahoma', 'Liberation Sans', 'Verdana', 'Verana Sans', 'Segoe', sans-serif; |
Times | font:1em/1.15 'Times New Roman', 'Times', 'Liberation Serif', 'FreeSerif', 'Nimbus Roman No9 L', 'Tinos', 'Noto Serif', serif; |
Trebuchet | font:1em/1.16 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'Tahoma', 'Fira Sans', FiraGo', sans-serif; |
URW Chancery L | font:italic 1em/1.29 'URW Chancery L', 'ITC Zapf Chancery', 'Zapf Chancery', 'Apple Chancery', 'Monotype Corsiva', 'Dancing Script', cursive; |
Verdana | font:1em/1.22 'Verdana', 'Geneva', 'Lucida Sans Unicode', 'Verana Sans', 'DejaVu Sans', sans-serif; |
Zapf Chancery | font:500 1em/1.24 'ITC Zapf Chancery', 'Zapf Chancery', 'URW Chancery L', 'Apple Chancery', 'Monotype Corsiva', 'Dancing Script', cursive; |
And for monospaced fonts: | |
Your font | Suggested font styles |
Andale Mono | font:1em/1.16 'Andale Mono', 'Liberation Mono', 'Noto Mono', 'Lucida Console', sans-serif-monospace, monospace; |
Consolas | font:1em/1.17 'Consolas', 'Inconsolata', 'Monaco', 'Droid Sans Mono', 'Lucida Console', 'Liberation Mono', sans-serif-monospace, monospace; |
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; |
DejaVu Sans Mono | font:1em/1.2 'DejaVu Sans Mono', 'Lucida Console', 'Consolas', 'Monaco', sans-serif-monospace, monospace; |
Lucida Console | font:1em/1.2 'Lucida Console', 'DejaVu Sans Mono', 'Consolas', 'Monaco', sans-serif-monospace, monospace; |
Monaco | font:1em/1.25 'Monaco', 'Consolas', 'DejaVu Sans Mono', 'Lucida Console', 'Noto Mono', sans-serif-monospace, monospace; |
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.