Categories
Presentations

Web Typography

Web Typography: A brief guide to type on the web

This is a presentation I did for the Cambridge WordPress meetup. It is quite an indepth look at typography on the web.

I hope it is useful for developers and designers alike

Technical considerations

Native fonts Vs self-hosted fonts Vs Remote hosted fonts

Native fonts

Native fonts live on the user’s system. Since they are already on the user’s computer they will display instantly. Be careful though, as fonts available on one system may not be available on another. For example the font “Helvetica” is available on OSX (Macs), but not Windows (PCs).

Systems default to one of five generic categories

  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

You can check which fonts are available on each operating system at: http://www.cssfontstack.com/

Self hosted fonts

These are fonts that we install on our server and the user’s browser downloads when they visit the page. We generally call them using the @font-face code in our css

Fonts come in a variety of formats:

  • woff2 – Cutting-edge Web Open Font Format
  • woff – Web Open Font Format
  • ttf – True Type Font
  • eot – Embedded OpenType, used on Windows
  • svg – Scalable Vector Graphic

We mostly want to use woff2 and woff, but may need to provide ttf, eot and svg as fallbacks for very old browsers

Examples of use:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
  url('myfont.woff') format('woff');
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Self hosted fonts – Pros and cons

  • Self hosted gives you more control over the fonts you use
  • More reliable delivery, since you are relying on your server and not someone elses
  • Get to chose from all the web fonts available in the world
  • Expensive
  • Calls for a commitment
  • Fiddly to setup and get working – requires downloading files, uploading them to your server

Remotely hosted fonts

An alternative to buying fonts and installing them on your system is to use a remote service. Options include:

  • Google Fonts
  • Adobe TypekitInstead of calling the font files from your own server these are called from a separate service.

    Examples of use:

Add to head of your document

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

And call it in your CSS thus:

font-family: 'Open Sans', sans-serif;

Remotely hosted fonts – Pros and cons

  • Less control over the fonts
  • Relying on another server – font stack even more important
  • More limited choices
  • Can be free. Subscription services cost money – but gives you the chance to play with fonts more
  • …therefore no commitment
  • Quick to set up

Font stacking

Because all systems have default fonts for all these categories we should specify them as backup fonts in our “font stack”.

A font stack specifies a list of fonts to use with each subsequent font being a fall back if the previous font was not found

For example:

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

Is an example of a font stack for Helvetica Neue. This typeface in available on modern Macs but may not be available for older ones. If the typeface isn’t found we default to Helvetica, then Arial (the Windows equivalent of Helvetica) and finally sans-serif. Check http://www.cssfontstack.com/ for example font stacks.

This is important because when we use our own fonts we still need a font-stack so that the user still gets a useable typeface if ours fails to be delivered for whatever reason.

Anatomy of type

Type terminology diagram
This diagram shows the terminology for the different parts of type. The relationship between these elements informs how appropriate the type is for different purposes

Baseline: The line the type sits on, note that descenders dip below this line. Also for reasons for optical perception the curve of an “e” or “o” also slightly dips below this line. This is because a letter “o” looks odd if it sits exactly on the baseline.

Cap-height: The height of a capital letter. Note that certain ascenders can extend above the cap height

x-height: The distance between the baseline and the top of a lower case “x”. This is important because the relationship between a letter’s x-height and the cap-height affects how readable a type is.

Types of font

Serif versus sans-serif and other categories:

An example of some of the many different forms of typeface. The left hand column shows the category, the right the specific font name

There are many different font styles but an obvious place to start is between serif and sans-serif fonts.

Serif fonts have extra features such as brackets and finials on the end of strokes. Before the Victorian age almost all typefaces were serifs.

Sans-serifs first emerged in the Victorian age primarily as a advertising form. However they really came to prominence in the 20th century during the modernist period.

Both forms have their uses and although sans-serifs are being used more and more, serifs still have a big role to play, especially for long form reading, as I shall discuss below.

Context

Type for the moment

Type for long-form reading

Longform type

  • Eccentricities amplified when repeated e.g. Bree Vs Calluna
  • Good x-height: 60-70% of cap height
  • Low to medium contrast
  • Distinct letterforms
  • Full punctuation / extended language as required

Eccentricity examples

 

