Technical Web Typography: Guidelines and Techniques

Advertisement

Editor’s Note: This article is a bit out of date — please proceed reading with caution.

The Web is 95% typography1, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now — reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs?

Unfortunately, for every person who is obsessed with even the tiniest details of typography, a dozen or so people seem to be indifferent. It’s a shame; if you’re going to spend time writing something, don’t you want it to look great and be easy to read?

Creative and Technical Typography Link

I’m not sure these two categories are recognized in the industry but, in my mind, the two main types of typography are creative and technical.

Creative typography involves making design decisions such as which face to use, what mood the type should create, how it should be set, what tone it should have — for example, should it be airy, spacious and open (light) or condensed, bold and tight, with less white space (dark)? These decisions must be made on a per-project basis. You probably wouldn’t use the same font on a girl’s party invitation and an obituary. For me, this is creative typography: it is design-related and changes according to its application.

Technical typography is like type theory; certain rules and practices apply to party invitations just as well as they do to obituaries. These are little rules that always hold, are proven to work and are independent of design. The good news is that, because they are rules, even the most design-challenged people can make use of them and instantly raise the quality of their text from bog-standard to bang-tidy.

We’ll focus on technical type in this article. We’ll discuss the intricacies and nuances of a small set of rules while learning the code to create them.

We’ll learn about:

Fair warning: this is an in-depth article. It requires some basic CSS knowledge. If you’d rather learn a little at a time, use the links above to jump from section to section.

If any of the code examples seem out of context or confusing, then here is the final piece13 that we’re going to create (merely for your reference).

Setting Things Up Link

To begin, copy and paste this into an index.html file, and save it to your desktop:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Your Name</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

  <h1>Your Name</h1>

</body>
</html>

Next, copy and paste this (slightly modified) CSS reset into your style.css sheet, and save that to your machine, too:

