Design and Development

Typecast Reviewed: A Designer’s Thoughts after Using Typecast

By

Filed under: Typography, Web Development.

A while back I wrote about typography and its importance on the web. Typography and content is really 90% of what the web is; so if you are going to create beautiful, consumable content, you really need to pay attention to your website’s typography.

Traditionally we’ve used static tools like Photoshop or InDesign to design our typography and then we recreate it in code. But this has always been a bit of a hassle when switching from static mockup to code and to an actual browser canvas.

This is all changing with great new tools like Typecast. Typecast is a web app that is built to help us as designers use the browser to design our typography and websites. It gives you access to over 1000 web fonts that you can try out on your live website content in an actual browser.

Typecast – Experiment with Type from Typecast on Vimeo.

After using Typecast for a while, I want to share my thoughts with the community about some of its great features, and where it could be improved.

What I liked about Typecast

Multiple canvas layouts for comparing different solutions

Typecast has a great feature built in that allows you to perform side-by-side comparison of several different font choices through the use of multiple canvases. Basically you take your content and style it several different ways to your liking. You can then quickly see all these variations to show to fellow designers and clients.

Here is an example of a quote I was working on (be sure to click on the photo for a full-size version:

Typecast's multi-column view

Style Guides that you can export

As the web is becoming more and more “fluid” with such a vast sea of device sizes, traditional project deliverables like static psd mockups are being thrown out the window for more useful things like responsive wireframes, prototypes, and typographic style guides.

These typographic style guides basically display how your headings, subheadings, lists, blockquotes, and other type styles will appear on live site. Typecast automatically builds such a style guide for you that can be exported and shown to team members and clients.

A Typecast Style Guide

– Typecast style guide

Valid CSS & HTML export feature

Back in the early 2000’s, designers and developers would have scoffed at a tool like Typecast because of the terrible markup that it might have produced. However, this is an area where Typecast actually shines.

Typecast is actually based on real CSS & HTML under the hood. It even includes the ability to export this valid markup once you are satisfied with your font styling.

This is a huge breakthrough in the area of WYSIWYG editors and a huge time saver for us as web designers. No more twiddling with the visual layout in Photoshop until it looks perfect, and then having to completely recreate that beauty in code. Once it looks good – just hit export to HTML & CSS, and you are ready to move on.

Quick starter typography templates

Typecast includes some great starter templates that allow you to quickly build a complete typographic style guide with h1 through h6 and lists and paragraphs.

Ideally your will paste in your actual content into these quick starter layouts, but if you don’t have real content available, then you can still build your style guide with their placeholder content.

This is a quick typography “style-guide” I created for a new project.

Food Pantry - Style Guide

 

Where Typecast can improve

Responsive design containers – the web is not fixed anymore

One early problem I’ve noticed with Typecast is that is requires you to choose a fixed size for your content container. You have to choose say a 640px width container that your text will be constrained to.

The only problem is that the web doesn’t work like this anymore. Your content container is going to be constantly changing sizes depending on what size device you are on.

Sure, you may choose to not use a completely fluid percentage based container, but you are still going to have to change container sizes a couple of times as you design for small screen devices all the up to large 60 inch TV’s.

Optimally, Typecast should allow you to preview your content on different device widths. This could be accomplished in a variety of ways. One way would be to allow the content container to be set to a percentage of the screen. Also, you could include a “preview” mode that would allow you to quickly look at your content on the most popular screen sizes.

Inline styling for smaller content blocks

When working with typecast, I noticed one thing that held back more creative designs was the ability to control smaller blocks of content. While it does allow you to highlight an individual word and apply italics, bold or a link, this functionality needs to be extend to allow for <span> elements and other means of more complex styling.

This level of control is vital when working with things like block quotes. A lot of times, we need to choose a different font or font size for our quotation marks to improve their appearance. Without allowing for styling of individual phrases or words on the same line of text, Typecast is limited in its usefulness.

Here’s is a little design I hacked together with their CSS editor that would have been much easier to design with inline styling blocks.

Message from ITC

Ability to lock line-height ratio

A lot of times when we are working with paragraphs of type, we will set our line-height to 1.5ems and tweak our font size until everything looks just right. The beauty of Typecast is that is allows you to change the font size and line-height separately for more fine-tuned font control.

However, having them controlled independently as a default was very frustrating to me. Most of the time, I wanted to lock in my line-height and just tweak my font sizing. Typecast needs to include the feature to lock-in your font-size / line-height ratio so things flow better when changing font sizes.

Live font preview when hovering over a font-face

When Typecast was first released, it didn’t include a larger preview for font selections when you hovered over the different fonts. They’ve recently added this preview ability, and it’s pretty useful.

However, it would be a whole lot more useful if when you hovered or scrolled through the different font-faces it would give you a live preview in your document.

So if you are looking for a new typeface for your h1’s, and you hover of a new font like “Abril”, it would instantly update all your h1 instances on the page with a preview of the new font-face.

Categorized Font Styles

One of the amazing things about Typecast is how many fonts it gives us access to as designers. Far, far gone are the days when we were stuck using a few fonts like Arial, Times New Roman and Helvetica! With Typecast you have access to over 1000 different font-families. The possibilities are literally endless with so many choices.

However, with so many font-faces comes font overload. Newer designers that are not as experienced in web typography (which is a lot of us) will feel overwhelmed with all the font choices available.

One way this can be remedied is by organizing the fonts into different categories like Serif, Sans, Scripts and Decorative. These categories could then be further broken up into groupings such as Scripts: Formal, Casual, Calligraphic and Handwriting.

This would really help even more seasoned typographers quickly look through the vast sea of font choices and even discover new favorites. Typecast should also allow you to choose a typeface category within a certain font foundry like Typekit or Google Webfonts.

Some things I’ve Created

Well, what good is reading a long article about a new tool without seeing some examples of things created with it – right?

Here are two more designs I created this last week while using Typecast:

The first is a poster of a good quote I found a while back:

Ability Poster

This poster will give you a little taste of the huge number of fonts available to you within Typecast. It’s amazing how much your font-choices can communicate different feelings and ideas!

The meaning of words are powerful and can be captured with the use of different typefaces.

Conclusion

Well, I hope this article helps you if you have heard about Typecast and are wondering about its usefulness to the designer workflow.

Be sure to submit your own ideas to Typecast on how they can improve their product for everyone. I’ve mentioned some of my ideas to the Typecast team, and they seemed really open and responsive; they also mentioned they were working on the feature of having more HTML control for spans and such!

Action Item for this week

If you aren’t trained in typography and would like to learn more, I’d highly recommend you read “Type Rules!” by Ilene Strizver. It will teach you the fundamental principles of typography in an easy-to-understand format.

If you have used Typecast, I’d love to see some of your typographic creations you’ve been working on. So please include links in the comments section below!

Join the discussion below, we'd love to hear from you!

  1. Bernhard Rieder

    Thank you for the article. I tried typecast as well and love it. But how can you implement it into a WordPress theme ? I couldn’t find any solution for that – any ideas or step by step guides ?

    Reply
    • Caleb Mellas

      Berhard, Typecast is a tool to help you design the typographic layout/structure of your website – not a tool to actually build a website. You can grab the css/html from it, but you will have to convert that into a WordPress theme. You can follow any html/css to WordPress guide online for that process. Here is a basic tutorial to get you started: https://thethemefoundry.com/blog/html-wordpress/

      Reply
  2. Mica

    I would love to use Typecast as well. I was looking at the site – I do understand that it’s about typographic and layout structure. However, I am not a programmer, I do not understand coding.

    I followed your link – the page was a bit overwhelming for me.

    I am also using WordPress. Are there any video tutorials that could possible help me ? Showing an example, how you start and how you can use it in combination with WordPress ?

    That would be amazing,
    thank you very much for any little help !

    Reply

Leave a comment

  • (will not be published)