Designing for Content

This is the companion to my talk Designing for Content. In the talk, I go over best practices for text layout that I’ve learned in my 15 years of designing for the web and distill them into a base typography stylesheet that you can reuse from project to project.

The web is fundamentally a utilitarian, text-based medium. And while sinister forces keep pushing video posts, flip-through listicles, content sliders, overpagination, and other crimes, the primary advances of the web lie in searchable, scannable, medium-to-longform content. We must defend and protect these advances, and what better way to do so than by creating great looking layouts with clear hierarchy that are easily scannable and a pleasure on the eyes to read?

And it doesn’t have to be difficult. By adhering to a few time-tested principles and adapting them for CSS and the web, we can create great looking layouts that are flexible and reusable, using less code than you’d think.

You can view the example page that I walkthrough here and download a .zip of the html and css here.

Edit: The slides and ZIP above have been updated as of November 2014. As I’ve used the base stylesheet more and more, I’ve made a few improvements. Namely, using margin for all spacing–where some padding was used before–and isolating the anchor styles to paragraphs within the body. Enjoy.

One thought on “Designing for Content

  1. Pingback: What I Learned At Wordcamp This Summer: Nicole’s Takeaways | Breaking Even Communications

Leave a Reply

Your email address will not be published. Required fields are marked *