Grow your CSS skills. Land your dream job.

Non-Default Browser Font Size Preferences

  • # March 29, 2013 at 10:13 am

    A big issue has come up at work lately which is what to do when users set their default browser font size to something other than 16. For example, one of our designers keeps her browser font size to 14, and then complains when things don’t look the way she expected.

    This has caused her and one of our developers to advocate pixel font sizes everywhere. However, I’m all about the relative units (rems, especially), and insist on keeping it that way.

    The normal way I set my default font size on a site is to calculate its percentage based on the default 16 pixels (so if the default font for a site should be 13px according to the design, I do something like `HTML { font-size: 81.25%; }`).

    Now I’m getting bugs reported to me that only exist when the default browser font size is set lower than 16, and true, it breaks the page in very ugly ways. But is this a big deal? Should I be setting the font size for the HTML element in pixels? Should I be ignoring this as a fringe case? Neither of those options sounds particularly appealing.

    Has anybody else encountered this issue and come up with a good solution? I really need some advice on this!

    Thanks.

    # March 29, 2013 at 10:38 am

    It’s hard to predict users settings and design for it. I think you’re doing the right thing by using browsers default size. She is explicitly changing the settings, so why is she complaining? I don’t get it.

    # March 29, 2013 at 10:46 am

    Can she provide some stats on how many of your target users change browser font size?

    IMO, design with browser baseline in mind. If users feel the text is too small, they can change the font size by increasing it in browser.

    Maybe implement some kind of +, -, functionality to change font size if this is such a big issue.

    # March 29, 2013 at 11:19 am

    I don’t get it either. If she expect websites to look the same when changing default font settings, why change them in the first place?

    By the way I like websites that respect user preferences, I like the default 16px because I like to lean back and relax while reading text.

    # March 29, 2013 at 12:14 pm

    I prefer appropriate font sizes. What I mean by that is I feel it is unnecessary and very annoying when reading content on a site like Trent Walton’s which has enormously large body type. The result of that forces the user to scroll more which we all know, the less the user has to use the mouse and/or keyboard, the better. Not to mention you can see it from across the room. Unlike @crocodillion, I don’t sit back when reading. My laptop is usually where it was designed to be. This is just my opinion on the topic of font size.

    # March 29, 2013 at 12:35 pm

    My opinion: people who use a zoom level (either for entire page or just font size) should not expect the site to look perfect.

    Same with people who disable Javascript, turn off images, use IE6, etc.
    I’m not trying to be a jerk about it, but when you change settings to cater to your own personal browsing experience preferences, you’ll just have to deal with the fact that it may have a negative impact on the site’s “out of the box” functionality. Developers can try to please the majority, but not every single person out there.

    # March 29, 2013 at 12:54 pm

    Thanks all for the thoughts.

    For the purposes of our current project, we’re going with defining the HTML font-size in pixels, and using rems from there. It seems a bit dirty to me, but it seems to be the path of least problems, at least on this end. We might decide to change that later, but that’s a discussion for another day.

    Would still appreciate others’ thoughts on how you handle this issue at your shop.

    – t

    # March 29, 2013 at 2:40 pm

    Trent Walton’s site doesn’t respect user settings either.

    I think what you’re saying Chris is (or should be) the beauty about user settings. For me, I like the default 16px, but some people surf internet on tv, maybe they like Trent’s 24px, you might like something like 13px more. In a perfect world the user would choose his or her appropriate font size.

    # March 29, 2013 at 2:54 pm

    Yes, in a perfect world. Unfortunately, that would break many layouts across the web. I think Trent is just obsessed with large font sizes for body copy. He did the same thing on Mark Simon’s redesigned site. Looks horrible.

    # March 30, 2013 at 6:25 am

    No argument there :)

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".