How to calculate basekick dimensions for a new font
possibilities opened this issue · comments
I'd like to extract the basekick helper into my own project but don't understand it well enough yet. How do you calculate the inputs for a new font? I.e. if I were to introduce a new font how do I find the measurements to supply here? https://github.com/seek-oss/braid-design-system/blob/master/lib/hooks/typography/basekick.ts#L10-L17
Thanks!
I'm planning to extract it all. Basekick already is a separate package that gets the bottom of the text to sit on it's baseline and measure line-height from there.
The cropping of the top white space has not been extracted yet.
I'm working on a script that automates extracting these metrics, at this stage we take the values from that script and then tweak in the browser to get it right.
Hope that helps.
The npm package seems like a good reference but I assumed I couldn't take advantage of it because I don't use less so was trying to fish around in braid to extract enough code to do it in my project. I guess for me I get the general idea and understand the desired outcome but don't know enough to get started. E.g. what does capHeight mean and how do I calculate it for a font? Maybe you could show an example of 1) a font 2) what the IO of your script looks like (would love to see the script too if possible), and 3) what the value for each of the 6 basekick options would be. Thanks in advance, I know that's a lot but just iterating what would be helpful... peace! (:
Ah, I hadn't watched your talk on the basekick readme... now that I skip ahead it looks like it gets into the fundamentals I'm lacking. Closing, thanks for everything!
@possibilities were you able to use the do this? :) Would like to know the approach you took if you are not using the less version
For anyone still looking, found something really cool over here by @a7sc11u
https://github.com/a7sc11u/basekick-gui
https://basekick-gui.netlify.app/