/*------------------------------------*
  RESET
*------------------------------------*/
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea,
p, blockquote, th, td { 
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset, img {
  border: 0;
}
address, caption, cite, dfn, th, var {
  font-style: normal;
  font-weight: normal;
}
caption, th {
  text-align: left;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
q:before, q:after {
  content: '';
}
abbr, acronym {
  border: 0;
}


/*------------------------------------*
  MAIN
*------------------------------------*/
html {
  background: #fff;
  color: #333;
}

Choosing A Font Face

First, let’s choose a face in which to set our project. There is, as you know, a solid base of Web-safe fonts to choose from. There are also amazing services like Fontdeck14 and Typekit15 that leverage @font-face to add non-standard fonts in a fairly robust way.

We’re not going to use any of those, though. To prove that technical type can make anything look better, let’s restrict ourselves to a typical font stack.

Let’s use a serif stack for this project, because technical type works wonders on serif faces:

html {
  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  background: #fff;
  color: #333;
}

Cambria is a beautiful font, specifically designed for on-screen reading and to be aesthetically pleasing when printed at small sizes. If you want to alter this or use a sans-serif stack, be my guest.

On Using Helvetica Link

If you’d like to use Helvetica in your stack, remember that Helvetica looks awful16 as body copy on a PC. To alleviate this, use the following trick to serve Helvetica to Macs and Arial to PCs (you can find more details about this trick in Chris Coyier’s recent article Sans-Serif17):

html {
  font-family: sans-serif; /* Serve the machine’s default sans face. */
  background: #fff;
  color: #333;
}

Beware! This is a hack. It works by using a system’s default sans font as the font for the page. By default, a Mac will use Helvetica and a PC will use Arial. However, if a user has changed their system preferences, this will not be the case, so use with caution.

Choosing A Font Size

Oliver Reichenstein authored an inspiring article18, way back in 2006, stating that the ideal size for type on the Web is 16 pixels: the user agents’ standard. This insightful article changed the way I work with type; it’s well worth a read. We’ll use 16 pixels as a base size, then. If you want to use another font size, feel free, but if you stick with 16 pixels, your CSS should look something like this:

html {
  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  background: #fff;
  color: #333;
}

If you want to use, say, 12 pixels, it will look like this:

html {
  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  font-size: 0.75em; /* 16 * 0.75 = 12 */
  background: #fff;
  color: #333;
}

You’ll be left with a basic layout (demo)19.

Choosing A Grid System

The grid is an amazing tool, and it’s not just for typographical ventures. It ensures order and harmony in your designs.

Some grid systems out there, in my opinion, go a little overboard and offer 30 or more columns, all awkwardly sized. For this tutorial, we’ll use Nathan Smith’s20 16-column 960 Grid System21 (demo22). 960.gs is amazing; its beauty lies in its simplicity. It is an ideal size for designs narrower than 1020 pixels, it has a good number of columns, and the numbers are easy to work with. You might also notice that the 960 Grid System only has 940 pixels of usable space. “960” comes from the 10 pixels of gutter space on either side.

Update your CSS to use a guide background image23:

html {
  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  background: url(…/img/css/grid-01.png) center top repeat-y #fff;
  color: #333;
  width: 940px;
  padding: 0 10px;
  margin: 0 auto;
}

You should now have something like this:

Screenshot24

Choosing A Measure

We have our font size, so now we need to work out our ideal line length, or “measure.” Robert Bringhurst writes in The Elements of Typographic Style that, “anything from 45 to 75 characters is widely regarded as a satisfactory length of line….”

A measure that is too short causes the eye to jump awkwardly from the end of line x to the start of line x + 1, and a measure that’s too long can cause the reader’s eye to double back. You can circumvent this somewhat by following these rules of thumb:

  • for a longer measure, use slightly greater leading2625;
  • for a shorter measure, use slightly smaller leading2625.

So, a measure of 45 to 75 characters is the optimum for readability in columns of text. I can pretty much guarantee that after you learn this, every massively, overly long measure you see on the Web will annoy you spectacularly.

Here are 69 characters, a nice middle ground between the recommended 45 and 75:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit accumsan

Paste that into your page, and count how many red columns it covers. This is how wide your measure will be:

Screenshot27

Here we have text spanning eight columns, which is 460 pixels of 960.gs. Update your CSS to read as follows:

/*------------------------------------*
  MAIN
*------------------------------------*/

html {
  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  background: url(…/img/css/grid-01.png) center top repeat-y #fff;
  color: #333;
}

body {
  width: 460px;
  margin: 0 auto;
}

Screenshot28

If you picked a font size other than 16 pixels, make sure your measurements reflect this!

Vertical Rhythm: Setting A Baseline

Leading (which rhymes with “wedding”) is a typographical term from way back when typographers manually set type in letterpress machines and the like. The term refers to the act of placing lead between lines of type in order to add vertical space. In CSS, we call this line-height.

Line height should be around 140%. This isn’t a great number to work with, and it’s only a general rule, so we’ll use 150% (or 1.5 em). This way, we simply need to multiply the font size by one and a half to determine our leading.

Some general rules for leading:

  • with continuous copy, use large leading;
  • with light text on dark background, use large leading;
  • with long line lengths, use large leading;
  • with large x-height, use large leading;
  • with short burst of information, use small leading.

If you used a 16-pixel font size, then your line height will be 24 pixels (16 pixels × 1.5 em = 24 pixels). If you used a 12-pixel font size, then your line height will be 18 pixels (12 pixels × 1.5 em = 18 pixels).

The Magic Number

For math-based tips on typography, check out this video on Web type29 by Tim Brown. The fun starts at 13:35.

The pixel value for your line height (24 pixels) will now be your magic number. This number means everything to your design. All line heights and margins will be this number or multiples thereof. I find it useful to always keep it in mind and stick to it.

Now that we know our general line height, we can define a baseline grid. The grid we currently have aligns only the elements in the y axis (up and down). A baseline grid aligns in the x axis, too. We need to update our background image now to be 24 pixels high and have a solid 1-pixel line at the bottom, like this30.

Again, if you chose a font size of 12 pixels and your line height became 18 pixels, then your background image needs to be 18 pixels high with a solid horizontal line on the 18th row of pixels.

Your CSS should now look something like this:

html {
  …
}

body {
  width: 460px;
  margin: 0 auto;
  line-height: 1.5em;
}

Your page should now look something like this:

Screenshot31

As you can see, the text hovers slightly above the horizontal guideline. This doesn’t mean that anything is set incorrectly; it is merely the offset. This could hinder the process, so either tweak the padding on the body to move the page or alter the position of the background image to move it around a little. Some tinkering in Firebug tells me that the CSS needs to be as follows:

html {
  …
  background: url(…/img/css/grid.png) center -6px repeat-y #fff;
  …
}

That gives me the following — and everything lines up perfectly:

Screenshot32

Now, let’s get back to the magic number. Maybe you think the text is sitting too close to the top of the screen? Well, to remedy that, we’ll move the text down the page by a multiple of that magic number — let’s say 72 (3 × 24 = 72 pixels). Now adjust your CSS to read:

body {
  width: 460px;
  margin: 0 auto;
  line-height: 1.5em;
  padding-top: 72px;
}

Substitute your own magic number if you used a different font size.

We should get this:

Screenshot33

It took some doing, but our canvas is ready at last!

Setting A Scale

Okay, our reset has made our h1 and p the same size. We need to get some basic font styles in there. Add this block of code to the end of your CSS:

/*------------------------------------*
  TYPE
*------------------------------------*/
/*--- HEADINGS ---*/

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 24px;
  font-weight: bold;
}

/*--- PARAGRAPHS ---*/

p {
  margin-bottom: 24px;
}

Recognize your magic number? Let’s refresh the page and take a look:

Screenshot34

Your magic number will now be the default margin-bottom value for all of your elements. This, combined with the line height, will keep everything on the baseline grid.

What we now need, though, are some different font sizes for the headings. We need a typographic scale. I suggest this:

  • h1 = 24 pixels,
  • h2 = 22 pixels,
  • h3 = 20 pixels,
  • h4 = 18 pixels,
  • h5 = 16 pixels,
  • h6 = 16 pixels.

Many people work in pixels, but I much prefer working in ems. An em is proportional to the current size of the font: 1 em in 72-point Georgia is 72 points, and 1 em in 8-point Garamond is 8 points.

So, if our base font size is 16 pixels (1 em), then 24 pixels would be 1.5 ems (24 ÷ 16 = 1.5). If we continue, we end up with:

  • h1 = 24 pixels → 24 ÷ 16 = 1.5 ems
  • h2 = 22 pixels → 22 ÷ 16 = 1.375 ems
  • h3 = 20 pixels → 20 ÷ 16 = 1.25 ems
  • h4 = 18 pixels → 18 ÷ 16 = 1.125 ems
  • h5 = 16 pixels → 16 ÷ 16 = 1 ems
  • h6 = 16 pixels → 16 ÷ 16 = 1 ems

Next, we need to make sure the line height of each is 24 pixels. This means that the h1 at a 24-point font size will have a line height of 1 em. Here’s the math:

(magic number) ÷ (font size) = (line height)

Using our scale, the full CSS for the headings (including the math) is:

/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 24px;
  font-weight: bold;
}

h1 {
  font-size: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */
  line-height: 1em; /* 24px --> 24 ÷ 24 = 1 */
}

h2 {
  font-size: 1.375em; /* 22px --> 22 ÷ 16 = 1.375 */
  line-height: 1.0909em; /* 24px --> 24 ÷ 22 = 1.090909(09) */
}

