Dynamic Font Size CSS with clamp()

by | Sep 14, 2021 | 0 comments

Dynamic Font Size CSS with clamp()

by | Sep 14, 2021 | CSS Tips and Tricks | 0 comments



Did you know you can create truly dynamic fonts, widths, margins, paddings, and more with clamp(), the native CSS function?! As of the time of this video, it’s available in 92% of browsers used every day around the globe.

# Links
– Is it ready for production? https://caniuse.com/?search=clamp
– MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
– Awesome CSS Tricks article: https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

# Timestamps
0:00 Introduction
1:22 min() function
2:08 max() function
3:38 clamp() function
7:05 Truly linearly-scaling fonts

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>