Responsive Typography Demo

Over the weekend I’ve managed to find some time and created two simple responsive typography templates (don’t forget to resize the browser window). The end result is pretty nice. Along the way I’ve experimented with establishing vertical rhythm using rems. It’s super easy to maintain baseline grid if the letter size on an element is independent of the line-height.


RWT Demo Green


RWT Demo Blue

Take a look at the source in both templates and find commented CSS. I encourage you to uncomment these and observe what happens.

The green demo looks the best in Firefox, because I was able to use negative margin at the first paragraph in the CSS columns context only in that browser. Chrome and Safari are cutting off such content, similar to how overflow: hidden hides anything that’s outside of the container. Still not sure if this is a bug in Firefox, but nevertheless the intro text looks much better when wrapped.

As always, let me know if you have any suggestion for improvement!

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?