Responsive type references
When we’re designing responsively, getting type sizes right can be tricky. On small screens especially, we need to make sure that passages of body text are comfortable to read and that we don’t set headings too large or with too much leading.
Tools like Fireworks and Photoshop can’t cut it for responsive design — they’re bringing a knife to a gun fight — so I needed to find a way to decide on my type sizes before I start using Fireworks or Photoshop.
So I made type reference files and uploaded them to a server (and now to GitHub.) There’s really not much to them. They contain only headings, paragraphs and small text, but of course you could expand them to include any number of different content types if you need to. I open them on all my test phones, e-readers and tablets.
Because different typefaces need different treatments, I made type references for both serif (Georgia) and sans-serif (Helvetica) typefaces. The next time I start a project, I’ll likely hook up one to my Typekit account too, so that I can test my web fonts on real devices before (and during) a design.
I’m sure that smarter people can improve the tools for a technique so I’ve posted my files up to GitHub (whatever that is.)