Test quality fonts responsively in browsers without writing code

Typeshift is a tool to help type and product designers test responsive typography in the browser. Our goal is to respectfully bring the two disciplines closer together. Most of the web is made up of words. The app lets people quickly try typefaces, configure them responsively and save/share lockups for seeing how things perform across different browsers and breakpoints.

Avatar?ixlib=rails 2.1
Hi Andrew, it's not entirely clear to me what exactly I can test with this? Is it meant as a more user friendly alternative to playing around with CSS attributes? That would be quite helpful in my workflow as I tend to do a lot of designing while I'm coding (opposed to doing all the design upfront and implementation later)

Will it be possible to see the typography within the context of my own website?
Avatar?ixlib=rails 2.1
Hi Marc – thanks for the feedback!

Yeah! It’s very much meant to get out of the way so you can focus on how your type, color and fluid units work together (Sketch / Illustrator / Photoshop are all very much static environments). We just want to get you building the best base as quickly as possible since so much of web apps and sites are text focused.

That’s a cool idea, haven't thought much about it – what would that look like for you in your workflow?
Avatar?ixlib=rails 2.1
@Aetherpoint If I'm designing something I think it's important to see it within context, because that's how my users end up interacting with it.

If I do the design on-the-fly I tend to make a quick sketch first, then add the HTML, and finally start styling it with CSS. For typographical fine-tuning I just keep changing the CSS attributes until it looks right using either MacVim + LiveReload or by using my browser's Web Inspector and see the changes live that way.

Where Typeshift could is by providing a GUI to do this fine-tuning so I don't have to mess around in the code. I'm not sure how that would work technically though.

Sign in with Twitter to join the discussion