Wouldn't a max-width of XXch for p tags cause lots of blank space on larger resolution?
I was watching "Under the radar CSS features for your CSS reset" video by Kevin and in it he suggests doing a max-width of 75ch on the p tag, he does say that is his suggestion and the value is up to us but I am thinking if you limit it like that then lots of dead space can start showing up on large resolutions right? And would that not got against the purpose of response design? Or am I miss-understanding something?
7 Replies
The idea is to limit the length of each line so that you can read it comfortably no matter the resolution. If you are old enough, you might remember newspapers and magazines and realize how narrow the columns were back then. Although that's actually for different reasons, the same principle of making the jump from the end of one line to the next remains the same.
But as mentioned in the video, feel free to adjust it to your liking.
yeah, like Joao said, it's to improve readability. When you have really long lines of text, it's very hard for your eyes to seek back to the beginning of the next line, because your eyes will wander up and down. It makes text very hard to read.
As for dead space on large resolutions, that also depends on how you set up your font and font size.
ch will set the width of your p tag to 75 instances of the 0 character in your font and font-size for that element. If you have a variable font-size, say using clamp and calc with a vw component (never only use vw or vh, always include rem or em), or using a media query for large resolutions, then the p will grow along with the font
To add even more though: it's a sane default, and then you test your site and various resolutions to make sure it remains usable and/or still looks good at a variety of screen sizes and resolutions.
You can't get away without testing, and even if you don't test for ultrawide screens or whatever, your user would rather have dead space than have to run their finger along the line to find the start of the next one if it's way too wideThanks for the feed back guys. I had forgotten about using a clam for variable fotn size. I do make sure to test my site. Ut I dont have access to anything larger then 1440p or any wide screens so I have to go off what I can build in my head and then wait to see if of my friends/acquaintances give me feed back when I ask them.
you can kinda emulate wider high res screens using the responsive mode
just set the resolution to your target and adjust the zoom until it fits
What do you guys find is a good rang to use for font size?
if you are lazy like me you could consider a generator like https://utopia.fyi/type/calculator
I also second using clamp, it makes life so much easier and then padding and margins set in EMs scale with it