{"id":658,"date":"2018-03-19T07:00:00","date_gmt":"2018-03-19T14:00:00","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=658"},"modified":"2018-03-12T20:45:45","modified_gmt":"2018-03-13T03:45:45","slug":"how-to-easily-scale-text-dynamically-with-css","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/03\/19\/how-to-easily-scale-text-dynamically-with-css\/","title":{"rendered":"How to Easily Scale Text Dynamically with CSS"},"content":{"rendered":"<p>Usually the size of text on a web page is defined using the <code>em<\/code> or <code>px<\/code> units of measure, like this:<\/p>\n<pre><code class=\"css\">font-size: 16px;<\/code><\/pre>\n<p>The 16px value here defines the height of the invisible box text is rendered in.<\/p>\n<p>This is often fine, but sometimes something a bit more dynamic would come in handy.  For example, imagine being able to have the text on a page increase or decrease as the width of the viewport increased or decreased.  That would come in handy, wouldn&#8217;t it?<\/p>\n<p>Good news: You can do this with the <code>vw<\/code> unit.<\/p>\n<pre><code class=\"css\">font-size: 6vw;<\/code><\/pre>\n<p>This CSS defines the height of the invisible box text is rendered in as a percentage of the width of the viewport (<code>vw<\/code> stands for viewport width).  That means text will get larger as the viewport width increases, and smaller as the viewport width decreases.<\/p>\n<p>Give it a try, you&#8217;ll be surprised how useful and interesting it can be.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ever wish your text could scale with the size of the viewport?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-658","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=658"}],"version-history":[{"count":6,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/658\/revisions"}],"predecessor-version":[{"id":719,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/658\/revisions\/719"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}