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. christopherisaak
    Permalink to comment#

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

  2. 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.

    • 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.

    • 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 :(

    • Terje Berg
      Permalink to comment#

      It’s implemented in Adobe Muse …

    • 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. 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. 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.
    http://www.youtube.com/watch?v=sqesm0euf9M

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

  5. 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. zjrosen
    Permalink to comment#

    Go away blue one!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.