Design comparison
Solution retrospective
I just want to know how to set the size of the font for small screen sizes and also how to be perfectly responsive
Community feedback
- @obriedanPosted over 2 years ago
You can set your font size to be variable using
clamp()
. It works by taking three values- the smallest size acceptable
- the target size
- the largest size
You can use it many ways in practice, however a quick and simple method is to determine the minimum and maximum font size in PX (or better REM) and use Viewport Width as the target size.
for instance
font-sze: clamp(0.75rem, 3vw, 1rem)
If you're unsure about which target size to use, you can input a value and use dev tools + resonsive mode to slide between your viewports. Monitoring the computed font size will show you if you hit the correct minimum and maxium sizes.
Marked as helpful1@mohit1607Posted over 2 years agoThank you very much @obriedan for your valuable feedback
0
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