Real responsiveness begins with using EM's, never ever using PX or REM. Understanding how many letters per-line wanted, 55-85 is the only acceptable number of letters per line. Mobile first. Then set break over points at 40em on body for desktop. And final trick to bring it all home is, @media min-width 60em body font: normal 1.13563vw, line-height: 1.25em
Otherwise I'd suggest that you are not even in the ballpark.
Also, for line-height, you don't need the unit. A unitless line-height is effectively the same as setting it as em. Not a big deal, but can save you a few characters here and there (I'd also suggest a bigger line-height than that, it seems very tight for body text).
No there are not accessibility issues if you're doing it right. The nicely done em breakpoints work just fine. REM is the worst thing that can be used in CSS, it defeats the point of em.
If I understood it correctly. The EM is related to the parent element. If you have let's say 3-4 parents and all of the parent element have different EM unit for the font size. If we have one child element which is inside the 4th element (parent element). Using EM will be nightmare to have control over the font size. Isn't it just better to stick with REM unit in regards to the responsiveness?
Not a nightmare at all, super easy, barely an inconvenience. If the code has 4 em modifiers deep the code isn't written well, should have at most 3. How is grabbing the root font-size that the browser decided upon going to be responsive? Side note, I factor in the browser selected font-size from the beginning. So if the person wants the font bigger it displays bigger and same for smaller.
Yes, we should have at most 3. I just made up an arbitrary number, but if it's not 3, who knows if someone uses 4-6 or something if we have to take over some other developer who made the code. Just something to be aware I guess? 🤔
I guess using a default browser unit that has 16px is a good starting point? You could, of course, use 20px as a starting point for your REM, but I don't see any issues using the 16px = 1 REM.
Just trying to understand and learn how other developers like you are anti REM (not trying to be offensive here).
Nothing really changes if you are 15 em's size changes deep, just .8em to go 20% small or 1.2em to be 20% bigger.
Correct me if I'm wrong, but REM was developed so that when you had 30 em's of size changes you could dump all of those em changes and get the root em.
Why don't you give my website a try schwarttzy.com/ Hold "ctrl" and press "-" or "+" a bunch of time the breakpoints work just fine. The font doesn't become unreadable at 8K. Zooming on phones works just fine.
When I zoom in and out, the font-size doesn't change, which tends to be the issue with setting fonts with VW. In general, someone's going to zoom because they find the text too small.
I have a 27" monitor, but my browser is never the full size. When I first visited, the font-size was actually really small for me, with the small text under the image on the right pretty much unreadable. If I went full-screen, it was nice and big and very nice, but I think most people would zoom in before adjusting the width of the browser to change the font-size. (if I made my window a little smaller, it seems to hit a breakpoint and the fonts got a little bigger, which helped).
Must say, the line-height was great though, definitely wrong on that front.
You might be really interested in using clamp() in setting sizes. Allows for a minimum, maximum, and "ideal". Browser support isn't perfect yet, but it's getting better!
Any chance I could get a screenshot? I never use my browser except in full screen. I do all my work from a small laptop. I bet if I added in minium px to the break over point I should fix the small font issue.
I'd strongly suggest not having font-sizes set using vw. There are a accessibility issues. If someone zooms in, your nicely done em breakpoints, they'll all function properly if someone zooms in or out. On most browsers, the font-sizes will not scale properly though, and it'll break a lot of the hard work you did. I'd stick with rem.
You could also set line-lengths with ch units, which is the width of the 0 character. So if you set p { max-width: 60ch` } it would be approx. 60 characters wide maximum.
I have had much better results long term using REM, of course, EM is great too. If you're using EM you just need to ensure that you plan ahead for nesting.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Real responsiveness begins with using EM's, never ever using PX or REM. Understanding how many letters per-line wanted, 55-85 is the only acceptable number of letters per line. Mobile first. Then set break over points at 40em on body for desktop. And final trick to bring it all home is, @media min-width 60em body font: normal 1.13563vw, line-height: 1.25em
Otherwise I'd suggest that you are not even in the ballpark.
Also, for line-height, you don't need the unit. A unitless line-height is effectively the same as setting it as em. Not a big deal, but can save you a few characters here and there (I'd also suggest a bigger line-height than that, it seems very tight for body text).
No there are not accessibility issues if you're doing it right. The nicely done em breakpoints work just fine. REM is the worst thing that can be used in CSS, it defeats the point of em.
If I understood it correctly. The EM is related to the parent element. If you have let's say 3-4 parents and all of the parent element have different EM unit for the font size. If we have one child element which is inside the 4th element (parent element). Using EM will be nightmare to have control over the font size. Isn't it just better to stick with REM unit in regards to the responsiveness?
Not a nightmare at all, super easy, barely an inconvenience. If the code has 4 em modifiers deep the code isn't written well, should have at most 3. How is grabbing the root font-size that the browser decided upon going to be responsive? Side note, I factor in the browser selected font-size from the beginning. So if the person wants the font bigger it displays bigger and same for smaller.
Yes, we should have at most 3. I just made up an arbitrary number, but if it's not 3, who knows if someone uses 4-6 or something if we have to take over some other developer who made the code. Just something to be aware I guess? 🤔
I guess using a default browser unit that has 16px is a good starting point? You could, of course, use 20px as a starting point for your REM, but I don't see any issues using the 16px = 1 REM.
Just trying to understand and learn how other developers like you are anti REM (not trying to be offensive here).
Not offended.
Nothing really changes if you are 15 em's size changes deep, just .8em to go 20% small or 1.2em to be 20% bigger.
Correct me if I'm wrong, but REM was developed so that when you had 30 em's of size changes you could dump all of those em changes and get the root em.
Why don't you give my website a try schwarttzy.com/ Hold "ctrl" and press "-" or "+" a bunch of time the breakpoints work just fine. The font doesn't become unreadable at 8K. Zooming on phones works just fine.
When I zoom in and out, the font-size doesn't change, which tends to be the issue with setting fonts with VW. In general, someone's going to zoom because they find the text too small.
I have a 27" monitor, but my browser is never the full size. When I first visited, the font-size was actually really small for me, with the small text under the image on the right pretty much unreadable. If I went full-screen, it was nice and big and very nice, but I think most people would zoom in before adjusting the width of the browser to change the font-size. (if I made my window a little smaller, it seems to hit a breakpoint and the fonts got a little bigger, which helped).
Must say, the line-height was great though, definitely wrong on that front.
You might be really interested in using clamp() in setting sizes. Allows for a minimum, maximum, and "ideal". Browser support isn't perfect yet, but it's getting better!
Any chance I could get a screenshot? I never use my browser except in full screen. I do all my work from a small laptop. I bet if I added in minium px to the break over point I should fix the small font issue.
I'd strongly suggest not having font-sizes set using
vw
. There are a accessibility issues. If someone zooms in, your nicely doneem
breakpoints, they'll all function properly if someone zooms in or out. On most browsers, the font-sizes will not scale properly though, and it'll break a lot of the hard work you did. I'd stick withrem
.You could also set line-lengths with
ch
units, which is the width of the 0 character. So if you set p { max-width: 60ch` } it would be approx. 60 characters wide maximum.I have had much better results long term using REM, of course, EM is great too. If you're using EM you just need to ensure that you plan ahead for nesting.