Pretty much every website uses the wrong font size…

Подписаться 283 тыс.

Просмотров 59 тыс.

50% 1

I have strong opinions on fonts. Especially the right sizes for them. Y'all know me, bigger is better (for text).
This article was phenomenal and I highly recommend reading it
adrianroselli.com/2024/03/the...
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏

Наука

Опубликовано:

29 апр 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 145

@vytah 19 дней назад

I was for years wondering why our company's webapp uses font-size: 62.5% and now finally I know. Now only to learn why it uses negative margins.

@dhlehrenlos 19 дней назад

most of the time I’ve seen negative margins used was to remove paddings and other constraints set by parent components. IMO they are evil and should not be used, but I’m just a stupid backend developer.

@TheMoonWatcher 19 дней назад

Negative margins were commonly used in column grid layouts when those were made with floating divs 😂 You would have a default padding left and right on every column or wrapper(usually called "container") div. Then grid rows inside of that would have a negative margin to offset the padding, so that your column starts at the edge of the container, instead offset some amount to the right. Not sure if that made sense or not, but if you look up Bootstrap 3 grid system and then inspect it, it might make more sense 😅

@bj0rnen 19 дней назад

Negative margins have a lot of uses, especially for complex dynamic apps. They can be abused but that doesn’t mean they are inherently evil and should never be used at all.

@lmnk 18 дней назад

Neg margins is one of these crutch you use when you want to make your layout work but don't care enough to check what's actually causes it to have unwanted gaps and paddings.

@dave6012 15 дней назад

“Negative margins” _bootstrap has entered the chat_

@CottidaeSEA 19 дней назад

The problem I have with a lot of these things is that clients suck. You do something, they say it "breaks" when you do something, have specific settings or whatever. Sure, it can't follow the intended design. Because it's impossible to have a one size fits all solution.

@UliTroyo 19 дней назад

That’s a feature not a bug. You can’t guarantee users’ devices or needs, so it’s best to design with that uncertainty in mind.

@CottidaeSEA 19 дней назад

@@UliTroyo Yeah, *I* know that, but the clients don't. That's the problem. Their expectations are entirely different from reality.

@freecivweb4160 19 дней назад

Getting the same size relatively vs. hard-codey shouldn't "break" anything but look exactly the same for your client. But work better when they do preferences for zoom and font size, etc.. Or what am I missing?

@CottidaeSEA 19 дней назад

@@freecivweb4160 Layout shifting, etc. Essentially, they believe everything should look the same for everyone, they get upset when it doesn't, etc. There's also many issues with certain designs where they simply do not work if there's too much text.

@CottidaeSEA 19 дней назад

@@freecivweb4160 Not sure if it's just that I can't see my reply or if I ended up not posting, but whatever. The problem is primarily layout shifting, so if they use 125% zoom for example, things do not end up where they expect, say things are broken when it's just ending up in a different place because of how the browser naturally works. If you have a text that is too long, it'll wrap. Then something else might be pushed down as a result. There are other things as well, but basically, they expect the full desktop design even if they have a 720px width setting on the OS level, etc. This also includes desktop getting the responsive design primarily for mobile.

@supriyomonndal6199 19 дней назад

These are kind of things that makes web development such a pain in the ass.

@nickmonad 19 дней назад

I mean, yeah there are weird browser oddities and cruft that have built up over time. But also, would font and readability concerns somehow not be a concern on a native app? You need some mechanism to deal with zooming and accessibility concerns, regardless of the medium. I agree web development can be a huge pain and there are concerns that at least seem unique to web dev, but the points where humans actually interact with computers will always be kind of messy in my opinion.

@EdwinMartin 19 дней назад

How is *not* setting a size a PITA? If you *do* change something, you should know what you’re doing.

@HarryPujols 18 дней назад

You can always use a crutch, like Tailwind or Bootstrap in this case.

@supriyomonndal6199 17 дней назад

Yes I love tailwind, since I started with mobile development, i feel like the web is much less predictable.

@supriyomonndal6199 17 дней назад

@@nickmonad if you are not targeting tablets, handling fonts and other layout related things are more predictable.

@Sandiajax 19 дней назад

To any of the questions asked about covering articles, please do! I feel like there’s so much to learn about good accessibility that those videos could really help with 😍

@CrispyCircuits 18 дней назад

