Specimen Skeleton, the universal font specimen boilerplate

SquarePosted by Roel Nieskens on 30-3-2021

How do you lay a solid technical foundation for an amazing variable font specimen site? When Google asked us to create a couple of dedicated specimen sites for their new variable fonts, we set out to find out.

Specimen Skeleton logo by Guido Theelen

Because variable font support was still in early development, we wanted each specimen to have a solid, tried-and-tested foundation. So we created a small boilerplate that takes care of support pitfalls, fallbacks, performance and quirks. A skeleton site to build your specimen on, if you will.

What problem does Specimen Skeleton solve?

At the basis of each specimen site is the font. Each font has its own unique features, and needs accompanying CSS to show these off in the browser.

We needed a way to set this up in a solid, reliable way for each new specimen. Which axes does the font have, which values are supported, which named instances are in the font? We didn’t want to manually gather all these variables by chasing designers for correct values and possibly introducing errors. We’re programmers, after all!

So we created a small tool to help set up these basics. Something that analyzes the font and automatically generates boilerplate CSS, HTML and JavaScript to provide smooth interaction with the font, and all of this with performance and browser compatibility in mind. We called it Specimen Skeleton

Screenshot of Aparey specimen site Screenshot of Fraunces specimen site
Specimen sites built with Specimen Skeleton. Arapey on the left, Fraunces on the right.

What’s inside the box

Let’s look at some specs!

How to use Specimen Skeleton

Specimen Skeleton is an Eleventy-based static specimen generator. It looks at your font and creates some basic building blocks for you to dress up and create a full fledged specimen site from.

It is meant to be cloned, and serve as the basis for your specimen site. After cloning, you add your fonts and then start adding all the actual content, nice visuals, interactive demos, etc. Either keep the Git history and add it, or throw it away and start anew!

When you build the specimen the first time, it’ll offer some very basic components: sliders for the axes, dropdowns for the named instances, a grid. It’s all set up to be as simple and reusable as possible.

In main.js you’ll find some basic JavaScript to get started. It contains a generic throttle function, to prevent your CPU from melting when you jiggle all those variable axes sliders. It contains FontFaceObserver to check when your fonts have loaded, and a small IntersectionObserver to stop animations when they’re out of the viewport, and start ‘em when they’re scrolled back in. Interaction with sliders and dropdowns is also wired up.

In src/_includes you’ll find basic components utilising the generated CSS and JavaScript. These serve as examples, or as boilerplate to expand upon.

Setting it all up

Let’s set up a quick site. Start of by cloning Specimen Skeleton:

$ git clone git@github.com:kabisa/specimen-skeleton.git

Specimen Skeleton uses the Yarn package manager. Install all dependencies:

$ cd specimen-skeleton
$ yarn Install

Specimen Skeleton doesn’t cater to ancient browsers, and supports WOFF2 only. Add those to the src/fonts directory and let the Specimen Skeleton generate all the data:

$ cp ~/GimletVariable-VF.woff src/fonts
$ yarn fontdata

This will produce a bunch of files:

Writing specimen-skeleton/src/css/fonts.css
Writing specimen-skeleton/src/_data/fontdata.json
Writing specimen-skeleton/src/_data/fonts/gimletvariable-vf/axes.json
Writing specimen-skeleton/src/_data/fonts/gimletvariable-vf/instances.json
Writing specimen-skeleton/src/_data/fonts/gimletvariable-vf/charset.json

The first file, fonts.css will contain all the CSS to set up proper usage of the variable font, like a proper @font-face rule and a font-variation-settings system that will actually properly cascade.

The other files, all JSON data, are used by Eleventy to determine which HTML and JavaScript components to create and which data they have available. Take a look at the comments in src/index.html and the components to see what data the internal variables (fontdata and fonts) contain, and how they can be used.

Finally, let’s take a look at the minimalist specimen boilerplate:

$ yarn start

This will start a development server, and if you visit localhost:8080 in your browser, you’ll see a very basic specimen site.

Screenshot of a bare Specimen Skeleton site

The foundation is ready. Now it’s up to you to make it nice!

Where to find Specimen Skeleton

The code is over at Kabisa’s Github. Feel free to poke around and ask questions there, or check out the code for the Arapey or Fraunces specimen sites to see what you can build. Also see Mark Boulton’s Specimen Builder, which builds upon Specimen Skeleton with a theme design and some configuration.

If you don’t want to get your hands dirty yourself, Kabisa is at your service with in-depth knowledge of (variable) fonts and web development!


Roel Nieskens

Front-end developer, font guy and computernerd from hell. Tweets with @pixelambacht, writes on PixelAmbacht.nl and codes on Github.

Bij Kabisa staat privacy hoog in het vaandel. Wij vinden het belangrijk dat er zorgvuldig wordt omgegaan met de data die onze bezoekers achterlaten. Zo zult u op onze website geen tracking-cookies vinden van third-parties zoals Facebook, Hotjar of Hubspot. Er worden alleen cookies geplaatst van Google en Vimeo. Deze worden gebruikt voor analyses, om zo de gebruikerservaring van onze websitebezoekers te kunnen verbeteren. Tevens zorgen deze cookies ervoor dat er relevante advertenties worden getoond. Lees meer over het gebruik van cookies in ons privacy statement.