{"id":2598,"date":"2014-05-18T10:53:00","date_gmt":"2014-05-18T09:53:00","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=2598"},"modified":"2014-05-18T12:08:07","modified_gmt":"2014-05-18T11:08:07","slug":"responsive-typography-demo","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2014\/05\/18\/responsive-typography-demo\/","title":{"rendered":"Responsive Typography Demo"},"content":{"rendered":"<p>Over the weekend I\u2019ve managed to find some time and created two simple responsive typography templates (don\u2019t forget to resize the browser window). The end result is pretty nice. Along the way I\u2019ve experimented with establishing vertical rhythm using rems. It\u2019s super easy to maintain baseline grid if the letter size on an element is independent of the line-height.<\/p>\n<figure><a href=\"http:\/\/webdesign.maratz.com\/lab\/typography-misc\/zagrebacki-01.html\"><img src=\"\/img\/2014\/rwt-demo\/template-green.png\" alt=\"\" \/><figcaption>RWT Demo Green<\/figcaption><\/a><\/figure>\n<figure><a href=\"http:\/\/webdesign.maratz.com\/lab\/typography-misc\/zagrebacki-02.html\"><img src=\"\/img\/2014\/rwt-demo\/template-blue.png\" alt=\"\" \/><figcaption>RWT Demo Blue<\/figcaption><\/a><\/figure>\n<p>Take a look at the source in both templates and find commented CSS. I encourage you to uncomment these and observe what happens. <\/p>\n<p><a href=\"http:\/\/webdesign.maratz.com\/lab\/typography-misc\/zagrebacki-01.html\">The green demo<\/a> 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 <code>overflow: hidden<\/code> hides anything that\u2019s outside of the container. Still not sure if this is a bug in Firefox, but nevertheless the intro text looks much better when wrapped. <\/p>\n<p>As always, let me know if you have any suggestion for improvement!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over the weekend I\u2019ve managed to find some time and created two simple responsive typography templates (don\u2019t forget to resize the browser window). The end result is pretty nice. Along the way I\u2019ve experimented with establishing vertical rhythm using rems. It\u2019s super easy to maintain baseline grid if the letter size on an element is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[33,84],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2598"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=2598"}],"version-history":[{"count":11,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2598\/revisions"}],"predecessor-version":[{"id":2609,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/2598\/revisions\/2609"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=2598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=2598"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=2598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}