Web Font Viewer

By Stephen Koch

We recently had a font rendering issue here at Big Spaceship. It was plaguing the designers, and the developers were confused as to what the issue was, because, quite frankly, a developer usually doesn’t have the same discerning eye. There was a disconnect between the designer and the developer. The designer created the comp in Photoshop with the text exactly as they wanted it to appear. A developer had then taken these specs and made it look like the comp during development, but something was lost in the translation. CSS does not have the fine control of text that Photoshop does, and each browser displays text a little bit differently.

This is where the Web Font Viewer comes in. With very minimal setup you can have your fonts ready to view in a browser. In fact, the idea here is to view them in all browsers and operating systems. There’s nothing earth shattering here. It’s merely a small tool to help empower those who have little knowledge of CSS to look at fonts in the browser – setting rendering expectations right from the start. You’ll even be able to set up a fallback font set up so everyone can see what will happen if the browser isn’t able to load a specific font.

Features

After setup, you will be able to change all of these properties:

  • Text
  • Fonts
  • Color
  • Background color
  • Size (font-size)
  • Line height (line-height)
  • Letter spacing (letter-spacing)
  • Spacing of paragraphs (padding-bottom)
  • Overall width of the text area (width)
  • Rotation (-vendor-transform: rotate)
  • Alignment (text-align)
  • Text Transform (text-transform)
  • Font Smoothing (-vendor-font-smoothing)
Screenshot+2012-12-17+at+12.58.01

In addition to altering the properties you will also be able to save individual profiles to view later (localStorage) as well as sharing profiles to hand over to a developer via a simple JSON object that can be used to instantiate the GUI or used to create the initial CSS.

So head on over to the git repository and load up some fonts!

PS: Even your producer will love it.

What's Next?

Installing MongoDB on Mac

Design Studio in Practice