File Under: CSS, Fonts, Visual Design

Good Web Typography Is Easy With Type-a-File

The web is awash with CSS frameworks. But, while frameworks can be great for prototyping and quick mockups, they’re often overkill for most projects. It’s also pretty rare to find a framework that meets all of your design needs.

If you’re just looking for a way to get some great typography on your site, but don’t need a grid or other tools that often come with a full-blown framework, check out Type-a-File. Type-a-File isn’t exactly a framework, it’s more specific — a set of typography styles that you can adapt into your CSS.

Type-a-File is the work of designer Russ Maschmeyer and currently offers eight different typographic style sheets, designed, in Type-a-File’s words, to “give your web typography a head start.”

The style sheets takes advantage of some of the new features in CSS 3 like column-count and border-radius, as well as services like TypeKit for fancy fonts. Fortunately, the vast majority of the rules aren’t based on the still-nascent CSS 3 spec, so nearly all the effects will work in older browsers as well.

In addition to basic rules for typographic elements — h1-6, p, lists, cite and so on — Type-a-File has a few classes you can apply to pull quotes, create “kickers” or “sidenotes” and change default headings.

Type-a-File is released under a Creative Commons Attribution license, so if you’d like to take one of the eight example style sheets and use it to build something of your own you’re feel to do so. You can even submit it back to Type-a-File for inclusion on the site.

Photo by the four elements/Flickr/CC

See Also: