Hey everyone! 👋 I'm on a quest to make my websites more responsive and I want to tap into the wisdom of fellow web developers. There's so much conflicting advice out there, and I'd love to know which CSS units you all trust for different elements. Here's what I'm curious about:
**For Fonts:** What's your preference? Do you lean towards `rem`, `em`, or perhaps `clamp()` with viewport width (vw)? Do you use fluid typography or stick to breakpoints?
**For Padding/Margins:** What do you find works better – `rem`, `em`, or `%`? Do you mix units, or keep it straightforward?
**For Heights/Widths:** How do you choose between `vh/vw`, `%`, or `rem`? When do you go for `min-height` vs fixed heights?
To sum it up, I'm looking for your:
1. Go-to unit combos that really deliver
2. Units you think should be avoided
3. How heavily you rely on `clamp()`
4. Best practices for mixing units safely
5. Any mobile-specific concerns with vw/vh?
I've heard good things about using `rem` for scalability, `clamp()` for typography, and viewport units for sizing, but I've also come across potential pitfalls like `em` cascading issues and `vw/vh` accessibility concerns. I'm eager for practical insights from those who've navigated the challenges of responsive design! Thanks a bunch! 🙏
4 Answers
For text, I mostly stick with `rem`. I find it gives me a consistent experience, and I usually check for issues within flex boxes. If something looks off, I just add media queries for breakpoints.
Regarding padding and margins, `rem` or `em` works for me, and sometimes I mix in `calc()` for more complex layouts.
In terms of heights and widths, I usually go with a mix – `vh/vw`, `%`, and sometimes `rem` or even `px` when I need exact sizing. It all depends on the context! I’d say stick to what feels right for the use case, and typically you want that flexibility to adapt across devices.
Overall, I favor `rem`, `vh/vw`, `%`, and `px` for the structure. I tend to avoid the more obscure units like `mm`, `cm`, and `ch`. And as for `clamp()`, it's just not something I’ve explored much yet.
Right, and for paddings and margins, it’s really case-dependent. Sometimes sticking with `px` makes sense, especially around icons.
I recommend sticking with a solid typography system using breakpoints. Keep your margins and padding to a single unit for simplicity. Heights and widths will vary based on what you’re trying to achieve, but remember that units only become an issue when misused. I avoid using pixels if I don't need strict sizes. The percentages are less used in my case, but viewport units can work well when you want to cover a specific portion of the screen.
Exactly! It's about how you apply those principles. Sometimes those specific units aren’t needed at all.
Totally agree! I think the misuse of units often leads to problems down the line.
I feel like this discussion is blending two separate ideas: responsiveness and font size adjustment. You can use breakpoints for font size, but also consider `vw/vh` as alternatives. Just don’t forget to multiply by `rem` to respect user settings for font size. My general rule is to use `rem`/`em` for font sizes to give a nice scale, avoid fixed `px` for everything to ensure accessibility. There’s a balance to find, but this should get you on the right path!
After many redesigns, I find `rem` works brilliantly for fonts. It keeps scaling predictable, and I use a combination of `clamp()` with `vw` for some fluid type. For spacing, I’m all in on `rem` too; it’s just simpler. Avoid using `vh/vw` for height on mobile, though – it can be a headache when browser elements resize and cause layout shifts. And for units to steer clear of, definitely skip the traditional `px` for elements that should scale. Instead, focus on steady, reliable units to minimize cleanup later.
Yeah, I totally get what you mean! I've avoided units like "mm" too- they just seem frustrating to manage. And I agree, `calc()` can be super handy for adjusting sizes nicely.