Any font using em to define its size automatically scales if I set the body’s font size to “4em”, for example. Those that are defined in pixels do not scale. Also, the text boxes themselves don’t scale, so you end up with huge letters going into a normal-sized text box.
I agree that the body’s font size should only be defined once and that all other font sizes should be relative (em).
I agree - though once i had a client (the buffalo jills web guy) who insisted that he wanted font sized displayed in pixels to counteract the “ctrl-scrollwheel bug that breaks my layout”. Sigh.
@samrueby : Why define the body’s font size?
scrollwheel hacks!.
You’re right: It doesn’t have to be defined explicitly. Implicitly, I believe the default is 16px? So if our base font isn’t that, we must define it.
1 Like
I agree with using em for everything. Isn’t that what we’re already doing? Are there still places in EWL where we use pixels?
Actually no, I don’t think so - there were some in a specific style sheet I was using. But I wanted to stress its importance.
Here is an article that indicates it’s important to use it for media queries as well: http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/
The article is saying that media queries using ems are unaffected (or is inconsistent) by the body’s font size, so no one should set the body font size.
I don’t understand the point of using em in media queries. em is a dynamic unit. Media queries are about querying device capability that don’t have anything to do with the document. Viewport width, orientation, color density, media type: none of these things have to deal with the content of the document. It’s weird to me that a web browser would render things differently, because certain media queries are applying/not applying, because the font size was changed.
Chalk it up to naivety, but why are you using ems in the media
query? What is the benefit? I always associated ems with font size only
so applying that to viewport width confuses me.
Comment by Ian Moffitt on 07/19 at 02:18 PM
Huh, they didn’t answer him.
I don’t have a great answer but I do know that a lot of people, including a lot of frameworks, set the font size to be 62.5%, globally, so that 1 em = 10 pixels, because the default font size for tons of browsers is 16px. This is obviously a flawed assumption but it’s pervasive anyway.
But my point is that using ems in media queries doesn’t make sense.
Sure it does, it’s just a different way of looking at the design.
If you look at the design in terms of readable text, then really basing viewport sizing on “how many pixels wide is this?” makes less sense than “how many characters wide is this?”
You can’t base a pixel-perfect layout off of this but it’s a sensible way of looking at design. In print design fields, (especially older ones like book setting and newspapery) it’s more common than in web design. Recently, though, i’ve seen a focus on it for responsive design stuff. With high - res displays too, i think pixels are starting to be a poor measure of the size of a page. A 10px font on a retina is going to be tougher to see, but if you offload all that pesky “how big should the letter A appear to be” decision making to the device rather than trying to take the reins on it at the server, it’s probably going to smooth out the design process a bit. You just have to shift focus.