If you’ve read my article 3 Rules for Making Dashboards you’ll know I’m a big fan of physical metaphors. It amazes me how as soon as we move something to the web, everyone thinks the rules we use to cultivate physical media go right out the window. The biggest example of this is the type ramp. Newspapers, books, and magazines use type ramps, but as soon as we turn that content into web media, the rules we applied for physical media seem to disappear and no one knows what you are talking about.
What is a Type Ramp?
A type ramp is a set of guidelines used to standardize fonts, font sizes, font emphasis, and text decoration on pages. By using variations of font sizes, font emphasis, and text decoration and standardizing it throughout our website we can increase readability by allowing the user to navigate through our content just on the text itself without any other aides needed. Users will be able to know they are moving between sections when they see headers in different levels of emphasis or know they are looking at captions v. body text by size.
What’s the current problem?
So with CSS preprocessing and frameworks we’ve gotten better at managing our fonts and styles but designs tend to rely heavily on the word except still.
Every H2 tag will be 4rems except the one on that Product Page which will be 5rems. It looks better.
The fact that the edge case exists is disconcerting. The fact that the edge case exists because of a visual aesthetic is disturbing. Creating the font exclusion case modifies what a header is. If this header is special and different, it isn’t a header and should be coded completely different. Maybe it is a title. Maybe it is a special case product-title. In either case it isn’t a header. Once type ramp integrity breaks with exclusions and conditions we end up with 20+ different font combinations on a site. Clean equals trustworthy is a phrase I hear constantly, and 20+ different combinations looks messy and isn’t clean.
How can we fix this?
Microsoft has a guideline for type ramps (Guidelines for fonts) that I feel is a great place to start for the types of font situations you should consider. Microsoft sets its type ramp for six default types: Header, Sub Header, Title, Subtitle, Body, Caption. I feel in most situations these should be enough, even if you have branding concerns. You may need one more for call to actions (i.e. buttons) but anything beyond that seems a little excessive.
Introducing typeramp.github.io
To help jumpstart the conversation on cleaner type ramps, I created a new project now available on Github.io https://typeramp.github.io/bootstrap/. The first type ramp was completed in Bootstrap. I hope to have versions of this with ExtJS, Foundation, and other frameworks in the future. If you’d like to see this for a particular framework feel free to open an issue or a pull request at https://github.com/typeramp/bootstrap for now. I’ll be adding in more projects as I add in frameworks.
The idea of this project is to limit the choices down to the ones that matter: font for the entire site, and then font sizes for the header, sub header, title, sub-title, body, and caption. Later on I’ll expand this to include font-weight and text-decoration options most likely. By changing only these options you can then check how they will impact different elements on your site.
This is only an introduction and is a conversation starter, not the end all solution. By talking more about the type ramp and bringing font choices back into the conversation as a first class citizen we’ll all be able to create better applications.