Top 10 Typography Web Resources: Introduction to Font Weekend on the Knitting and Purling Blog!

This gal? She loves all things typographical!

And guess what? Here on the Knitting and Purling blog, this weekend is all about fonts!

As mentioned in a recent blog post, I had already completely revamped this site just before the end of last year with brand new fonts that I had purchased from MyFonts. But I was never fully satisfied with the font choices that I had made.

I’ll elaborate in detail what I mean in an upcoming blog post later this weekend, once I’ve finalized my font choices for real this time (I promise!). But for now? I just wanted to list a few fantastic typographically themed Web resources that I’ve stumbled across throughout my entire font journey!

If you’re the owner of your own blog or website and feel like giving your site design a quick makeover, typographically speaking? Then I strongly recommend checking out these font resources…

Top 10 Typography Web Resources

Typekit By Adobe Systems Inc. http://www.typekit.com What? The easiest way to use real fonts on the Web: Simple, bulletproof, Web standards compliant, accessible & legal font service with a subscription-based library featuring 100s of hosted, high-quality fonts Why? 2 words: rendering quality (they work closely with font foundries, ensuring their fonts meet the high standards of typographical nerds like me!) How? Register, pick your fonts, then add a line of code to your Web pages

MyFonts By Charles Ying (Founder) http://www.myfonts.com What? The world’s largest collection of fonts (used to find fonts for projects, to identify fonts you’ve seen, to try fonts before you try, or to organize fonts you like) Why? If the sheer number of available fonts isn’t reason enough, it’s also subscription-free (although you may end up sacrificing on font rendering quality, depending on the foundry) How? Sign up for free, browse & buy webfonts (including 400+ free fonts!), then build & upload a webfont kit which you’ll reference by including a code linking to the webfont stylesheet in your HTML

Font Squirrel By Ethan Dun­ham (Founder of Fontspring) http://www.fontsquirrel.com What? Free font utopia: Your best resource for free, hand-picked, high-quality, commercial-use fonts (that’s right, it’s 100% free for commercial use!) Why? It’s limited in scope, but hey… who can say no to commercial freeware? How? Browse fonts by classification (blackletter, calligraphic, handdrawn… oh my!) or keywords (grunge, distressed, industrial… I feel like I’m scrapbooking), then download the corresponding OTF or TTF file

Fontspring By Ethan Dun­ham (Founder) http://www.fontspring.com What? Find & buy fonts meeting your needs without subscriptions or harsh limits (including OpenType fonts for desktops, Web fonts for websites, affordable font licensing for eBooks & clean app fonts meant for small screens!) Why? Buy fully-hinted, optimized & secure Truetype-based webfonts that are subscription-free, can be used unlimited times & don’t require installation of tracking scripts How? Same as with MyFonts: sign up for free, browse & buy webfonts (including 400+ free fonts!), then build & upload a webfont kit which you’ll reference by including a code linking to the webfont stylesheet in your HTML

Linotype By Monotype Imaging Holdings http://www.linotype.com What? If fonts were to go haute couture, this would be it! Home to legendary typefaces (Helvetica®, Frutiger® & Univers® families… yum!), shop superior quality typographic products & services that cater to corporate brand managers, designers, publishers, IT administrators & product developers Why? Businesses looking for a webfont resource to help with developing a fully branded online experience for their website should start here! Fellow font nerds: check out Linotype’s Font Magazine for behind-the-scenes info on your fave fonts! How? Simply register, search for your desired font, add it to your shopping cart & purchase the item, then follow the step-by-step installation guide

Veer By Corbis Corporation http://www.veer.com/products/fonts/ What? Add style to business, marketing & personal design projects! Shop 12,000+ reliable & affordable fonts from the Veer font foundry for creative works of all types (websites, blog posts, business presentations, ad campaigns… you name it!) Why? Because Veer fonts are gorgeous! The favorite font foundry of this typography nerd, bar none! How? Browse fonts by style (historic, futuristic, organic… fantastic!) or by classification (condensed, rounded… beloved!)

CSS Font Stack By Studio Snapsize http://www.cssfontstack.com What? Complete collection of Web safe CSS font stacks, grouped by typeface categories (e.g. serif, sans-serif or script), proportions & glyph widths (e.g. monospaced), etc. Why? In case the perfect fonts you’ve chosen for your blog or site aren’t showing on certain browsers, back them up by relying on Web safe fonts (to be used as font alternatives) How? Pick the font stack of your choice, click the icon to automatically copy the CSS font-family property to your clipboard, then paste it to your CSS stylesheet file

Google Web Fonts By Google http://www.google.com/webfonts What? Google’s directory of Open Source Web fonts that run on Google’s servers (making them fast, reliable & tested but also free, quick & easy for designers and developers to use in any private or commercial Web pages or applications) Why? If you’re not picky when it comes to using aesthetically pleasing, professionally designed fonts on a website (i.e. you’re not a typography nerd like me!), then using Google Web fonts is great for optimizing your site in terms of speed & usability How? Use the Google Web Fonts API: Add a special stylesheet link to your web page, then use the font in a CSS style)

W3C Font Recommendations By The World Wide Web Consortium http://www.w3.org/TR/CSS2/fonts.html What? Ultimate resource guide to styling fonts online, with an extensive list of official recommendations made by the W3C community on how to best implement font properties according to Web standards & best practices Why? All that you need to know about how to correctly style fonts in CSS according to Web standards can be found on this resource webpage How? Web developer in charge of styling fonts for your blog or website? I highly recommend bookmarking this resource webpage & referring to it whenever you need to!

Web Style Guide: Typography Chapter By Patrick J. Lynch & Sarah Horton http://webstyleguide.com/wsg3/8-typography/ What? The Typography chapter of the unabridged, online version of the Web Style Guide: Basic Design Principles for Creating Web Sites (3rd edition)… complete with text & illustrations! Why? Everything you need to know on how to best use fonts online can be found here (topics covered include characteristics of types on the web, legibility, typefaces, emphasis, display typography with graphics & sidebar: signal to noise ratio) How? A must read for any typography nerd out there (seriously, just read it… you’ll learn so much about fonts)!

[br]

As for my adventures in topography? To be continued tomorrow…

Cheers!
Karina