POLL/DEBATE: Double Browser REM for H1 Size
Do you guys use 32px (2rem) for your H1 font size? Why so? Just because it's the default? Do you need/use anything bigger (if so, please let me know)? IS there a reason for this "magical" size?
Background: I was thinking of using 40px for my new "font ramp/scale." But everywhere I look I keep finding this 32px value.
9 Replies
Thinking about fonts in PX size is not helpful at all, tbh. The actual size will of course depend more on the design than anything else, but please never use px to set font sizes anywhere. Whenever you set a font using px, the browser no longer respects any font size increases set by folks for accessibility reasons. Doing so basically tells a good 5% of your users that you don't give a crap about them, and that they should just leave
I understand that, and I've watched a good number of videos explaining this. Let me rephrase my question:
Why do people use double the base of 1rem (16px) for their <h1> tag?The double of the browser root is 32px or 2rem. But why stop there? Is it bad to do 2.5rem for your <h1>? I keep seeing this almost stop at this seemingly strict and "safe" size for the <h1> tag. I've been gathering word that most people think that anything above 2rem they wouldn't use or is unnecessary
I think it's too design-dependent to give a broad answer to that... there's designs that use way bigger
are you talking about a specific type of design here?
Not really a specific design, I mean there are a few examples, it's just I always find they stop their heading sizes at 2rem.
2x base font size is a good size so that it:
* Gives room for other header sizes
* Is extremely obvious that it's a header
* Is not too big and doesn't take up too much room
* Maintains backwards compaitibility
A lot of CSS defaults were made back in the day when everyone and their mother had the same monitor size: 1024×768. And part of the Web Guarantee™ is backwards compatibility—any website made in 1999 still functions today. So there can't be any major changes to defaults (one of the reasons that the
body element will always have 8px of padding or that box-sizing: border-box; isn't the default).
Can you have an h1 larger than 2rem? Sure, there's nothing wrong with that. Should you? That's another question entirely! And the answer is, as always, It depends™. For example, if all your h1s are in a hero section then yeah, make it like 3 or 4rem. As I'm very fond of saying: you can change whatever you want, just make sure there's a really good reason for it; don't just randomly change something because you can!I think most places that use 2rem just don't change it from the default. Why is that the default? Well, something had to be, and for general documents (which the web was for), it works well.
Like Jochem said, after that, so much of it is about the design of the site, and what the site is for. For text heavy, like documentation, 2rem is probably fine. For more design heavy things, they'll use larger sizes.
Hot take, don't tie semantics to design, h1 does not have to be bigger than other text but it does need to be used semantically correct.
This goes for all heading levels
I wish that didn’t have to be a hot take. Semantics over everything
Thank you guys for your feedback!