I started doing HTML and CSS for my business back around 1998. I was one of the very few back then doing accessibility. Pretty simple back then, but at least we could deal with color blindness, low contrast for people with either poor vision or just old eyes which can't see contrast well either. Some other things, too. Things are both better, but also much harder now. I would really like to find some templates for the many different needs instead of kinda guessing.

@cubondemais 19 дней назад

In my last employer the practice is to not set a base font-size and use rem for every single font-size you might need. Doing that you respect anything the user does with their base font-size (zoom is usually related to that) and you cannot run in any trouble caused by using em or percentages (you might have compounding effects if you have something with em or percentage size font inside a em or percentage sized font). We even encouraged every single size to be rem, including padding, margin, widths and heights so they would scale with the page, but I'm not sure this last practice was the best one to follow. Anyway, working with the root font size set by the browser and everything relative to that font-size was excellent for development and for the resulting websites.

@dave6012 15 дней назад

Kevin Powell has a great video on this. He talks about using rem for other sizes as you mention, but he also talks about when he doesn’t use rem on sizes. I _think_ padding is one of them, but can’t remember. Anyway, he has good opinions in general about typography design.

@bj0rnen 15 дней назад

As the lead dev with some design experience, I have almost everything measured in rem on our project. There are some exceptions, like max widths of text blocks measured in ch, a few pages meant for projecting onto a screen measured in viewport units, and some images where their size doesn’t affect the layout but we want to render as crisply as possible measured in px.

@haulin 12 дней назад

The problem with this is that when the user sets a minimum font-size for accessibility reasons, your values will still be computed from the original font-size, not the accessible overriden one, so it may still break your layouts. Safari gets this right, but the other browsers don't :(

@nnm711 19 дней назад

My company's graphic designer wants 12.185px font size or he will throw a hissy fit in front of the PM that it doesn't fit his "artistic vision", so 12.185px font size is exactly what he gets. On a serious note, this seems like a very interesting article to read.

@luciascarlet 19 дней назад

what the fuck

@JPeetjuh 19 дней назад

I've worked with those kinds of designers. The ones who want all width/height/whatever values to be dividable by 2, 3 and 4 because that's mathematically pleasing or something. Including the hissy fit thing.

@EwanMarshall 19 дней назад

Yep, that was my issue too, only it was the company boss who was an ex-graphic designer also throwing that hissy fit.

@monad_tcp 19 дней назад

I HATE THAT SO MUCH. that's exactly THE biggest reason why the web sucks.

@MrLucasEss 19 дней назад

And that’s why you do it their way at first, because when the client gets back with a complaint about something not being responsive or nOt WoRkInG pRoPeRlY, you just point to the design and smile.

@pedromenezes4013 19 дней назад

Love to see content around accessibility and standards! Thankss!

@PhilippNowinski 19 дней назад

Please do the other articles as well! That one was dope and the others seemed intriguing as well. Btw: this is actually the first time at all that I'll leave a comment under a YT video. So THAT'S how badly I want the others to be done 😆🙈

@ben.daniel 19 дней назад

Old heads will know the 62.5% font size fuckery. It was on literally every project I worked on for many years. It's in the project I work on now... and yes, it's cursed. Modern CSS frameworks presume a 16px base font size so things like Tailwind rightly using rem values for styling don't work as expected. The hint values displayed in your IDE will be different than what is rendered and there'll be sizes that fall between your theme values that people will end up hard coding to get to the design spec. Removing the offending code makes the app look like it's rendered on a boomer's phone. Good times...

@DMC888 5 дней назад

Makes you wonder how much experience someone has if they call that witchcraft. It was standard stuff for years.

@ben.daniel 5 дней назад

@@DMC888 Very true. If you come from a time where assuming different browsers would uniformly implement something as simple as a base font size could seriously mess up your week, you can see why this became a standard practice. At that time writing markup or CSS without a nuclear CSS reset was insane. Even the box model wasn't uniformly implemented (I'm looking at your cold, dead corpse IE6)

@ThomasSweet 8 дней назад

Please do all the posts!!! This is great!

@teunpronk3651 19 дней назад

Yes. We need all the video's! :D

@oisyn- 19 дней назад

May I recommend a recursion depth of 6. So if any blog pops up in any of the follow-up vids, we want those covered as well, and so on. Hopefully we will have a video covering Kevin Bacon some day.

@Pharoxx105 19 дней назад

