How can I override the minimum-font-size in Firefox?

Question

My site displays just like in need in IE and Opera, but in Firefox I can't get (via CSS) to have font sizes smaller than Firefox' default minimum-font-size. Of course I can go to Tools>Options and remove this value, but other users will see some of the elements displaced.

I have tried using !important, but it doesn't work. And I can't substitute the text by images, they are dynamic fields.

Solution 1

Okay. I'm going to explain how you do this, but you need to know a few things first.

1. You shouldn't be doing this.

There is a reason, and a very good one, that the minimum font size setting exists. Simply, with most fonts, it is already a struggle to read anything below 12px, never mind below the default minimum of 9px. If your design calls for such font sizes for anything but an extremely restricted set of circumstances¹, then your design is just bad and excludes a huge category of users.

2. You really shouldn't be doing this.

The web is an intrinsically flexible medium, and a good design must take account of this. Designs that require a fixed font size to work are suitable for print, but they are not suitable for the web. Any designer who cannot work with this requirement does not understand the medium, and no decent PM should prioritise a designer's bad decisions over practicality and usability. You have far bigger, more fundamental problems to deal with if you can't argue against this decision.

3. You really, really shouldn't be doing this.

Depending on your jurisdiction, you may be wandering on a legal grey area. Tiny font sizes are difficult to read, and will make it very easy for your users to miss information—which is especially troublesome if the text at hand is legally significant, such as opt-out information or a disclaimer. You are also treading on thin ice with respect to the accessibility of your site by causing serious problems for people with visual impairments.

How to do it anyway

It is quite easy to make Firefox display fonts at less than the minimum specified size: just use the font-size-adjust property.

Here comes the science bit

Every font has something called an aspect value, which is the ratio between its x-height (the height of a letter x)² and the actual font-size you set. In Comic Sans, for example, this is really big (0.55), as you can tell by how big the shorter letters (a, c, e…) are compared to taller letters (b, d, h…), whereas in Courier New it is a lot smaller (0.43).

This variability can cause some problems. For example, let's say you specify a super-fancy font for your body text, but because you're a good designer you provide several fallback fonts. That's great, but because some of those fallbacks have different aspect values, letters might be smaller and less legible at the size you specified. font-size-adjust allows you to make sure that any fallback has the same x-height as your super-fancy font.

Unfortunately, we can also use it to make text less legible. Let's say your body copy is Segoe UI at 12px:

body {
    font-family: "Segoe UI";
    font-size: 12px;
}

The aspect value of Segoe UI is almost exactly 0.5, so if you specify that as the font-size-adjust value, your font size doesn't change:

body {
    font-family: "Segoe UI";
    font-size: 12px;
    font-size-adjust: 0.5; /* x-height = 12px × 0.5 = 6px */
}

What happens if we set it to something smaller? Well, the browser will adjust the font size to use an x-height equal to font-size × font-size-adjust. The below, for example, will result in an effective font-size of 6px:

body {
    font-family: "Segoe UI";
    font-size: 12px;
    font-size-adjust: 0.25; /* x-height = 12px × 0.25 = 3px */
}

This forms the basis of our attack. It turns out that Firefox will honour font-size-adjust even if it overrides the minimum font size. (It goes without saying that this is a bug.)

The demo

Try this out in Firefox with a minimum font-size set. It exploits two bugs: the aforementioned font-size-adjust issue and a separate issue with reporting the rendered font size via getComputedStyle.

You need to know the aspect value of the font you are using for this to calculate the right font-size-adjust value, for which this list of aspect values might help you. (Alternatively, try an estimated x-height for fonts installed on your system.)

But wait! There's worse!

The above technique only works in Firefox. It's even easier to override the minimum font size on an element in Webkit, including Safari, iOS Safari and Chrome—just use the non-standard -webkit-text-size-adjust property:

-webkit-text-size-adjust: none;

This is another bug, by the way. text-size-adjust is a non-standard proposal intended to limit the extent to which text-size is automatically inflated on mobile devices. It isn't meant to work on desktop UAs, much less prevent manual text resizing.

Last word: it won't last forever

Bugs get fixed eventually. You are not meant to be able to override the browser's default font size, no matter how much your irresponsible designer and PM want you to. Sooner or later, people will figure out that these properties are being exploited to make the web worse for everybody, someone will land a patch and the fun will be over.

That said, if you are being forced into this, I wholeheartedly advocate a solution that will eventually force the parties involved to rethink their decision.

---

¹ Hint: if your text conveys any information that is meant to be readable by anyone, ever, then you shouldn't be messing with browser accessibility settings. Legitimate cases include purely decorative effects (complex ASCII art, shape poetry) and document previews.

² More correctly, the distance from the baseline to the median height, which is the height of a letter x in most fonts.

Solution 2

You cannot do it. It's a setting that Firefox provides so that people like us cannot override it with some CSS settings.

Solution 3

You can effectively shrink text below the minimum size using CSS3's transform: scale(x) syntax, where x < 1. This is guaranteed to work in future browsers (as that's the point of scaling), but does come with its own challenges/caveats.

Solution 4

Just in case it might help anyone, I ended up replacing the small text areas, initially in HTML, with SVG zones. I fill these zones with the Raphaël JS library, with code like

