Fonts on the web: how's that work, then?

I wrote an extremely long post about this, then decided to cut it down to the bare essentials, heavily based on Firefox. So here ya go.

The Basics

There is a sort of 'tug of war' between you (and your browser) and any given website, when you visit it, about what fonts will be used and what they'll look like.

If you're running Firefox, open Preferences and go to Content. See that 'Default font'? That's the font that will be used to display any text on the web unless the site specifies a different one. See that 'Size'? That's what size all text on the web will be, in pixels not points, unless the site specifies a different size. It's also your 'default size' - remember that, we'll come back to it later.

Now click Advanced...

Here you can pick your preferred Serif font, your preferred Sans-serif font. The line marked Proportional is basically the same thing as the settings we saw before we clicked Advanced..., shown differently - here, you specify whether your Serif or Sans-serif font is the 'default' one. (If you never touch the Advanced screen, Proportional is always set to Serif, and the Default font setting specifies the Serif font). The Size setting next to Proportional is just the same thing as the non-advanced Size setting.

If a website just says "here's some text, render it" and nothing else, it'll be rendered in your Proportional / Default font at the Size you specified. If the site says "this text is sans-serif" but nothing else, it'll be rendered in your chosen Sans-serif font at the Size you specified. Ditto "this text is serif" and "this text is monospace", except there's a separate Size setting for monospace, because sometimes people want proportional and monospace text to be different sizes, apparently.

However, websites can specify particular font faces and sizes. If you only set the settings mentioned so far, the website can override anything you say. It can say "render this text as Arial at 11px", and no matter what settings you have set, you'll see 11px Arial (or the closest font fontconfig can find to Arial - see my last post).

Now, see the setting marked Allow pages to choose their own fonts, instead of my selections above? That turns your 'polite requests' for font faces into 'demands'. If you uncheck that box, then whatever any site says about what specific font face to use, Firefox will ignore it and use your settings. All non-monospaced text will be in your Proportional / Default font, and all monospaced text will be in your Monospace font.

See the setting marked Minimum font size? That's pretty much exactly what it sounds like. Like all the other sizes on this dialog, it's specified in pixels not points. If you specify a minimum font size, Firefox will flatly refuse to render any text smaller than that size, no matter what the website asks for. Any text that would otherwise be smaller than this size will be rendered at exactly this size.

A bear trap

For a long time, I unchecked that "Allow pages to choose their own fonts" box. There is now a rather large bear trap if you do this, though. In recent years a mechanism called 'webfonts' has been invented to solve the problem where a page wants to render text in a particular font, but the user's computer doesn't have it: the page can embed the desired font, and the browser will download it and use it to render the text.

As you'd expect, the checkbox overrides webfonts: if you uncheck it, webfonts won't be downloaded or used. Some sites, however, have taken to abusing webfonts. They realized that font rendering engines are actually really good at making certain types of shapes - not just fonts - look nice on all sorts of screens. Including the 'symbolic' - monochrome / greyscale, and quite abstract - icons that are currently in vogue. If you look at the admin panel on a Wordpress site, or the top and side bars on Github, or in an increasing number of other places, those icons are not images: they are, technically, text characters. The sites put their icons into their webfonts in an area not used by any other characters, and use the web browser's font rendering capabilities to make them look nice. But if you override fonts, this breaks, and all you see where those icons should be is garbage. It's easy to try this: just uncheck that box, and go look at a Github site.

Smaller bear traps

Some sites render pretty weirdly if you override their font choices with something really radically different to what they're expecting in appearance or size. So unchecking that 'Allow pages to choose their own fonts' box, or setting a minimum size bigger than 11 or 12, can cause problems aside from the 'big bear trap' on some sites, even though you may well like its effects on most sites.

Avoiding the bear traps

Faces

In my last post, I explained how to override given font faces using fontconfig. Why did I go to all that trouble? It helps avoid these bear traps. By overriding several font faces that are specified by lots and lots of websites to Cantarell, I get much the same effect as unchecking that "Allow pages to choose their own fonts" box, only with much more fine-grained control. I can choose not to override particular fonts that cause problems when they're overridden. It's a bit more work, but you get more control.

Sizes

How about sizes, though? I set ''Minimum font size'' to 12, but 12px is still pretty obnoxiously small for large chunks of text you might want to read on most monitors. Setting it any bigger, though, can cause text that really needs to be small - say, labels on menus which only have a small amount of screen area available - to render too large, and mess up sites quite badly.

What you can do, if you have sites you commonly visit that are affected by tiny-font-itis - like all of fedoraproject.org, damnit our CSS sucks - is override them via custom CSS on a site by site basis.

...please, stop screaming, it's really not that hard. How font size setting works on websites is screamingly complex - you get into all sorts of crap about sizes specified in px, pt, em, or %age - but you don't really need to know all that stuff in most cases. What you need to know is this.

First, open Firefox and go to a Fedora wiki page - ideally, do this with a very stock font configuration, don't set Minimum font size. You may well notice the text is pretty small. How do we fix that?