I’d love to see more content based on Adrian’s posts

@HenryBabbage 7 дней назад

Great vid, amazing info from that blog wow

@ZipplyZane 19 дней назад

The main potential problem I see is zoom. That default OS size is only actually used on 100% zoom, and no one really uses that. Even Chrome defaulted to 120% when I opened it. Sites are designed around the idea that, if the font is too small, you'll zoom in, not increase the font size.

@garretmh 19 дней назад

I think that helps this situation. Many weird font hacks were made to fix responsive and zoom behaviors at the cost of accessibility because they were all tied together. Now days, font size can just be font size.

@adambyte256 19 дней назад

Citation needed. I've never met anyone who always uses a zoom other than 100%.

@ray73864 19 дней назад

@@adambyte256 My late boss had his browser permanently on 110%. Back in the dark days when IE11 was still a thing, it made for really interesting fun trying to get everything to look good at both 100% and 110%.

@mayanwiner 16 дней назад

every grendma in existance 🤔

@CrispyCircuits 18 дней назад

Thanks, really useful video. I just subscribed.

@davidsiewert8649 19 дней назад

I wonder if Theos "Sorry I'm just a dumb javascript developer" will catch on and start being a meme or personal signature.

@jonmultimedia 19 дней назад

Perfect timing on this one. Need to make some changes soon because of unresponsive zoom on a page. This will help me.

@TomZeta-ik8tb День назад

Imagine the developer imagining the user clicking on the browser's options, looking for settings, then looking for fonts, and choosing their favourite font size. Mental illness

@m12652 19 дней назад

Thanks for that... excellent!

@ZipplyZane 19 дней назад

Too bad Chrome has currently decided that the user's default menu size is too small and they need to add almost double the whitespace, making menus way too tall and need scrolling on every computer I own. (and, of course, scrolling menus are bad UI). To be fair, they copied it from Microsoft Edge, who also don't seem to trust the Windows developers to get the menu size right. And at least they don't copy the button size. Edge is unusable for me simply due to how many extensions I want to be able to quickly access.

@Roxor128 17 дней назад

I've had to mess around with custom CSS for Firefox because Mozilla keep messing with the UI. Most notably because in one update a while back they added a crap-tonne of unnecessary space in the menu listing all the open tabs, halving the number that would fit on screen.

@ZipplyZane 17 дней назад

@@Roxor128 I totally forgot about putting that in, honestly. I thought it was just part of using the Compact option. But, still, at least I can fix it. And it was nowhere near as bad as how much space Chrome is adding.

@almicc 19 дней назад

Didn't even realize it, but I've been doing this for a long time. I don't set base font sizes in fixed units anywhere. I just open my page and put a paragraph and three or four headers, then set my headers to a size I like using the rem unit. If I really want my normal text to be larger, then I also use rem for that.

@GashyDev 16 дней назад

As far as it goes for font sizing I've always used rem for client sites as it already bases its font size off the browsers root element + user preferences, that way you are still respecting the user whilst being able to set those visual hierarchies if required.

@dave6012 15 дней назад

I’ve wasted countless hours styling html inputs to look more uniform. Line-height being the biggest PITA part… between focused, active, placeholder, contenteditable-like behavior, etc., it was a nightmare. I can’t believe I was sleeping on a 3-line solution this whole time 🤯 Please do those other videos.

@KazmirRunik 17 часов назад

I just like to mix units using the CSS calc function. For instance: font-size: calc(1.5ex + 0.3vw); This came from experimentation. You can play around with the numbers, but this is a basic template I use when I want a font that can scale larger with zoom but can also scale with the view device's size without being able to become so small that you can't read it (unless you explicitly zoom it out).

@narcisodev 17 дней назад

Every blog post is interesting and it would be good to hear your opinion on them!

@hunterbertoson156 19 дней назад

Would love to see more videos based on those posts

@freecivweb4160 19 дней назад

Good stuff, definitely do it on new sites. As for huge legacy sites, ugh, not going to fix it. ;)

@drewkillion2812 19 дней назад

How did i forget that bookmarklets were a thing? I haven't used a bookmarklet in years

@robertbastian9001 18 дней назад

Adrian Roselli is one of my go-to expert resources for a11y and semantic HTML/CSS. Thanks for drawing attention to his writing!

@blazerowland407 19 дней назад

