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!
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.
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.
Setting it all up
Let’s set up a quick site. Start of by cloning Specimen Skeleton:
1 $ git clone firstname.lastname@example.org: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.
src/index.html and the components to see what data the internal variables (
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!