How to prevent users from resizing the font on my web site?

Question

How to prevent users from resizing the font on my web site?

Answer 1

You can't. Font resizing takes place on the client side over which you simply have no control. Users are free to increase or decrease the font size as they please.

If you're worried about your page markup breaking at bigger font sizes, then simply ignore it. There is no way to create a more or less sophisticated design resilient to any possible font size variation. And if the user chooses to play around with it, then it's ultimately their fault if the markup breaks. But they are likely accustomed to seeing broken pages already.

Anyway, modern versions of browsers (IE, FireFox, Opera) simply scale the rendered page leaving relative proportions of elements intact. The problem is solved.

Answer 2

You can't do that. Browser's "zoom" controls are not in the power of the developer to adjust. Besides, the "font" will be different based on different screen resolutions (if your font size is in pixels, for example).

Answer 3

that's a bad idea. don't alienate the users.

Answer 4

In fact, you should allow font resizing for accessibility reasons. Thanks ;=)

Answer 5

I don't know if is your case, but sometimes when people ask this is because their layout is fixed. Web is not meant to work like that.

Remember The Web is not Print

Answer 6

what about converting your text to image.

Answer 7

Publish as PDF. As others have said, HTML was not designed as a print medium

Answer 8

not a good idea, why do you want to restrict the users , any reason?

Answer 9

Its the law in the UK that you should not provide a website/servic that restricsts access to those with disabilities.

From 1st October 1999 a service provider has to take reasonable steps to change a practice which makes it unreasonably difficult for disabled people to make use of its services

Disabilty Act

Although this law is not enforced, it is seen as "The Code of Practice which specifically mentions websites".

Its only a 'code of practice', and not everyone follows it.

Answer 10

I guess what you really want is to keep the image-text-ratio as it is, because your customer insists that the user gets a consistent, fixed layout (even though you tried to tell him that this is not how the web works).

In that case, an easy workaround is to specify font sizes in px units in CSS. That way, the user will still be able to use the zoom function of his browser, but the relationship of your 15px font to your 150px image will always be constant, independent of the user's font size or dpi settings.

Answer 11

Specify font sizes in pixels. I don't recommend it though.

Answer 12

Technically you cant, but what you can do is:

1. Recreate everything into flash site
2. Disable zoom-in, or right-click menu when embed your flash to your site. (just google how to disable the right-click menu, very easy, something like, "allow-menu=false"

Thats it. MOST of users cant resize the font now, unless they know how to hack =)

Do it, if you: 1. Have lots of time 2. Want to experiment new things 3. Dont mind waste your time and energy (lol)

Answer 13

Lil bit overzealous Stack Overflow experts...-6 points for a perfectly reasonable question. Mama always said give everyone the benefit of the doubt. You scared Real Suka away....

Let's give Real Suka the benefit of the doubt and rephrase his question as such: "I have a fixed layout site because it's necessary to convey an artistic layout idea I had. What I want to do, is prevent users from resizing fonts (in which case my site would be unreadable anyway) and instead offer them (via a modal pop-up) an alternative version of my site. That way they can make up their own minds about whether to squint or forgo the intended experience."

Well Real Suka, two options:

1. Make all your text into images.

2. Detect browser font size changes and base font (when they arrive at your site), then adjust the font size dynamically to compensate for their change.

Here's the javascript for the font-size detector: http://www.alistapart.com/d/fontresizing/textresizedetector.js

And now all you have to do is attach a resize function to the listener and surround all your markup in a div with id, "bodyContent" (that way the font event listener won't catch your compensation functions:

addFontResizeListener = function () {
        var iBase, reloadBoolean;

        iBase = addEventListener(lzaIndex.onFontResize, null);

        //Don't run the updateBaseFontSize if font size is not larger than usual
        if (iBase > 20) {
            reloadBoolean = false;
            updateBaseFontSize(iBase, reloadBoolean);
        }
    };

    //id of element to check for and insert control
    TextResizeDetector.TARGET_ELEMENT_ID = 'bodyContent';
    //function to call once TextResizeDetector has init'd
    TextResizeDetector.USER_INIT_FUNC = addFontResizeListener;

    onFontResize = function (e, args) {
        var iSize, reloadBoolean;

        iSize = args[0].iSize; //get new user defined size

        reloadBoolean = true;
        updateBaseFontSize(iSize, reloadBoolean);
    };

Then add the readjustment itself:

updateBaseFontSize : function (fontSize, reloadBool) {
    /*Format 1 is fed from the plugin; format2 is the body size equiv
     *examples:
     *Frmt 1 (all/IE) | Frmt 2 (all/IE)
     *20/18           | 16px/16px
     *21/21           | 17.6px/19px
     *22/23           | 19.2px/22px
     *
     *Purpose of updateBaseFontSize is:
     * 1. convert format 1 figures to format 2
     * 2. modify the all containing div 'fontbodyreadjust'
     *    to compensate for the new user defined body font size
     */


    var format1Base, format1Size, reloadPage, baseConverter, changeConverter,
    format2Base, format2SizeChange, format2NewSize, modifiedSize;

    format1Size = fontSize; //equals new size in pixels
    reloadPage = reloadBool; //prevents reload on 1st visit

    if ($('body').hasClass('browserIE')) {
        format1Base = 19; //expected base size value for IE
        baseConverter = 16 / 19; //converts from format 1 to 2 for IE
        changeConverter = 1.5; //ditto for the difference from base size for IE
    } else {
        format1Base = 20;//expected base size value for all other browsers
        baseConverter = 16 / 20; //converts from format 1 to 2 for all others
        changeConverter = 1.6; //ditto for the difference from base size for all others
    }

    //Find modifiedSize, how much to compensate for the new body size
    format2Base = format1Base * baseConverter;

    format2SizeChange = (format1Size - format1Base) * changeConverter;
    format2NewSize = format2SizeChange + format2Base;

    modifiedSize = format2Base / format2NewSize;

    //Allow text resizing for shrinking text and very very large text
    //Only works for safari. meant to prevent odd behavior at math extremes
    jFontBodyReadjust = $('#fontbodyreadjust');

    if ((format2NewSize >= format2Base) && (modifiedSize > 0.6)) {
        jFontBodyReadjust.css('font-size', modifiedSize + 'em');
    }

    //reloadPage boolean in place so that reload doesn't occur on first visit
    if (reloadPage) {
        window.location.reload();
    }
}

REMEMBER: Provide an alternative to those who can't see your defined font size. It's the right thing to do. You can put access to your alternative (e.g., via a pop-up question) within the if (iBase > 20)

Sorry Real Suka

PS. Also remember you can specify ALL of your element widths (images, etc.) in ems so that font resize adjusts everything, BUT it's a bit messy, there are different browser interpretations that must be compensated for, and you can't use sprites (because ems would just show more of the sprite subsection that you want.

PSS. Specifying in px won't do you any good on modern browsers...don't know why that seems to be a popular answer here.