A good long time ago I was on a project where things had gotten off to a rocky start. We’d ended up with a fairly massive stylesheet that, amongst other problems, never set base styles on the “typographical” elements like <h1> or <blockquote>. So my task was to add baseline typographical styles. A subtask of this massive undertaking was figuring out what, “baseline typographical styles” should be.
For all its weight, Bootstrap doesn’t comprehensively style all the various HTML elements. Nor does Normalize. If you wanted a comprehensive “boiler plate” for making sure all your typographical bases are covered, that’s hard to find.
Until now.
Introducing the Typography Baseline
If you want to see it in action, you’re seeing it right now. It’s been in use on this blog, on frankmtaylor.com, and my Tridion.js presentation.
You can see it in its raw form on Codepen. There isn’t much too it as it’s only typographical settings and some color on the W3C’s full list of elements.
What it’s good for…
A Good Start
Before you start the layout of a web site or web application, and before you dive into applying to brand, you need something to which you should apply your brand. This is that thing.
The easiest place to start in a design is with the typography. This makes it easy to do that.
Covering all your semantic markup
I went through the W3C spec and made it my mission to find every element that may wrap text, and make sure it all looked like something.
Every element that may be a direct wrapper for text is addressed — even the obscure ones like <abbr>, <data>, and <var>. Not only that, the test.html file in the repository uses each and every element according to its semantic definition. So you have a miniature guide to semantics built in.
This saves you from a scare down the road when someone wants to output the <kbd> element, or use <dfn>, or some other obscure element. It’s never been easier to tell a user what ctrl+b does.
It’s for “no-design” designs
You may notice that there’s not much to my blog’s design. There’s no pretty pictures, fancy animations, spinning cubes, or amazing icons. It’s mostly text and a simple layout.
For those times where you need something more than a Normalize, but way less than a full-on Bootstrap, this gets you there.
This is a very low-opinion approach to making sure that the text has a decent font family, decent spacing, and decent visual appeal.
It’s Fairly Unopinionated
- Focuses on text and text spacing so it doesn’t disrupt your layout
- Styles elements with the lowest specificity possible so it’s easy to drop this in a mid-stream project
- Uses a neutral color palette so that it adapts more easily to any color scheme
- Written in plain ol’ CSS so you can use your pre-processor of choice
- Uses CSS Variables side-by-side with original properties so that you have a choice in IE11 support.
Unopinionated doesn’t mean no opinions. There are a few things it suggests which would be hard to change:
emforfont-size- a unitless
line-height remfor left/right spacing- text-spacing based on the golden ratio (.618 / 1.618)
Try it out
Fork it on Github , play with it on Codepen, or install it with NPM. It’s not just in use on my own personal sites; it’s been used in the websites and internal web apps of Fortune 500 companies, too.