Additional Resources About Responsive Typography
Jason Pamental recently sat down with us during Codementor design office hours, and answered our viewers’ questions about responsive typography on the web. If you are interested in learning more from Jason, below you will find information about his e-book, workshops, and additional articles he has authored.
Responsive Typography – Using Type Well On the Web
Responsive Typography – Using Type Well On the Web is Jason’s brand new e-book by O’Reilly.
It’s out in early release right now, meaning it’s not fully edited yet. But it means you can get it a little bit cheaper, and then you’ll be notified when the full release is ready. That should be in the next month to month-and-a-half. The print version will be out in a little while.
This e-book contains everything that I’ve ever learned about using web fonts. There is some stuff in there about history of type on the web, a little bit about how type goes together, and when you should start thinking about it during the design process. There are tons of tips in there about how to get type to work well on different platforms, some things to try when it’s not working well, as well as the edits that I’ve been making the last couple weeks.
Jason’s Workshops
My GitHub repository contains lots of materials for a full-day workshop that I teach on Responsive Design. Just search for jpamental on GitHub, and I have all of the sample code from the Responsive Design workshop that I teach. There are several units in there on typography, so that you can look at all that sample stuff and get a lot of these sample projects and code right out of that.
There are three lessons in there, Advanced Type 1, 2, and 3, that, amongst all of those, kind of combine pretty much everything I talked about today. It includes some web fonts that are already there, some icon font stuff, some of these fixes for the loading stuff, as well as adding in some of the nicer touches for your typography and how to access some of the OpenType features. If you’re interested, there’s also a demo of Picture Fill in there, and a few other things. There are a bunch of useful things in there for front end people working on Responsive Design. It should be pretty easy to follow.
Further reading by Jason Pamental
I wrote an article for Typecast’s blog a while back all about proportion, and really spent a lot of time trying to figure out how this proportion stuff would work well as screen sizes change. What I found was that while we have a known scale that’s been around for many, many years in print design that works pretty well to set headings in relation to body copy, it doesn’t hold up very well when the screen size starts to change.
I wanted to be sure that we could address that in a meaningful way, so I set about trying to make a different scale. I spent some time on that, and I think it worked out pretty well. It gives people a good starting point to figure out how to set type on big and small screens, and how to tie into your media queries so that you can have things that look pleasing and in proportion on small screens as well as large ones. It’s also in the book and you can find it on the Typecast blog. There are plenty of places to see it. The whole scale is reproduced there.
Other posts in this series with Jason Pamental:
- Introduction to Fonts for Developers
- Choosing & Pairing Typefaces
- Pros & Cons for Icon Fonts Like Font Awesome – Design Tips for Developers
- Using Modernizr to Inject Classes
Need more design mentor help? Book an 1-on-1 session!
