It’s nice to flip between different looks and styles of typography without having to tweak individual lines of codes, refresh, etc …
I really enjoy some of the CSS tools where you can get the big picture, make some easy changes, and when I see what I like, download the complete CSS file. I’ve got another one like this, and since I’ve been on a bit of a typography kick as of late, the trend continues with another type of typography tool …
It’s called: Type-a-file.
By accessing the toolbar at the top of the page, you can select your “flavor”, a combination of font type and styling, as well as the size – small, medium and large.
You can see all the styling within the page. Simply scroll down and see it all unfold. Paragraphs, numbered lists, bullets, sidenotes, quotes, shall I go on?
Okay.
The element definitions include:
- h1, h2, h3, h4
- paragraph
- ordered & unordered lists
- blockquote
- cite
- definition list
- abbreviation (smallcaps)
- asidesmall
The classes are:
- .kicker
- .run-in
- .superscript
- .subscript
- .sidenote (aside)
- .pullquote
- .footnote
- .caption
- .drop-cap
Here’s how this tool came about:
I couldn’t find a simple CSS stylesheet that adhered to best typographic practices that anyone could just grab and run with. Type-a-file was inspired by—and is to be used in addition to—the famous meyerweb reset css file. Type-a-file comes in a few looks or “flavors” to get you started. A few of our flavors make use of Typekit for their special font faces. Most likely you’ll want to tweak these for your own site, but if you don’t, you’ve still got great typography ready to go right out of the box. Easy peas-y.
This makes an excellent addition to your CSS design tool-bag, for sure.
Find what you like, download the CSS, follow the Type-a-file instructions on the toolbar, and you’re ready to roll!
Speak your mind...