In this example you can see Bree may appear to be a nice typeface. But the eccentric “g” and “f” would quickly becoming irritating over the course of reading a long document. Calluna, on the other hand, still has nice features, but would be comfortable for longer reading.

x-height examples

A generous x-height (meaning a smaller difference between x-height and cap-height generally improves  readability. But things can go too far. Consider the McDonald’s typeface (this one from the 90s:

The extremely big x-height works as part of display advertising, but won’t be suitable for long form reading because scanning a line of text is difficult when the letterforms are a near uniform height.

An example of different x-heights

Low to medium contrast

Contrast reflects the degree of difference between the thin and thick strokes of a typeface. Sans serif fonts like Helvetica tend to be quite uniform, meaning there is no or little difference in stroke thickness.

Serif fonts tend to have more contrast, and some, such as Bodoni, have extreme contrast.

It has become a trend to think that uniform sans-serifs are somehow more “professional” and “modern” than serif typefaces. But there is a reason why novels and newsprint tends to be set in serif. By having contrast and serif features like brackets these typefaces have enough differentiation between letterforms to aid the reader and make the experience smoother.

It is therefore a good idea to user sans-serif typefaces for titles and display purposes and serif typefaces for the long form text:

A example of different levels of contrast

Pairing fonts

Contrast Vs Harmony

Consider pairing serifs with sans-serifs to create contrast

You might consider using just one typeface and using scale, colour or weight to indicate hierarchy

If you do choose to pair fonts there are some considerations:

You want enough contrast to indicate a deliberate difference between typefaces

Pairing two serifs with each other is difficult because the different serif styles tend to clash

Therefore it’s common practice to pair serif body text with sans-serif headlines or vice-versa.

Here are some examples:

The above is a bad font pairing. The title and text fonts are too similar so that the small differences look wrong. It would have been better to use the same typeface for both purposes and establish hierarchy with size, weight or colour
A better font pairing. It is clear that two different type styles have been chosen. By mixing a sans-serif with a serif a clash of serif styles is neatly avoided.

Establishing hierarchy

The most obvious way to indicate heading and subheading priority is through scale

Simply put, the larger the font the more important it is

But there are other ways to establish hierarchy:

Weight

colour

Style

A note on sizing fonts:

You can style fonts with by simply specifying the size in pixels

BUT: You can also size fonts using ems and rems

An Em is a relative sizing method. by default 1em is set by the browser to 16px.

You can then use this to set other typographic elements relative to an em.

So we could set our p element to 1.2em then our h1 element to 2em

The advantage of doing this is that if we ever want to change the size of our p element font the other elements will scale appropriately

This is particularly useful because not all typefaces are the same size. Also we may want to tinker with the text size on different displays

Setting type

Typographic Scale

There are two schools of thought about how to size typographic elements in relation to one another

The first school is to do everything by eye. So for example using 16px as a base double the size for a sub head and double again for a headline size and adjust it until it looks right.

The other school suggests using a typographic scale to provide a mathematical base for the scaling of type.

You can find examples of these at: type-scale.com

Measure and line height

An old rule from print typography is that the measure (line length) should be between 45 and 75 characters, so adjust your text boxes to accommodate this length. Ideally aim for something in the mid 60s.

The line height is the distance between lines of text. There is no magic number as to what this should be because it depends on the fonts descenders, ascenders and things like the font weight.

Generally the longer the line length the more line height you need to make it more comfortable for the eye to move between lines of text.

Neglecting measure is super common on websites, but it’s easy to fix.

Justification

In products like Adobe InDesign there are a host of options to handle hyphenation which don’t exist in css.

Because of this is often best to avoid hyphenating text on the web.

Therefore, unless we have a generous measure a left justified / ragged right setting is usually best.

This avoids rivers in our text.

Responsive design

On a desktop people are usually reading text from about an arm’s length away.

On a phone or tablet, however we generally read from a closer position.

Therefore we can reduce the font size a bit to compensate. This has the added advantage of increasing our measure slightly.

The measure will always bit a bit short on a mobile, but again we can compensate by decreasing the line height a bit.

Further reading

This has been a long post, but it has only scratched the surface of web typography. Here are some useful resources if you want to find out more:

On Web Typography by Jason Santa Maria – A List Apart

Articles on web typography at A List Apart

Google Fonts

Examples of Google Fonts usage – Design Instruct

Adobe Typekit

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.