search

davidhellmann / tailwindcss-fluid-type

A plugin that makes the use of Fluid Type a breeze.
MIT License
345 stars 9 forks source link

Can't target exact font sizes on each end of scale? #29

Closed sebastijandumancic closed 1 year ago

sebastijandumancic commented 1 year ago

Hi, I just can seem to get this setup correctly.

I have a requirement to have a font 80/88px on <1500px, and 32/36 on <320px. Scaling is working correctly, but it's unclear from your settings how to correctly setup font size to be exactly 100px on 1500px and exactly 32px on 320px. I have to guess around with decimals and ratio/font-size max doesn't make sense to me? Is there some documentation or calculation that I'm missing? Thanks!

davidhellmann commented 1 year ago

Hey! What means a font? You have several font sizes. Do you mean your base or a specific size? Can you post your config and describe it a bit more. Would be great.

Thanks!

sebastijandumancic commented 1 year ago

Sorry if I wasn't clear enough. So I'd like to set a fluid type that starts at 32px at 320px and goes up to 80px at 1500px. How to correctly set up the multipliers, min font size, etc. to get this? I don't get the calculation behind this to get this exact scale? Config is currently your default. For this purpose, I'd set it at 4xl size because at 1500px it's the same as non-fluid 4xl for me, but that's irrelevant of your lib, I just can't figure out the calculation to get the exact numbers at exact sizes. Thanks a lot!

davidhellmann commented 1 year ago

I think you can play around here a bit: https://www.fluid-type-scale.com/calculate Under the hood, it's more or less the same. But I'm unsure if that's a solution for your requirement because you try to aim for one specific scale to a particular font size. That's maybe not how to use fluid type at all but that's just my thinking.

Let me know if that helps.

sebastijandumancic commented 1 year ago

Hey @davidhellmann I'm going to close this. I wasn't satisfied with the flexibility of settings on your plugin, but didn't want to bother you with questions, so I made my own :) Thanks for the inspiration, I've mentioned you in readme.

https://github.com/prototypdigital/tailwindcss-fluid-typography

davidhellmann commented 1 year ago

OK, I checked your repo and if i'm right your approach is to have control for each font size separately. Valid if you need that but I think I'll stay with the classic modular scale approach to control the sizes via base and ratio and have a harmonic font set.

But I'll give you a star on the repo. Maybe I need something in the future. :)

sebastijandumancic commented 1 year ago

Yup, you're right, both approaches absolutely valid. I needed a bit more flexibility, but can always just manually calculate typescale on the side, and the enter that into config. We usually get explicit sizes from designers, so it's just not something I bother with. Thanks, starring back!