Design comparison
Solution retrospective
I'm used to adding a link for the font-family with a preconnect to the head section of my index.html but I recently saw that you can just add an import URL to the top of the CSS file. Am I understanding that correctly and is there a best practice?
I'm also used to using html { font-size: 62.5%;} but someone recently told me not to do that. Can anyone explain why? I learned from Mosh Hamedani that it makes calculating the font size easier because this way 1 rem = 10 px.
Community feedback
- @florianstancioiuPosted almost 2 years ago
Hi Zana,
I personally like to use the <link> tag in the head section to request the fonts, I don't like my CSS file to trigger any requests instead I want to see them all in one place, in HTML, I think it's more intuitive this way, but there isn't a best practice regarding this, you can do as you like.
As for rem, I also use
html { font-size: 62.5%; }
, I recently discovered it on my own (even though I have years of development behind me...). I think it's an awesome way of creating UIs and making them accessible while retaining developer friendliness. Where did you saw that rem shouldn't be used? I want to learn more about this too.Kindly, Florian
Marked as helpful0@HicksznPosted almost 2 years ago@florianstancioiu Thank you for your response! I submitted my solution on the Front End Mentor slack #help and got this response from Grace in regards to the font size of 62.5% :
"It's a really bad outdated technique because you're making the default font size way smaller than the users original setting If my base font size was 32px for example and that's what id expect going to your site you will have shrunk it down to 20px for me. That would then force me to have to go change my settings just for your one site. Terrible. Never force site users to work to use your site for the sake of what you've seen as a convenience Additionally, font size does not inherit everywhere. So even if you scale the font size back up on the body, say in rem, all it takes is for you to forget to scale it up enough on one non inheriting element for that to become unusable And in modern Web development this is completely unnecessary. There is no reason to even think in pixels. You can write scss functions or calc to convert if you really need to but the bottom line is a rem is a perfectly good unit of measure as it is. And css has so many units and functions now on top you can do so much more than be tied to designing like the old pixel days Back to first point though - golden rule is never change/override user settings "
1@florianstancioiuPosted almost 2 years ago@Hickszn I will stick with the current version of using REM, if Kevin Powell says that it's ok then I'm ok with it too.
https://www.youtube.com/watch?v=N5wpD9Ov_To
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord