🔡 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

[ovlb]

Hey Abul! Good to have you back :)

clamp is nice, but in this case not essential. You can achieve the same effect with min and calc, as demonstrated by Heydon:

:root {
  font-size: min(calc(1em + 1vw), 4em);
}

[codeAbul]

Hey @ovlb you are right and I was considering min too but unfortunately it isn't supported on firefox Android and some other browsers on android ( opera , Samsung internet ) ( https://developer.mozilla.org/en-US/docs/Web/CSS/min )

I will try to play around with supports clause and see how it performs in firefox without the min function and just the calc.

[ovlb]

@codeAbul On mobile the effect isn’t large in the first place, so I think keeping it simple and only use a fallback might work well enough. Like

font-size: 1rem /*or whatever */
font-size: min(calc(1em + 1vw), 4em);

[codeAbul]

@ovlb Yes. Will do. Thank you for the suggestion!

[codeAbul]

@ovlb @tbrasington Created a PR here ( #216 ). Didn't add the clamp sizes, as I need help deciding those values! ( So i don't randomly pick values and ruin the scaling).

[codeAbul]

Also, I haven't created complicated mixins before in sass before. Please let me know if i am using any anti pattern here! Thanks again for the assistance