Web Font Specimen

How to

1. Grab the specimen

   The specimen.

   It’s a few small files, plus instructions so you know where to add a typeface. Download the 9k zip.

   Current version: 1.0

2. Add a typeface

   

   Skolar by Type Together*

   

   Bentham by Reading Type

   Both of these typefaces are licensed for use with the CSS @font-face rule.

   * Available via Typekit.

3. Study and test

   

   Browser rendering will vary.

   

   Browser test with Litmus. Set up an account for free. Try a 14-Day Project Pass and test in every browser.

Look inside – studying the specimen

View a demo specimen.

1. Font name is a place for, yep, the name of the typeface. Comes in handy when scanning thumbnails of specimens.
2. Headings, lists, and emphasis exercise your typeface in a setting similar to how you might find it used in web projects. Several kinds of heading, ordered and unordered lists, italic and boldface text, drop caps, small caps, and a whole paragraph in italic.
3. Body size comparison reveals an aspect of your typeface that can’t otherwise be seen. Useful for deciding whether type is suitable for use online and helpful for finding a comparable understudy.
4. Leading (line-height) shows the type in a handful of reasonable values, so you can decide for yourself how much vertical space is needed between lines of text.
5. Glyphs is a traditional style of type specimen. This is good for finding odd characters in a font, but it’s also easy on the eyes as you scour the specimen. Type at web text sizes can look quite different from the designed typeface; consider this area a refresher on the type’s true form.
6. Measure (width) works out your typeface in paragraphs of various proportions, to help you decide on the appropriate line length for your text.
7. Size (font-size) cascades your type in both title case and uppercase, so you can quickly judge whether it will render better, worse, or equally well at slightly larger or smaller sizes. A small amount of tracking is applied to the uppercase.
8. Grayscale. We web typographers use grayscale all the time. Contrast is a good thing, but straight black and white can be harsh. See for yourself how the typeface renders in several shades of gray.
9. Light on dark previews can provide a heads-up in cases where browsers render your typeface more heavily than if it were dark text on a light background.
10. Color is an important factor in web typography because most of us view type on color screens (like LCD monitors), and type on color screens is literally made from a mixture of red, green, and blue light. Red pixels, for instance, can be one third the size of white pixels. Web Font Specimen displays your type in color combinations that reflect this reality.
11. Footer. This is a discreet legal message referring to Web Font Specimen as an original work licensed under Creative Commons. If you download and make changes to the specimen, you’ll find an alternate phrase in HTML comments near the footer; this makes it easy to briefly explain that your adjusted specimen is a derivative of Web Font Specimen. Thanks for taking a minute to do this before you share your version with others.