Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Typeplate: A Starter Kit For Beautiful Web Type

As of today we’re pleased to announce Typeplate1, 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% Typography2, 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?” Link

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.

Further Reading on SmashingMag:

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 view9.

How It Works Link

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.css10 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 Sass11 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 Scale12 loop generates 53 lines of code to create a full double-stranded heading hierarchy13 from just three variables and some font sizes.

Demo And Downloads Link

How To Use It Link

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, h1h6, 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 GitHub19.

We sincerely thank @TommyCreenan20 (dribbble21) for designing the Typeplate logo.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21

↑ Back to top Tweet itShare on Facebook

Zak is a designer, educator, crafter of things and wearer of ties. He designs websites for a living and is perennially about to start blogging at Zak tweets as @zakkain.

Dennis is a front-end developer, designer, nerd, guitar shredder with a passion for Web standards and progressive enhancement. WP, HTML, CSS, and JS are his muses. Dennis blogs his random thoughts frequently at and tweets as @gryghostvisuals.

  1. 1

    As a fan and amateur enthusiast in typography, Typeplate took my breath away. I’m going to play with it right away!
    Also, thanks for the references to the topic, there’s a lot of interesting stuff to read & absorb.

    So, thanks, great job and possitive karma points to you :)

  2. 2

    Wow, this looks really well thought out! Looking forward to trying this on my personal site to get a feel for it.

    • 3

      Thanks AC! Let us know if you find any issues and always feel free to hit us up on twitter @Typeplate with any questions.

  3. 4

    Great stuff guys. Think Typeplate could become my new best friend ;)

  4. 6

    Nice work guys! But I wonder why are you using [b] tag on Stats Tabs instead of [strong]? Isn’t that a bit obsolete for HTML5? Cheers!

  5. 8

    Diarmuid Collins

    February 28, 2013 11:01 am

    This is fantastic – many thanks to Zak and Dennis!

    I am going to plug it into a project I just started but I may have to translate it into LESS – easy peasy, right?!

  6. 10


    February 28, 2013 11:23 am

    Amazing project. I would like a LESS version though.

  7. 11

    This is perfect! I’ll probably combine this with susy. One q though, is this a complete replacement for the vertical-rhytm of Compass, or could they be used together? Great job guys..This is going in my current project.

    • 12

      We’ve never tried them together, but this would eliminate the need for the vertical rhythm helper in Compass. Actually, you don’t even need Compass for Typeplate. It’s totally up to you to include Compass in your project.

  8. 13

    Does typeplate implement a fallback for using rem ( pixels for older browsers ) ??

  9. 15

    I just saw that there is a Less version! Downloading right now, thanks!

  10. 16

    Jonas Stensved

    March 4, 2013 9:57 am

    Great job guys! I’m always (or used to now) spending lots of time getting the fonts display nicely. Thanks!

  11. 17

    You start by saying “but you’re often forced to code their way or find another framework” and yet you only offer this in SASS… forcing your users to code your way.

    Like the idea, dislike forcing SASS

    • 18

      SASS is not a framework. It does not force you to code in a particular way. But you can dislike it.


↑ Back to top