CSS: Base font size (set in browser) and responsive design

Question

I have tried to design as responsive of a website as possible (barring having set up special stylesheets for iPhones). To do so, I have set all of my font-sizes to "em". Our website just went live from test development, and one of my coworkers sent me a screenshot from his home computer, where the base font size of his Firefox has been set to 24pt. ([See screenshot here.]) Such a significantly larger base font-size (imho) is not something I had account for in the design. I know that it isn't good practice to override user defaults, but where this is a primarily graphic-based experience (especially on the front page), and the text needs to remain contained within the specified boxes - as you can see, the larger font-size breaks the design.

Here are what I deem to be the significant extracts from the css:

body {
    background: white;
    font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-size: 1em;
    color: #858585;
}

.item.news.priority h2 {
    font-size: 1.25em;
}
.item.news h2 {
    font-size: 0.9em;
}

You can visit it live at www.loeuf.com.

What are your suggestions? Override the body font-size with a pixel value, or just the h2 elements that are breaking the design? What's the best practice?

Solution 1

While I agree somewhat with c_kick's comments on the use of em, part of a truly responsive design is to allow the user settings to come into play. That means letting the browser default remain as the default. After all, you don't know if the person viewing your site is nearly blind and in need of large text sizes because of that. So setting a default px on the body is going to void that type of "responsiveness," which I believe is partly what you intended.

Now, if you don't care about that, c_kick's solution of setting a px base on the body is valid (and the easiest).

If you desire to keep that user responsiveness, but have it work well graphically, then you need to play around with doing one of two things (I'm not certain the second could be easily made to work, it is just an idea thrown out in contrast to #1, which I'm sure could be made to work):

1. Either set up and allow the images to scale in proportion to the font size (so em based scaling on the images, or having the text size driving the container height to which the image then scales), or...
2. Set up the margin or padding around those images (but not the text boxes) to an em sizing so that the "gap" around the images scales in some proportion to how the text might be scaling.

Solution 2

I found totally useful to specify base font-size in pt and all other sizes in em.

So, for example, specifying following setting:

html * {
    font-size: 12pt;
}

I definitely know that each letter of text with font-size: 1em will occupy

12pt = 12 * (1/72 inch) = 12 * 0.35 mm = 4.2 mm in width

no matter the resolution - be it 800x600, 1024x768 or 1920x1200.

It significantly simplified designing of site because if I specify width: 10em for e.g. button I definitely know that this button will have 12pt * 10 = 4.2mm * 10 = 4.2 cm in size.

Also, site designed on 15" monitor with resolution 1920x1200 looks almost the same on 15" monitor with resolution 1024x768 - which is very convenient for designing.

So currently I only bother for actual (physical) display sizes and aspect ratios which doesn't vary as greatly as resolutions and are far more predictable.

Comments

[jessica_b]

Thanks Scott. Your suggestion #1 is what I thought perhaps the best practice would be - but since the blog is set up in Wordpress and I am already allowing a lot of customizations and different variables for the featured image thumbnail sizes and the size of the blocks... It's very dynamic and there are so many different cases. Incorporating scaling of images based on default browser text size would, I think, be the straw on the camel's back as to complexity. I may be wrong though, as an architect I should embrace that kind of thing.