h3 {
  font-size: 1.25em; /* 20px --> 20 ÷ 16 = 1.25 */
  line-height: 1.2em; /* 24px --> 24 ÷ 20 = 1.2 */
}

h4 {
  font-size: 1.125em; /* 18px --> 18 ÷ 16 = 1.125 */
  line-height: 1.333em; /* 24px --> 24 ÷ 18 = 1.3333333(3) */
}

h5, h6 {
  font-size: 1em; /* 16px --> 16 ÷ 16 = 1 */
  line-height: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */
}

There’s our typographic scale.

Now, to test it, let’s try the following markup:

<body>

  <h1>Your Name</h1>

  <h2>Your Name</h2>

  <h3>Your Name</h3>

  <h4>Your Name</h4>
  
  <h5>Your Name</h5>
  
  <h6>Your Name</h6>
  
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit accumsan</p>

</body>

You might notice that not all of the lines of text sit perfectly on a gridline, but that’s okay because they all honor the baseline! This is what I get:

Screenshot35

You might think that something has gone wrong. But if you look, the paragraph lies just fine once you get back to the normal font size. To be honest, I’m not entirely sure about what causes this effect; the numbers we used are all correct, and the vertical rhythm as a whole remains intact, but individual lines of larger text appear to be offset from the baseline. I think this could be due, in part, to the glyphs’ setting in their em box.

What Next? Link

Head back into your markup and remove everything except the h1. Now we’re ready to do something useful. Let’s make a little “About you”-page.

The h1 is the name. And the markup can simply be:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Harry Roberts</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>

  <h1>Harry Roberts</h1>

</body>
</html>

Now let’s add a little introductory paragraph about yourself. Mine reads:

<p>Hi there. My name is Harry Roberts.
I am a Web developer and type geek from the UK.
I love all things Web dev, and I am a huge advocate
of Web standards and proper ethics.</p>

Let’s experiment with altering the font size arbitrarily. Add this to your CSS:

*--- PARAGRAPHS ---*/
p {
  margin-bottom: 24px;
}

body > p:first-of-type {
  font-size: 1.125em;
    /* 18px → 18 ÷ 16 = 1.125 */

  line-height: 1.333em;
    /* 24px → 24 ÷ 18 = 1.3333(3) */
}

Here we’re giving the first paragraph — a direct descendant of the body element — a font size of 18 pixels and a line height of 24 pixels. See, there’s your magic number again!

You might again see slight oddities with the paragraph sitting on the baseline. To make sure the vertical rhythm is still intact, duplicate the paragraph once more. You should get this:

Screenshot36

Here you can see that the vertical rhythm is still intact and working correctly.

Now for the best bits.

Tips on Technical Typography Link

There’s a good chance that you won’t want the grid to always be on, so change this CSS:

/*------------------------------------*
  MAIN
*------------------------------------*/

html {
  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  background: url(…/img/css/grid.png) center -6px repeat-y #fff;
  color: #333;
}

body {
  width: 460px;
  margin: 0 auto;
  line-height: 1.5em;
  padding-top: 72px;
}

… to this:

/*------------------------------------*
  MAIN
*------------------------------------*/

html {
  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  color: #333;
}

body {
  width: 460px;
  margin: 0 auto;
  line-height: 1.5em;
  padding-top: 72px;
  background: #fff;
}

body:hover {
  background: url(…/img/css/grid.png) center -6px repeat-y #fff;
}

This will show the grid when you hover over the body, and hide it when you don’t.

Spacing And Setting Paragraphs Link

We’ve sorted out the magic number, and we know we should use it to space the elements, but there’s more than one way to denote the beginning of a new paragraph. One is the method we’re already using: inserting a blank space (one magic number) between the paragraphs. The second is indentation.

Typically, you would indent every paragraph except the first in a body of text; the first paragraph has no indent and the second, third, fourth and so on do have an indent (typically with a width of 1 em).

Enric Jardi writes in Twenty-Two Tips on Typography that, “… you must not use both indentation and a line break at the same time; that is redundant.”

Here’s some quick CSS for indenting only the second and subsequent paragraphs in a body of text:

p {
  margin-bottom: 24px;
}

p+p {
  text-indent: 1em;
  margin-top: -24px;
}

For an explanation of how and why this works, refer to my other article, “Mo’ Robust Paragraph Indenting37.” You might also want to look at Jon Tan’s silo38.

Alignment Link

When setting type on the Web, use a range-left, ragged-right style. This basically means left-justifying the type. If you use a sufficiently long measure, then your rags (the uneven edges on the right side of a left-aligned paragraph) will generally be clean; the raggedness of their appearance can, however, be exacerbated at short measures, where a large percentage of each line could end up as white space.

Justified typesetting can look great but lead to unsightly “rivers” in the text. To avoid this, rewrite the copy to remove them, or use something like Hyphenator.js39, which is remarkably effective.

Proper Quotations Marks, Dashes And Ellipses Link

Quotation Marks

Many people are unaware that there are proper quotation marks and “ambidextrous” quotation marks. The single- and double-quotation keys on your keyboard are not, in fact, true quotation marks. They are catch-alls that can function as both left and right single and double quotation marks; they are, essentially, four glyphs in one key.

The reason behind this is simply space. A keyboard cannot feasibly fit proper left and right single and double quotation marks.

So, what is a proper quotation mark? A curly (or “book”) quotation mark is rounded and more angular than an ambidextrous (keyboard-style) quotation mark. Left single and left double quotation marks look like this: ‘ and “ (&lsquo; and &ldquo;, respectively). Right single and right double quotation marks look like this: ’ and ” (&rsquo; and &rdquo;, respectively).

Many people incorrectly refer to ambidextrous quotation marks as “primes,” but a prime is a different glyph. Single and double primes look like this: ′ and ″ (&prime; and &Prime;, respectively). They are used to denote feet and inches (e.g. 5′10″).

I said that one key incorporates four glyphs. In fact, two keys incorporate six glyphs.

Which Quotation Marks Should You Use? Link

The type of quotation marks to use (double or single) varies from country to country and style guide to style guide. Double quotation marks are typically used to quote a written or spoken source, and single quotation marks are used for quotes within quotes.

However, I much prefer Jost Hochuli’s advice in Detail in Typography40: “… the appearance is improved by using the more obtrusive double quotation marks for the less frequent quotations within quotations.” Which basically means, for a nicer appearance, use single quotation marks, and then double quotation marks for quotes within quotes. (If I had a penny for every time I said quotes in this section.)

For example:

‘And then he said to me, “Do you like typography?” And naturally I said that I did.’

Use a right single quotation mark where you’d normally use an apostrophe in text: “I’m a massive typography nerd!” (I&rsquo;m a massive typography nerd!)

In short, stop using those horrible keyboard quotation marks, and start using lovely curly marks in your work.

Non-English Quotation Marks Link

The quotation marks we’ve covered are used in English, but quotes look different in other languages.

French and Spanish use guillemets, «like this» (&laquo;like this&raquo;). In Danish, they are used »like this« (&raquo;like this&laquo;). In German, using a combination of bottom and regular double quotation marks is common, „like this“ (&bdquo;like this&ldquo;).

For a great overview of other non-English quotation marks, see the Wikipedia entry on “Non-English Usage of Quotation Marks41.”

Dashes

We know that keyboards can’t accommodate all quotation marks; and they can’t accommodate all types of dashes either. The hyphen key (-) is another catch-all. There are three main types of dash: the em dash, en dash and hyphen.

The em dash (&mdash;) denotes a break in thought—like this. It’s called the “em” dash because, traditionally, it is one em wide. Em dashes are usually set without spaces on either side (as above).

The en dash (&ndash;) is traditionally half the width of an em dash. It is used to denote ranges, as in “please read pages 17–25” (17&ndash;25). It can also denote relational phrases, as in “father–son” or “New York–London.”

The hyphen simply ties together compound words, as in “front-end developer.”

The em dash, en dash and hyphen are different, and each has unique uses.

Ellipsis

An ellipsis is used to denote a thought trailing off. It is also used as a placeholder for omitted text in lengthy quotations.

The ellipsis has become the bane of my life. I often come across people who use a series of dots (periods) in place of a proper ellipsis, like so……

An ellipsis is not three dots. It is one glyph that looks like three dots. Its HTML entity is &hellip; (as in horizontal ellipsis).

So there were a few glyphs for you to use with quotes, primes, dashes and ellipses. Let’s recap:

Name/Glyph HTML entity Example
Quotes and primes
Left single quote ‘ and right single quote ’ &lsquo; and &rsquo; ‘Hey, this is a quote!’
Left double quote “ and right double quote ” &ldquo; and &rdquo; ‘Hey, this is a quote “within another” quote!’
Single prime ′ and double prime ″ &prime; and &Prime; The girl is 7′10″!
Dashes
Em dash — &mdash; A break in thought—like this
En dash – &ndash; Ages 2–5
Hyphen – – key front-end developer
Ellipsis
Ellipsis … &hellip; To be continued…

In addition to these common glyphs, there are numerous others: from the division symbol (÷ or &divide;) to the section symbol (§ or &sect;). If you’re interested in special characters and glyphs, then Wikipedia’s article on “Punctuation42” is a good place to start (just keep clicking from there).

Hanging Punctuation

Punctuation should be hung; quotation marks and bullet points should be clear of the edges of surrounding text. If that doesn’t make sense, don’t worry! Let’s add a new section to your page. Remove that duplicated paragraph and replace it with a list of facts about yourself. Mine looks like this:

<ul>
  <li>
    Web development
    <ul>
      <li>HTML(5)</li>
      <li>CSS(3)</li>
      <li>Accessibility</li>
      <li>Progressive enhancement</li>
    </ul>
  </li>
  <li>
    Web design
    <ul>
      <li>Typography</li>
      <li>Grids</li>
    </ul>
  </li>
</ul>

Add this to the end of your CSS sheet:

/*--- LISTS ---*/
ul, ol {
  margin-bottom: 24px;
    /* Remember, if your magic number is
    different to this, use your own. */
}

ul {
  list-style: square outside;
}

ul ul,
ol ol {
  margin: 0 0 0 60px;
}

My page now looks like this:

Screenshot43

We’ve given the lists our magic number as a margin, set the bullets to be hung outside of the text (i.e. the bullets will sit in the white of the gutter, not the pink of the column) and indented lists within lists by one grid column.

Experiment by nesting lists more and more deeply:

Screenshot44

Hang quotation marks as well as bullets. Let’s add some more text and a quote to our page:

<p>Vestibulum adipiscing lectus ut risus adipiscing
mattis sed ac lectus. Cras pharetra lorem eget diam
consectetur sit amet congue nunc consequat. Curabitur
consectetur ullamcorper varius. Nulla sit amet sem ac
velit auctor aliquet. Quisque nec arcu non nulla adipiscing
rhoncus ut nec lorem. Vestibulum non ipsum arcu. Quisque
dapibus orci vitae massa fringilla sit amet viverra nulla.</p>
    
<blockquote>
  
  <p>&ldquo;Lorem ipsum dolor sit amet,
  consectetuer adipiscing elit. In accumsan diam
  vitae velit. Aliquam vehicula, turpis sed egestas
  porttitor, est ligula egestas leo, at interdum
  leo ante ut risus.&rdquo;
  <b>&mdash;Joe Bloggs</b></p>
  
