how to make text responsive?
please i struggle with this i already done with my ui just the responsiveness, i use json as dynamic data
39 Replies
Font-size clamp() generator
Generate linearly scale font-size with clamp()
Be sure that the second argument for the
clamp() function has rem or em. That way it still respects the user's font size choice. If you don't, then you're telling them how well their eyes should work and that's not very nice (nor is it accessible).
Also, you don't need to be as extensive as the link provided, a simple font-size: clamp(1rem, 0.875rem + 0.5vmin, 1.5rem); will suffice. Adjust the middle value as you wish to get the desired font size. I personally don't see the point of guessing what screen size someone will be using to view the page, but YMMV and all that.i just heard that now, im not familliar with that i only use px in fontsize
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
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
MDN Web Docs
overflow-x - CSS: Cascading Style Sheets | MDN
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property.
MDN Web Docs
text-overflow - CSS: Cascading Style Sheets | MDN
The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string.
MDN Web Docs
text-wrap - CSS: Cascading Style Sheets | MDN
The text-wrap CSS shorthand property controls how text inside an element is wrapped. The different values provide:
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
MDN Web Docs
clamp() - CSS: Cascading Style Sheets | MDN
The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.
In freengs example above don’t forget the 1rem for the middle value (
2vw+1rem ) to ensure accessibility as the_vanilla mentioned.
We have other units now so using pixels on font-size is discouraged to respect user agent styles. KPow had some videos about what units to use and why too
https://joshcollinsworth.com/blog/never-use-px-for-font-size
https://youtu.be/N5wpD9Ov_To?si=cij9a_6HPvoLEUt8
https://youtu.be/veEqYQlfNx8?si=TSntav466M4TBA_MKevin Powell
YouTube
Are you using the right CSS units?
There are a lot of different units that we can use when writing CSS, in this video I give some general rules of thumb of which ones are best suited for which situations.
Zell's article on media queries: https://zellwk.com/blog/media-query-units/
Em vs. Rem: https://youtu.be/_-aDOAMmDHI
Using clamp() for fonts: https://youtu.be/U9VF-4euyRo
The ...
Kevin Powell
YouTube
The problems with viewport units
Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts
Join the Discord: https://kevinpowell.co/discord
Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...
I can’t find one specifically about avoiding pixels in font-size but it’s def peppered throughout many of the videos, if you start watching a few from 2022 it’ll be mentioned
The problem with not using
em or rem for font size is that you’re ignoring any custom settings of the user. Which is very poor for accessibility.
Those with bad eyesight turn their font size up so they can read it. I’d you ignore their preferences and don’t use r/em then they won’t be able to read anything and leave your page. You’re telling them they aren’t welcome on your site. Which is not what the internet is supposed to be.
That’s why above I gave a clamp function that has em in all three places: it respects the user’s preferences while at the same time scaling with viewport sizemy font size is stuck at 16px when i use that code u provided
why is that so?
this didnt work as well
i mean its stuck at the same size
oh damn
suddenly its working
the range is only 16px-20px though
is it enough guys?
Personally I only think clamp fonts make sense for large headings you need to fill.
Standard text I just leave 1rem for the most part.
#depends but if it changes I only do it once in a media query too so I'm not a big fan of clamp for all font sizes.
So enough is relative to what you want xD
The code goes from 1em to 1.5em. By default that’s 16px–24px, so it’s almost working as intended. I’d double check those numbers 😉
You could increase the last number to 2rem if you really want…but without specific reasons to be that big it’s a bit overkill
thanks guys i already fix my problem
but how do you work with fixed with and height and still responisve?
Post about that follow up here https://discord.com/channels/436251713830125568/1227496825729060924
damn
i would use "vh" for the font size
is that fine?
or is it a bad practice
That’s horrible and awful
damn
Please read the above conversation as to why
but only below 500px
That’s…most mobile devices. And really shitty for any user
btw i put the last number to 2rem and i want it to be 2rem by default unless screen size decreases, is it possible to do that?
And considering a lot of users only have a mobile device. That’s shitty for most users
yeah
btw do u use media queries to make ur font responsive?
As long as you have a viewport unit as part of the second number you shouldn’t need to adjust any values
It’ll be small on small viewports and large on bigger ones
but its not happening
its stuck in 16px
in all sizes
i used this one
wait
it increases from 16px only when the screen is really big
once it goes above 1700px screen size
it changes to 16.1px
wouldnt it be just fine if i keep font size fixed at 16px then
You can keep it at 1rem, sure!
Note the
vmin, so you might have to look at the side of your viewport.
Also note that I said “adjust the middle value as needed”. There’s no one-way-to-do-it-rightohh
btw what does the middle value do?
MDN Web Docs
clamp() - CSS: Cascading Style Sheets | MDN
The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.
man i feel like making text responsive will take a lot of effort
You could use utopia calculator.
(1) is the minimum screen size where font size (2) will apply.
(3) is the maximum screen size before the font reaches it's biggest size (4)
Using that link, you will have 5 generated fluid font sizes.
It’s 100% optional. As long as you use rem and em it’s responsive
Fluid type isn’t required
damn
thanks
ohh
It's mostly to prevent fonts from jumping between sizes and IMO it's easier once it's set-up. I don't see a downside to it.
Most sites dont use it however.
That assumes you want/need to adjust font size. Which is almost never required
Again, it’s optional
btw can i ask what do u use
do u keep it at
That’s what I always start with. Then I adjust based on font used, purpose of the site, etc