We’re big fans of web fonts and rely heavily on Typekit and other font services in our products. Unfortunately, web fonts are, by nature, limited to the web and can’t be used on the desktop in InDesign or Photoshop. This makes it somewhat difficult to design an entire product using a font we don’t own a physical copy of.
You may know that Adobe aquired Typekit back in 2011. Adobe has been working on a solution to sync fonts from Typekit to the desktop (“Creative Cloud”) to be used in mockups. While this is a vast improvement on what’s currently possible, we feel that there are some drawbacks:
You won’t be able to use ALL fonts from Typekit, even if you pay for the service. Fonts must be licensed additionally for use on the desktop, which means only a subset of the available fonts can be used from foundries who have approved this type of use.
In addition to a Typekit subscription, the “Creative Cloud” is yet another subscription service costing about $50 a month.
Foundries may not be keen on letting people have their fonts on the desktop for $50 a month when some of their families cost upwards of $1000 to license.
You may also be aware of a service called Typecast. We used this for a bit and liked it, but over time found it to be somewhat cumbersome with our workflow and feel there are some drawbacks:
Typecast lacks the ability to style elements like ul and ol or even table and others.
There’s no way to float an img into a paragraph to see how type will flow around it.
Since Typecast exports your all your project’s elements as one huge PNG image, it’s a logistical nightmare to slice things up to use in various parts of the mockup.
The app itself is nice, but is a bit slower than writing the HTML and CSS manually.
We’re hackers, so we set out to solve this pain point for ourselves. Our tool, called Character, is a simple app that lets us manage typographic components for projects using fonts from Typekit and other services. It works in a browser, and here’s what it does:
In the browser, it manages projects by displaying all typographic elements for each project in a list, which you can then click on and export to PNG for use in mockups. You get to see your components using Typekit fonts in real time.
On your machine, it maintains a file system to keep track of versions and PNG assets.
It allows you to use your favorite editor to manually create and style the HTML and CSS of any element you need.
Character is based on a simple Sinatra app using the HTML5 Boilerplate, Compass, CoffeeScript and Sprockets. I used l3ck’s sinatra-boilerplate as a starting point and it works fantastic.
All components can be “versioned” through a naming scheme (nav-001.html, nav-002.html) so multiples of the same component can be linked in the mockup.
There is no database. Instead, we opted to use a directory that you create on your machine to populate projects. A separate folder of projects is checked into git and can shared with the entire team easily. This directory is isolated from the application itself and only includes components and styles used for the mockup, and later in the project’s application.
Inside the app, each component is loaded in an iframe with its own styles defined from the project.
Not quite done yet…
The app is still in progress and has no visual design, but we’re working on it!
Have a comment or question? Send us a note. It won't be shown here and email isn't required, unless you'd like a