🔡 Develop more fluid type system

tatianamac commented 4 years ago

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

tatianamac commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

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

codeAbul commented 4 years ago

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

codeAbul commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 :

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

codeAbul commented 4 years ago

@ovlb @tbrasington Created a PR here ( https://github.com/selfdefined/web-app/pull/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 commented 4 years ago

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

selfdefined / web-app

🔡 Develop more fluid type system #47