2c:null 2d:["$","title",null,{"children":"Inter variable for monoline at all sizes | Grant Custer | Observable"}] 32:[] 30:{"id":"0904c3323781ea34","slug":"inter-variable-for-monoline-at-all-sizes","title":"Inter variable for monoline at all sizes","thumbnail":"73a3bd0e0a031857665ebfbd8895cc550b343125f9a568f5b6cba8e9125562a9","access_level":"public","create_time":"$D2019-04-08T12:27:01.069Z","update_time":"$D2019-04-08T16:54:24.647Z","view_time":null,"first_public_time":"$D2019-04-08T14:09:23.872Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":246,"publish_version":246,"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,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Inter variable for monoline at all sizes","cells":[{"id":0,"value":"md`# Inter variable for monoline at all sizes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"md`An experiment in using [Inter](https://rsms.me/inter/)'s variable font weight to match the stroke weight across different sizes of text.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"viewof font_size = slider({\n min: 8, \n max: 128, \n step: 1, \n value: 64, \n title: \"Font size\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"html`

Adjusted for constant stroke

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"adjusted_font_weight = size_to_weight2(font_size)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"html`

Default 400 stroke

Example: headline stroke matches

The stroke of the paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque nisl ac laoreet sollicitudin. Aliquam fringilla convallis efficitur. Aenean at neque eu sem dignissim tempus. Vestibulum suscipit vulputate nisl, non porta diam ultrices ac. Quisque feugiat nisl quis dolor ornare mattis. Ut quis varius odio. Praesent vitae laoreet ligula, vitae bibendum tortor.

It could match even smaller text, like maybe an image caption, too.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`## Messy work 2\n\nI didn't handle weights right before.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"function size_to_weight2(size) {\n let weight = Math.pow(2, (6 - Math.log(size) / Math.log(2)))* Math.pow(10,2)\n if (weight<100) weight = 100\n return weight\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"weight_keys_2 = [800,400,200,100]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"size_keys_2 = [8,16,32,64]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"size_keys_2.map((s,i) => `${s}: ${weight_keys_2[i]}`).join(', ')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`## Messy work`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`I measured the pixel width of the T stem in big sizes to find out how the stroke changes. I figured out the weight to size function then used https://www.symbolab.com/solver/exponential-equation-calculator/x%3D2%5E%7B%5Cleft(8%20-%20%5Cleft(%5Cfrac%7By%7D%7B100%7D-1%5Cright)%5Cright)%7D to get the size to weight function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"weight_keys = [100,200,300,400,500,600,700]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"size_keys = [2,4,8,16,32,64,128]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"function weight_to_size(weight) {\n let size = 2 * Math.pow(2, (8 - (weight/100 - 1)))\n return size\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"function size_to_weight(size) {\n let weight = (- ((100 * Math.log(size) - 900 * Math.log(2))/Math.log(2))) - 100\n if (weight < 100) weight = 100\n return Math.round(weight)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"size_results = html`${size_keys.map(s => `

${s}: ${size_to_weight(s)}

${w}: ${weight_to_size(w)}

`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"base = 9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"ratios = [19,17,15,13,11,9,7,5,3].map(n => n/base)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"html`

${[100,200,300,400,500,600,700,800,900].map(n => `IN`)}

TESTING

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"import {slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"