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

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

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

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?

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

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

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

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

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?

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

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

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

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

(al)

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

Footnotes

  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://coding.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://coding.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://coding.smashingmagazine.com/wp-content/uploads/technical-type/img/css/grid-01.png
  24. 24 http://coding.smashingmagazine.com/wp-content/uploads/technical-type/img/full/02.jpg
  25. 25 #tt-rhythm
  26. 26 #tt-rhythm
  27. 27 http://coding.smashingmagazine.com/wp-content/uploads/technical-type/img/full/03.jpg
  28. 28 http://coding.smashingmagazine.com/wp-content/uploads/technical-type/img/full/04.jpg
  29. 29 http://vimeo.com/17079380
  30. 30 http://coding.smashingmagazine.com/wp-content/uploads/technical-type/img/css/grid.png
  31. 31 http://coding.smashingmagazine.com/wp-content/uploads/technical-type/img/full/05.jpg
  32. 32 http://coding.smashingmagazine.com/wp-content/uploads/technical-type/img/full/06.jpg
  33. 33 http://coding.smashingmagazine.com/wp-content/uploads/technical-type/img/full/07.jpg
  34. 34 http://coding.smashingmagazine.com/wp-content/uploads/technical-type/img/full/08.jpg
  35. 35 http://coding.smashingmagazine.com/wp-content/uploads/technical-type/img/full/09.jpg
  36. 36 http://coding.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://coding.smashingmagazine.com/wp-content/uploads/technical-type/img/full/11.jpg
  44. 44 http://coding.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://coding.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://coding.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://coding.smashingmagazine.com/wp-content/uploads/technical-type/img/full/15.jpg
  54. 54 http://coding.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 topShare on Twitter

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.

