Question

Ok, so I have a client complaining about how a user who set their fonts too large in Chrome causes the site to render badly–which it does. My natural reaction was to tell them that we could either shrink the font for them or they could just tell people to use normal fonts for their browser. I know that it is a good practice to try and make designs that accommodate as many browsers as possible, but there has to be a limit. People do some crazy s%^&. It seems to me that you have to tell people to just deal with it after a while or you will never be able to actually do anything that actually looks good for 99% of users. Anyways, does anyone know of a work around? I will also take opinions on a good response for the client.

Update

Ok, so figuring I set the page to use em instead of px. What about ASPX controls that you can only specify an integer value for the height and width? I assume this integer value would be set to pixels.

Answer 1

I think your client is well within his rights to point this out. Generally the reason people will set browser font sizes above the “normal” threshold is because of poor eyesight. For that reason it is not only good practice but a mark of decency to accommodate people who are not fortunate enough to have 20/20 vision.

The solution to the problem is using em sizes and min-widths. while this will not produce pixel perfect layouts, it will produce perfect relative layouts. All layouts will have exactly the same proportions no matter how large the or small the font-size.

It turns out that calculating sizes of things like buttons is also much easier when using em‘s.

Here’s how you do it.

body {
    // Allow the font size to be as big as the browser wants.
    font-size: 100%;
}

.main-container {
    // allow you body container to stretch as big as it needs
    // You could also specify this in em's
    min-width: 960px;
}

.button {
    // want some bigger text, that's fine
    font-size: 1.2em;
    // the rest of button is now normalised so 1em is actually 1.2em

    // set the width by counting the characters in the button text
    // remember to take any padding on the button into account
    // in the width
    width: 10em;
    padding: 1em;
}

It’s pretty easy to get close to pixel perfect using em‘s just try to remember that the normal browser font size is around 16px so 5px is roughly 1/3 of 16
so in em‘s 0.3em.

In other words as a guiding hand or general rule to calculate sizes.

    0.3em = 5px

The thing you have to remember about em‘s is that they inherit from the parent container.

e.g.

.my-content {
    font-size: 1.2em;
}

.my-content .my-paragraph {
    font-size: 1em; 
    // this is actually 1.2em because it inherits and normalises
    // from it's parent
}

my.content .my-paragraph .my-span {
    font-size: 1.2em;
    // is 1.2 + 20% 
}

it will keep chaining down like this. So the rule is, only specify font-sizes directly on the the element to be styled not it’s parent.

The great thing about your site now is that it will look perfectly formed at any size. Which will be great on the plethora of mobile devices, tablets, high-res monitors, 50inch flat screens or 50ft informational display’s.

And you helped all the people who have poor eyesight view your site and your hard work in all it’s relative beauty.