31:[] 2f:{"title":"Inter font metrics in pixels","cells":[{"id":0,"value":"md`# Inter font metrics in pixels`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":26,"value":"inter_metrics = {return{bounding_top: 2816, descender: 640, cap_height: 2048, x_height: 1536}}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":42,"value":"cap_height_ratio = inter_metrics.cap_height / inter_metrics.bounding_top","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"cap_height_pixels = font_size * cap_height_ratio","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"cap_height_top_offset_pixels = (line_height_pixels - cap_height_pixels)/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"descender_height = font_size * (inter_metrics.descender / inter_metrics.bounding_top)","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"descender_top_offset_pixels = cap_height_top_offset_pixels + cap_height_pixels","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"x_height_pixels = font_size * (inter_metrics.x_height /inter_metrics.bounding_top)","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"cap_to_x_diff = cap_height_pixels - x_height_pixels","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"em_height_pixels = font_size","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"em_height_top_offset_pixels = (line_height_pixels - em_height_pixels)/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"line_height_pixels = font_size * line_height","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`## Set-up`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":116,"value":"order = ['line_height', 'em_height', 'cap_height', 'x_height', 'descender']","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"function unslug(string) {\n return string.replace('_',' ')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"import {slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"chroma = require('chroma-js@1.3.7')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}