{"id":18197,"date":"2012-09-11T13:34:01","date_gmt":"2012-09-11T20:34:01","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=18197"},"modified":"2015-10-07T06:48:51","modified_gmt":"2015-10-07T13:48:51","slug":"024-playing-with-typography-in-typecast","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/lodge\/v10\/024-playing-with-typography-in-typecast\/","title":{"rendered":"#024: Playing with Typography in Typecast"},"content":{"rendered":"

Typecast<\/a> (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. <\/p>\n

What makes Typecast really<\/em> 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. <\/p>\n

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.<\/p>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":18010,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":18129,"url":"https:\/\/css-tricks.com\/lodge\/v10\/014-custom-fonts-with-typekit\/","url_meta":{"origin":18197,"position":0},"title":"#014: Custom Fonts with Typekit","date":"September 9, 2012","format":false,"excerpt":"We set up a new Kit in Typekit for v10. For branding, we'll use Proxima Nova Soft for now and some other fonts that look as close to the HF&J fonts in our mockup as possible. We're a little worried about the weight of the Kit (literally the file size\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20053,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/011-the-header-custom-fonts-via-typekit\/","url_meta":{"origin":18197,"position":1},"title":"#011 – The Header & Custom Fonts via TypeKit","date":"January 30, 2013","format":false,"excerpt":"We've picked out Proxima Nova as the main font to be used for Jeff's site. It's darn popular these days, but it looks great with Jeff's work. Simple, clean lines, doesn't force too much personality. We use Typekit so that we can use it on the web. We go through\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18273,"url":"https:\/\/css-tricks.com\/lodge\/v10\/035-preventing-typekit-fout\/","url_meta":{"origin":18197,"position":2},"title":"#035: Preventing Typekit FOUT","date":"September 13, 2012","format":false,"excerpt":"We take a little break from working on search to solve a little niggling issue. \"FOUT\" being \"Flash of Unstyled Text\". This is phenomenon where @font-face fonts take a little bit to load and thus you see the fallback font before the custom font. This is normally not a problem\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":261983,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant-numeric\/","url_meta":{"origin":18197,"position":3},"title":"font-variant-numeric","date":"October 31, 2017","format":false,"excerpt":"The font-variant-numeric property in CSS supports the OpenType font format by specifying which numeric glyphs to use on a class, including variations for fractions, ordinal markers and styled variations among others. A Little Context We tend to think of numbers as a static glyph. It prints and that's the way\u2026","rel":"","context":"In \"font-variant\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3552,"url":"https:\/\/css-tricks.com\/video-screencasts\/69-first-ten-minutes-with-typekit\/","url_meta":{"origin":18197,"position":4},"title":"#69: First Ten Minutes with TypeKit","date":"August 25, 2009","format":false,"excerpt":"I got the invite from TypeKit, signed up, and had beautiful custom fonts rocking my page in just a few minutes. I'll show you the entire process from start to finish, as well as touch on the advantages and disadvantages. Links from Video: View Demo","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3318,"url":"https:\/\/css-tricks.com\/snippets\/css\/using-font-face-in-css\/","url_meta":{"origin":18197,"position":5},"title":"How to use @font-face in CSS","date":"August 10, 2009","format":false,"excerpt":"The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS. Without the rule, our designs are limited to the fonts that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18197"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=18197"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18197\/revisions"}],"predecessor-version":[{"id":18198,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18197\/revisions\/18198"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18010"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=18197"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=18197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}