# Owner: glow
# KeyID: E65A8520F36AEE13CFE4F56BEB8FE331063A4794
# Key: https://glow.li/pgp
# Verify: curl "https://glow.li/posts/using-pixel-fonts-in-a-browser-without-font-smoothing/index.html.asc" | gpg
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA512

- ---
date=2016-07-15
layout=post
title="Pixel fonts in a browser without font smoothing"
tags[]=Technology
tags[]=Web_Development
tags[]=Fonts
tags[]=Showcase
tags[]=CSS
tags[]=HTML
tags[]=Jekyll
tags[]=Ruby
oldurls[]=technology/2016/7/15/using-pixel-fonts-in-a-browser-without-font-smoothing/
css[]=pixel-zoom.css
- ---

[Tinier](https://squaregear.net/fonts/tinier.html) is a pretty cool font. It is a so called pixel font, and it is just about the smallest font I could find. The letters can be displayed at a font-size of `4px`. This means that each character is only 3 pixels tall.

<?= charfont('The wizard quickly jinxed the gnomes before they vaporized.', 'charfont-tinier'); ?>

<div class="charfont-big">
<?= charfont('The wizard quickly jinxed the gnomes before they vaporized.', 'charfont-tinier'); ?>
</div>

<!--more-->

I think this is pretty cool, so I tried to implement this on my website for the footer blurb. It turns out though, that pixel fonts look absolutely hideous in modern browsers.
Here is how it looked:
![Font sample](<?= $URL; ?>/media/images/tinier-sample-white.png)
![Font sample](<?= $URL; ?>/media/images/tinier-sample-white.png){.pixel-zoom}

Do you see these hideous colored pixels? It ruins the pixel font. The footer was originally white on blue, where the problem was even worse:
![Font sample](<?= $URL; ?>/media/images/tinier-sample-blue.png)
![Font sample](<?= $URL; ?>/media/images/tinier-sample-blue.png){.pixel-zoom}

How it should look:
![Font sample](<?= $URL; ?>/media/images/tinier-sample-sprite.png)
![Font sample](<?= $URL; ?>/media/images/tinier-sample-sprite.png){.pixel-zoom}
Nice, clean, black on white Pixels.

As with any modern software, browser employ font smoothing. This is done so text looks good on a low DPI screen. It is done with anti aliasing and sub pixel rendering and for normal fonts this is pretty great, but for pixel fonts it looks terrible. There is no way for a font to disable it, so it usually has to be done at a software level. Some browsers have a setting for disabling font smoothing. This is obviously pretty useless, since I can't expect readers of my blog to have turned this off and made all normal fonts look bad except my tiny blurb.

## There must be a CSS setting right?

Well, let me tell you about `font-smooth`. It was present in early drafts of CSS3, but has been removed from the specification since. It only works on [some browsers](https://caniuse.com/font-smooth) and only on the Mac OSX operating system. So it looks like there is no easy way to implement a pixel font without ugly rendering artifacts.

## But why don't you just use an image?

Yes, I could just write my text in GIMP and upload it as a picture. But I want it to be dynamically generatable. I want to do it in good old HTML and CSS.

## So I have decided to go the sprite map route instead

![Font sample](<?= $URL; ?>/media/images/tinier.png){.left}
Having it as a sprite map has many advantages including (and probably limited to):

- -   You can still wrap text around newlines
- -   You only have to have one image for any size and length of text.
- -   Because the original characters are still in the HTML you can select and copy it

Here is how the HTML of a very short text looks:

```
<?= charfont('Oli', 'charfont-tinier'); ?>

```

As you can see every letter is just a `<span>` with a special class and the original letter inside it. And since this is a [Jekyll](https://jekyllrb.com) blog, I wrote a short ruby plugin to achieve this, but it would probably work really well in JavaScript as well.

```
module Jekyll
    class Charfont < Liquid::Tag
        def initialize(tag_name, text, tokens)
            super
            html = "<span class=\"charfont-tinier\">"
            text.upcase.split("").each do |i|
                if i == " "
                    classname="SP"
                elsif i == "."
                    classname="dot"
                else
                    classname=i
                end
                html = html + "<span class=\"charfont"+classname+"\" >" + i + "</span>"
            end
            html = html + "</span>"
            @output=html
        end
        def render(context)
            @output
        end
    end
end
Liquid::Template.register_tag('charfont', Jekyll::Charfont)
```

And here is the accompanying CSS:

```
.charfont-tinier span {
    color: transparent;
    background-image: url("../media/images/tinier.png");
    margin-left: calc(1px * var(--scale));
    display: inline-block;
    background-size: calc(5px * var(--scale));
    width: calc(3px * var(--scale));
    height: calc(4px * var(--scale));
    overflow: hidden;
    background-repeat: no-repeat;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor
}
.charfont-tinier{
- --scale:1;
}
.charfont-big .charfont-tinier{
- --scale:5;
}
.charfont-tinier .charfontA {
    background-position: 0px calc(-0px * var(--scale));
}

.charfont-tinier .charfontB {
    background-position: 0px calc(-4px * var(--scale));
}

.charfont-tinier .charfontC {
    background-position: 0px calc(-8px * var(--scale));
}
```

You can look at the whole CSS file [here](<?= $URL; ?>/css/charfont.css).

So, this is a very complicated solution to a problem that really should be as simple as `font-smooth`. And it still isn't prefect. Having it do proper line-wrapping would require a bit more complicated HTML and CSS. Also the `image-rendering` part doesn't work on all browsers, so when text size is large it would look like this:
![Font sample](<?= $URL; ?>/media/images/tinier-sample-sprite.png){.zoom}

Edit:

Since writing this post Chrome has made some changes. It now enforces a minimum `font-size` of 6px. Therefore my previous method of using `em` and `font-size=1px` no longer works. I've updated the code in this post to use a css variable to define scale. This way I can still enlarge the font with CSS.
-----BEGIN PGP SIGNATURE-----

iQIzBAEBCgAdFiEE5lqFIPNq7hPP5PVr64/jMQY6R5QFAmEUMM0ACgkQ64/jMQY6
R5TRnRAAoTdncsf9Yl7ZbqsXlfPalwlsRCH76W/tXMR48ccoX0AX07No98PsF1Jj
nVlNA1A146YUu6piGoX/7RdGwFszcmAPxCjecXQV6R7IFVcH9AJWgtDg+orCzDRn
kLI0o9MIjOqCb0fDOR+W3FTiQDBi5fBZTKVzBq/STW4O2prBLiFLcp8ETEV39ACh
PpAOKWKgvAQM3bPOz2NpFO1JByPKTFGZ7xem8xU1sInjn9BHmUD7952A+1fK0eIE
/rxvlDbSWEOkk8iw8DjrYFL13CuKamcjQ+ypdAJoJtQe1ziX2nfWTAJT3E1RRgfS
jl9pskhgVAT4tcf6xA4cUbV0qrH+uWLeza93hnBIQJPWIBMLoTqtfT51mFEYg527
J9+WNek4PFSIyeGrtgOxmOhhYwOW4qPhyG3pPE6bAr3rRENx2FtUEtfrGjesIGFr
c1mVEa8dlI54cYGfAxQWW28susAq/tzZcDjw5MDDDHGBfOGqrlQ9cuuIw5e99BF9
a2c3yWnw19jwqTNW6RSkORfFekSY17munSaxB1IiYu+pXe6aYjMb/GmVxRRtk6IK
c3nGXEKfwo1dZeya2up8GyB0fqq5ISpHoaQc8L61KvBl7CHdlPE5sdvXdWO/fxS+
5y5Gr/bMBJFAj6xqhJJTlCADreQOqsHuQ/tqzvN0+2dhgAgRFKY=
=ZH3m
-----END PGP SIGNATURE-----