logo_text = $j("#logo_text").val();
logo_text_preview_paper.clear();
logo_text_preview_paper.text(0, 4, logo_text).attr({"font-family": 'Helvetica', "font-size": 7, "text-anchor": 'start'});

I did not use an HTML canvas, because of its lack of availability on certain browsers, and because SVG offers a much better user experience on Retina displays.

It might seem overkill to do that, but I was not able to find an easier solution to the Minimum Font Size problem of FF.

View more solutions

Comments

[Alextronic]

Will this override the minimum-font-size user preference in browsers? I cannot try this right now.

[Dustin Laine]

This will set the page font size to whatever you want. The user can re-size, but that should be fine.

[Jasper de Vries]

This doesn't override the minimum set in Firefox.

[yunzen]

Amazing. Let's hope someone at mozilla, google ... reads this and will stop the bug in future releases.

[plang]

Great answer Jordan, thanks for the time you took to answer! You really deserve this bounty, although I think I'll stick with my solution of displaying the small fonts inside SVG zones. It's less likely (if not impossible) to break in future updates.

[plang]

Just a quick note about "this is unreadable, and supposed bad design". I need these very small fonts for a webapp where you have the ability to preview a print letter in real-time, in some kind of thumbnail. Text is not readable at all on a standard display (on a Retina display no problem), but the goal is to give the user a visual feedback of "where" the text appears. I have to say I'm surprised font size is constrained by browsers.

[Jordan Gray]

@plang Aaah, I see! There may be a nicer way of doing that, though. Have you considered using the scale transform? E.g. dabblet.com/gist/3798630. You can use a larger font size and it should be reliably resized in most modern browsers—though you'll need a sprinkling of vendor prefixes. You can even reproduce the effect in IE < 9 with a custom stylesheet that uses the proprietary zoom function.

[Jordan Gray]

@plang Excellent, I hope you can use it! I've updated my answer to expand a little on when it might be okay to override minimum font size settings—print previews hadn't occurred to me.

[tomasz86]

The two Firefox bugs are unfortunately still unfixed. From a user perspective, the font-size-adjust bug can be overcome by using the addons.mozilla.org/firefox/addon/no-small-text addon. The other one still persists though.

[Igor Mironenko]

I came here because I'm using Firefox 33, and it seems to be doing something like this - either there's another bug in Firefox or StackOverflow is exploiting this (sorry if there's any spelling errors, what I'm typing right now is about 7px though my min font size is set to 14px - screw you whoever does this ;-))

[dude]

Well in my opinion it is wrong to say that everything less than e.g. 15px is wrong and "worse for everbody". I'm working on a project where sub and sup are used. And firefox prevents subscripts and superscripts less than 14px by default. So in my opinion it is a bug that it is required to have minimum 14px, not the other way!

[Jordan Gray]

@julmot Superscripts and subscripts are a bit of a special case, and are always a pain to work with. There's certainly an argument to be made for allowing them to be smaller than the minimum font size; for one thing, if you use unicode superscripts and subscripts, those will typically be rendered as characters several point sizes smaller than the current font size. Would those work for your project?

[dude]

@JordanGray Well thank you, but in my project I am using normal sentences in sub and sup, so it is not a solution for me to put characters in there which are specially for sub and sup

[Dave Land]

It used to be true that "YOU SHOULDN'T BE DOING THIS" for accessibility (on label and body text), but with the advent of FontAwesome and other widely-used icon fonts, there is very much a place for having control over the sizing of some "text" elements. For instance, we use FontAwesome to create the little "hole" in the tip of our tag display. Because of browser minimum font sizes, the hole is too big, so we've resorted to using CSS like this to shrink them: [-prefixes-]transform: scale(0.5,0.5); This lets us achieve the desired visual effect without damaging anybody's accessibility.

[Jordan Gray]

@DaveLand Somehow I missed this comment! That's an interesting scenario; it's not one I specifically considered at the time I wrote this, though it's related to what I referred to as decorative effects in the first footnote. :) I get why font-size minima are very frustrating in such cases, though I still consider it likely that they do more good than bad.

[Dave Land]

You're quite right: there is a good reason that browsers set a minimum font size for text, but for scaling "text" used for other purposes, it's nice to know that modern CSS gives us the ability.

[waterplea]

You absolutely should be doing this and it's because not only actual font-size is used with font-size attribute. You can do quite a lot of responsive scaling if you define sizes based on ems and then just change font-size. I often do that.

[Jordan Gray]

@pokrishka You certainly can use ems (or better, rems) for responsive development—I encourage it! :) But I'd prefer smaller fractions of the base font size over overriding the base font size to be very small; it's (IMO) clearer and avoids overriding known browser behaviour. I'd consider a preprocessor to clean up the fractions if they were getting out-of-hand.

[waterplea]

@JordanGray I meant more like not font related stuff. For example, I like creating some HTML+CSS experiments like this piano here: codepen.io/waterplea/pen/KrYvLr To scale it I set font size for the parent element and ever child element size is set through ems. In this particular case i have hardcoded pixels but in the main app I used ems, check out the piano keys button on the top right here: waterplea.com/chant