freenrg
KPCKevin Powell - Community
•Created by Justine on 4/8/2024 in #front-end
how to make text responsive?
You can combine clamp with vw, like this:
font-size: clamp(16px, 2vw, 20px)
This will give you a font size of
- minimum 16px
- dynamically growing dynamically from 16px to 20px along within a certain range of viewport widths
- maximum 20px
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
73 replies
KPCKevin Powell - Community
•Created by Justine on 4/8/2024 in #front-end
how to make text responsive?
You can also use font-size: ...vw (for instance font-size: 1vw will be 1% of the viewport width)
Another approach is to use overflow-x and/or text-overflow to clip the overflowing text. If you use text-overflow then it may makes sense to apply also text-wrap: nowrap.
https://www.w3schools.com/howto/howto_css_responsive_text.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
73 replies