Typeplate: A Starter Kit For Beautiful Web Type

• By Zachary Kain and Dennis Gaebel
• February 27th, 2013
• Freebies, Typography
• 16 Comments

As of today we’re pleased to announce Typeplate, a free-range and open-source typographic starter kit that will hopefully help you build beautiful, text-rich websites. The word on the street is that the Web Is 95% Typography, so as we hurtle towards the future, we think there’s still a lot we can learn from five centuries of history. Typeplate is the result of this exploration of our typographic heritage.

“Another Framework?”

We made Typeplate because we weren’t satisfied with existing Web frameworks. The problem with most frameworks is that they make too many assumptions about how you’re going to work. This can be helpful, but you’re often forced to code their way or find another framework — there’s a lot of ‘framework fatigue’ out there.

Pattern libraries are helpful but they rarely separate structure from aesthetics, which leads to projects looking generic unless you sink a lot of time into re-working all the patterns. We’re building websites in 2013! There is no reason we have to sacrifice customization and modularity in order to achieve beautiful, powerful results.

With Typeplate, you can combine solid typographic conventions of the past with flexible styles of the presence. Larger view.

How It Works

So what does Typeplate do? As a “starter kit”, the library makes no assumptions about how you write code — at all. We went way back to basics, inspired by Harry Roberts’ inuit.css and other OOCSS projects. Typeplate lets you set solid base styles and include conventional typographic features (e.g. block quotes and drop capitals) built with good markup and flexible styling.

Typeplate isn’t the next Bootstrap or Foundation; we’re building a toolkit for Web type that’s meant to be extended and customized. There’s no reason we have to sacrifice customization and modularity in order to achieve beautiful, powerful results.

Typeplate is built with Sass and borrows heavily from Object-Oriented CSS techniques. A key feature is that Typeplate is 100% à la carte: it takes just 3 Kb of CSS to integrate the entire project, but you can cherry-pick only the elements you need and just delete the rest. There is a plain CSS version of Typeplate available (and actively being improved), but if you want to take advantage of all the heavy lifting, you probably will want to work with Sass: Typeplate generates CSS with lots of variables and functions, letting you concentrate on implementing features, not typing them out. For example, our Typographic Scale loop generates 53 lines of code to create a full double-stranded heading hierarchy from just three variables and some font sizes.

Demo And Downloads

• Live demo page
• Examples and Documentation
• Download the source files (in both Sass and CSS flavors, 3 Kb compressed, 17 Kb raw)
• Github Repo
• Available also on Bower (Sass only; if you have Bower installed, just run bower install typeplate from your terminal)

How To Use It

Easy. To use Typeplate, simply @import "_typeplate.scss" in your project’s main Sass file, preferably after a reset like Normalize. By default, Typeplate sets base styles on the html, body, h1–h6, pre, code, and abbr elements — you’ll want to start tweaking the variables before adding new styles. Don’t forget that you can always delete those sections and use the mixins in your own stylesheet instead.

As the project matures, we’ll most certainly be updating the page and blogging about what we’ve learned during development as well as posting better demos and documentation. We would appreciate your help in making Typeplate better, so please fork, pull-request and submit issues on GitHub.

We sincerely thank @TommyCreenan (dribbble) for designing the Typeplate logo.