62.5% is actually a great concept and nobody will change my mind on that.

@freecivweb4160 19 дней назад

Yeah me too, and you can still zoom past 200% so what's the big deal?

@HarryPujols 18 дней назад

It was probably 15 years ago when you only had ems and percentages as relative units.

@andreasnulein782 19 дней назад

@Theo. they whole idea of "rem" and "em" basically is the relative-ness to the user's chosen root font size. so: 1rem == "what the browser user seems fit for themselves". the "html: 100%" thing was just saying: **IF** somebody forces you to set a font-size on html, then just put 100%, i.e. "a placeholder". so when you changed your font-size in your browser the "1rem" went from default 16px to 18px or 20px or something like that. so you could say: "it doesn't matter if i do: 100% or 1rem". well, yes and no. if you have an element where you set "font-size: 80%" and inside another element where you again set "font-size:70%" then the inner element will have 70% of 80% of the root font size. that will eventually hurt your brain. when you go .outer {font-size: 0.8rem} and then .inner {font-size: 0.7rem}, your inside will be 70% of the root font size. conversely the "em" unit is for the case where you _DO_ want to take a relative amount from the surrounding font-size.

@ego-lay_atman-bay 19 дней назад

The only time I will use pixel font sizes, is in my program that is able to turn text into snap (similar to scratch) code blocks. The only reason is due to the fact that snap itself uses pixel font sizes.

@Maeckboom 19 дней назад

"Oh we dont like self-closing tags now" - ikr 😂

@RenderingUser 14 дней назад

now do the same but for website colors so users can set colors themselves or atleast, make the website compatible with dark reader addon

@Fanaro 17 дней назад

Stack Overflow has a dark theme btw

@mikekent8148 18 дней назад

More from that blog please 🎉

@puddlejumper3259 19 дней назад

I get much more value from watching these videos muted

@HCforLife1 19 дней назад

Are there any design tools supporting that? In design systems, it seems non-possible to use this approach as long as they aren't supporting that, and designers are use pixels or rem only.

@HarryPujols 18 дней назад

Figma dragged its feet to have an option with rems. Designers should stay away from pixels, the “pixel perfect” design transition is an outdated concept.

@Roxor128 17 дней назад

This wasn't a problem back in the 1990s. Mainly because your formatting options were bold, italic, underline, six sizes of headers, and pre-formatted text (ie ASCII art and code). Yes, I'm kidding a little there. Though in all seriousness, the over-designing of web pages has made them slow, bloated and less useful. There seems to be a rule of thumb that the older the page looks in term of graphic design, the more useful it tends to be. Lots of useful pages for technical content are basically just a pastel background with black text in whatever font your browser uses by default, and which have HTML that's as bare-bones as you can get, and was probably generated by a program that saw version 1.0 back when Doom was a new release, and which hasn't even broken version 3.0 in the following 30 years because it doesn't need any significant changes to keep doing its job. There's actually a back-to-basics alternative protocol called Gemini designed to capture that minimal formatting, content focus of old HTML out there, too.

@nikbl4k 19 дней назад

Its incumbent upon the user to avoid clickable sections on android cause you drag a page down and accidently launch the tap-hold options at each section, unless your finger falls on a blank divide between the text or images... Therefore, the user is suppose to put there finger for 2 seconds like a hotpotato !!-And take it away realfast... like... its like, your experience might hinge upon the level of finger conviction - and consequently if you're moody or aggressive that day.

@ChaseFreedomMusician 18 дней назад

"So few users change their font size" Except, you know, ones that can't see well...

@mayanwiner 16 дней назад

Not trusting the user to choose the correct font size seem really reasonable.

@ivonakis 19 дней назад

In work it it prohibited to use px ( which after this article I get ), however everything is set by rem, so if you change the base font to 32 - everything just looks zoomed to 200% - I don't believe this is good either - just set default zoom.

@adambyte256 19 дней назад

…Yes? That's why you shouldn't set a base font size.

@ivonakis 18 дней назад

@@adambyte256 Yes I get that from the video. But if customer set the browser font to 32 px It would look identical to zoom 200 percent. I don't think that as the desired effect - customers can set zoom on browser , and that would be way more consistent.

@brod515 19 дней назад

Do all the videos you mentioned ....

@AmCanTech 19 дней назад

Reading blog posts on YT as a Netflix engineer 😅

@kmydesignstudio 19 дней назад

Interesting, favorited reading print size font is 12 pts, anything under 10 pts is harder for older people to read but if you think about business cards, most of the fonts have to go to 9. Then when you think about reverse print minimum is 14 pts and no light fonts. It makes sense to have minimum font size at 16 px technically anything on a dark background should be 18px.

@FrederikSchumacher 19 дней назад

Nevermind the font-size, font-family is where the true usability crimes are hidden. "Courier" or "Helvetica" should NEVER be in any font-family list. Also, any default system font such as "MS Trebuchet", "Consolas" should never be in any font-family list. Way before companies shit all over accessibility and usability in favor of their shitty company style guides and megabytes of completely irrelevant minor sans-serif and serif web-font variants, "sans-serif", "serif", "monospace" were not just stylistic individual choices, but actually usability and accessibility options of browsers enabling people. Unfortunately, this practice of cargo-cult copy/pasta font-family even made it into largely venerable CSS frameworks such as bootstrap resulting in broken usability or requiring additional browser extensions just to get back a normalized font-family behavior.

@AllanSavolainen 19 дней назад

Why not? That is something the user can override if they want to? Or are you saying we should have websites with only those three options?

@FrederikSchumacher 18 дней назад

@@AllanSavolainen My whole point is: The way most CSS frameworks set up font-family, and how most custom CSS uses other copy-pasted font-family without understanding font-family, Users *cannot simply configure and override*, because the only configurable web fonts are "sans-serif", "serif", "monospace" and (honorable mention) largely unused "fantasy" and only takes effect if none of the other fonts listed before them aren't available.

@AllanSavolainen 18 дней назад

@@FrederikSchumacher could you give example of good font-family.

@jonathinmwoann 19 дней назад

Interested in the responsive type and zoom post🙋‍♂️

@jonathinmwoann 19 дней назад

Update, all these posts look interesting to me lmao

@IvanKleshnin 9 дней назад

Sticking to supposedly "default browser font size" is not such a good idea and won't automatically improve UX. You both forget to consider that different font families have different visual sizes (for the same font-size). E.g. many modern fonts at 'font-size: 14px' will look bigger than older fonts at 'font-size: 16px'. So the key argument is fundamentally flawed.

@MarkoKozlica 19 дней назад

Your sole purpose in this video is providing the link to this blog post. You just do not add anything to it. Thx for the link though :D

@RoundtableML 19 дней назад

Where you find those blog posts?

@nikilragav 8 дней назад

definitely not %. % can be stacked in parents and result in non-standard font-sizes. rem if you want to respect the user's default font choice (and tbh all spacing should also then be rem). Otherwise use px and just let the user zoom the page (ctrl+ / ctrl-)

@Rebel101 19 дней назад

Using rem values is even better.

@gcs8 19 дней назад

"font size queen"

@nicolaicornelis2853 19 дней назад

The zoom thing on iOS is 16px, not 14px, and it's infuriating. Essentially you can choose between zooming in on your mobile-friendly site or 16px or more - you can't have both, which is ridiculous, because 16px is way too large.

@nagyszabolcs9451 19 дней назад

lol youtube has 10px default

@HarryPujols 18 дней назад

The lesson shouldn’t be using percentages for font size but RELATIVE units. Relative units include percentages, but also REMs VWs and EMs (be careful using those). Absolute units like PTs are okay for print.

@busybox4984 19 дней назад

obligatory Lucia Scarlet mention

@luciascarlet 19 дней назад

@busybox4984 18 дней назад

@@luciascarlet i knew you would come. great to see you here

@ub-relax6800 17 дней назад

I disagree, you're not very dumb. You're smarter than others.

@ZubriQue 19 дней назад

What if LeetCode uses 13px for code font size?

@acubley 19 дней назад

Those Aidens are a-holes...

@Mr76Pontiac 18 дней назад

Kinda click baity image, but, yeah, 100% on board with letting ME decide on what MY computer presents to me. ESPECIALLY those sites that use 640 pixel wide columns on a 1920 width screen. THAT pisses me off more so than a font size. Ctrl-MouseWheel where I need to go is simple enough. Also glad that browsers typically now-a-days allow me to click somewhere to reset the size, AND that the browser doesn't blow things out of proportion for EVERY tab. .. unlike Chrome... where when you set 150% zoom it blows EVERYTHING up, even in Electron type apps (looking at you GChat)

