Earlier this month I was invited to give an evening lecture at the Typography Society of Austria (tga) in Vienna. I was honoured to do so, as it meant following in the footsteps of such luminaries as Matthew Carter, Wim Crouwel, Margaret Calvert, Erik Spiekermann, and the late Freda Sack to name but a few.

I presented some golden rules for typography on the web, and in the Q&A afterwards I was asked about the current state of automatic hyphenation on the web. This was an apt question considering that German is well known for its long words – noun compounds feature commonly (for example Verbesserungsvorschlag meaning suggestion for improvement) – so hyphenation is extensively used in most written media.

Automatic hyphenation on the web has been possible since 2011 and is now broadly supported. Safari, Firefox and Internet Explorer 9 upwards support automatic hyphenation, as does Chrome on Android and MacOS (but not yet on Windows or Linux).

How to turn on automatic hyphenation

There are two steps required to turn on automatic hyphenation. The first is to set the language of the text. This will tell the browser which hyphenation dictionary to use – correct automatic hyphenation requires a hyphenation dictionary appropriate to the language of the text. If the browser does not know the language of the text, the CSS guidelines say it is not required to hyphenate automatically, even if you turn on hyphenation in a style sheet. Hyphenation is a complex subject. Hyphenation points are mainly based on syllables using a combination of etymology and phonology, but house styles also have differing rules on dividing words.

1. Setting the language

The language of a webpage should be set using the HTML lang attribute:

<html lang="en">

Setting the language in this way is best practice for all web pages regardless of whether you are hyphenating or not. Knowing the language of the text will help automatic translating tools, screen readers and other assistive software.

The lang="en" attribute uses an ISO language tag to tell the browser that the text is in English. In this case the browser will choose its default English hyphenation dictionary, which will often mean hyphenating for American English. While there are important differences in spelling and pronunciation (and hence hyphenation) between American English and other countries, there can be even bigger differences in languages such as Portuguese. The solution is to add a ‘region’ to the language so that the browser knows which is the most appropriate hyphenation dictionary. For instance, to specify Brazilian Portuguese or British English:

<html lang="pt-BR"> <html lang="en-GB">

2. Turn on the hyphens

Now you’ve set your language, you are ready to turn on automatic hyphenation in CSS . This couldn’t be much easier:

hyphens: auto;

Currently Safari and IE /Edge both require prefixes, so this is what you’ll need right now:

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

Hyphenation controls

There is more to setting hyphenation than just turning on the hyphens. The CSS Text Module Level 4 has introduced the same kind of hyphenation controls provided in layout software (eg. InDesign) and some word processors (including Word). These controls provide different ways to define how much hyphenation occurs through your text.

Limiting the word length and the number of characters before and after a hyphen

If you hyphenate short words they can be harder to read. Likewise, you don’t want too few characters left on a line before the hyphen, or pushed to the next line after the hyphen. A common rule of thumb is to only allow words at least six-letters long to be hyphenated, leaving at least three characters before the word break, and taking a minimum of two to the next line. The Oxford Style Manual recommends that three is the minimum number of letters after a hyphen at a line break, though exceptions can be made in very short measures.

You can set these limits with the hyphenate-limit-chars property. It takes three space-separated values. The first is the minimum character limit for a word to be hyphenated; the second is the minimum number of characters before the hyphenation break; and the last is the minimum characters after the hyphenation break. To set the aforementioned rule of thumb, with a six-character word limit, three characters before the hyphenation break and two after, use: