You can access this article in portuguese here
Você pode acessar este artigo em português aqui
I love being part of technology communities. Besi...
For further actions, you may consider blocking this person and/or reporting abuse
This reminds me of a university project where one of the requirements was a 10-page paper, so I kept upping the font size until it went onto 10 pages. I think when I handed it in it was 46pt.
I did not do well.
This is very true. For more fluidity, I use
em. And yes, you do not need media queries to make responsive sites. I use this a lot and when I show others the little media queries I use for responsiveness, they marvel 😅That's nice! I use
ema lot on my paddingsPretty insightful article on REM and responsiveness! I would also like to add that you can make the font-size responsive without using media-queries by using the clamp() function in CSS.
font-size: clamp(minimum_size, increment, maximum_size);
We set a minimum size for the text, and when we increase the screen size, the increment will do that font size increasing and then it will stop increasing when it reaches the maximum size.
It's supported by all the major browsers (except IE) so it's good to use.
Excelent, Khair! I am actually going to talk about
clamp()on the next article about fluid typography =DThank you for reading
You're welcome =D
As a backend dev who sometimes pretends to write CSS, I use
clamp()and some linear function to keep things responsive.I try to avoid
rembut now I know why ^^. Thanks.Oh,
clamp()is really useful, and I am going to talk about it on my next article, about fluid typography!Thank you for reading =D
very nice. I'll read it!
Thank you for this article! Very informative.
CSS and typography are like two dancers along the Beautiful Blue Danube.
If I may, what are your thoughts on native intrinsic typography? Native, as in without dependencies.
Possible?
Really happy you liked it!
About intrinsic typography, thank you for bringing it up! I hadn't read anything about it.
I'll delve into it
Great article. I work with responsiveness and accessibility mostly every day and I still learned something from this! Excellent work.
Also, are we going to dig into
clampnext?Hey, TechSnack, I am really happy to read your comment!
Yeah, we are going to cover clamp and vw units on the next article on Fluid Typography. Hope you like the next one too =)
I bet I will enjoy it. I learned some of the deeper reasons behind why certain things are implicitly done the way the are.
I always enjoy having a deeper understanding of the why's and the how's rather than just the how.
Keep up the great work!
There are of course still use cases for absolute measurements like px.
Imagine a text paragraph on a small screen, with some horizontal padding. It would not make much sense to increase the padding with the font size, this would waste precious space. So in this case I'd still prefer px values for the padding.
Oh, yes, drubb. I am mainly talking about font-sizes here. Of course in some properties you could use px, like border and box-shadow (even thoug you could use other units too).
For paddings I normally use em, and in some edge cases I could sprinkle some px, even though I propably would go for vw in that case you mentioned.
Thank you for reading and for the discussion =)
Very informative, thank you very much
Thank you for reading =)
Using
emas the default unit to createresponsive websites is incredibly convenient.
However, it does not respond to system fonts.
It can help indeed, Yeom. I just wouldn't recomend using
emfor font sizes because a change to the HTML structure could ruin your typography system.I love using
emfor paddings, for example, since it is always pointing to the same element.Thank you for reading!
Very interesting, I had no idea that px were absolute like that!
I'm happy it helped =)
🤔🧐
Actually all modern browsers handle adapting font size in px according to user preferences...
px css unit doesn't actually rely on screen pixels but reference pixels, equivalent to 1/96 inches, meaning dependent to the density of screen in dpi but also the zoom level of the browser.
I don't really see a good reason using rem instead of px excepts increasing difficulty of code.
I don't think that's true. I just tested Chrome and Firefox and neither adapt rendered font size defined in
pxto font default settings.Appearance -> Font size: very large(Chrome) orGeneral -> Fonts -> Font size(Firefox) don't affect font sizes when they are defined in Pixels. Percentages orremon the other hand do respect the default font size.Indeed my mistake. As mentionned in my reply to @marcelluscaio I was refering to zoom level, I didn't knew this font size setting.
Great demo, Stefan! Interesting to notice that in font-sizes the percentage unit refers to the default font-size, so 100% is equivalent to 1rem
Sorry, but that is not the case.
They do scale font with zoom, but if you set your font to pixels they are not going to adapt it to the user's font preferences.
So, you should not set your font size in pixels.
And I know it takes a while to adapt to writing in REM, but you eventually get used to it =)
And yeah, pixel actual size varies from device to device, due to screen density.
What difference do you make between browser zoom and user preference ? Can you provide an example ? Thanks
Changing the default size is like this: chromestory.com/2022/09/change-tex...
On the other hand, when you zoom in, browser adapts content, unless it is related to viewport size.
Again, using REM is not outdated in any way.
Thanks for the precision, didn't knew this feature.
ahh... learn something new everyday, thanks for sharing this!
Thank you for reading =)
for 1sec I thought this was about sleep and circadian patterns in human biology
maybe next time 😇
Having a good night's sleep certainly helps with everything - including building better websites, Malik! xD
Nice and Informative!!! Picked up a few concepts from this.
I'm happy to read that =)
This is a great article, probably the best explanation about how and why use rem i've ever read! I really appreciate that ( and also the rest of the article of course ) I will for sure apply what i read in my projects to come, thanks for this great work! 😁
This comment fills me with joy =D
Thanks for reading and leaving a comment
Thank you for writing it! 😁
Really, I saved it to share to anyone needs a good explanatin about the topic 🙏
Hope to read more like this 😃
Amazing article, you saved me lots of hours! I will save it between my favorites! thank you!
what are your thoughts on changing the root: element font size based on media query/clamp,
instead of changing each heading/text font size based on media query/clamp?
isn't it enough to change the root font size to make it responsive?
cheers!
I've been using and advocating for REM for years. But lately I feel It doesn't make much sense.
If users couldn't change font size and could only page zoom, no user would miss REM because page zooming on a px based site works just well as font resizing on a REM based site.
As a designer and developer, I do like the idea of having a unit the is related to the body font size and I think in REMs rather than in pixels. But in the real world,
But the point is setting the custom font-size instead of having to zoom all the time. I see it as a really low hanging fruit, and it is one more possibility for our users, no need to take that away from them
Amazing article! Thank you! 😄👍
Thank you so much!! Very informative. Looking forward to reading the clamp() article.