Typecast (in beta at the time of this filming) is a really neat web app for playing with web typography. It gives you a great interface for playing around with the basics of typography, like what your headers and body copy look like. The real fundamentals: sizing, line-height, coloring, all that stuff.

What makes Typecast really cool is that you can use all sorts of custom fonts within it. We're using Typekit in our project so far, and all those fonts are available. But they don't just have Typekit fonts available, they have fonts from FontDeck, Fonts.com, and more.

When it comes time to deploy, you're on your own as far as actually setting up those fonts, but you can play with them from with Typecast all you like.

We play around with a baseline grid and I share some thoughts about that. We also play around with a couple of different header fonts, body fonts, and some playful fonts.

Comments

  1. User Avatar
    christopherisaak
    Permalink to comment#

    Hey Chris, wrong video for the title and description here. maybe a switcharoo?

  2. User Avatar
    andyunleash
    Permalink to comment#

    Hmm not sure about the baseline grid. I mean realistically – as you mentioned – if you have additional content like images etc it will throw off the base line. But! As the reader is likely to be scrolling anyway and go over those images, I would assume 99.99% of them would never notice a slight shift.

    Realistically I think a base line grid would be handy readability wise for massive chunks of unbroken text, but in a usual blog post/website environment which will likely be scattered with images and other elements, I’m just not feeling it.

    Typecast – on the other hand looks pretty awesome for messing around with Typography. Is there anyway to get like a PNG version of the text you type in there? Might be handy for concept designs/prototyping because you can’t usually get Typekit fonts (for example) into Photoshop during the design stage.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I thought there was a Typekit/Photoshop integration now? Maybe not? I bet they are working something after the merger.

    • User Avatar
      andyunleash
      Permalink to comment#

      Sadly not – I’ve seen a number of support questions logged to them & comments on their blogs but it’s always a “we’re exploring this” rather than anything firm.

      I know fontshop has one – which seems pretty cool, but Typekit is such a better deal for web development. Sigh, I shall continue the wait :(

    • User Avatar
      Terje Berg
      Permalink to comment#

      It’s implemented in Adobe Muse …

    • User Avatar
      christopherisaak
      Permalink to comment#

      Check out baseline.js I’ve been using it in a build that I’ve been working on and its pretty cool. Does exactly what you might expect and works with max-width 100% too. You give it a certain baseline that it must follow and then it adapts. It even allows you to specify a breakpoint so that it changes baselines if your line-height changes at a certain point.
      It might seem a little crazy but it does add to the overall effect of the site. Again, depending on the website it might not matter that much.

  3. User Avatar
    Rodrigo Ibarra
    Permalink to comment#

    Damn! thanks Chris!!
    This looks like it would work perfectly for an art designed blog and a full typekit account! love it…

  4. User Avatar
    Gray Ghost Visuals
    Permalink to comment#

    I’ve been goofin’ with Typecast since their beta release and have to say they give you way better preview control than Typekit does…hands down. I still like the Mark Boulton school of thinking that Typography comes way before skinning. This way you focus solely on the typography without the other cruft getting in the way.

    CONTENT > TYPOGRAPHY > LAYOUT > SKIN & COLOR
    or
    CONTENT > LAYOUT > TYPOGRAPHY > SKIN & COLOR

    There are plenty of beautiful native fonts now installed on multiple Operating Systems (Windows has some nice ones) so there’s no reason not to start off by thinking nice and hard about your native fallback fonts first. I can’t tell you how many times I’ve seen typekit go down and lose my fonts. We can safely say that 95% of the web is typography so an extra hour focusing on native fallbacks is not useless.

    Native iOS fonts
    http://iosfonts.com

    Make the Web Fast: Google Web Fonts – making pretty, fast!
    Google’s “Make The Web Fast” video on font serving worth a watch by all.


    Web Font Awards
    http://www.webfontawards.com

  5. User Avatar
    jasonneel@yahoo.com
    Permalink to comment#

    Cool tip. I remember hearing about this app a few months ago.

    As an alternative, I’ve found myself playing around with Gridlover a bit, which is a similar little app, although a little less robust in its feature set compared to Typecast (namely you can’t use custom fonts on their page, at least not yet). A bonus to Gridlover though is there is no sign-up to use it. You just go in and play around with the settings on the page until you get something looks good and works, and it’ll spit out the necessary CSS for you. You can even drag in a Markdown file onto the page to use as sample content.

  6. User Avatar
    zjrosen
    Permalink to comment#

    Go away blue one!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag