2b:null 2c:["$","title",null,{"children":"Inter font metrics in pixels | Grant Custer | Observable"}] 31:[] 2f:{"id":"9002a9debd159098","slug":"inter-font-metrics-in-pixels","title":"Inter font metrics in pixels","thumbnail":"7374cd6e6424a9e723a330440ad4bf92947629f7c8632b2e25752d1c7bfb9ea8","access_level":"public","create_time":"$D2019-04-06T12:18:59.295Z","update_time":"$D2019-04-07T19:27:17.681Z","view_time":null,"first_public_time":"$D2019-04-06T18:21:47.105Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":254,"publish_version":254,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null}],"members":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Inter font metrics in pixels","cells":[{"id":0,"value":"md`# Inter font metrics in pixels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`Translating the metrics from the [Inter typeface](https://rsms.me/inter/) into pixels so I can use them for things like lining up icons. This approach is generalizable to other fonts provided you have the font metrics. See [Vincent de Oliveira's \"Deep dive CSS: font metrics, line-height and vertical-align\"](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align) for more info. The [Inter glyphs Figma page](https://t.co/8TXF8O6xxD) got me the relevant metrics for Inter.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof font_size = slider({\n min: 8, \n max: 160, \n step: 1, \n value: 100, \n title: \"Font size\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"viewof line_height = slider({\n min: 1, \n max: 2, \n step: 0.1, \n value: 1.5, \n title: \"Line height\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"inter_metrics = {return{bounding_top: 2816, descender: 640, cap_height: 2048, x_height: 1536}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`

\n ${enabled.map((n,i) => {let o=assembled[order.indexOf(n)]; return`

`}).join('')}\n

aecsgAECSGtifp

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof enabled = checkbox({\n title: 'Show',\n description: 'Please select your favorite colors',\n options: order.map((n, i) => { return { value: n, label: `${unslug(n)}` }}),\n value: order.slice()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"cap_height_ratio = inter_metrics.cap_height / inter_metrics.bounding_top","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"cap_height_pixels = font_size * cap_height_ratio","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"cap_height_top_offset_pixels = (line_height_pixels - cap_height_pixels)/2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"descender_height = font_size * (inter_metrics.descender / inter_metrics.bounding_top)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"descender_top_offset_pixels = cap_height_top_offset_pixels + cap_height_pixels","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"x_height_pixels = font_size * (inter_metrics.x_height /inter_metrics.bounding_top)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"cap_to_x_diff = cap_height_pixels - x_height_pixels","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"em_height_pixels = font_size","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"em_height_top_offset_pixels = (line_height_pixels - em_height_pixels)/2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"line_height_pixels = font_size * line_height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`## Set-up`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"assembled = [{height: line_height_pixels, top:0},{height:em_height_pixels, top:em_height_top_offset_pixels},{height: cap_height_pixels, top:cap_height_top_offset_pixels}, {height: x_height_pixels, top: cap_height_top_offset_pixels + cap_to_x_diff},{height:descender_height,top:descender_top_offset_pixels}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"colors = {return{line_height:'coral',em_height:'yellow',cap_height:'lightblue',descender:'lightgreen',x_height:'pink'}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"order = ['line_height', 'em_height', 'cap_height', 'x_height', 'descender']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"function unslug(string) {\n return string.replace('_',' ')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"import {slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"chroma = require('chroma-js@1.3.7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"