Closed pospi closed 10 months ago
@pospi @adaburrows Will using rem
instead of px
make copying the designs more difficult? Have used px
so far in everything as design tokens from figma are using that for spacing, although they actually leave out the unit in the token, the values would have to change on the design side first.
e.g. --nh-spacing-lg: 16;
is without unit but is obviously meant to be px
and not rem
The stuff about buttons makes sense. Will make some stories for the button sizes and play around with different defaults/text sizes
shrugs maybe mildly. You can probably change the default units in Figma somehow? Not sure.
But regardless, the math is generally pretty simple. For various accessibility reasons it's usually best to set a 16px base font size over the whole document and use that as your baseline; so in most cases you can just divide everything by 16 and use em
units. Using text scaling to upsize entire components isn't something done often, so if you stick to applying font sizes to font-based leaf DOM nodes like paragraph and heading tags then you avoid the pixel size of your base em
unit changing.
If things need to be relative to the root font size, use rem. If they need to be relative to the parent node font size, use em. If you just want pixel perfect absolute sizing, use px. Need to split a screen in half? Use percentages with no margins to size the two panes. Other than that, for a while it was considered good practice to use em/rem. Doesn't really matter too much to me, but I'm not a professional designer. I just used to make themes for various sites according to design practices in vogue in 2008. After I started being a software engineer full time, all of that got deferred to the designers.
px
as a unit for anything.em
s are ideal, but would also settle forrem
and viewport-relative sizings for layout elements.