Skip to content

Instantly share code, notes, and snippets.

@ademilter
Created February 28, 2022 22:06
Show Gist options
  • Save ademilter/8e8af0e8823bc6b40698bacd5290a1d4 to your computer and use it in GitHub Desktop.
Save ademilter/8e8af0e8823bc6b40698bacd5290a1d4 to your computer and use it in GitHub Desktop.
Inter dynamic tracking as a React component
// https://rsms.me/inter/dynmetrics
const DynamicText = ({ className, children, fontSize = 15, tag = "span" }) => {
const pxToRem = (px) => {
return Number(px * 0.0625)
}
const dynamicLeading = (z) => {
const l = 1.4
return Number(pxToRem(Math.round(z * l)))
}
const dynamicTracking = (z) => {
const a = -0.0223
const b = 0.185
const c = -0.1745
return Number((a + b * Math.pow(Math.E, c * z)).toFixed(3))
}
const Tag = tag
return (
<Tag
className={className}
style={{
fontFamily: "Inter, sans-serif",
fontSize: `${pxToRem(fontSize)}rem`,
lineHeight: `${dynamicLeading(fontSize)}rem`,
letterSpacing: `${dynamicTracking(fontSize)}em`
}}
>
{children}
</Tag>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment