tailwindcss-capsize

tailwindcss-capsize copied to clipboard

I have been using this awesome library in a few projects, but there's always been one minor 'imperfection' I started to accept as a trade-off and for which there might be a solution.

For the default font weight, the metrics are pixel perfect. However, when the font becomes thinner or thicker, the capsize measurements for the normal font weight remain applied, instead of being able to adjust to this change. When font is bold, it's usually a bit taller, and vice versa.

Is this feasible to achieve? Could we potentially pass different font metrics for every font weight or be able to compute these based on a specific parameter and keep the changes in the config minimal? Not sure whether there's any sort of relativeness between font weights, or whether we would need unique measurements for each.

The whole idea appears to be very similar (at least I hope it is!) to how the capsize class already adjusts the spacing based on the font size.

---

Thank you for your work, it made transforming the designs into UIs using TailwindCSS much more predictable 💙

Hmm, that's interesting; I guess most fonts I've used the weight is just adjusted in the horizontal axis.

If you plug the different font files into the Capsize website, do you get different values for the metrics? It should be possible to use a different metric set for the calculations, just need to figure out the convention. I don't have the code in front of me right now, but maybe the fontMetrics key can have an optional sub-key to match the fontWeight settings...

Let's remember that in traditional typography different font weight was ... a different font of same family - and most of them are different with different defaults and metrics. Generalisation and parametrisation of various fonts into single file is relatively new feat. So the very need for separate metrics is expected if you think of it this way.

Different weight is a different font.

One way to easily obtain thorough metrics for other font weights is https://fontdrop.info (once uploaded, metrics can be found in the 'Data' tab).