</blockquote>

The markup here is pretty straightforward: a blockquote surrounding a paragraph. You might also notice the use of a b element to mark up the name. The HTML spec45 states that “The b element [is used for] spans of text whose typical typographic presentation is boldened.” This is a loose definition, so its use for bolding the name of a person is acceptable.

Now, add this to the end of your CSS sheet:

/*--- QUOTES ---*/
blockquote {
  margin: 0 60px 0 45px;
  border-left: 5px solid #ccc;
  padding-left: 10px;
  text-indent: -0.4em;
}

blockquote b {
  display: block;
  text-indent: 0;
}

Here we indent the quote by 60 pixels from the left and right (i.e. 45-pixel margin + 5-pixel border + 10-pixel padding = 60 pixels), taking it in by one column of the grid. We then use a negative text-indent to make the opening quote hang outside of the body of text. The number I used works perfectly for Cambria, but you can experiment with the font of your choice. (Don’t forget to remove the text-indent on the b.) Now we know how to hang bullets and quotation marks.

Screenshot46

Maybe you’re wondering why I’m using double quotation marks here after recommending single quotation marks. The reason is purely aesthetic. Hanging double quotation marks in blockquote tags simply looks nicer.

Guillemets Link

Now that we’ve done that, let’s add a “Read more” link to get us from this little page to, say, our portfolio’s full “About” page. We want to imply direction or movement with this link because it’s going to take us elsewhere. We could, as many people do, use a guillemet47 (», &raquo;), but — as we covered earlier — French, German and other languages48 use this glyph as a quotation mark. Therefore, it shouldn’t be used stylistically. Add this markup to your page:

<p><a href="http://csswizardry.com/about/"
class="read-more">Read more</a></p>

Add this to the end of your CSS file:

/*--- LINKS ---*/
a {
  color: #09f;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active,
a:focus {
  position: relative;
  top: 1px;
}

.read-more:after {
  content: "0A000BB"; /* Insert a space then right angled-quote */
}

This simply places an encoded space and right-angled quotation mark49 after the “Read more” link by using CSS, which means you don’t have to add that quotation mark to your markup.

Screenshot50

You can use content:""; to keep the markup clean51. This means that other things, such as stylistic right-angled quotation marks and other decorative items of type, can be added with CSS to keep the markup free of non-semantic elements.

Let’s say you wanted to add tildes to either side of a heading:

h1 {
  text-align: center;
}
h1:before {
  content: "07E0A0"; /* Insert an tilde, then a space. */
}
h1:after {
  content: "0A007E"; /* Insert a space, then an tilde. */
}

Some Images

Elements such as tables and images are notoriously difficult to fit into baseline grids unless you save every one as a multiple of your magic number. However, we can float images left and right within the y axis of the grid and allow text to fit the baseline around it. Grab an image of yourself (or your cat or whatever) and crop it to a width that fits our 16-column 960.gs52. I’m going to use a 160-pixel-wide image (i.e. three grid columns).

Place it in the markup just after your h1, thus:

…
<body>

  <h1>Harry Roberts</h1>
  
  <img src="img/me.jpg" alt="A photo of me." id="me" />

If you hit “Refresh” now, it will likely break the baseline. Never fear — add this CSS:

/*------------------------------------*
  IMAGES
*------------------------------------*/

#me {
  float: right;
  margin: 0 0 0 20px;
  display: block;
  width: 148px;
  height: auto;
  padding: 5px;
  border: 1px solid #ccc;
  
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}

Notice how the image doesn’t appear to sit on the baseline, but the rest of the text does? Beautiful, isn’t it?

So, there you have it. Using nothing more than plain ol’ browser text, one image, a lot of typography knowledge and some careful, caring attention, you’ve made a full page of typographic splendor — a page that uses a grid, a baseline, proper punctuation and glyphs, an ideal measure and leading and a typographic scale.

Now get in there! Add elements, subtract them, add colors, add your own creative type. Just remember the few simple rules and your magic number, and you’re away!

Screenshot53
The final piece, with the grid.

Screenshot54
The final piece, without the grid.

Final Words Link

In this admittedly long piece, we have discussed only technical typography. Everything in this article can be applied to almost any project. None of it was speculation; these are tried and tested methods and proven tips for beautiful Web type.

If you’d like to see more creative applications of Web type, then check out the work of the following creatives (each of whom has had much influence on my career so far):

  • Oliver Reichenstein of Information Architects55
    A huge inspiration to me and a very knowledgeable guy who has a passion and talent for readable, sensible and beautiful type on the Web.
  • Jon Tan56
    Jon’s website is gorgeous. He is a member of the International Society of Typographic Designers (ISTD), and his writings and “silo” (on his personal website) are a hive of typographical information.
  • Jos Buivenga57
    Not strictly a Web-type guy, but Jos is the creator of some of the most beautiful (and free!) fonts in existence. His work got me hooked on typography.
  • Khoi Vinh58
    His timelessly beautiful website spurred my love for grids. He also recently wrote a book59 on that very subject.

Keep in mind that you don’t have to be the world’s best designer to create beautiful type. You just have to care.

Further Reading Link

(al)

th {
background: #e4e4e4;
}
#tt-punctuation td { padding: 3px; }

