Typecast review: a revolution in web typography?
The new web typography app Typecast offers designers the ability to compose their type settings in the browser. Is it revolutionary, unnecessary, or just a bit of fun? I’ll answer that by digging into just how Typecast works to make your design workflow easier (or doesn’t).
The problem(s) Typecast seeks to solve
To understand the great potential value of a tool like Typecast, you first have to understand the challenge it seeks to overcome. The first of these is that most font hosting services—such as Typekit, FontDeck, and even Google, in many instances—don’t offer designers the ability to download desktop versions of the fonts they’re using. There are certainly means to do this: one may buy a web-use license for a desktop font and then have one of these services take care of the hosting for you. But that can be a pretty expensive route, with most of the high-quality fonts designers crave costing at least a couple hundred dollars U.S.
Mocking up without the fonts you need
Why is this a problem, you ask? Well, it means that as you create comps for the site in Photoshop, or whatever tool it is that you use, you don’t have the fonts you want to use. Which leads to all sorts of problems such the visual characteristics of fonts influence so much of the look of one’s site. That’s why you’re using them, after all.
Or, as Elliot Jay Stocks put it:
Typesetting in Photoshop is like trying to paint a landscape with only … a couple of crayons and a poor photocopy of the scene.
There is a sort of a solution for this issue out there, which is Extensis’ Web Font Plug-in for Photoshop (awkward casing theirs). The problem with that solution, unfortunately, is that it only includes fonts from WebINK or Google and requires installation of Suitcase Fusion, a font management system. You can’t blame Extensis for this since WebINK and Suitcase Fusion are their own proprietary products, but it does make it a limited solution at best.
Why even having the fonts you need on your desktop isn’t an ultimate solution
Even if you do own the rights to the web font you want to use on your site, you’re faced with another issue that could be anything from a minor niggle to a big whopper: You don’t know how the font will look in the browser. This could be huge because some fonts just look terrible on the web, or look okay but only at certain sizes.
Which is exactly why the Typecast solution is a pretty good one. I’ll explain why it’s just a pretty good one, at best, a little later in this post.
For now, let’s dig into the app itself and see if we can discover some of its joys and its flaws.
How Typecast works
In reading the following, keep in mind that Typecast is currently in beta and you have to request an invitation. Invitations are sent on a rolling basis, so it could be some time before you get to join in on the fun. The plus there is that by then some of the problems we’ll mention here might have been hammered out.
Once you’ve received your invitation, you’ll be directed to set up your account and log in. And if you’re a Firefox user like me, you’ll discover that you can’t use Firefox. At present, the tool only supports the webkit-friendly browsers Chrome and Safari. Not a huge issue, but if, like most design-inclined folks, you’re a browser partisan, issues of familiarity and missing plugins may arise.
Once you’re all set up, you’ll log in and see an intro module containing a brief video that covers the tool’s functionality:
A pretty comprehensive look at the functionality available, but it moves quickly and doesn’t call out certain features in a more than passing way, so let’s focus in a bit more.
Once you’ve watched the video, you’ll notice an area to the lower left headed “Your Projects.” It’s pre-filled with a project that isn’t actually yours, titled “The Goldilocks Approach (Sample).”
Here you see the options that’ll be available for any project you do actually create. Clicking the header will take you into the project. The next line down shows when the project was last updated. Below that are two links that allow you to download the project and to comment on the project.
Clicking Download generates a zip file containing several HTML pages (one for each column in the product) that reference an included CSS file packed with styles automatically generated by the app based on your decisions (or in this case, the Typecast team’s decisions). Also included is a handy text file titled fonts-in-use (not a reference to the awesome site curated by Sam Berlow, Stephen Coles, and Nick Sherman), which lists all the fonts included in the project and their sources.
Click Add comment and a standard comment form will appear in the right column, allowing you to add notes on the project. (A great feature if you’ve got more than one designer working on a project and need interaction between them and/or final approval.)
These two options highlight two great features and goals of the tool:
- Easy saving of the app’s output for use on your site(s).
- Easy collaborative options that allow for a team of several designers to tweak, make notes on, and compare different versions of the typeset content.
To the right of all this are links to rename, trash, and duplicate the project.
What lies within The Goldilocks Approach
Clicking on the header itself takes you into the sample project, which attempts to show what the tool can do by example.
At the top left you’ll see an icon of a home (which takes you home, natch), a link to the project itself, and a Switch project link. Pretty self-explanatory. To the right you’ll find persistent links for sharing and exporting projects, providing feedback, and signing out. The Share & Export button works like the Download link described above, but the Feedback link is a bit of a surprise—and a problem.
The feedback problem
Instead of working like the Add comment link on the home page, which allows team members to comment on the project, this Feedback link allows you to send your thoughts to Typecast. And while I’m happy that Typecast thought to make feedback that easy, I’d much rather have the ability to comment on the project I’m looking at for my team members. Would be so much easier to provide useful commentary to my team while looking at the project itself, rather than taking notes in a separate doc and then inputting them in the app’s home page.
In a way, I get the logic here. Someone is far more likely to notice a problem with the interface when actually working with it, rather than on the home screen. So it makes sense to have an option to provide feedback right there where the problem is occurring. And another team member might want to know where I have a problem with the design before logging into the actual prototype.
But that hardly calls for such an either/or approach. It would be far better for a designer to see the design as he or she is commenting on it/solving the problem. And there’s no reason not to provide both options within the project. (Unless there’s a coding limitation I couldn’t possibly understand without explanation.)
Typecast project columns
Moving down, you’ll see a row of numbers that lets you quickly navigate between the various columns of the project. This column functionality can help designers ensure consistency across pages, and each column will be saved as its own HTML file upon exporting. Another way to use this functionality would be to mock up alternate typesetting solutions for comparative purposes. Columns you’re not working on currently grey out, which is a bit of a double-edged sword since it makes focusing on your current work easier, but comparison harder.
The next link in this area allows you to add a new column, and since the canvas is, to quote the intro video, “infinite,” you could mock up an entire site within one project (though I can’t imagine how that would affect the tool’s functionality).
CSS, style guide, and baseline options
On the far right of the column links area you’ll see three more links: CSS, Style Guide, and Baseline.
Clicking on CSS opens up a panel that lists all your Typecast-generated CSS styles in ready-to-paste into your favorite plain-text editor of choice formatting. There’s even an option to publish the CSS directly to your site using a link to the Typecast stylesheet—though, as the app itself warns, this isn’t ideal for a live website. The greatness of this feature lies not in live review, but in the way it facilitates internal review via a locally hosted version of a site, conducted by experts who aren’t necessarily part of the mocking-up process, including copywriters, creative directors, and other stakeholders.
The Style Guide is, to my mind, one of the app’s real gems. Besides a specimen for each font used in the project, it also provides visual examples of each style, from H1 to p. This makes the Style Guide a great tool for designers as well as editors, copywriters, and SEOs, letting them know, and respond to, what each element of the typographic hierarchy should look like. That makes the Style Guide an invaluable tool not only for establishing design standards and editorial expectations, but also for developing brand standards.
The Style Guide is, in other words, HUGE.
Baseline options is also a valuable tool since it acts as a guide for the vertical rhythm of the site’s typography, a seriously essential concern. In fact, according to many a web typographer, the essential element of a refined presentation of content.
How Typecast works (really this time)
I realize that, so far, I haven’t actually said a word about the real Typecast interface. All of the above are some great—and some needs-refinement—features. But the heart of Typecast lies in its ability to provide real-time web-based typesetting, and that’s our subject (finally) now.
The “character” panel
At the heart of the Typecast typography interface is the panel you see at the right, which anyone familiar with Adobe Creative Suite products will recognize as a variant on the character and paragraph panels. At the top you see an indicator of the HTML label (with class, if appropriate) you’re about to edit. The selected tag defaults to wherever your cursor is in the text column to the right of this panel. The blue button with up and down arrows allows you to switch tags without having to move the cursor, though in most cases you’ll want to be at least able to see the tag you’re currently editing.
Next you see the currently selected face, with previous faces used for said tag listed below. This updates as you go, listing up to the last two you selected. (A handy feature if you’re the indecisive type and find yourself frequently switching between recent selections.)
Another blue button opens a dropdown that lists all the app’s default faces with visual previews of each, again a la Adobe CS programs. You can also type the name of the face you want into the text box, if you already know what you’re looking for.
Another great feature of Typecast is that if a face hosted by one of its partners—Typekit, FontDeck, and Fonts.com, Monotype’s hosting outfit—isn’t already loaded into the app, all you have to do is search for it and the app will load it in! Awesome.
A less-than-awesome feature of the selection dropdown is that it automatically collapses as soon as you pick a face. Would really be so much easier if it remained persistent till you found the look you wanted and closed the dropdown yourself using that blue button. Alternatively, it could change dynamically, as in current versions of Word and in the text size options below, though I imagine that could slow things down quite a bit.
Below the face name you’ll see a color picker and another dropdown that lists the font (or weight)—i.e., Book, Italic, Black, etc. The color picker includes swatches a la Dreamweaver and many another web interface, but also allows you to input hexadecimal values for that custom color touch. A great feature here is the palette area, which remembers other colors you’ve used in the design to help you keep the color scheme consistent. Nice.
Next up are sliders for text size, line height (leading), and spacing (tracking). The sliders are a bit imprecise and difficult to control, though you can tweak to just the right size using the plus and minus buttons above the slider. What is cool is the dynamic updating of the font as you move the slider. If you’re a fly-by-the-seat-of-your-pants and trust-your-eye type of typographer, this might suit. But if you’re following a more rigorous and mathematical plan of action, all you have to do is click the size indicator in the center above the slider and type in the exact value you want.
All three options default to pixel values, but ems and percentages are just a click o’ the dropdown away. (An interesting choice since the subject of the article in The Goldilocks Approach is responsive design, but whatever.)
Below this area are buttons—again very Adobe—for alignment options and casing. The latter appears to only toggle between all-caps and sentence-case, which is a little odd since capping of all initial letters is an option in HTML.
There’s one final panel-related option, though it actually means the negation of the panel: click anywhere on the canvas outside of the panel and the text and you get a nice panel-free view of the copy.
As you can see, there’s a lot in the panel! But not everything.
The particularly web-savvy may have noticed the lack of a couple options here: column-width and margins. These are very important typographic characteristics, obviously, but they don’t quite fit into the character panel.
So the folks at Typecast smartly placed them right there in the column area … or rather, just outside it. You can adjust the column width by grabbing the endpoint indicators to either side and adjusting with plus and minus symbols, much like the text size slider. Or just type in the value you want. Same goes for the top and bottom margins, though I was disappointed to see you can’t enter negative values here.
One flaw I witness here is that I can’t find a way to set left and right margins, a major bummer if you want to create indented or outdented chunks of copy (as one often wishes to with block quotes and callouts).
The chink in the armor of awesome I (thought I) found
While noodling about to write this article, it occurred to me to wonder if I could write new CSS styles within the app. And after a bit of looking around—I headed first to the aforementioned CSS pane, which seemed a natural choice to me—it seemed I couldn’t.
Major fail, Typecast, I thought.
But I should’ve known these genius folks wouldn’t overlook such a simple thing as that. In fact, I don’t know how I missed it at all!
Right there at the top of the character panel’s HTML flyout (remember when I said you could click the HTML tag to switch from the current tag?), there’s an option to write in a new style.
Like I said, genius, folks.
So, Typecast: revolutionary, unnecessary, or just a bit of fun?
I’ve dug into Typecast in a pretty in-depth manner and called out the things I love and the things I think need some tweaking. But what’s the value of the tool?
Overall, I’d call Typecast revolutionary—for the moment. For web designers and typographers who don’t have access to a font on their desktops but plan to use it in their web presentations for a brand, it’s a godsend. But if they do have access to those fonts—and if they’re brand fonts, they should—its value seems a little less revolutionary, at least in the initial comping stage.
Where it will come in very handy is in the transition from comp to full-fledged live web page, from PSD to HTML. Why? Because it makes the translation from graphic styles in a design program into HTML tags and CSS styles much easier. Instead of painstakingly translating type settings from the graphics programs to CSS, Typecast can do the work for you, which is obviously pretty awesome.
And, as a copywriter and editor, I can see a lot of value in the auto-generated style guide for streamlining other team members’ workflows outside of design. The style guide makes for a quick and easy visual guide that can be passed out to editors, proofers, copywriters, graphic designers—in short, any creative team member who isn’t a web designer—to help them understand how brand standards will be applied on the web.
As of now, the only real problem I see with Typecast is that you only get WYSIWYG-style access to the CSS. You “design by eye”, as the Typecast team puts it, and it writes the code. And you can’t dive into the code to fine tune it or force things the WYSIWYG interface can’t—such as create the aforementioned left and right margins.
Another bummer is that you can’t use self-hosted fonts with the tool. This could be a major drag for brands who’ve paid for a web-use license on a custom or foundry font that isn’t hosted by one of the companies Typecast supports.
Still, I love Typecast, and it’s still being developed. In fact, a member of the Typecast team recently informed me they’re planning some new features and want a chance to talk to users about it soon. Hopefully I’ll be able to follow up on this post soon with more info!
So what do you think? Have you had a chance to use Typecast yet? And if so, what do you think of it? If not, do you want to? Let me know!