18 Replies
You should very rarely use px, learning em is highly useful and important, itβs similar to rem but uses the parents font size rather than the root, the viewport units and % are also very useful to get a grasp on also.
thank you,one more thing is there like a vid or smth to read that can explain
No worries, Iβm sure you can check mdn docs for them.
π thx for helping
All good man
Like everything CSS you need to think about how the elements need to behave. Use all the units! Please just don't use Rem for everything, also px are not evil.... You can use them just when.
And please don't use vh/vw for fonts those should typically always be rems
And learn the gotchas around old viewport units and why we have new ones.
Ch units are underrated too
Broad point, we have like 45units don't limit your self
@laith like I said yesterday .
This is basic stuff you learn on every basic css course.
We cannot learn you everything
am still a beginer so the easiest is px tho
That's not easy that lazy
as a beginner you learn specially since you asked the question
def don't use px for fonts please use REM
Understanding why: Users will not be able to change the font size if you use px. It will ignore their settings and thats bad UX/UI
You need to not stick with something familiar, youβll never learn that way, you have to look at things you donβt understand to understand them.
in what situations would you use px b1?
When I don't want it to change with users/root font. Which you really need to start testing cause people assume rem means responsive....
I'm actually playing with large clamp headings that use PX cause I never want them bigger than their biggest most likely. User goes from 16 to 24px on a small screen and oooooof
ah that makes a lot of sense tbh, i never thought about it fucking up like that lol, might have to steal that from you man π
https://discord.com/channels/436251713830125568/709865075871186996/1146834577088843817
A post that does a pretty good job of explaining it too
Another great instance that I've stopped using REM is in my gutters and some gaps.
Cause I don't want the sides of my page doubling and squishing content when its small
say user on mobile has 24px font set
π
So the idea is to find that happy path of letting a user set their font size and not breaking your "responsive" website π
Best answer? TEST IT! change the font size in browser/os settings to be super accurate and know what it looks like.
oh sweet, i'll check that out!
speaking of which did you ever get further with your design system names?
na I was all over the place last night. I really need a design, so I might do that today. I find I'm starting to try to get too "universal" to be flexible and need to step back a bit cause I'm not make a toolkit π
I've thought about maybe taking it into a UI lib at some point but lots of work to make something for others.
off topic for here though xD DOH
Okay I use rem for everything. What units should I be using instead?
I can see use cases for em if you're using components and such and vw/vh for clamps and the like but other than that I only use rem
Read what I just wrote
well I mean above the off topic stuff mean have you changed teh font-size* and tested your site?
REM != magically responsive unit just like vw/vh are not π
we have 54 units now lol dang .. but yea why limit yourself to using 1\54
https://nerdy.dev/new-relative-units-ric-rex-rlh-and-rch
π³π³π³
I dont think I want to open that pandoras box
That makes a lot of sense tho