🔡 Develop more fluid type system

[tatianamac]

Current type system does not necessarily scale well. Intentionally developing a system that does upon the current typography would be great!

[tatianamac]

@codeAbul and @Klutch27, this might be a good one to collaborate on together as I think Gareth is looking to learn and work on their first issue. 💙

[codeAbul]

@tatianamac @ovlb just dropping by to say i have been working on this. A bit delayed due to other issues
Also pending time designing easy to consume mixins and functions for future devigners( deselopers?). I am aiming for a PR by next week fingers crossed

[tatianamac]

Awesome, sounds good! Thanks for all your work on this.

I love the idea of creating some solid mixins and functions!

[codeAbul]

@tatianamac Currently resuming and reworking on creating fluid/modular scales for the project. Will keep the folks posted on progress!

[codeAbul]

WIP branch ( https://github.com/codeAbul/web-app/tree/fluid-type ). Finished the basic functionality. Will be working next to extract functionalities into mixins and functions so it is easier to modify in the future

[tatianamac]

@codeAbul I asked a Thomas (who I flagged in the other issue you're claiming) if he could work with you on this since he's doing a broader reassessment of the design system beginnings! (Also so happy to have you back! 💙)

[tbrasington]

Hey @codeAbul looks good. I had a similar but slightly different approach when it came to generating the step values.

I have been using this method from here:
https://every-layout.dev/rudiments/units/ and
https://every-layout.dev/rudiments/modular-scale/

Rather than using any breakpoints with min/max there is an adjustment to the :root then the usual ratios. This has some advantages for those who need to adjust their zoom level.

The code that makes it all work is this.

:root {
  font-size: calc(1rem + 0.5vw);
}

It would be interesting to hear your thoughts on this method

I have this spreadsheet to calculate the values (I need the pixel size for Figma) but it may give you an overview of how it works

https://docs.google.com/spreadsheets/d/1GlHel2ppcSBXAgbvWxazreKiPfbQDYnLX_9c4z_RYIA/edit?usp=sharing

As a side note, there are calculations there for pt sizes if we want to translate it to print.

[codeAbul]

Hey @tbrasington , thank you for sharing your approach to the problem. This indeed is much less mathematically verbose and conceptually more clear, but the only issue is the inability to 'clamp' the values to a min and max which ofcourse could be solved by clamp(1rem, 1rem + 0.5vw, 1.25rem), without the clamps we would be letting the text grow larger than we would like in some cases. Once clamp() achieves better browser support this would be , i believe, a near perfect solution. Related blog posts :

1. https://adactio.com/journal/16887
2. https://medium.com/web-typography-news/part-5-dynamic-typography-redux-clamp-on-it-6af4d9fe653a .

For my solution, I base it on the approach of https://utopia.fyi/ which i believe uses css locks and gives out similar values as the clamping solution. They have a very handy calculator https://utopia.fyi/calculator which i used to tweak the config values. Please let me know what you think! Thank you