Using icon fonts
A handy walkthrough of using icon fonts. The examples here use the excellent IcoMoon service
Tags: fonts
A List Apart Issue № 371
This issue of A List Apart is a great double-whammy. Lara Swanson has a ton of practical tips for front-end performance enhancements, and Brian dives deep into making your own icon fonts.
Asset Fonts
The slides from Josh’s super-quickfire presentation at the Responsive Day Out.
Prototyping Responsive Typography
Some handy tips for starting off your responsive designs from the type out.
Collect + share + discover type combinations.
A lovely new service from Mike Stenhouse: install the bookmarklet and then when you come across a website with a nice combination of fonts, you can save a snapshot of the page (and its fonts) for later perusal. You can then browse those fonts on Typekit, Fontdeck, MyFonts or Google Fonts.
❍ IcoMoon
This is a great free service for generating small subsetted icon fonts. Launch the app and have a play around — you can choose from the icons provided or you can import your own SVG shapes.
Nice touch: you can get the resulting font (mapped to your choice of unicode characters) base-64 encoded for your stylesheet.
Trimming the Fat — Paul Robert Lloyd
A great in-depth description by Paul of how he optimised his site. More of this please!
Responsive Measure: A jQuery plugin for responsive typography
Here’s something that Josh debuted at Smashing Conference: a script for responsive designs to adjust font-sizes based on a desired line-length.
Inevitably, it’s a jQuery plugin but I’m sure somebody could fork it to create a standalone version (hint, hint).
Symbolset
It’s really good to see more providers of icon font sets. These look very nicely designed indeed.
Tomorrow’s web type today: The fine flourish of the ligature » Blog » Elliot Jay Stocks
An informative post on ligatures in web type from Elliot. And, oh yeah, he redesigned his site again (it’s unsurprisingly lovely).
Content Protection, fonts, and trolling « in progress
Chris defends himself from some inaccuracies I flung his way, regarding fonts and DRM.
Pictos
In an interesting new twist, Pictos now allows you to put together a custom subset of their icons as a font that can be served from their server just like any other webfont service.
Lost Type Co-op | Browse Fonts
Some of these pay-what-you-want fonts are actually rather nice.
Using OpenType font features with CSS 3: Part 1 | Fontdeck Blog
Richard starts diving into some the nifty ligatures that are becoming available to us in OpenType fonts with CSS3.
Emigre Web Fonts
Emigre’s font library is now available as web fonts that you can self-host (providing you take some protective measures with .htaccess). That means Mrs. Eaves is available for the screen. W00t!
Heaven Devoid of Stars – a tale of cross-browser kerning | Clagnut § Browsers · Typography · CSS techniques
Richard dives into the differences in how browsers handle kerning. Be sure to click through to the beautiful finished result.
Type study: Sizing the legible letter « The Typekit Blog
A great article by guest author Ethan on the various approaches to sizing text in CSS.
The trouble with font classifications | Clagnut § Design thinking · Typography
Richard would like your help. Take a few minutes to run through a card-sorting exercise to help classify fonts in a more meaningful way.
the average font - a set on Flickr
Take all the fonts on your operating system, superimpose them, and whaddya get? This.
Test page for -webkit-font-smoothing | Christoph Zillgens
This handy matrix shows the effect of different -webkit-font-smoothing setting on various text combinations (serif/san-serif light/dark, etc.).
Jake Archibald - Font-Face - Good vs Legal on Vimeo
Jake’s talk at DIBI earlier this year was absolutely fantastic. It features a rape reference, a story about pissing, and a Human Centipede metaphor.
It’s also very, very informative. Watch this.
TRY HELVETICA
A cute idea: see how signs (mostly in Brazil) would look if they were set in Helvetica.
Font sizing with rem - Snook.ca
Well, ya learn something new every day …or at least I did. I had no idea about the rem unit—relative em—for font-sizing in CSS.
FFFFALLBACK - A simple tool for bulletproof web typography.
A useful bookmarklet that suggests font stacks to match up with the web fonts on whatever page you happen to be viewing.
Typography Deconstructed | A comprehensive guide to the anatomy of type.
A beautiful glossary of typographic terms.
WhatFont Bookmarklet « Chengyin Liu
A handy bookmarklet that allows you to examine any piece of text on a website to determine what font it is set in.
Cheese or Font
Clearly my knowledge of cheese and fonts is way worse than I realised.
The New Bulletproof Font-Face Syntax | Fontspring
Syntax for @font-face that’s more bulletproof than the techniques previously considered bulletproof …’till an even more bulletproof syntax comes along.
wordmark.it
A handy browser-based way of previewing the fonts installed on your computer.
Comic Sans Criminal - There’s help available for people like you!
A somewhat condescending piece of work about Comic Sans …from a designer who uses the oh-so-passé Museo on his personal site.
Live by the judgemental sword, die by the judgemental sword.
iOS Fonts
A handy list of installed fonts on the iPhone and iPad.
Adfont Calendar 2010 | A free font every day from Fontdeck
It's a type drawer that's also an advent calendar. Responsive too. Check it every day between December 1st and 24th.
Lost World's Fairs
Lovely typographic showcases from Stan and friends.
Webtype
The newest web fonts delivery service is a collaboration between five foundries: The Font Bureau, Ascender, Roger Black, Petr van Blokland and DevBridge.
_not my type
Cute wearable typography snobbery.
Ask H&FJ: Four Ways to Mix Fonts
A nice look at some rules of thumb for combining typefaces.
Fonts Live
Ascender is selling (and hosting) webfonts now.
Google Font Directory
Google-hosted free-as-in-beer webfonts.
FontDeck: Exclusive Sneak Peek | Design Shack
Get a glimpse behind Fontdeck's curtain.
Making Faces: Metal Type in the 21st Century (A documentary) — Kickstarter
Here's a Kickstarter project worth supporting: fund a documentary on crafting typefaces.
Revised Font Stack | A Way Back
A thoroughly researched and well-written look at font stacks, with some practical suggestions and advice.
Fontspring | Fonts, fonts and more fonts
A store of fonts for sale, many of which have licenses that allow you to use them with @font-face.
Web-safe Fonts | Web Typography | Speaking In Styles
A very handy list of fonts ranked from "less likely" to "almost certain" to be installed.
My favourite fonts of 2009 | i love typography, the typography and fonts blog
Some beautiful typefaces here, gathered together for your enjoyment.
Tombstone Typography // Tom Davie - a set on Flickr
Beautiful writing on headstones.
Web fonts test
Test cases for font-linking.
High Performance Web Sites :: @font-face and performance
Steve Souders does the research and reveals the sad truth about the effect font-linking has on performance.
@font-face
A quick, slick primer on font linking.
@font-face in Depth
A good look at choosing fonts for font linking.
London Reconnections: A Typeface for the Underground
A wonderfully engaging history of Johnston Underground.
Bulletproof @font-face syntax « Paul Irish
Getting font-linking to work in all browsers.
Typedia: A Shared Encyclopedia of Typefaces
Like Wikipedia for typefaces. Beautiful work from Jason, Dan, and others.
Goudy Fonts
"A tribute to two former bookkeepers who impacted American design & typography for all time."
The Font-as-Service | i love typography, the typography and fonts blog
Elliot gives a rundown of the font delivery services for the web that are on the way.
Font in your face | Nimbupani Designs
A good, clear-headed summation of font linking.
Web fonts. Where are we? Will web fonts ever be a reality? | i love typography, the typography and fonts blog
A great round-up on the current state of web typography following TypeCon 2009.
How to create EOT files without Microsoft WEFT — Edward O’Connor
@font-face for all — Ted shows how to convert TTF files to EOT using the command line.
Kernest.com | @font-face central
Another font-linking service is on the way.
beautiful fonts with @font-face at hacks.mozilla.org
A good description of how font linking works.
Introducing Typekit « The Typekit Blog
Jeff's got something up his sleeve that will help the cause of web typography.
Nice Web Type Suggests: Graublau Sans with Lucida sanserif
A great example of @font-face in action: comparing Graublau Sans Web with with Lucida Grande.
Typefaces we can all share : Open Font Library
A repository of liberally-licensed fonts to link to with @font-face.
The League of Moveable Type
"We're done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won't have it. It's time to raise our standards. Here, you'll find only the most well-made, free & open-source, @font-face ready fonts."
Tal Leming » Web Fonts
An excellent take on font-linking from someone who designs typefaces for a living.
Fuck the foundries [dive into mark]
Mark Pilgrim knows the score.
The Mesmerizing Curves of Ampersands | The Design Cubicle
Ampersands. Lovely, lovely ampersands.
App Shopper: WhatTheFont (Reference)
Like Shazam, but for fonts. Snap a picture of some text on your iPhone and this app will phone home to the WhatTheFont mothership in order to identify it for you.
Facing up to Fonts | Slides and notes
The slides from Richard's superb Skillswap presentation.
Striking Web Sites with Font Stacks that Inspire - Inspiration Bit
A look at different font stacks out there in the wild.
Font-weight is still broken in all but one browser | Clagnut § Browsers · Typography · CSS techniques
A superb bit of browser research by Richard. "There’s more to the lives of many typefaces than just Bold and Regular, but almost no browsers follow the proper CSS 1 way of specifying Light, Semibold, Black and other weights. There is a workaround,…
Graphic Design and typography - Swiss Legacy » Type Trumps
Top Trumps with typefaces.
Fonts available for @font-face embedding - Webfonts.info
A wiki for tracking which fonts have licenses that allow for @font-face embedding with CSS.
Ubiquitous web font embedding just got a step closer | Web Directions
John has come to the same conclusion as Richard with regards to font embedding. In short, the font foundries are missing a huge revenue stream. They could be offering fonts on a per-domain basis (a la Google Maps or any other third-party API). Rem…
Typechart - Browse Web Type, Grab CSS.
A handy little tool that's beautifully designed. View typeface/style/size combinations and then grab the CSS.
Handwritten Typographers
Cameron asked some type creators for samples of their handwriting. They obliged. Compare the handwriting to the fonts.
How To Mix Fonts: Typeface Cheat Sheet
A cheat sheet for combining typefaces. No hard and fast rules but a handy guide to print out and use.
Peter Saville Graphic Design - fonts
Peter Saville is releasing some of his fonts for free. I'm grabbing the beautiful serif typeface used on the front of Joy Division's "Closer"; it's gorgeous.
mezzoblue § ClearerType
Good news everyone! ClearType is turned on by default in IE7.
iStockphoto.com : Articles - Know Your Type
A really nicely laid-out introductory article on typography from the folks at Red Labor.
The Anatomy of Web Fonts [Design Principles]
Andy Hume has written a superb article about typography on the Web.
The non-typographer's guide to practical typeface selection
A great overview of typography by Cameron Moll, talented designer and super-nice guy.