1Introduction
(open source version )

I’ve made two distinct compromises with typography, the first is related to hyphenation and website load speed, the second is fonts, read on:

You will be pleased to know CSS 3 supports hyphenation (yey):

  
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; 
                            

And that’s great — tell it what language you’re using, load the hyphenation-resource and off you go — except it isn’t. CSS supports hyphenation but not all browsers do (boo), most frustratingly Chrome doesn’t (Edge does but not Chrome — really?).

So no Chrome, what to do? — What to do?

Well there are algorithms that you can run that will insert soft hyphens^†1 into the text before it is placed on the website and all browsers (pretty much) accept these. Alternatively I even considered adding soft hyphens manually to the text.

Both of these solutions work (the last one is very time consuming but you do get what you want), but there is a problem. Soft hyphens in blocks of text have to be included when searching the text in the HTML.

For example, if the website contains the word “legibility” with soft hyphens, then the word will actually be leg-i-bil-ity (leg­i­bil­ity in HTML); that is to say it will have three soft hyphens in it.

This is a particular problem with text editors, the soft hyphens show up in text editors^†2 and just searching for “legibility” won’t work, you would have to search for the word with the soft hyphens in it and you would have to know where the hyphens were.

So hyphenating my text beforehand wasn’t going to work, I want people to be able to copy and search the text if they want to; it makes it easier to debug a website.

What I really want is for the browser to hyphenate my website on the fly (come on Chrome, catch up) and then I wouldn’t have to worry about it. But I do worry, and here is my solution; I’m using a third party Java script hyphenator (hyphenator.js). This works well and hyphenates the page automatically as the browser renders the page, it has the advantage of not including the soft hyphens when copying the text, and this means that searching the text works as expected.

The disadvantage is the size, it’s a largish file and I’m not sure what impact this has on the load speed of my website. I’m beginning to think that hyphenation is a luxury I can’t afford. There are some alternatives (hypher for one) which I intend to explore further and I will let you know my conclusions.

For the time being, hyphenator.js is included in the website. I give detailed instructions on how I’ve used this script and also how to remove it should you wish.

This website uses the fonts Equity (serif font), Concourse (sans serif font) and Triplicate (monospace font); these were created by Mr Matthew Butterick, I purchased the fonts and have a licence to use them on this website.

I converted these fonts to web fonts by following Mr Butterick’s instructions and here they are rendered from the files I created.

Now these fonts are embedded in my website, your browser downloaded the .woff files and is happily displaying my words in the Equity font. All well and good, I bought the fonts, Mr Butterick was paid for them, my licence permits this process to take place, you get to see the fonts and the text in the way I intended — brilliant, we’re all happy.

Now the problem — I want to make this site available to you, dear reader, as a downloadable zip file that you can take, rip apart, copy, change, do pretty much what you want with (hopefully with some small consideration, see § 1.2). And I can do that, all except for the fonts; I don’t have a licence to redistribute these fonts.

So here’s the thing, I like these fonts, I really do; but I appreciate that Mr Butterick has worked hard to create them and deserves all the money he can get for them and he probably doesn’t want me redistributing them for free; and, since Mr Butterick is a lawyer in his day job, and since I don’t want to go to gaol, I find myself agreeing with this point of view; so, I actively encourage you to buy your own copy of them (you can get them here) — but I also can’t afford to pay for a copy every time someone downloads my zip file (good fonts aren’t cheap, and I’m not that big a philanthropist).

This means I’ve made a compromise, I’ve replaced Mr Butterick’s fonts (Equity, Concourse and Triplicate) in the downloadable file with open source fonts (google fonts are the most common open source fonts, although in my case I’ve used open source fonts from a site called font squirrel). This will disappoint Mr Butterick, not just from the lack of sales, but because Mr Butterick has strong opinions about open source fonts (see his article about open source fonts).

I accept his arguments, but, I want to distribute fonts with my website, I want to do this because I know how the fonts I’ve specified will appear and I’m not reliant on the vagaries of the fonts installed on a particular machine to render my site in what I hope is a good facsimile of what I intended. There are few options but open source fonts in these circumstances; I can’t distribute the fonts I’ve purchased for use on the website because I’m not licenced to do so and the only practical alternative is to use open source fonts—so there it is.

This section is the open source font version of section 1.3. The fonts are: