⚠ I realized that I made a mistake in the fluid typography part. Using clamp() with viewport units is not enough, as this implementation can disable browser zoom for certain screen sizes, which is an accessibility problem. To work around the problem, you should use viewport units with (+ 1rem): font-size: clamp(1rem, 4vw + 1rem, 5rem);
size for ::marker and paddings best use relevant unit, for example if you use EM , you need worry size for marker if need changed font-size UL > LI or BODY, and same for padding.
There are not many subscribers on this channel. But the number of useful comments divided by the number of views gives us an excellent coefficient. Without water and extra sighs! )))
Zoran, something that I learned awhile ago when learning UI/UX is choosing a line height for the heading. 1.1 (110%) seems to be the go-to value, as it scales well while the font size changes. Do you agree or there's a better approach to it?
Thanks for your question, Jelil. 🙏 It depends. Generally speaking, the bigger the font, the smaller the line height you need. I would use 1.1 for a title/headline, but for paragraphs, something like 1.4 or 1.5 is usually better and more readable.
Zoran, great content from you ❤. I'm your new subscriber. One more thing I want to know from you is how are you able to highlight and zoom in to the code section you are typing? Its looks interesting, and I'd like to learn it.
Thanks so much, Jelil, and welcome to the CSS Weekly family! 🙂 I'm using Screenflow to record and edit my videos, so this effect is achieved by adding a Callout action and then Zoom Up along with starting and ending transitions. I got quite a few comments that it's distracting and unnecessary, so I use it a lot less these days. 🙂
@@CSSWeekly that's okay. If the majority of your audience want you to present in a certain way, you just go by it, so far as it doesn't make your work more difficult.
hey Zoran, how did you get the specific star symbol at 11:10 ?, I try the Windows emoji search but it give me only emojis at the search results, but not symbols(like the star you choose). by the way, I took the State of CSS 2023 survey and CSS Weekly is mention there 💪. Thanks for the great content.
Thanks for the comment and for watching! 🙏 This is a native MacOS emoji picker, and it seems that there are also Unicode characters present in the search results. I'd guess that there is some Unicode character picker app on Windows as well, or you can find them online, like here perhaps: symbl.cc/en/collections/star-symbols/ I've seen CSS Weekly in the State of CSS; it's an incredible privilege to be present there. Thanks for sharing this! 😊
Useful advice, but I don't think your advice about a responsive font is right. We do not use vw units for fonts. Kevin Powell explained it quite well in his video th-cam.com/video/veEqYQlfNx8/w-d-xo.html right here: th-cam.com/video/veEqYQlfNx8/w-d-xo.html Many developers make a mistake by spreading advice like this. CSS has its rules and it's up to us to apply them properly, for example because of accessibility.
Thanks so much for constructive feedback, Artur! 🙏 I've tried it out, and zoom seems to be working fine in my demo. And even in the video you've mentioned, Kevin suggested to use clamp() with viewport width units. Is there something else I'm missing here? 😕
For some reason yor second reply disappeared. 😞 But I see it now, Artur. Thanks so much for taking the time to explain it. "+ 1rem" seems like a reasonable solution to the problem. 🙏
Your CSS typography tips and tricks are game-changers! 🎉 As a web design enthusiast, I found your explanations super clear and easy to follow. These techniques will definitely help me take my projects to the next level. Thanks for sharing your expertise and making CSS more approachable! Keep up the fantastic work! 😄🙌
Welcome, Galdin! Thanks for watching and for your comment! 🙏 I'm subscribed to cssidoo newsletter, but I still haven't read the latest issue-I'll check it out right away! 🙂
I really like how browsers start improving typography now, like text-wrap: balance, or the ability to tune hyphenation! A quick tip for sizing inside typography, e. g. letter-spacing, text-decoration size/spacing and marker size and padding: I'd suggest using units like em or ch for that, so that they're automatically tied to the rendered font-size. This e. g. removes the need for adding another clamp for the marker font-size in your example. And for having the list-items aligned with the text, there's also list-style-position: outside, so no need for negative margins.
![[Live] ศึกมหึมันส์มวยไทยสังเวียนเดือด เวทีมวยชั่วคราวสวนสยาม | จันทร์ 30 กันยายน 2567](http://i.ytimg.com/vi/pM1k6f7JXUc/mqdefault.jpg)
⚠ I realized that I made a mistake in the fluid typography part. Using clamp() with viewport units is not enough, as this implementation can disable browser zoom for certain screen sizes, which is an accessibility problem.
To work around the problem, you should use viewport units with (+ 1rem):
font-size: clamp(1rem, 4vw + 1rem, 5rem);
size for ::marker and paddings best use relevant unit, for example if you use EM , you need worry size for marker if need changed font-size UL > LI or BODY, and same for padding.
Thanks for your comment, Антон! Indeed, relative units like REM and EM can help a lot with responsive typograhpy. 🙂
There are not many subscribers on this channel. But the number of useful comments divided by the number of views gives us an excellent coefficient. Without water and extra sighs! )))
Thank you so much, Max! This means a lot! 🙏
And I really do have the best viewers and subscribers! 😍
Zoran, something that I learned awhile ago when learning UI/UX is choosing a line height for the heading. 1.1 (110%) seems to be the go-to value, as it scales well while the font size changes.
Do you agree or there's a better approach to it?
Thanks for your question, Jelil. 🙏
It depends. Generally speaking, the bigger the font, the smaller the line height you need. I would use 1.1 for a title/headline, but for paragraphs, something like 1.4 or 1.5 is usually better and more readable.
@@CSSWeekly thanks a lot. 🙏
Knowledge of these little concepts go a long way to improve our design and development skills.
You're very welcome! Indeed they do! 🙂
Zoran, great content from you ❤. I'm your new subscriber.
One more thing I want to know from you is how are you able to highlight and zoom in to the code section you are typing? Its looks interesting, and I'd like to learn it.
Thanks so much, Jelil, and welcome to the CSS Weekly family! 🙂
I'm using Screenflow to record and edit my videos, so this effect is achieved by adding a Callout action and then Zoom Up along with starting and ending transitions. I got quite a few comments that it's distracting and unnecessary, so I use it a lot less these days. 🙂
@@CSSWeekly that's okay. If the majority of your audience want you to present in a certain way, you just go by it, so far as it doesn't make your work more difficult.
Thanks! I really appreciate and take into consideration any feedback I get. 🙏
hey Zoran, how did you get the specific star symbol at 11:10 ?, I try the Windows emoji search but it give me only emojis at the search results, but not symbols(like the star you choose).
by the way, I took the State of CSS 2023 survey and CSS Weekly is mention there 💪.
Thanks for the great content.
Thanks for the comment and for watching! 🙏
This is a native MacOS emoji picker, and it seems that there are also Unicode characters present in the search results. I'd guess that there is some Unicode character picker app on Windows as well, or you can find them online, like here perhaps: symbl.cc/en/collections/star-symbols/
I've seen CSS Weekly in the State of CSS; it's an incredible privilege to be present there. Thanks for sharing this! 😊
@@CSSWeekly Thanks for the answer ⭐
You’re very welcome! ⭐
Useful advice, but I don't think your advice about a responsive font is right. We do not use vw units for fonts. Kevin Powell explained it quite well in his video th-cam.com/video/veEqYQlfNx8/w-d-xo.html right here: th-cam.com/video/veEqYQlfNx8/w-d-xo.html Many developers make a mistake by spreading advice like this. CSS has its rules and it's up to us to apply them properly, for example because of accessibility.
But, that is why he used clamp, watch the video again ;)
Thanks so much for constructive feedback, Artur! 🙏
I've tried it out, and zoom seems to be working fine in my demo. And even in the video you've mentioned, Kevin suggested to use clamp() with viewport width units.
Is there something else I'm missing here? 😕
For some reason yor second reply disappeared. 😞
But I see it now, Artur. Thanks so much for taking the time to explain it. "+ 1rem" seems like a reasonable solution to the problem. 🙏
Your CSS typography tips and tricks are game-changers! 🎉 As a web design enthusiast, I found your explanations super clear and easy to follow. These techniques will definitely help me take my projects to the next level. Thanks for sharing your expertise and making CSS more approachable! Keep up the fantastic work! 😄🙌
Thank you so much! This really means a lot! 🙏
Here from the rendezvous with cassidoo newsletter!
Welcome, Galdin! Thanks for watching and for your comment! 🙏
I'm subscribed to cssidoo newsletter, but I still haven't read the latest issue-I'll check it out right away! 🙂
I really like how browsers start improving typography now, like text-wrap: balance, or the ability to tune hyphenation!
A quick tip for sizing inside typography, e. g. letter-spacing, text-decoration size/spacing and marker size and padding: I'd suggest using units like em or ch for that, so that they're automatically tied to the rendered font-size. This e. g. removes the need for adding another clamp for the marker font-size in your example.
And for having the list-items aligned with the text, there's also list-style-position: outside, so no need for negative margins.
Thanks so much for the feedback, Veit! These are all great tips! 👏🙏
I still have a lot to learn about typography. 🙂
I'm really happy to stumble over this video =) Gave me already 4 things that I will change in my future styling. Thanks a lot.
I'm thrilled to hear this, Timo! 🙂
Thank you so much for watching and sharing this! 🙏
Another great tutorial :) Thanks
Thank you so, so much! I appreciate the kind words! 🙏
great, big thanks
Thank you so much, Huynh! I'm thrilled to hear that you think it's great! 🙂
@@CSSWeekly hi, glad know you, hope see your next video with other content.
Most certainly, Huynh! I'm publishing new content every week! 😉
@@CSSWeekly wow, i'm glad when hear from you, respect you. Thanks again.
Thank you for watching, Huynh! 🙏