When choosing Responsive Design for your website you are making the decision to resize the content to the optimal size for consumption at that particular viewport width.
You are then responsible for ensuring that the content is structured to allow the reader to easily consume in content including:
- a suitable hierarchy structure that works across a single narrow viewports and larger viewports with multiple columns (for example: two content blocks that sit side by side in a large viewport will be stacked in a single column in smaller viewports, does the content still flow)
- optimal font-size (take advantage of the browser defaults for best consistent results)
- correct line-height to maintain good vertical rhythm and improve readability
Each of these needs to be addressed for each breakpoint, and across each DPI to ensure the typography is adjusted to best facilitate the reading experience. This is why applications like Instapaper and Readability have done so well, they take the content and display it in an easy to read manner (also for offline consumption, but that’s something different entirely).
Starting your Design
A recent article from Viljamis on Prototyping Responsive Typography uncovers a great technique of setting your type in the browser from the very beginning. Take a copy of one of your longest content laden pages and put it into the the browser with no other structural elements and work from there.
Keep things proportional
Typography should remain proportional across your design. I used to refer to the very handy Modular Scale site to provide the typographical scale to then apply to my stylesheets. Now with the ever growing take up of CSS preprocessors like SASS and LESS we’re seeing tools the likes of Typeplate that take our base sizes and work it out for us.
There will also be situations where the design calls for an element to be larger or smaller than the scale you have defined, and in those situations you simply override the heading or paragraph (or whatever you’re updating) to the new required size… just remember to make sure it’s done with EMs instead of pixels.
