This site is a Proof of Concept. It shows a way to let the users of a website choose their favourite type settings for a website. The fonts shown in the drop-down menu on the left are fonts installed on your computer. The settings you can make could be stored, so they will automatically be applied everytime you visit a website again.
Defining the standard type settings (font family, sizes, line-spacing) for a website is always a tricky task, since every user may have different display sizes/resolutions and OS/browser settings. Webdesigner may define a standard font size and a list of typefaces like "Verdana, Arial, Helvetica, sans-serif". But this works only if these fonts have a similar appearance (i.e. x-height, cap height). You cannot mix script fonts with sans serif fonts, because they require very different sizes. But since the webdesigner doesn't know, which font will be applied, it is not possible to define perfect type sizes. This problem also occurs with the new ClearType fonts. They appear significantly smaller than fonts like Arial or Verdana. So it is not a good idea to mix something like Calibri and Verdana in a CSS font definition, since the result would look very differently depending on which font is available on the user's system.
Since I wanted to use the new ClearType fonts, I was thinking about a way to find out, whether the user has the ClearType fonts installed or not. At the moment the only way to do it is with Flash. With Flash a website has access to a list of fonts installed on the user's machine. These information can be used to apply different CSS definitons according to the fonts that are installed. But if we already have access to the user's font, why not let the user decide which fonts he want to use!?
Wanna use your Warnock Pro for a website's headline? You have the ClearType fonts already installed and want to use it for the body copy texts?
Well, this website shows a way of doing this. A user may choose various font settings based on the fonts that are installed on the user's machine. The setting will be applied to the CSS definitions and can be stored so they will be applied everytime the user visits the website.
With Flash a webdesigner can access the user's fonts with the command getFontList(); You may have seen this in use at sites like Typetester. But the list of fonts generated through getFontList has some serious drawbacks. For a CSS definiton the most important information would be the font-family name. But getFontList doesn't deliver a font-family name. Instead it gives us a a so-called »Full Name«. This can be something like »Verdana« (which would be perfect), but it can also be »Verdana Italic«, which is not what we need, but these common style information can easily be deleted from the string. But the worst case are non-system fonts, which may have a Full Name like »ITC Font Name Smbt Ital LF«. Such fonts will never work in a HTML website. So getFontList will present the user with a list of fonts, where some fonts may work and some may not. To make it more convenient for the user, my script will compare the user's fonts with a list of fonts that are known to work fine. At the moment these are Windows and Mac system fonts and some Adobe fonts bundled with the Creative Suite. My script will only show these fonts.
Please let me know if you experience any trouble with any fonts from your list, or if I have forgotten any fonts that should be available in the font list.
The script is meant to be implemented on Typografie.info, but if someone is interested I may also make it availble for other sites.
The information about your fonts is only retrieved in your browser on your computer. We do not and will not collect any information about your fonts.
Ralf Herrmann, webmaster (ÄT) typografie (.) info | www.fonts.info | www.typografie.info