Footnotes Link

  1. 1 http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/
  2. 2 #tt-face
  3. 3
  4. 4 #tt-grid
  5. 5 #tt-measure
  6. 6 #tt-rhythm
  7. 7 #tt-scale
  8. 8 #tt-quotes
  9. 9 #tt-dashes
  10. 10 #tt-ellipses
  11. 11 #tt-hanging
  12. 12 #tt-images
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/technical-type/index.html
  14. 14 http://fontdeck.com/
  15. 15 http://typekit.com/
  16. 16 http://csswizardry.com/type-tips/#tip-01
  17. 17 http://css-tricks.com/sans-serif/
  18. 18 http://www.informationarchitects.jp/en/100e2r/
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/01.jpg
  20. 20 http://sonspring.com/
  21. 21 http://960.gs/
  22. 22 http://960.gs/demo.html
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/css/grid-01.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/02.jpg
  25. 25 #tt-rhythm
  26. 26 #tt-rhythm
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/03.jpg
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/04.jpg
  29. 29 http://vimeo.com/17079380
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/css/grid.png
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/05.jpg
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/06.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/07.jpg
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/08.jpg
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/09.jpg
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/10.jpg
  37. 37 http://csswizardry.com/2010/12/mo-robust-paragraph-indenting/
  38. 38 http://jontangerine.com/silo/typography/p/
  39. 39 http://code.google.com/p/hyphenator/
  40. 40 http://www.dealpond.com/books/compare/0907259340
  41. 41 http://en.wikipedia.org/wiki/Non-English_usage_of_quotation_marks
  42. 42 http://en.wikipedia.org/wiki/Punctuation
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/11.jpg
  44. 44 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/12.jpg
  45. 45 https://html.spec.whatwg.org/multipage/semantics.html#the-b-element
  46. 46 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/13.jpg
  47. 47 http://en.wikipedia.org/wiki/Guillemets
  48. 48 http://en.wikipedia.org/wiki/Guillemets#Uses
  49. 49 http://www.evotech.net/articles/testjsentities.html
  50. 50 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/14.jpg
  51. 51 http://csswizardry.com/2010/09/keeping-code-clean-with-content/
  52. 52 http://960.gs/demo.html
  53. 53 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/15.jpg
  54. 54 http://www.smashingmagazine.com/wp-content/uploads/technical-type/img/full/16.jpg
  55. 55 http://informationarchitects.jp/
  56. 56 http://jontangerine.com/
  57. 57 http://exljbris.com/
  58. 58 http://www.subtraction.com/
  59. 59 http://www.dealpond.com/books/compare/0321703537
  60. 60 http://www.dealpond.com/books/compare/0881792063
  61. 61 http://www.dealpond.com/books/compare/0907259340
  62. 62 http://ilovetypography.com/
  63. 63 http://jontangerine.com/
  64. 64 http://www.markboulton.co.uk/

↑ Back to top Tweet itShare on Facebook

Harry Roberts  is a Senior UI Developer for Sky.com and type nerd from the UK. Enthusiastic, passionate and often outspoken, he is a writer, designer and member of Smashing Magazine’s Experts Panel. He tweets at @csswizardry.

