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