Typographic ligatures#

Typographic ligatures are a feature of a font where multiple characters are combined as one to improve readability. For example, if you look closely at the ffi and fl in the following, you'll notice they look slightly different with ligatures (normal):

office, float

and without ligatures:¹

of‌f‌i‌c‌e, f‌l‌o‌a‌t

You can in fact create a font that declares any sequence of characters to be a ligature to be rendered differently. Because the difference is only at the font rendering level, copy and paste still work as expected. This allows us to choose sequences of characters that really act like single characters in a given programming language and render them as such.

Hasklig#

This technique is used by the Hasklig font to make Haskell code more readable. (Although the friend who told me about it isn't a Haskell programmer and just likes how it looks for code in general.) If your browser supports ligatures as most modern browsers do and you do not have web fonts disabled², then the following two lines should look quite different:

<* <*> <+> <$> *** <|> !! || === ==> <<< >>> <> +++ <- -> => >> << >>= =<< .. ... :: -< >- -<< >>- ++ /= ==

and the same in Hasklig, showing off all of ligatures Hasklig currently includes:

<* <*> <+> <$> *** <|> !! || === ==> <<< >>> <> +++ <- -> => >> << >>= =<< .. ... :: -< >- -<< >>- ++ /= ==

Many text editors support ligatures, although Vim presently does not.

SansBullshitSans#

A somewhat less serious use of the same technique is SansBullshitSans. It, well… just look at what it does to their example sentence:

The agile unicorn funded an uber immersive beta below the fold.

in their font looks like

The agile unicorn funded an uber immersive beta below the fold.

You can copy and paste that text to see that it is in fact the same.

There's an in-depth blog post on how it was made. Like Hasklig, SansBullshitSans is open-source, so we can look at the list of censored words by checking out the list of ligatures at the bottom of SansBullshitSans.ttx in the source.

Using when web browsing#

If you want to view websites using SansBullshitSans, then you can install the font on your computer by saving SansBullshitSans.ttf into your fonts directory:

$ mkdir -p "~/.local/share/fonts/sansbullshitsans/"
$ cd "~/.local/share/fonts/sansbullshitsans/"
$ wget "http://pixelambacht.nl/downloads/SansBullshitSans.ttf"
$ fc-cache -fv

fc-cache reloads the font cache to add the new font. You may need to restart your web browser after doing so to get it to see the font.

Then you can use Stylish to create a user style to make certain text on certain websites use the font. For example, the following user style makes articles and comments on Slashdot use the font and should work on any browser:

@-moz-document domain("slashdot.org") {
  #firehose article header h2, #firehose article .body, .commentBody {
    font-family: "Sans Bullshit Sans" !important;
    /* For Chrome. */
    font-variant-ligatures: discretionary-ligatures;
    /* For Firefox. */
    text-rendering: optimizeLegibility;
  }
}