Advertising
  1. 1

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

    0
  2. 2

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

    0
  3. 3

    Awesome article. Thanks.

    0
  4. 4

    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
  5. 5

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

    0
  6. 6

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

    0
  7. 7

    A great tutorial. Thank you

    0
  8. 8

    Very nice article! Keep up the good work!

    0
  9. 9

    Thanks a lot! Great tutorial.

    0
  10. 10

    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
    • 11

      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
      • 12

        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
      • 13

        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
      • 14

        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
  11. 15

    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
  12. 16

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

    0
  13. 17

    Awesome article, just what I was looking for. Thanks

    0
  14. 18

    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
  15. 19

    Wow, thanks for the mention, Harry!

    0
  16. 20

    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
    • 21

      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
  17. 22

    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
  18. 23

    Alexey Sinkevich

    March 14, 2011 10:56 am

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

    0
  19. 24

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

    0
  20. 25

    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
    • 26

      +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
    • 27

      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
  21. 28

    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
  22. 29

    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
  23. 30

    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.

    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
  51. 68

    In my experience, the nicest way to set images’ height is this:
    image height + padding-top + padding-bottom + border-top + border-bottom = n x line-height + font size

    It takes some experiment on the image’s top margin (usually half of the font-size) and the picture will nicely sit on the baseline and the top border will fit to the text too.

    0
  52. 69

    Perhaps I’m missing the mark here, but I think a lot of web designers and developers bitten by the typography bug are still using ems because it makes everything feel so much more… typographic! Using ems, you feel like you’re doing something that requires craft rather than assembling pixels like so much Lego. Despite knowing it’s just one of our handful of choices for unit of measurement, that unbreakable link between the em and the beauty of print typography is causing us to romanticize its usage. And on the modern web, it strikes me as the wrong tool for the job.

    Since ems are relative, nested elements will not scale properly and will break without care. If we all had beautiful, simple, clean, typography-based websites, it would never be an issue. But people new to web typography and looking for advice, are going to be confused when elements are set in font sizes larger or smaller than they expected. “My body is 16px; this element is inside the body; why isn’t it the right size?”

    The point is driven home by your conversion of ems to pixels. Why put up that layer of abstraction? If you want a particular element to be 18px, why not just declare it as such and be done with it, rather than working out the conversion to ems? It has been many years since zooming failed on values set in pixels.

    There’s hope for new life to the em, though… the introduction of pixel-dense displays to the mass market (the iPhone 4′s retina display or super AMOLED displays) mean that we can’t treat the pixel as a constant, either. If I’m not mistaken, their rendering engines are doing the conversion for us right now, but it might not make sense to stick to px in the long-term.

    But, as is typical for me (and an unfortunate character flaw!) I criticize more than praise. And the fact is that I read this article carefully and with great interest. I have bumped into some of the techniques and advice in other web typography articles, but I can honestly say that I’ve never found them collected together and presented in such an engaging way. The explanations and code examples flowed perfectly together. This is one of the best articles I have read on SM in some time. Good job!

    0
    • 70

      It has been many years since zooming failed on values set in pixels.

      But that assumes that everyone uses page zooming for increasing text size. Not everyone does. If you use the view menu in Internet Explorer and select medium, larger, largest etc., if you specify your font-size in pixels, the text will not scale.

      Roger Johansson discusses the issue in http://www.456bereastreet.com/archive/201010/ie_9_does_not_resize_text_sized_in_pixels/

      With IE9 it’s not immediately apparent how to change text size only, but with earlier versions, you could still access the View menu in much the same way as you could with older versions, and it’s likely that if you were used to doing something with an older version, that you might want to stick to doing it that way if you happened to upgrade, so you can’t be guaranteed that everyone would be using page zoom and can’t be guaranteed that no-one is being affected by font-sizes that don’t scale.

      I was having a similar discussion with other developers on Twitter recently and one told a story about a client claiming that his website’s text was too small. It turns out he had his browser text size set to smallest but because he visited so many sites that used pixels for font-size, he’d never noticed. :/

      0
      • 71

        Have to admit, I was ignorant to that. I have no choice but to give it to you. ;-)

        Surely it would have been reasonable for the article to at least address nesting being a must-take-care, though. Or am I ignorant about something there, too? ;-)

        0
  53. 72

    Fernando Silanes

    March 15, 2011 7:32 pm

    There is BIG problem with WEB GRIDS and you have the same problems is the line-height, it depends on the font size. So you can’t use the same line-height for the general text (size 11 pt) and the resume text (14 pt – the first paragraph).

    This is a big mistake, this is a basic thing that many designers are wrong.

    I hope you fix this, and explain.

    0
  54. 73

    Harry,
    WHERE HAVE YOU BEEN BEFORE?
    Just teasing, This is an article that solves many of my doubts. Fantastic!!!
    Thanks for posting.

    0
  55. 74

    Line-heights should be unitless. I’ll let Eric Meyer explain why: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

    Also, I appreciate that you’re trying to stick to a baseline grid, but I’d recommend that your vertical dimensions should be specified in ems, not pixels, so that the spacing between elements grows proportionally when text size is increased in the browser (using text resizing, not zooming).

    12px text with 18px spacing might look fine when the text actually is 12px, but will look a lot more cramped when the text size has been bumped up to 18px while the spacing remains the same because it’s been declared with a fixed unit.

    0
  56. 75

    awesome.. really great article!
    thanks

    0
  57. 76

    On “dashes”, you forgot to differentiate between hyphens (-) and minus signs (−).

    Minus sign: −
    Instead of “4-3=1”, it should be “4−3=1”
    Notice that the keyboard hyphen glygh appears lower than the actual minus sign, and is shorter. The center of the minus sign should line up with the center of the plus sign, and the lines themselves should be the same length as the ones on the plus sign.

    See the difference (hyphen, plus, minus): -+−

    The minus sign is different than the en-dash as well.

    See the difference (minus sign, en-dash): −–

    0
  58. 78

    I know it’s blasphemy, but I’ve never seen much benefit to grids, equal baselines, etc. Maybe it makes me less of a “professional”, but without the visible grid and guidelines turned on, I’d never have noticed you went to that trouble on your page. Sometimes it seems to me that those things are done just to say that you did it, not because it gives you any great benefit.

    0
    • 79

      But surely you can see typographical harmony, right? I may not be able to directly see that all the type is lining up with this imaginary baseline, but I can CERTAINLY tell when the consideration has NOT been taken.

      I disagree with the notion that proper typographical practices are just a masturbatory endeavor on the part of the designer. I think it really makes a palpable difference in harmony and (most importantly) legibility.

      Great article, I shall be referring back to it.

      0
      • 80

        Originally baselining wasn’t intended to solve typographical harmony, however, it is a nice benefit.
        Creating a rhythm is good and all but a strict baseline for everything isn’t a good idea. Set your font-sizes and line-heights early and sparingly and you’ll often be fine. Consider a baseline if the design calls for it and implement it with low specificity.

        0
    • 81

      Typographic harmony doesn’t rely on an absolute baseline grid. Depending on the fonts chosen, I would argue that rigid adherence to prescriptions/recipes will create DISharmony.

      For example, look outside “web typography” articles and you’ll find that it’s acceptable to put anywhere between 50% and 100% of a line’s height as extra leading between paragraphs. I personally find 100% doesn’t always look right. It’s perfect when the body content tends to be built with a single strong point per paragraph, but something closer to 60% looks great when paragraphs are meant to flow into one another as in a longer narrative.

      It’s an absolute myth that extra leading between paragraphs (via margin-bottom) needs to be equal to line height. So to me, Richard, it’s not blasphemy. Here’s one resource I stumbled upon which actually IS about web typography (I had implied that we should look to classical typography resources): http://explorationsintypography.com/ . In the right ‘explorations’ drop-downs, switch to “extra leading”.

      Or the comments section of this article. line-height 18px, margin-bottom: 12px. :-/ Looks great to me.

      That said, I don’t mean to imply that you should disregard vertical rhythm. You need to choose the right sizes and spaces to create harmony. If you opt for a smaller amount of leading between paragraphs, chances are good that a large gap between headings and body text is going to look terrible.

      It’s too easy to treat web typography as a mathematical formula. It’s not (though certain measurements are definitely a great starting point!). Let’s start using our eyes as much as our calculations.

      0
  59. 82

    So helpful! Thank you!

    0
  60. 83

    Thanks Harry, very useful post!

    0
  61. 84

    Jon Butterfield

    March 17, 2011 8:58 am

    Interesting read. Thanks!

    0
  62. 85

    One of the best articles about typography on the web I have ever read!

    0
  63. 86

    The relativeness dots (..) in the url()s seem to have been autocorrected to some kind of single character that looks like three dots. Didn’t know that existed.

    But it does break the code if you don’t know how to fix it. :)

    0
  64. 87

    This is the most useful article I’ve read on the subject, THANK YOU!

    You covered material that wasn’t in web classes I took and answered questions that I couldn’t find a clear answer on.

    0
  65. 88

    pierre vanderpol

    March 18, 2011 11:45 am

    Great post…. however according to W3c school, http://www.w3schools.com/browsers/browsers_display.asp,
    85% of browsers are ABOVE 1024 X 768….

    So focusing on 15% of the visitors with the 960 px sounds a bit outdated to me… there is a flexible 1140px grill around that is really great.

    ;))

    0
    • 89

      I wouldn’t base anything upon w3schools.com basically because only web developers are the ones who enter this site who are known to work with high resolutions. I work with end users on daily basis and some of them work with low resolutions. If you intend to do a website for web developers you can go as high as you can, we ( web nerds ) will find at the end what we came for but other users i doubt.

      Moreover 15% is a lot. Think if Amazon got 15% less costumers, this blog 15% less readers and so on.

      0
  66. 90

    You are all going to die one day.

    0
  67. 91

    Absolutely a great article, thanks!

    0
  68. 92

    Wow, very interesting article.

    I think keeping the ul squares off the page is a very strange touch, I’ve never seen it done that way in any printed material I’ve ever read. I personally feel it looks much better to make the dots align with the text, then the gap between the ul ul doesn’t feel so massive.

    0
  69. 93

    Great article! I just have one question: what do we do with and elements, and implicitly with alternative vertical-aligns? They immediately disrupt the baseline rythm.

    0
  70. 94

    Very good article, it has definitely given me some ideas to bring with me forward in my work, or perhaps better use what I already know from print in digital.

    0
  71. 95

    Christian Krammer

    March 21, 2011 2:02 am

    A few little things: The line-height should always be set without a unit! And to be precise: using a relative unit like em for fonts, or in general for a website, is much much better than the absolute unit px.

    0
  72. 96

    Very nice article, but I think you don’t need to set line-height for each heading if you set line-height: 1 to body.

    0
  73. 97

    Excellent article-very good explanation of the use of grid layout and typographic basics.

    0
  74. 98

    Wow. I’ve obviously gridded out sites in photoshop but I have never thought to do it this way when writing up the code. Great post. Thank you for you time and help.

    0
  75. 99

    It must have taken a lot of time to put this together, and I for one and very thankful you have, as I have been meaning to get to grips with grids for sometime. This has proven extremely helpful in finally explaining the ratios and will probably change the way I mockup designs from now on.

    0
  76. 100

    awesome!thanks for sharing

    0
  77. 101

    Well done, this is one of the most inspiring articles i have EVER read. Its detailed and well written, thank you so much. I can’t believe your only 20!!! Fair play!

    0
  78. 102

    Helpful and – to me – really instructing. I followed along with my own css, slightly altered there and then and the outcome is great. The page has a feeling of harmony to it which is very pleasing to look at. Therefore well worth the work.
    However, I also do think that we should not follow the grid to strictly – it can make for a very boring page to look at. I found that a few carefully selected parts breaking the grid give the best (read: more interesting) result.
    Thanks for the insight.

    0
  79. 103

    Being familiar with the works of Mark Boulton and Nathan Smith certainly helps to give a little more depth to this article. So you should definitely read the related links if you haven’t yet!

    I really appreciate the visual aids and the more technical css approach, like I wrote once before, some people like me kind of need the concrete view of theories with examples and hands-on work.

    Thanks,

    0
  80. 104

    Never hang bullets. Ever.

    It breaks the left alignment (a sin on its own) and ruins the LTR hierarchy of information. If anything, you tab bullets to the right to indicate that the list is branching off from what was previously written. If you hang the bullets, then you break that relationship, which makes the bullets more like a new paragraph.

    Do what you want with quotations, but hanging bullets doesn’t make a shred of sense; neither visually nor logically. Just don’t do it.

    0
  81. 105

    I love using 960 grid, but rarely seen someone ever use any grid, when helped to code sites. Proper grid really make coding and design faster and look better.

    I prefer to use px size over em for text, because they scaled sometimes improperly, and I don’t like to calculate size.

    0
  82. 106

    Very nice… i learned more today that in few days, thanks for share!

    0
  83. 107

    I find it astonishing that it is still regarded as a good practice to make pixel based layouts. We have so many different devices for viewing web content now — and they all differ in terms of pixel density.

    If I base my layout thoroughly on pixels, i.e., making the body copy 16 pixels large, it will look quite ok on the standard ~94ppi TFT desktop monitor. It will be a lot harder to read once you look at it on a higher resolution notebook display (the MacBook Air already has about 135ppi, making it about 70% the size of the former “normal” TFTs, for example). Once we look at ultra high resolution displays we are seeing in smart phones (iPhone 4 has 326ppi), we are really running into major problems.

    Of course, smart phone browsers compensate this by creating some kind of virtual pixels to still make it readable. But this really can’t be the long term solution, can it?

    Pixels have no future — because unlike only a few years ago, displays with enormous resolution differences are widely spread. It is time to do it like print designers have done it for a very long time. Defining everything in milimeters or inches (points do not seem to work very well, I have tested this).

    Think on it.

    0
  84. 108

    Regarding em dashes, I do not include spaces on either side in print, because I was that was how I was taught typography. However, I do put spaces on either side when used in web pages because of text wrapping. It can create a pretty ugly rag if you happen to have some longer words connected by an em dash.

    Another thing I find interesting here is the recommendation of using a right single quote for apostrophes. It’s hard to find definitive information on this, but are an apostrophe and a right single quote truly the same thing? Even if the letterform is identical, they are still different characters. While it may not be all that important, what if you want to do a find/replace on a page? I find it quite surprising that an apostrophe, despite being such a common character, does not have an html name code that works outside of XML.

    0
  85. 109

    These are some helpful tips! Thanks for sharing the useful information.

    0
  86. 110

    for the great good of God!!! this article was awesome and helpfull for me… thanks for everything!!!!

    0
  87. 111

    First of all, thank you for this awesome article, Harry. It’s well-written and really understandable, so keep up the good work.

    Secondly I want to ask if anyone here experienced the same problem as me regarding Internet Explorer 9.
    In every browser the text fits the gridline, even Internet Explorer < 9 in all cases, but when it comes to the lists the line height is set to 24.77 pixels, but only in IE9. As this is an odd value, IE does some math and the line height effectively becomes 25 pixels. The problem stops after the lists. From there everything is normal again.

    Did anyone stumble across that, too?

    0
  88. 112

    Just wondering—what happens to the pixel grid when the user is just learning English, has poor sight, or has a very high resolution and bumps your 16-point text up to 24 points or more? Specifying the measure in pixels means that the measure will effectively shrink as the text size increases. Furthermore, the pixel-specified measure does not intuitively feel robust across a reasonable range of screens, from an iPhone 320 pixels across to an iMac 2560 pixels across. Would 25% padding on either side be more robust? I’m not sold on physical measurements as a true solution, unless the intent is to make the site unusable on either iPhones or iMacs.

    0
  89. 113

    I was overjoyed to see this make it into todays Smashing Newsletter. A timeless article (as technical techniques for typography have been around forever) that will be referenced in years to come.

    It’s going to make up about half the presentation for my talk tomorrow night on Web Typography.

    0
  90. 114

    thank you for sharing….

    0
  91. 115

    You say above “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”

    Or if you don’t set a new line-height for each title, it takes the one from body, with is already set to 24px (1.5 x font-size of body).

    So why you need to set up a line-height for each title again ?

    0
  92. 116

    What an amazing article. Read (and foremost obey) it and you really know everything what’s important about typography on a website. Well done Harry!

    0
  93. 117

    Thanks for the good writeup. It in truth was a leisure account it. Look complex to far introduced agreeable from you! However, how could we be in contact?

    0
  94. 118

    I wouldn’t classify “font-family: sans-serif” as a hack – it’s actually very standards-compliant, and a good idea to boot.

    It ensures that it uses the device’s preferred sans-serif typeface, no matter the device – Windows, Mac, Android, iOS.

    The only downside is one that applies to any font stack – that individual fonts can vary in apparent size due to having different character widths and x-heights, even for the same font size. This particularly affects “font-family: serif” because on Windows it’ll choose Times New Roman, with a narrow letter width and small x-height. It’ll look very small compared to the default serif font on some other platforms.

    0
  95. 119

    I have bookmarked it for reference. The proper combination of size with font type matters to produce remarkable design.

    0
  96. 120

    My spouse and i was overjoyed to find out this kind of help it become in the present day Wonderful Newsletter. The timeless post (as technological techniques for typography are close to forever) that is to be referenced inside a considerably long time.

    It’s likely to make-up most the presentation pertaining to our chat tomorrow night about World wide web Typography.

    0

↑ Back to top