Detail in web typography from Ampersand Conference

Yves Peters gave a great overview of web typography, with some helpful hints, tips and tricks when dealing with web typography at Ampersand in Brighton. From the criteria of font selection, to understanding the detail in typography, to looking at what’s not there, he provided a good practical overview of how to effectively serve good web typography.

Since Web Typography became big in 2010, it’s now incredibly easy to have lovely fonts on your website, able to be served to just about any device or browser out there. However, in the words of Elliot Jay Stocks‘ talks over the past few years, with great power comes great responsibility. Now that we can use a large array of type, we must learn how to create beautiful typography. Whilst a lot of what follows may be seen as typography 101, it’s essential to go back to basics to make sure that everyone understands the foundation.

The first step in web typography is the selection process of typography. According to Yves, this process is quite fascinating, as a lot of the time people spend more time obsessing over the specific font to use, instead of what the design calls for. Yves boils it down to four areas of consideration:–

  1. Formal Aspects – Looking at the architecture of the typeface and thinking about the original purpose. Is the type a hard working typeface? Is it a purely decorative typeface?
  2. Historical context – Looking at when the typeface was created and the historical uses of the typeface. Quite often type represents a period, so using a modernist typeface like Futura might not be ideal for a site about 16th century architecture. Also, whether the typeface is an original typeface, or a modern interpretation can alter the meaning.
  3. Cultural references – similarly, the cultural references of the type can have a rather big emotional effect. Type doesn’t only confer meaning via the words themselves, but also via the cultural references of the design of the type itself. Jon Tan has talked at length on this, and you can see some great examples in his ‘Welcome to a Brave New World of Web Type‘ talk from Beyond Tellerand last year.
  4. Functional criteria – You need to know what’s ‘under the hood’ with the type you want to use. The glyphs that are readily visible on the keyboard represent a small fraction of the glyphs that could possibly be included in a typeface. Thanks to OpenType, it’s now possible to have over 15,000 glyphs in a cross-platform compatible format.

Once the selection criteria has been worked through, it’s important to understand the basics of typeface anatomy, notably x-height, cap height, ascenders and descenders and small caps height. Understanding these allows you to see how well a typeface has been made.

Once the typeface has been selected, there are a few tips and tricks to make sure that you serve your type on the web as nicely as possible. The important thing to remember is never rely on the machine to translate what you want from straight text to legible, beautifully crafted type.

Quotation marks are quite often the cause of horror to typography enthusiasts on the web. To begin with, making sure the marks are facing the right way is often a small overlooked detail that can make the difference. Using the html codes “ and ” can avoid this. Single quotes and apostrophes are another area of consternation, yet the use of the html codes (‘ and ’) can avoid problems again, and always remember to use ’ to mark an apostrophe.

Also, knowing the differences between the different types of numerals (Lining figures, Oldstyle figures), as well as the spacing differences (Tabular and Proportional) can make for more pleasant type. Yves has done a full writeup on figuring out numerals on Font Feed that you can read in more detail.

Finally, Yves talked about the use of space within typography. He asserts that you should always question your motives with web typography, to make sure that the text is going to look great in all contexts. Quite often this is the fault of the space. Understanding the differences between a standard space, as well as non-breaking space, thin space, hair space, figure space, punctuation space and em space can make a lot of difference to the display of type, especially when resized. Jon Tan has put together a list of examples of the different types of typographic space that can be of help.

Similarly, understanding tracking can make a lot of difference. For example, Yves urges designers to not increase tracking in lowercase text, as word shapes tend to break up. However, headlines often benefit from slight tighter tracking. Conversely, all caps text can benefit from more space and looser tracking.

Yves’ overview of how to make web typography was an incredibly in-depth look at how designers can effectively use typography to create not only more attractive designs, but more legible and user friendly experiences for the users of your site. For more from Yves, have a look at Font Feed and Typographer, or follow him on Twitter at @baldcondensed.

Published by Luke

Luke is one of Ubelly’s resident social media guys, occasionally switching hats for a bit of design. He is the in-house meme expert, uses foursquare a little too much and gets hot under the collar when it comes to design, usability and gorgeous code.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>