It can be tricky to keep up with current developments in web design, particularly when dealing with a vast subject such as typography. In this post I’ve collated as much information as I could about typography on the web today.

Font Formats

Most people will opt to load fonts from one of the multitude of web font hosts that are available (Google Fonts, Typekit, Fonts.com etc). Using these fonts normally just requires the inclusion of a small snippet of code. If you want to host fonts yourself however (and you are sure you are licensed to do so) then you can simply include a WOFF font via @font-face, which is now supported by all modern browsers. You can include more formats though if you want to be super thorough and support older browsers.

@font-face {
  font-family: 'My Font';
  src: url('myfont.woff') format('woff');
}

The Web Open Font Format (WOFF) has a lot of advantages over other formats which is the reason why it has been widely adopted by all modern browsers in recent years. WOFF2 (a better, more compressed format) is gradually becoming accepted but isn’t universally supported yet. WOFF fonts are smaller in size than other formats but all of the features of OpenType are still available (see next point).

Opentype font features

The built-in features of OpenType (OTF) fonts are widely accessible using CSS in most modern browsers. Using font-feature-settings you can turn on details such as common ligatures (turned on by default in some browsers anyway), discretionary (weird) ligatures, old-style numerals, small caps, swashes and stylistically alternative characters. The use of these advanced options is entirely dependent upon the font used though of course — many free fonts will not have these “pro” features. Elliot Jay Stocks has a great post on OpenType CSS which is worth checking out.

Font rendering settings

Text Rendering

The text-rendering property defines how a browser should optimise text and whether it should prioritise performance or legibility. It is a simple way to turn on ligatures and kerning with the value ‘optimise-legibility’.

Font Smoothing

Both WebKit and Firefox have non-standard CSS setting with which you can control how the browser renders text. I’m not going to get into the rather complex topic of sub pixel rendering but this setting basically means you can turn it off, making text look slimmer. Admittedly it can make text appear a little nicer sometime but turning off a technically more advanced way of rendering text seems like a pretty backwards thing to do.

Justification & Hyphenation

Justification has been supported in CSS forever with text-align: justify; but this doesn’t mean that it should necessarily be used. In my opinion we’re not at a stage where justified text can really be set very well on the web for a number of reasons.

Basic justification algorithm

There are two different algorithms used for rendering justifying text. There’s a complex one which software such as Indesign uses that looks at all of the words in a paragraph to find the best way of spacing them. Individual letter spacing can also be implemented to create less ‘gappy’ text. Web browsers however use a simpler algorithm that looks at text line-by-line and only adjusts word spacing (possibly for performance reasons). This means that depending on the measure of your text (which is likely to get narrow in a responsive layout anyway) you will see pronounced “rivers” in your paragraphs. Not good. Weirdly Internet Explorer actually supports the better algorithm by using the property text-justify: newspaper; but no other browsers it seems look set to support this any time soon.

Basic hyphenation

It is generally accepted that to use justification effectively you should also use hyphenation in order to more evenly distribute spacing. The hyphens property is actually supported by a lot of browsers including Safari for IOS, Firefox and Internet Explorer but it is not supported by major player Chrome, both on desktop and mobile, which represents a large market share. Also missing from CSS justification is the fine-grained control you have in software like Indesign where you can limit the number of hyphens, set a minimum word length etc. This is coming to web design in the form of CSS4 text but it is not supported yet.

So there we have it: the state of typography on the web today. I’m going to make it a goal to use plenty of these techniques in as many projects as I can this year.