Responsive Typography Demo

18. May 2014.

Characters	1260
Syllables	348
Words	231
Sentences	10

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!

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?

Follow @markodugonjic

Tin Kadoić
001—2014.05.18.11:48

What are your thoughts on multi-column layouts in web? The issue here is that this is normal for print, the reader sees the entire layout at once; for web it’s somewhat strange, since it requires that the user keeps scrolling up and down while reading.

Marko Dugonjić
002—2014.05.18.12:06

Your concern is — of course — justified and it’s important to look at these examples as a pure demo of what’s possible.

Multi-column layouts are not to be used lightly. However, in some contexts e.g. HiDPI tablets or eBook readers I can see a case for using multiple columns.

To meet usability requirements, we can introduce max-height @media query. However, that’s another set of difficulties, especially in a flexible environment. As with many other challenges in responsive web design, element queries would solve this problem, too. If we detect that there’s enough vertical space on the screen to introduce multiple columns, I see no reason not to utilize them.

Responsive Typography Demo

Interested in more content like this?

Read this next: