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

Ай бұрын

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

Ай бұрын

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

Ай бұрын

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

Ай бұрын

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

Ай бұрын

“Negative margins” _bootstrap has entered the chat_

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

Ай бұрын

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

Ай бұрын

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

@freecivweb4160

Ай бұрын

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

Ай бұрын

@@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

Ай бұрын

@@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.

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

Ай бұрын

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.

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

Ай бұрын

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

Ай бұрын

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

Ай бұрын

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 :(

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

Love to see content around accessibility and standards! Thankss!

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

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

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 😆🙈

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

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

@oisyn-

Ай бұрын

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.

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

Ай бұрын

what the fuck

@JPeetjuh

Ай бұрын

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

Ай бұрын

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

Ай бұрын

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

@MrLucasEss

Ай бұрын

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.

Thanks, really useful video. I just subscribed.

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

Ай бұрын

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

@ben.daniel

Ай бұрын

@@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)

@vezquex

22 күн бұрын

80% is gonna be 12.8px. That's putting a lot of faith in font rendering.

Great vid, amazing info from that blog wow

Thanks for that... excellent!

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

Ай бұрын

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

Ай бұрын

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

@ray73864

Ай бұрын

@@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

Ай бұрын

every grendma in existance 🤔

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

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

Ай бұрын

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

Ай бұрын

@@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.

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

@nickmonad

Ай бұрын

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

Ай бұрын

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

@HarryPujols

Ай бұрын

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

@supriyomonndal6199

Ай бұрын

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

@supriyomonndal6199

Ай бұрын

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

Would love to see more videos based on those posts

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

Ай бұрын

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.

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

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).

@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.

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

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.

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

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

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

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.

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

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

Ай бұрын

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.

More from that blog please 🎉

Where you find those blog posts?

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

Stack Overflow has a dark theme btw

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

Ай бұрын

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

@ivonakis

Ай бұрын

@@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.

Reading blog posts on YT as a Netflix engineer 😅

I get much more value from watching these videos muted

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.

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.

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

You found a goldmine

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

@jonathinmwoann

Ай бұрын

Update, all these posts look interesting to me lmao

What if LeetCode uses 13px for code font size?

Do all the videos you mentioned ....

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.

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

Ай бұрын

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

Ай бұрын

@@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

Ай бұрын

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

Using rem values is even better.

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-)

"font size queen"

lol youtube has 10px default

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.

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.

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

@freecivweb4160

Ай бұрын

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

@HarryPujols

Ай бұрын

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

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

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.

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)

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

Ай бұрын

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

Ай бұрын

And then you need to support iOS11 without all that features

@nazarshvets7501

Ай бұрын

Too much husle for project that isnt a blog

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

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

Those Aidens are a-holes...

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

Ай бұрын

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.

Arc browser dropped win 11 version

obligatory Lucia Scarlet mention

@luciascarlet

Ай бұрын

hi

@busybox4984

Ай бұрын

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

Incorrect take on 62.5%

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

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

@HarryPujols

Ай бұрын

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

Ай бұрын

@@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?

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

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...

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!

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

Ай бұрын

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

@HarryPujols

Ай бұрын

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.

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

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

Whoa 1st

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

Ай бұрын

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

Ай бұрын

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.