Your Firefox profile is at ~/.mozilla/firefox/(garbagestring).default/ - that (garbagestring) is different for everyone. Go to that directory and create a directory called chrome (if there isn't one already). So I have a directory ~/.mozilla/firefox/sh6llx3y.default/chrome. Create a file in it called userContent.css, and put this content in it:

@-moz-document domain(fedoraproject.org) {
  body
  {
    font-size: 90% !important;
  }
}

Now close your browser and open it again. You should notice the text on the Fedora wiki is now rather bigger.

What we did there, very approximately, is to say to Firefox "for all pages in the fedoraproject.org domain, I really want you to render most text at 90% of the browser's default font size".

This snippet is an extremely blunt hammer, but it actually works surprisingly well with most domains affected badly by tiny-text-itis. You can copy and paste the entire thing multiple times and change the domain name, and fiddle with the size:

@-moz-document domain(fedoraproject.org) {
  body
  {
    font-size: 90% !important;
  }
}

@-moz-document domain(fedorahosted.org) {
  body
  {
    font-size: 90% !important;
  }
}

@-moz-document domain(daringfireball.net) {
  body
  {
    font-size: 100% !important;
  }
}

In practice, most of the stuff you want to make bigger will be covered by it, and probably not too much stuff that you wouldn't want to be bigger will be covered. It's not perfect, though, and if you find it gives odd results on a given domain, you'll have to take the advanced class, where you learn a bit about how CSS works, and use Firefox's Style Editor to inspect the site's CSS, experiment with changes to it, and then implement those changes in your userContent.css. But this is not that course.

Scaling

This is a PSYCHOPATHICALLY complex topic, and I am not going to go into all the details (I tried that in the long version, and it was a nightmare). Here's Adam's Short Cut Approach To Font Scaling:

You probably have a fairly 'typical' computer monitor somewhere. That is, a monitor with a DPI of 90-110. That is, if you measure the physical height of your monitor's visible area - the bit where you actually see pixels - in inches and divide the number of pixels in your vertical resolution by that number, you get a result of 90-110. E.g. I'm typing this on a monitor whose visible area is about 18.5" high and whose vertical resolution is 1920 pixels, and 1920/18.5 is 103dpi. Pretty much any desktop monitor you have, unless it cost you several thousand dollars or you're very rich and very nerdy and you just bought a 4k monitor, will be one of these.

Fiddle with your desktop and browser font settings - and your CSS overrides, if you read the stuff above and got fancy - until everything looks right. Take a note of all those settings.

If all your monitors are 'typical' ones like this, you're now done - apply those settings to all your systems and be happy.

If you have any other monitors, though - you're rich and nerdy and bought a 4k monitor, or, much more likely, you own a relatively new but fairly normal laptop, with, say, a 1920x1080, 13" or 15" screen - you will find that if you apply all these settings to it, everything looks tiny.

Here's what you should do: apply all your normal settings to it anyway. Now, figure out the actual DPI of your screen, using the calculation mentioned above (or you can just cheat and use this page - it has a lot of common monitor types listed with their DPIs). Divide the DPI by 96, and you should probably get a number in the range of 1-1.6 or so. Note both these numbers down.

If you're running GNOME, install gnome-tweak-tool at this point, and go to its Fonts page. Set the Scaling Factor to be the 1.something number you just figured out.

Now, this is theoretically the 'correct' setting for your screen. Fun fact: if you print something and hold it up to the screen, fonts denoted in point sizes should be precisely the same size on the page as they are on the screen, at this point. But in practice, you'll probably find everything looks too big: people sit close to laptop screens, so things that are the 'right' size tend to look too big. So, tweak the number down a bit. Just tweak it down in 0.1 or 0.05 increments till you find a setting where everything outside your browser looks about right.

Stuff in your browser will still look wrong at this point, but no problem! Enter this URL in your browser: about:config, and hit enter. If you've never been to about:config before it'll pop up a warning, click through it. This is the secret config interface to Firefox - you can do all sorts of stuff here. Happily, Firefox has a setting which works precisely like GNOME's scaling factor, so we're on velvet. In the search bar at the top, type 'pixelsperpx'. This should find just one setting, layout.css.devPixelsPerPx. Double-click it, and enter the same values you set for GNOME. Aaand you're done. You will want to have a relatively recent version of Firefox, though, as this setting was kind of badly broken for a while.

If you're running anything other than GNOME, there may be a setting in your desktop's Font configuration stuff which works like GNOME's Scaling Factor setting, or just a straight DPI setting somewhere. If not, you can specify a DPI at the X level still, somehow, I think. If your display is a 'normal' one - in that 90-110 range - it's not a good idea to get cute and try to set a 'precisely correct' DPI or scaling factor, though. The 96dpi convention is strong, and unless your display is seriously out of whack with it, it's a good idea to stick to it. Setting a DPI that's nearly-but-not-quite 96 tends to lead to fairly squiffy font rendering.

Can I Make Fonts In Firefox Look Exactly Like Fonts On My Desktop?

No. No, you can't. And in fact, the closest you'll get on a lot of sites is actually to leave everything at the defaults.

Let's think about how we'd do this in theory. You can set your 'default' browser font size to a size in pixels which is as close as you can manage to your desktop font size in points.

11 is a fairly typical desktop font size in points, on a 'standard' display. With the 96dpi convention, 11 points is 14 2/3 pixels. OK, let's round it up to 15.

For some reason, though, the 'universal de facto standard' for the default font size in a browser is 16px. That's Firefox's default, and I think it's the default the other browsers use too.

Web designers have noticed this - that the default browser size is 'a bit big'. On most systems it's probably slightly bigger than what the user is using on the desktop.

So the 'good' web designers - who have abandoned specifying font sizes in pixels and started specifying them relative to the browser's default font size, as it advised by the W3C and other august bodies these days - often tend to set a universal scaling factor of something like 91% on their sites. If you poke through CSS on a few sites, you'll see this coming up again and again, on the ones that don't just say 12px or something similarly insane.

What's 91% of 16px? 14.56px...pretty darn close to 14.6 recurring px which we calculated as 11pt in pixels on the 96dpi standard.

So no, don't set your browser default size to 15px, as it'll make 'good' sites look a bit too small and do nothing at all to 'bad' sites. Just leave your browser default at 16px, get your scaling factor 'right' for your eyes, and fix the crappy sites with the 'minimum font size' setting and CSS overrides.

Computers. Who'd use 'em.