Standard Typeface – Accessible Design

the Browser-safe Fonts Sidebar Panel

Before adding this quick-reference bookmark to your browser, you can preview the contents of the font-family cheat sheet in a new window. NOTE: If you’re looking for just the right font for your web site, use the custom text tool at the bottom of the cheat sheet panel. It’s simple to use, but instructions are provided step by step as well. The names are in the form of a CSS font-family property declaration, so you can highlight, copy, and paste right into your own stylesheet!


Add Fonts as an Opera Panel or Mozilla Sidebar:

Add the Common Windows, Mac, and Linux Fonts sidebar panel to your browser using the rel=”sidebar” method: (Recommended for Opera and current Firefox)

Need to use JavaScript to add the universal fonts panel to your browser? If the link above didn’t work for you, your browser might require javascript instead of the newer method above, which uses rel=”sidebar”: (Mozilla & Seamonkey users– unless you have X-Sidebar installed, should click here)

If you like the Universal Fonts Panel, spread the word so others might find it useful too. Thank you!

the Universal Fonts Resource:

Why bother with a Standard Fonts reference? Have a look for how fonts play into “Web Accessibility” as prescibed by the W3C, and you’ll learn straight away why it’s important to use the most common fonts in your own designs.

The basic idea behind listing equivalent font-family names for Windows, Mac, and Linux in your CSS is that, in doing so, you improve the odds that every visitor will see your design with the same font typeface as you did when you created it. In using a universal font-family, there is a great likelihood that your visitor has the font installed on their system. Standard typeography is important to a professional layout. Keep this list close at hand, so you know better what you can expect your visitors to see.

Rare, cool-looking, Snazzy Fonts Rule!

Have you ever found a really cool font, used it in one of your web designs? It’s awesome, isn’t it!? Actually– you shouldn’t be so sure of that. Before you use uncommon fonts, try accessing that page from someone else’s machine to see if your special font is visible, or if you see something plain, like Arial, or Times. If your special font isn’t shown, you’ve witnessed a problem caused by inconsistency in the fonts installed on your system, and those on everyone else’s machines. A responsible developer shouldn’t let this happen, and it can be fixed easily, and without ruining an existing design.

Are you a font-family, typeface and typography enthusiast? Do you strive to maintain the best organization of your favourite fonts available to you on your own Operating System? If the answer is yes, then you may find Ampsoft’s AMP Font Viewer to be a valuable addition to your collection of typograpic utilities. Not only is the AMP Font Viewer a great help when searching for the right font for your project, but ampsoft.net also publishes a supplemental tutorial for web authoring, including a list of common fonts which was the original, primary inspiration for the Universal Windows and Mac Common Fonts sidebar available above!


Leave a Reply

Your email address will not be published. Required fields are marked *