Responsive Type References

Usage

Upload the PHP or HTML file to your site, then visit it and choose your font selection using comma-separated values. If no fonts are given, it defaults to Georgia.

http://example.com/responsive-type.php?font=Georgia,Helvetica,Times New Roman

http://example.com/responsive-type.html?font=Georgia,Helvetica,Times New Roman

Web Fonts

You can also add in your Typekit ID if you want to include web fonts:

http://example.com/responsive-type.php?typekit=nqy2rqt&font=Georgia,Helvetica,chaparral-pro

Or even add in your Google Web Fonts:

http://example.com/responsive-type.php?google=Prosto+One&font=Georgia,Helvetica,Prosto One

If you really can't decide what font to use, you can even include both font libraries:

http://example.com/responsive-type.php?typekit=nqy2rqt&google=Prosto+One&font=Georgia,chaparral-pro,Prosto One

Font Availability

Some fonts might look very similar, so how do you know if it's been included in your page? What happens if you've made a typo in the URL? I've added a script that detects what font is supposed to be there and compares it with the base font. This script is from lalit.lab, I did none of the hard work.

If the font is available, you get a green square next to the font name. If not, you get a red square. You might not want the overhead of javascript, so you can exclude it from the page using the 'js=no' parameter (PHP version).

http://example.com/responsive-type.php?font=Georgia,Helvetica&js=no

The font availability script works for the JavaScript version, but not for web fonts. I'll try and fix this is future releases.

HTML / JavaScript Version

This version is in beta and still needs some testing and alteration, but use away and provide some feedback or modifications.

About