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.
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.