2d:null 2e:["$","title",null,{"children":"Clamp Based CSS Property Generator for Fluid Typography | Saneef H. Ansari | Observable"}] 33:[] 31:{"id":"489a382b08a1f12a","slug":"fluid-typography-css-clamp-value-generator","title":"Clamp Based CSS Property Generator for Fluid Typography","thumbnail":"a10016814fe02d01d781e51d54413b7732336d7de09866ddfb7c6f0dd13b2e75","access_level":"public","create_time":"$D2022-03-18T15:22:33.887Z","update_time":"$D2022-03-19T02:44:32.681Z","view_time":null,"first_public_time":"$D2022-03-18T16:52:28.778Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024"},"version":360,"publish_version":360,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}],"members":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"e19c6e411d496fbd","slug":"front-end-tools","title":"Front-end tools","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"type":"notebook","body":{"title":"Clamp Based CSS Property Generator for Fluid Typography","cells":[{"id":0,"value":"# Clamp Based CSS Property Generator for Fluid Typography","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"Plot.plot({\n width: size,\n height: size / 2,\n x: {\n label: \"Viewport size →\"\n },\n y: {\n label: \"↑ Font size \",\n grid: true\n },\n marks: [\n Plot.line(pts),\n Plot.line([\n [0, Math.min(y1, y2)],\n [Math.min(x1, x2), Math.min(y1, y2)]\n ]),\n Plot.line([\n [Math.max(x1, x2), Math.max(y1, y2)],\n [Math.max(x1, x2) + Math.abs(x2 - x1), Math.max(y1, y2)]\n ]),\n Plot.ruleX([0, x1, x2])\n // Plot.ruleY([0])\n // Plot.dot(pts)\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"_All inputs are in pixels._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"viewof xs = view`\n

Viewport

${[\"0\", Inputs.text({ label: \"Min\", value: 320 })]}

→

${[\"1\", Inputs.text({ label: \"Max\", value: 1140 })]}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"viewof ys = view`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"## Result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"md`\n\\`\\`\\`css\n:root {\n --font-size: clamp(${fixDecimal(y1 / remBase)}rem, calc(${fixDecimal(\n b / remBase\n)}rem + ${fixDecimal(m * 100)}vw), ${fixDecimal(y2 / remBase)}rem);\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"x1 = +xs[0]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"x2 = +xs[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"y1 = +ys[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"y2 = +ys[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"m = (y2 - y1) / (x2 - x1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"b = y1 - m * x1\n//b = (x1 * y2 - x2 * y1) / (x1 - x2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"fixDecimal = (num, decimals = 2) =>\n Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"remBase = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"size = Math.min(width, 400)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"pts = build_samples((x) => m * x + b, Math.min(x1, x2), Math.max(x1, x2))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"tachyons","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"ns = Inputs.text().classList[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"import { build_samples } from \"@mcmcclur/adaptive-plotter\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"import { tachyons } from \"@saneef/tachyons-css\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"## Credits\n\nBased on the article, [Modern Fluid Typography Using CSS Clamp](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"

Viewport

Font Size