@sharkinahat 19 дней назад

It's all guesswork anyways. If you don't know the physical size of the display and how far away the user is - it's all theory craft.

@nationofsovereigns 19 дней назад

exactly. so, the best plan is not to assume. instead, plan for the worst and hope for the best. in other words, accept a range of outcomes by embracing the most flexible paradigm, which is to put the user in control of their specific needs.

@jouebien 18 дней назад

TLDR don't be a dick, leave the base font size alone so the text can be accessibly re-sized.

@nazarshvets7501 19 дней назад

Its doesnt work, because then you will have to make your media query be "responsive". And you can't be sure about default rem value, so that you would miss correct mark and show broken UI If user wants big ass font, he can zoom-in

@nationofsovereigns 19 дней назад

CSS translates relative and absolute, so you can compare the computed size of an element in your preferred unit in your media query. But, you could also query on viewport width (vw) or, even better, use @container queries, or CSS grid, or flexbox layouts to get responsive element containers other than the viewport, so you don't need to use media query breakpoints at all for layout or sizing. Go with the flow

@nazarshvets7501 19 дней назад

And then you need to support iOS11 without all that features

@nazarshvets7501 19 дней назад

Too much husle for project that isnt a blog

@mhzmngames 19 дней назад

Arc browser dropped win 11 version

@jshstuff 10 дней назад

Incorrect take on 62.5%

@DeltaNrOne 19 дней назад

Setting a font-size of rem or em on rhe body keeps all the other relative spacing .

@ste-fa-no 19 дней назад

Any CSS developer should know about the 62.5% thing 😂 (know, not use)

@HarryPujols 18 дней назад

It was useful before Sass (yes, it’s that old). After that, you could use a mixin to turn your pixels to ems or rems.

@ste-fa-no 18 дней назад

@@HarryPujols it might have been useful for some, but I'm a math need, so converting to base 10 seemed not useful. Rems were relative enough, why would the text be anything more than 1rem?

@vertigoz 19 дней назад

let's zoom the text bigger to fit all screen size so actually the eye span get strained, newspaper doesn't teach these guys anything...

@Elesario 19 дней назад

Must... resist... size... jokes!

@brianmeyer3050 14 дней назад

You can hate 62.5% all you like.. but you didn't state why? It's a very useful and generally liked pattern. There might be cons, but you didn't cover them. Frankly, the fact you didn't know about this common pattern underscores how inexperienced you are. Do your audience a favor and don't pontificate an area you apparently know very little about. Thanks!

@devor8251 19 дней назад

Few years ago I read a lot about relative units vs px. And I realized that you can just use px in most of the cases unless you really need relative units (rare). Sorry if it's insults your religion, but it's reality. Yeah, relatives units theoretically better, but not practically.

@nationofsovereigns 19 дней назад

On behalf of the Cult of the Table Layout, I embrace your teachings

@HarryPujols 18 дней назад

Did you read, or did you skim through it? Just watch how your precious pixel layout goes straight to hell after you change font size preferences in your browser.

@Gregorius421 19 дней назад

1:52 Oh, fun fact: youtube has "font-size: 10px;" on . The curse is here. ... Also, it's in the style attribute... Double curse.

@fresheyesinc 19 дней назад

The ultimate default font size: html { font-size: min( min(100vh, 66.666vw) * 0.0125, 0.625vw + 5px, 2.5vh + 5px ); }

@LifeWithRilla 19 дней назад

Hating on 62.5% has me TRIGGERED. I would love to met the creator of ems and rems and wrap my hand around their masochist throats. Some one needs to explain to me how this is trick is at all an issue and why you guys are nerding out about using rems and ems in the default approach. Its not at all intuitive to read and who ever likes using them in that approach imo are masochists.

@ray73864 19 дней назад

rems is simple. If the browser default is 16px, then 1 rem == 16px. After that, the rem is just a multiplier to the default px size, so 0.5rem becomes 8px, 2rem becomes 32px. If the user changes their default font size in the browser to be 14px or 18px, then your rems match up with what they want too, so at 14 it would be 7 and 28, at 18, it would be 9 and 36.

@HarryPujols 18 дней назад

What you’re ignoring here is that almost every designer is going to pass you wireframes in pixels, and you need to translate all of that to rems or ems, and the calculations are a pain in the ass unless you do something like that hack.