{"id":822,"date":"2020-01-27T21:52:38","date_gmt":"2020-01-28T02:52:38","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=822"},"modified":"2020-02-11T11:42:09","modified_gmt":"2020-02-11T16:42:09","slug":"auto-sizing-font-sizes","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2020\/auto-sizing-font-sizes\/","title":{"rendered":"Auto Sizing Font-sizes"},"content":{"rendered":"\n<p><strong>What:<\/strong> Changing the font-size and the line-height based on the width of the viewport but without using media queries, to create a smoother experience (with less work).<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>How:<\/strong> By making both the font-size and the line-height relative to the viewport width, like so: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted css\"><code>body {<\/code>\n    <code>font-size: calc(1em + 1vw);<\/code>\n    <code>line-height: calc(1.2em + 1vw);<\/code>\n<code>}<\/code> <\/pre>\n\n\n\n<p>You can set a base font-size in the HTML, the codepen in the article sets it at 12px. Which is, I guess, a mobile first approach. <br>There is another method mentioned in the article too.<\/p>\n\n\n\n<p><strong>Where:<\/strong> <a href=\"https:\/\/css-tricks.com\/molten-leading-css\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Molten leading in CSS (opens in a new tab)\">Molten leading in CSS<\/a> by Chris Coyier @ CSS-tricks<\/p>\n\n\n\n<p><strong>Thoughts:<\/strong> I might want the line-height to be a lot bigger.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"_3bJ2H CHExY\">\n<div class=\"_1l8RX _1ByhS\">Photo of the Geuzenkade in Amsterdam by <a href=\"https:\/\/www.flickr.com\/photos\/blind007\/\" target=\"_blank\" rel=\"noopener noreferrer\">me<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>What: Changing the font-size and the line-height based on the width of the viewport but without using media queries, to create a smoother experience (with less work).<\/p>\n","protected":false},"author":2,"featured_media":824,"comment_status":"open","ping_status":"close","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[17,81,124,126,125],"class_list":["post-822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-new-things","tag-css","tag-css-tricks","tag-font-size","tag-line-height","tag-responsive-design","infinite-scroll-item","resize-featured-image"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=822"}],"version-history":[{"count":0,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/822\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media\/824"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}