Posted 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.
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
What’s inside the box
Let’s look at some specs!
- Eleventy based, for awesome static siteiness
- Automatic variable font feature detection
- Comes with basic font specimen building blocks
- Detects variable font support in the browser
- Observes when fonts have loaded using FontFaceObserver
- User interaction throttling and clever animation starting/stopping
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:
1
$ git clone git@github.com:kabisa/specimen-skeleton.git
Specimen Skeleton uses the Yarn package manager. Install all dependencies:
1
2
$ 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:
1
2
$ cp ~/GimletVariable-VF.woff src/fonts
$ yarn fontdata
This will produce a bunch of files:
1
2
3
4
5
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:
1
$ 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.
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.
