How to Make Font Size,Margin,Line-Height and Letter-Spacing Responsive for <p> and <h1-h6> Elements?
I want to create responsive styles for the following properties: font-size, margin-bottom, line-height, and letter-spacing for both <p> and all heading elements <h1-h6>. Are there formulas or best practices for these properties so that they look good across both very small and very large screens?
Looking for guidelines or CSS solutions to handle these style properties in a way that ensures readability and good spacing on different screen sizes.
21 Replies
are you a dev?
At least i try to be one
My suggestion is to use
em for anything spacing-related. That way smaller font sizes have smaller spacing and larger font sizes have larger spacing.
If you really want to go gonzo you can do a small bit of font size foolery:
That will let your base font size grow between 1rem and 2rem with a small growth factor in the middle. Note that 1rem is whatever the end user sets their base font to be, and if you change any font size YOU NEED TO USE REM. If you don't have rem anywhere in the formula you're ignoring the user's defaults and that's just like telling them you don't care if they can't use your site. Don't be that person. Don't exclude. Use rem for all font sizes.
Also, as an aside, do you have a reason to change the defaults? If you don't have a good reason (and "I want to" is a horrible reason, FYI) to change something…then don't. The defaults are pretty sane, especially for headings and paragraphs. Y'know, the most-used elements :pbut it should be
:root {}.
::root {} may also work, but it should be single colon. Same as it works to do :before, but it should be ::beforeYou're right, it is only one colon. Fixed, thanks 👍
the
:before and ::before is a different case, as it used to be :before and with css3, it was changed so pseudo-elements use :: instead of :, to avoid confusion with pseudo-classes like :root
adding to this, there are some formules you can use to calculate the font size based off of that --1rem
for example, for a small text or description, you can multiply by 0.833 or 0.694 (minor third, according to some generators i found)
for example, check typescale.com and you can grab the rem value and use as calc(1.2 * var(--1rem))Mixing music and text is not that good of an idea, honestly. Sure it sounds good (get it? sound? 🤣 ) but in practice it gives realy wonky text sizing
yes, but it is a starting point
if it looks bad, change it
Or don't use it and go with font sizes that look better out of the gate
those dont tend to be very loop friendly
but you are right
but hey, whatever looks best for your result
If you start with 1rem being paragraph, then that's h4 also (usually). So h3 would then be 1.2rem, h2 would be 1.44rem and h1 would be 1.728rem.
Or you could stick with the defaults and have p/h4 be 1rem, h3 be 1.17rem, h2 be 1.5rem, and h1 be 2rem. That's a lot of work to get almost the same results
it can be made super easy with scss, but you are right
Regardless of the tool used, it's extra effort to get so close of an effect that most people won't notice. Stick to the defaults unless you have a good reason to change things. And type scales are honestly just bad. They lull you into thinking that "just multiple the prior by a magic number and it'll be all good!" But it's not good, it's either "close but more work" or "looks bad and more work". Either way, more work is not a good use of your time.
sometimes, a bigger title is in order
but you are absolutely right
Right, and at that point you're doing it with intention
there are many available ratios and the major and minor scales are just based off Maths anyway and so a few are used as the same familiar names for same ratios used. Youre entitled to your opinion and your preferred way to make responsive text frameworks (or just leave it as default), just like everyone else is entitled to theirs.
Aural patterns and visual patterns don't always match, and any time someone gives a one-size-fits-all solution is probably wrong. There is no such thing. You need to figure out what works for your content. You might get lucky in a few instances when it lines up, but that's not cause to think that it works everywhere.
i agree that its not one size fitss all and you should use what works with your content. however if you renamed the major third to One and a Quarter Ratio on clamp generators, it ceases to have any connotations of musical scales and is just a ratio 1:1.25. that ratio is used in all kinds of things not just music , so it cant be simply boiled down to visual vs aural patterns.
But again, why? 1.25 is so close the the defaults that it's more of a rounding error. Why go through the trouble of using that as your scale modifier and add that extra work if it doesn't change anything significantly? My mantra (and the hill I will die on) is don't add anything without a solid reason.
If there's a specific and sound reason to do it, sure. But "let's use a type scale" is not a good reason.
Gives ppl a place to start I guess? I don’t use any of the default ratios for my own frameworks, 1.25 and 1.2 is very close to the defaults but the defaults don’t scale down based on screen size. H1 looks like it’s 32px whether the screen size is 1280 or 320.
I use this to, it's great