{"id":152,"date":"2019-12-23T09:31:49","date_gmt":"2019-12-23T09:31:49","guid":{"rendered":"https:\/\/potatodie.nl\/diffuse-write-ups\/?p=152"},"modified":"2020-01-20T15:05:51","modified_gmt":"2020-01-20T15:05:51","slug":"understanding-font-size","status":"publish","type":"post","link":"https:\/\/potatodie.nl\/diffuse-write-ups\/understanding-font-size\/","title":{"rendered":"Understanding font size"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">What does it mean to specify <code>font-size<\/code> to be, say, 16px? Exactly what part of the font is 16px? <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s zoom in a bit by choosing a bigger font size to get a closer view on the font&#8217;s anatomy. Set <code>line-height<\/code> to 1, so the line height matches the font size, and choose a background color to make text lines visible.<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-css\">\n      CSS    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1945778070\" \n    id=\"codemirror-1945778070\"\n  >font-size: 200px;\nline-height: 1;\nbackground-color: #000;<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1945778070'), {\n      mode: 'css',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: false,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Well, font size is roughly the vertical space available for each character (the height of the black box) but only a fraction of this space is normally used.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"451\" height=\"256\" src=\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2019\/12\/Mx.png\" alt=\"\" class=\"wp-image-153\" srcset=\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2019\/12\/Mx.png 451w, https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2019\/12\/Mx-300x170.png 300w\" sizes=\"auto, (max-width: 451px) 100vw, 451px\" \/><figcaption>Times New Roman (200px high)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the case of the example font, Times New Roman, I measured the cap height and the x-height to be 67% resp. 45% of the specified font size. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For these and other typographical terms, see the following image or the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Cap_height\">article on Wikipedia<\/a> where this image comes from.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/3\/39\/Typography_Line_Terms.svg\/800px-Typography_Line_Terms.svg.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Other typefaces will likely have different heights. A type designer can do whatever he pleases, even use the space outside the box, as seen for example for the character j.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"182\" height=\"273\" src=\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2019\/12\/j.png\" alt=\"\" class=\"wp-image-154\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What does it mean to specify font-size to be, say, 16px? Exactly what part of the font is 16px? <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,7],"tags":[],"class_list":["post-152","post","type-post","status-publish","format-standard","hentry","category-typography","category-web-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/comments?post=152"}],"version-history":[{"count":5,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/152\/revisions"}],"predecessor-version":[{"id":210,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/152\/revisions\/210"}],"wp:attachment":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/media?parent=152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/categories?post=152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/tags?post=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}