Advertisement
  1. 1

    I feel that 1.5em for headings doesn’t make the headings stand out, and with the font sizes you choose for headings there will be no clear distinction between each one of them.

    I use this (doesn’t break the vertical rhythm)
    h1,.h1{font-size:3.00em; margin-bottom:0.50em;line-height:1.00em}
    h2,.h2{font-size:2.00em; margin-bottom:0.75em;line-height:1.50em}
    h3,.h3{font-size:1.50em; margin-bottom:1.00em;line-height:1.00em}
    h4,.h4{font-size:1.00em; margin-bottom:1.50em;line-height:1.50em}
    h5,.h5{font-size:1.00em; margin-bottom:1.50em;line-height:1.50em}
    h6,.h6{font-size:1.00em; margin-bottom:1.50em;line-height:1.50em}

    3em is too large for h1, but haven’t found a better solution.

    1
  2. 2

    Awesome article.. i was looking for this type of article… thanks for sharing…

    0
  3. 3

    This is one great and useful article. Thank you for that!

    0
  4. 4

    Awesome article. Thanks.

    0
  5. 5

    Good article, I would avoid using margins in general with , blockquote and text, especially with IE. I’d rather use padding & text indent. HTML 5 boilerplate does a lot of nice reset work for you and it includes modernizr to help out with those awful marginal issues in IE.

    You couldn’t be more spot on in saying “if you take the time to write something, don’t you want it to look great and be easy to read?”

    However the case, a grid is a great start; it’s very traditional—but otherwise effective at helping you lay your type out clean and clear.

    0
  6. 6

    One of the best article I have read for a really long time. Thanks a lot!

    0
  7. 7

    not quite. the opening guillemet is followed by a thin unbreackable space, and the closing is preceeded by the same (&thinsp)

    0
  8. 8

    A great tutorial. Thank you

    0
  9. 9

    Very nice article! Keep up the good work!

    0
  10. 10

    Thanks a lot! Great tutorial.

    0
  11. 11

    Thanks, excellent article.

    I noticed one mistake. It is stated that:

    “Em dashes are usually set without spaces on either side (as above).”

    … but the example DOES have a space on each side.

    0
    • 12

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      March 14, 2011 8:32 am

      As far as I know, both techniques are widely accepted. Our styleguide here, on Smashing Magazine, uses spaces on both sides of the dash, so this article was adjusted as well. Thank you for your question!

      0
      • 13

        Be that as it may, the language used says “with no space, as above” and then the text above does use a space. That’s still an error despite SM’s style guide!

        Perhaps the phrase itself needs editing indicating that you may use spaces “as above” or keep the em dash tight to the text…?

        0
      • 14

        Melanie Richards

        March 16, 2011 7:14 am

        It should be noted that although both are widely used, an em dash without spaces is technically “correct.” Just in case you have anal-retentive print designers as your clients. :]

        0
      • 15

        Robert Bringhurst says in his Elements of Typographic Style: “5.2.1 Use spaced en dashes – rather than em dashes or hyphens – to set off phrases.”
        “5.2.3 Use the em dash to introduce speakers in a narrative dialogue.
        — So, this is a French novel? she said.
        — No, he said, it’s Manitoban.”

        0
  12. 16

    Robert O'Rourke

    March 14, 2011 8:08 am

    There’s a slightly less hackish way of setting a nice sans-serif depending on your OS.

    Specifying “Helvetica Neue” will work on a mac as it’s installed by default. After that you can specify Arial or just the sans-serif declaration.

    0
  13. 17

    I love typography, especially the technical end / proper methods of it. Thanks for sharing this article; very insightful and LOTS TO LEARN!

    0
  14. 18

    Awesome article, just what I was looking for. Thanks

    0
  15. 19

    Great tips on polishing our type skills, thank you.
    One thing though. For the magic number, would we be better off using em instead of pixel units?

    0
  16. 20

    Wow, thanks for the mention, Harry!

    0
  17. 21

    Great article. One thing seems odd – why are the top level bullets jumping outside of the left margin? I don’t think I’ve ever seen that treatment before…

    0
    • 22

      The author is correct in pointing out that punctuation doesn’t belong at the margin of text. What is called “hanging” punctuation is the correct method to use. A lot of typographic details that was used for print was left behind when the web came along because it was too complex to format correctly. Now that we have the ability to format things correctly, we should try to do so.

      0
  18. 23

    You have no clue how long I’ve been searching for an article like this that deals with web typography. It rocks, and so does your blog, Harry. I’ve been a follower for a while now.

    Cheers mate :)

    0
  19. 24

    Alexey Sinkevich

    March 14, 2011 10:56 am

    That’s cool! Like a very big book with 1000’s pages…

    0
  20. 25

    Thank you a lot. Your article help me to understand the grid-system better.

    0
  21. 26

    I just wanted to point out a fact that the author either doesn’t understand about typography or didn’t point out. The key unit of measurement you are using is “em” and you state that one em is the equivalent of 16 pixels. The em unit is a relative unit to the font size you are actually already setting; it is typically a horizontal unit that originates from the width of that fonts capital letter “M”. Therefore 1.5ems to a default of 16 pixels font size is not the same 1.5ems if the font size is different. In typography, points (pts) are used for most vertical height measurements and ems are used for a horizontal measurement. One point is 1/72nd of an inch (that is why all text editors go up to size 72 by default – it is one inch tall and also where the original 72dpi came from on monitors) and the typical leading is 120% of the font size in points for print text layouts. I have read that studies show the eye needs a little more space between lines for screen than paper, so 130% – 140% is nice (i.e. 12pt font with a 16pt leading).

    Other than that, I think this was an excellent read and a great article to be found on Smashing Magazine! The author did an excellent job, I just wish that html 5 / css3 had incorporated more typographic control for things such as widows and orphans

    0
    • 27

      +1

      If you set the body font size as 12px, then 1em will be 12px.

      for example
      body{font: 12px/1.5em} is equivalent to body{font: 12px/18px}

      h1{font: 32px; margin-bottom:1em} is equivalent to h1{font: 32px; margin-bottom:32px}

      0
    • 28

      I’m pretty sure you’ve just misread… What he said was:
      “So, if our base font size is 16 pixels (1 em), then 24 pixels would be 1.5 ems (24 ÷ 16 = 1.5). If we continue, we end up with:”

      Perhaps it could have been better explained – but most people who have got this far with type on the web already know that ems are relative.

      0
  22. 29

    Awesome article. I am sure “must have” documentation for every designer.

    I was expecting some kind of this article to get better idea about grid system and typography.

    I am little aware that padding and margin are related to typography. But grid and typography is definitely new to me and i am sure i can use it on my WP themes.

    Thank you,

    0
  23. 30

    Most of the points were covered in earlier articles on SM, but this will serve as a refresher.

    I would love to see a article on Creative typography.

    0
  24. 31

    Harry, you dog. This article is gold. I love all your work @csswizardy and appreciate your passion for good type.

    **Correction needed in the second to last sentence: “Keep in mind tou don’t have to be the world’s best designer to create beautiful type.” (tou / you)

    0
    • 32

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      March 14, 2011 1:31 pm

      Thank you for pointing it out! The mistake is fixed now.

      0
  25. 33

    Valentin Spitsyn

    March 14, 2011 1:16 pm

    This is exactly what I needed, as I’m reading the Smashing Typography book now. Right on time!

    Thanks!

    0
  26. 34

    Great piece. Although HTML5 means we’ll have to start using decimal and hex in place of the current character entities at some point. Farewell …

    http://www.html-5.com/cheat-sheet/html-character-codes.html

    0
    • 35

      Even better, use utf-8 characters; years ago we went fully utf-8 from front to back: .htaccess charset, file encoding, meta tag charset, mysql db & table encoding [including driver], and now I never have to see another frigging &dumbcode; in the middle of my text. We live in an internationalized world, we don’t type &eacute; in French we type é, why should web designers have to deal with this?

      It’s surprising to me that people still worry about awkward html entities for character encoding stuff. This reminds me of the 90’s going to webreference.com to check the iso-8859-1 list. Boring.

      Great article though!

      0
  27. 36

    Great article thanks for writing
    I prefer using px for font sizes, using em is great for relative values such as line height but not for font sizes. For one simple reason, images don’t use em, the whole page should scale not just the text, most modern browsers do this already.

    As for 960 gs, its wonderful, but it breaks the principles of css zen, imagine writing your document then removing the css and the replacing it with another style sheet. You would have to go through the document removing and replacing classes. The other problem with 960 is the small 10px outer margin, really should be 20px, 980px in total, reason is that the outside margins should keep the same spacing as the inner gutters, keeping the white space consistent. I still think its great, the dimensions page on the 960.gs is very handy.
    Thanks again for the article.

    0
  28. 37

    I wouldn’t say it is strictly true to say that hanging punctuation is always better. For example when your body text is constrained within a fixed boxed area, hanging punctuation can break the white space surrounding the text. It could also fall on the border around objects which can look odd.

    I also like to have the bullets indented when the points they have are more important than the text surrounding them. People tend to skim body’s of text for the significant pieces of information which is often summarized in bullet points, and indented bullets are more visually distinct than hanging ones.

    Other than that a fairly interesting read thanks.

    0
  29. 39

    really great article! It’s hard to find good info. out there regarding technical typography. Much appreciated.

    0
  30. 40

    It is a very good article that i’m looking for a long time. Thanks for your effort to bring us these useful knowledges. You’re rocks !!!

    0
  31. 41

    Great read! I would love to see more articles like this on Smashing Magazine.

    0
  32. 42

    wow, thank’s for the magic number! it’s work for me. :-)

    0
  33. 43

    Greate article, should have label “MUST READ” !

    0
  34. 46

    Great! Was searching for something like that for a long time…

    0
  35. 47

    Russian also use guillemets, as well as number of other European and Asian languages. But please, never ever use guillemet as an arrow. It’s clearly NOT an arrow, and half of the world will not understand at all why you use quotation mark as one, so it’s really a bad advice you have in brilliant article. Use → or ← instead. Look → isn’t it better?

    0
    • 48

      For an international site, sure, but if the site’s audience is primarily North American I would argue that using guillemets as ‘see more’ arrows is all right because that’s convention in this part of the world.

      0
  36. 50

    Very nice article! Keep up the good work!

    0
  37. 51

    One of the best and most informative article on typography ( a very essential and important aspect of webpage design ). The magic number concept seriously seems like magic. It’s true that math can be applied everywhere and anywhere. The final outcome of this typography care taken is so clean, readable and beautiful :) . Thank you Harry
    Looking forward to an article on creative typography.

    0
  38. 52

    Thanks for a great article Harry, it’s really pushed my typography forward. I have a question for yourself or the comment crowd: How do you feel about setting font sizes in percentages? (my current practice)

    0
  39. 53

    Lauhakari [mikko]

    March 15, 2011 12:56 am

    awesome article! I only have one, huge?, point as with many other typography related articles.

    People seem to rely on the fact that users have 16px as standard in their browser… When that really isn’t the case many times!
    So why don’t people, still, set the base font-size at the start in the body element.
    Sure the users loses some control, but hey, if it’s too small the can zoom :D

    0
  40. 54

    having a grid which is somewhat the line height of the largest font in use is nice but a baseline grid must not necessarily be the line height. Imho it is relatively boring to separate paragraphs with a full empty line (which is the conclusion of your implementation, isn’t it?).

    To be precise, i think it is quite contrary to my understanding of legibility.

    0
  41. 55

    Always good to see typographical orientated articles. Lots of good stuff this time!
    On the other hand baselining typography for the web isn’t as useful as some think. It helps to make your work consistent but it doesn’t in of itself make the work any better.
    Personally I think using only the sans-serif value for the font-family property is not a hack. The lack of a typeface fallback is indeed problematic but hardly a hack. I’ve used this, well, um, approach for monospace. Finally, one more little nitpick, I’ve found that omitting units like ’em’, ‘px’ etcetera on the line-height property to give more consistent results across browsers.

    One interesting approach that I might reconsider for some of my projects is the use of margins on paragraphs. It’s still problematic across browsers (looking at you IE) but it does make for a cleaner CSS.

    0
  42. 56

    Here’s a little css-snippet to test a website with the grid mentioned in this article. Just copy-paste in Firefox Web Developer ‘Edit CSS’ or similar tool.

    * {background:none !important;}
    body {background:url(http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/technical-type/img/css/grid-01.png) center repeat-y !important;}

    0
  43. 57

    This guy means business.

    0
    • 58

      Jeremiah Reagan

      April 24, 2011 5:35 pm

      He beyond means business… I’m a web developer myself and this was extremely intriguing. Thanks for this info Harry, we really appreciate it… Honestly though, I had a tough time rapping my head around your second (of the 2) of your “typography’s,” being the “technical typography” – I still, even after your short blurb about it, have no idea what you were talking about bud, can you clarify it a bit more for an idiot like myself that needs a good smack every now and then. (don’t tell my fiance I said that, ha)

      Cheers Harry,
      Jeremiah R.

      0
  44. 59

    Great Article!

    “I’m not entirely sure about what causes this effect; the numbers we used are all correct, and the vertical rhythm as a whole remains intact, but individual lines of larger text appear to be offset from the baseline.”

    Thats because the -6px padding for the grid image. Texts are vertically centered to the line-height, not baselined. With this 6px adjustment your line is based on a single font size.

    0
    • 60

      It seems there should be a CSS solution (perhaps with some math) to put these elements back on the baseline then?

      0
  45. 61

    Absolutely loved this article – well written and great to have solid, practical advice on typography for web developers.

    Thanks!

    0
  46. 62

    Fantastic. THIS is the reason I started following Smashing Magazine all those years ago. Wonderful article.

    0
  47. 63

    The massive amount of advertising on this page makes the article impossible to focus on

    0
  48. 64

    Smashing mag gets better everyday ! please keep more posts like these coming!!

    0
  49. 65

    Hmmm…95% Typography? I think it depends on what type of website it is. Take a look at apple.com and you’ll see that is 95% “imageography” ( I just invented a new word, cool :D )

    0
  50. 67

    excellent!! thanks :)

    0

↑ Back to top