Pretty much every website uses the wrong font size…
ฝัง
- เผยแพร่เมื่อ 29 เม.ย. 2024
- 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 🙏 - วิทยาศาสตร์และเทคโนโลยี
![[TH] 2024 PMSL SEA W3D3 | Summer | ถ้าไม่ถอดใจ อะไรก็เป็นไปได้](http://i.ytimg.com/vi/XNYhoNHaKvE/mqdefault.jpg)
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.
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.
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 😅
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.
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.
“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.
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.
@@UliTroyo Yeah, *I* know that, but the clients don't. That's the problem. Their expectations are entirely different from reality.
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?
@@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.
@@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 😍
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.
These are kind of things that makes web development such a pain in the ass.
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.
How is *not* setting a size a PITA? If you *do* change something, you should know what you’re doing.
You can always use a crutch, like Tailwind or Bootstrap in this case.
Yes I love tailwind, since I started with mobile development, i feel like the web is much less predictable.
@@nickmonad if you are not targeting tablets, handling fonts and other layout related things are more predictable.
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.
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.
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.
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 :(
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...
Makes you wonder how much experience someone has if they call that witchcraft. It was standard stuff for years.
@@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)
Love to see content around accessibility and standards! Thankss!
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.
what the fuck
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.
Yep, that was my issue too, only it was the company boss who was an ex-graphic designer also throwing that hissy fit.
I HATE THAT SO MUCH.
that's exactly THE biggest reason why the web sucks.
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.
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.
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.
Citation needed. I've never met anyone who always uses a zoom other than 100%.
@@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%.
every grendma in existance 🤔
Yes. We need all the video's! :D
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.
I’d love to see more content based on Adrian’s posts
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!
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.
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.
Thanks, really useful video. I just subscribed.
Great vid, amazing info from that blog wow
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).
Thanks for that... excellent!
Perfect timing on this one. Need to make some changes soon because of unresponsive zoom on a page. This will help me.
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.
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.
@@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.
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.
@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
Would love to see more videos based on those posts
Good stuff, definitely do it on new sites. As for huge legacy sites, ugh, not going to fix it. ;)
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’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.
I wonder if Theos "Sorry I'm just a dumb javascript developer" will catch on and start being a meme or personal signature.
Every blog post is interesting and it would be good to hear your opinion on them!
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.
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.
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.
Adrian Roselli is one of my go-to expert resources for a11y and semantic HTML/CSS. Thanks for drawing attention to his writing!
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.
…Yes? That's why you shouldn't set a base font size.
@@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.
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.
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?
@@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.
@@FrederikSchumacher could you give example of good font-family.
More from that blog please 🎉
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
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.
Stack Overflow has a dark theme btw
"Oh we dont like self-closing tags now" - ikr 😂
Where you find those blog posts?
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.
Reading blog posts on YT as a Netflix engineer 😅
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-)
I get much more value from watching these videos muted
Interested in the responsive type and zoom post🙋♂️
Update, all these posts look interesting to me lmao
"So few users change their font size" Except, you know, ones that can't see well...
What if LeetCode uses 13px for code font size?
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.
lol youtube has 10px default
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.
Using rem values is even better.
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)
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.
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.
Not trusting the user to choose the correct font size seem really reasonable.
You found a goldmine
"font size queen"
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
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.
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
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
And then you need to support iOS11 without all that features
Too much husle for project that isnt a blog
62.5% is actually a great concept and nobody will change my mind on that.
Yeah me too, and you can still zoom past 200% so what's the big deal?
It was probably 15 years ago when you only had ems and percentages as relative units.
TLDR don't be a dick, leave the base font size alone so the text can be accessibly re-sized.
Arc browser dropped win 11 version
Those Aidens are a-holes...
obligatory Lucia Scarlet mention
hi
@@luciascarlet i knew you would come. great to see you here
I disagree, you're not very dumb. You're smarter than others.
Incorrect take on 62.5%
Any CSS developer should know about the 62.5% thing 😂 (know, not use)
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.
@@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?
Setting a font-size of rem or em on rhe body keeps all the other relative spacing .
Must... resist... size... jokes!
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!
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...
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.
On behalf of the Cult of the Table Layout, I embrace your teachings
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
);
}
Whoa 1st
1:52 Oh, fun fact: youtube has "font-size: 10px;" on . The curse is here.
...
Also, it's in the style attribute... Double curse.
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.
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.
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.