October 2013

When people think of responsive web design, they often think of layout. But web typography has also advanced over the years. Free resources like Google Fonts, and paid services like Adobe TypeKit expand designers’ online font libraries. Users' adoption of browsers that support SVG makes this vector technology less of a wish and more of a reality.

But how do responsive techniques and evolving typographic technologies work together? How designers address the ways type changes in wide and narrow browsers? This month we look at the discipline and art (and hacks) of responsive typography on the web.

Get 7 days of free downloads today!
50,000 royalty-free images and more

Introducing Responsive Web Typography With FlowType.JS →

Designers John Wilson and Casey Zumwalt noticed how images on their websites scaled well in different browser sizes. “Wouldn’t it be nice,” John asked, “if text worked more like images?”

Perfect Web Typography With Slab-serifs →

In a world of retina displays, we often forget that the web is still very much a place of pixels. Slab-serifs are a high-contrast, horizontally biased style of type that are not only highly legible, they also produce well-defined lines of text, reinforcing the baseline grid.

Responsive Web Typography - Marko Dugonjić →

Mere font sizing along the typographic scale based upon two-dimensional viewport @media queries is not enough. Learn to look at typography multidimensionally and enhance the overall responsive experience in this video presentation.

Guidelines for Bold Type in Text →

Most typeface families suitable for text use include at least one bold weight. A family’s bold weights — whether they are called bold, semi- or demi- bold, black or ultra — are an important consideration when selecting the right typeface for a job. Here are questions to consider when selecting the best bold weight for text.

Responsive Measures →

Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.

Web Typography, Text Effects, and Working With Adobe Edge Tools →

This article is a show-and-tell about the process that Dan Carr, lead developer of Dan Carr Design, used with the Edge family of tools and the discoveries I made while working with text effects in SVG, CSS, and the HTML5 canvas.

There Is No Excuse for Bad Typography on the Web →

Typography is an important design principle in any medium. As much as proper sizing on different devices, hierarchy, leading, kerning, and composition are crucial in making a digestible webpage.

Dear Web Font Providers →

Thanks to everyone’s tenacity, at some point in the last four years, “reasonably secure” was enough for type designers to take a chance. And now they’re hooked. In a recent interview, Jonathan Hoefler and Tobias Frere-Jones of H&FJ said: “We’re requiring that every new project have a way to thrive not only on paper, but on desktop and mobile screens.” How freaking awesome is that?

2013 Web Design Trend: Responsive Layout, Minimalist Design and Typography →

Just as technology as a whole, the web design industry is constantly changing. As we head into the final quarter of 2013, it is a good idea to look back and see how the industry has changed. We will discuss the web design trends that are going to become synonymous with 2013.

Learn the Fundamentals of Responsive Web Design →

Our Introduction to Responsive Web Design course, 9AM PDT November 19, teaches you how to design and build responsive web sites. This four-hour webinar is taught by our experts who built Foundation on these principles. You'll learn both the Design patterns and code bits that all designers and front-end coders should know. And it's held online so you can attend from anywhere.

Share Responsive Reading:

Get in Touch:

Want to learn responsive design? Call us: 408.320.ZURB
Got a responsive website? Send an email to responsive@zurb.com