The Top 10 Typography Rules All in One Place

Typography has gained a lot of attention in the recent years of web design — as it should have. It’s a large part of any website, some saying that it takes up more than 90% of the website itself. With more options for design arising, we as designers must recognize good from bad typography for ultimate legibility.For examples on typography art, or more articles that mention typography, check out some of these articles:

The above articles can provide more inspiration or insight to creating better typography, and are all hand-picked. This article is a more “scientific” viewpoint, if you will, on typography and design concerning type. If you’re new to the significance of typography in web design, I suggest starting with the above articles.

1. Only use one space between sentences.

Type has long undergone the debate: one space or two? Traditionally, printed type can be more legible with two spaces after each sentence, and it is often drilled into many professional writer’s heads. However, on the web, only one space is needed for legibility. When reading on-screen, the opposite is prone to happen — text will become less legible with that extra space.

Wrong:
Cras eu nunc vel tortor mattis commodo a nec lorem.  Phasellus elementum vel volutpat urna massa accumsan nisi.  Proin non est ante, quis cursus massa.  Sed sit amet massa enim.  Ut laoreet quam at metus ullamcorper ac fermentum diam bibendum.  Integer orci mi, porttitor id ornare non, faucibus vitae lacus.  Proin urna metus, vestibulum sed euismod nec, mollis vitae mi.  Nam ligula metus, accumsan id fringilla et egestas a nisl.

Right:

Cras eu nunc vel tortor mattis commodo a nec lorem. Phasellus elementum, tortor quis tempor pellentesque, augue dolor ullamcorper ligula, vel volutpat urna massa accumsan nisi. Proin non est ante, quis cursus massa. Sed sit amet massa enim. Ut laoreet quam at metus ullamcorper ac fermentum diam bibendum. Integer orci mi, porttitor id ornare non, faucibus vitae lacus. Proin urna metus, vestibulum sed euismod nec, mollis vitae mi. Nam ligula metus, accumsan id fringilla et, egestas a nisl.

2. Use less than three fonts.

…or fewer. If a design isn’t fancy enough yet, don’t resort to type to fancy-it-up. The only exception to this rule is when two fonts are so similar, and you technically need to use two separate fonts because one looks better at a smaller/larger size.

Type Rules

An example of this is on my portfolio. Note that Univers and Letter Gothic Std look very much the same in the kerning and context I presented them in, but I had to use Univers for the footer text because Letter Gothic Std started to look scratchy at a smaller font size. However, they look as though they could be the same font.

In addition, I have the font in my logo and the font of the general text. These can all work together because 1) like stated above, Letter Gothic Std and Univers look so similar that they could be the same font in this context, 2) the font of the logo is constrained to the logo and is not used anywhere else; extra whitespace helps to define and separate it from the rest of the design, and 3) all fonts used in this design are sans-serif, and very similar in nature so that adding one extra font doesn’t clutter the design.

3. Use a hyphenator, not justified text.

Justified text can be appropriate in some situations, but when most new designers use it — it’s not. Never justify body text. This may lead to a nice right edge, but the gaps in the middle of the text are a far worse problem. Instead, use a hyphenator if need be, or manually shape text for more important text on the page to align properly.

Hyphenated

4. Balance content width with text size.

A line of text that is too long or too short can loose legibility. Obviously, don’t span the text out across the entire page, or make the width of a paragraph about 100px. Some more specific rules can apply though:

  • Use smaller text for narrower content widths.
  • Use larger text for wider content widths.
  • Pay special attention to the correct width for body text, or a content area that is the main center for reading on the webpage.

How does one know what the right width is though?

A simple way to calculate the measure is to use Robert Bringhurst’s method which multiples the type size by 30. So if the type size is 10px, multiplying it by 30 gives you a measure of 300px or around 65 characters per line. The code would look something like this:

p {
font-size: 10px;
max-width: 300px;
}

Source: 8 Simple Ways to Improve Typography In Your Designs

Further Resources:

5. Use correct type punctuation.

Use em dashes, curly quotes, ellipsis, etc. opposed of their “easier” counterparts. Let’s take a look at a few common typography punctuation mistakes:

The em Dash: —

There is a difference between a hyphen (discussed above) and an em dash, meant for emphasis or separation in the flow of reading. Most will use two hyphens — or even worse — just one. A good example of how to correctly use an em dash was just in the last sentence.

Wrong:
Lorem ipsum dolor sit amet, consectetur adipiscing elit – - Ut tellus risus, laoreet id placerat sed.

Right:
Lorem ipsum dolor sit amet, consectetur adipiscing elit — Ut tellus risus, laoreet id placerat sed.

In order to create an em dash, the ASCII code is —.

Use Curly Quotes and Apostrophes

When styled correctly, one can easily get correct quotes by using the <q> and </q> HTML markup respectively. That was the original intention of this tag, and is a correct use of semantics. Besides this, it may be unnecessary to use a curly apostrophe for every “don’t”, “can’t”, or “I’ve”.

However, for blockquotes or other larger blocks of quoted text, use curly quotes and apostrophes correctly.

Smart Dumb Quotes

Rules from: Type Quotes, Apostrophes, and Primes

  1. Don’t use the ‘ and ” (Shift + ‘) marks on your keyboard for proper quotation marks and apostrophes [ ‘ ’ “ ” ].

  2. On a Mac, use Option+] and Shift+Option+] for the left (open) and right (closed) single quotes. For Windows, use ALT 0145 and ALT 0146 for the left and right single quotes (hold down the ALT key and type the numbers on the numeric keypad).

  3. On a Mac, use Option+[ and Shift+Option+[ for the left and right double quotes. For Windows, use ALT 0147 and ALT 0148 for the left and right double quotation marks (curly quotes).

  4. In HTML code the characters as & #0145; for ‘ and & #0146; for ’ and & #0147; for “ and & #0148; for ” (ampersand-no space, pound sign, number, semi-colon).

  5. Or, use the Unicode numeric entities of & #8216; for ‘ and & #8217; for ’ and & #8220; for “ and & #8221; for ” (ampersand-no space, pound sign, number, semi-colon).

  6. Called primes, use the upright tick mark ‘ for feet and minutes and ” for inches and seconds as in 1’6″ (1 foot, 6 inches) or 30’15″ (30 minutes, 15 seconds).

An Ellipsis, Not Three Dots

An ellipsis is the form of punctuation that implies continuation. Often times used with “Read more…” on webpages.

Wrong:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tellus risus, laoreet id placerat sed…

Right:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tellus risus, laoreet id placerat sed…

Note that above the two look exactly the same with my stylesheet. This may sometimes happen, but using the correct ASCII code regardless is more beneficial to the cleanliness of the markup.

6. Use emphasis correctly.

Just stop underlining already! Underlining text has almost no use anymore, and it a major factor in cluttering up a webpage. There are examples where it can be use attractively, but in these cases the use of it is confined to one area of the webpage, and it’s usually only on hover or with larger text that can handle the extra clutter of a line beneath it.

There are other methods of emphasizing text, and they should be used correctly as well.

Wrong: Underline

Underlined text should never be used for emphasis. While it did provide more emphasis than the rest of this text, it looks cluttered, and it will look even worse once mixed into a larger body of text.

Right: Italic

Italicized text looks better. Depending on the font used, though, it can look scratchy. (I think it looks a little scratchy even in this font and size) Italics are used as emphasis under bolding. It can be great for, as an example, a company name or slogan that needs emphasis, but not a huge amount each time it’s mentioned. Italic text can look extra elegant when used with serif fonts.

Right: Bold

Bold text is a powerful way to add emphasis. Used to much and it can become overpowering, otherwise bolding is an excellent way to add emphasis. A great use of this is to bold text to make content more scannable by only bolding important notes.

7. Serif vs. sans-serif: which is right?

There has been a long debate over whether to use serif or sans-serif for reading off of electronic devices. Statistically, sans-serif fonts work better on-screen for legibility, while serif fonts were intended for reading print. However, we see many designers everyday using serif fonts on the web, and we can see that if used correctly, they can work.

The main point to using serif fonts for the web is to add additional whitespace in and between the characters. This can mean line-height, letter-spacing, word-spacing, and font size. Without additional whitespace, the serif’s on the font can make things merge together and become illegible.

Kerned Text

8. Understand vertical rhythm.

Baseline RhythmVertical rhythm, otherwise known as baseline rhythm, is a method of correcting type with natural alignment. This can make type look better at a psychological level. In other words, and in my opinion, better words:

“If you haven’t explored this concept yet, allow me to explain: if you were to overlay your text with equidistant horizontal lines (as if your page was a lined notebook from high school) then those lines should land perfectly between each of the lines of text on the page, regardless of whether the text is a heading, a regular paragraph, a sidebar … whatever. When this occurs, your page is said to have vertical rhythm — the text is easier to read than text that doesn’t line up, as it feels more cohesive and less disjointed.” — Matthew Magain

To get vertical rhythm, one can use the Baseline Rhythm Calculator, or use some basic principles below:
We set our basic font size, with an appropriate line height (approx. 2-4 pt’s above our font’s size):

body{
     font: normal 10pt Verdana;
     line-height: 14pt;
}

Now, for any elements that are within our body text at the same font size, we’ll want to keep the line-height and bottom margin the same:

p, ul, li, blockquote{
     font: normal 10pt Verdana;
     line-height: 14pt;
     margin-bottom: 14pt;
}

Think of it this way: If we have a sheet of notebook paper, like in the image above, each line is of equal height. This means each line that contains written text (line-height) and each space we skip, like between the header and body text (margin-bottom) are equal.

There are many more complex styling rules to get through this correctly, so I suggest reading up on vertical rhythm more to get it just right.

9. Use a typographic scale to get correct hierarchy

Finding a correct hierarchy goes beyond type in webpage design, but type is still a large contributing factor. Don’t just randomly choose text sizes, only keeping in mind that headers should be bigger than paragraphs. A correct typographic scale can do wonders with creating balance and correct hierarchy that is both visually appealing and organized.

When choosing a scale, one can calculate one to fit their own design’s needs, or just use the traditional scale:

Hierarchy

I can go over various methods for finding just the right scale, but I’d just be repeating what Mark Boulton’s already said:

10. Use the correct line height.

How does one going about finding the perfect line height? As I’ve slightly mentioned before in the vertical rhythm, section, a general rule for correct line height is 2-4 points above the font size. That means, if text is at a 12pt, then a correct line height could be 12pt, 13pt, 14pt, 15pt, or 16pt.

Let’s get a bit more specific though…

  • The longer the line of text, the higher the line-height should be.
  • The type of font comes into this decision: The x-height of a font (the blue bar in the image below) can vary greatly in height among various fonts. If a font has a tall x-height, it should have a taller line-height since there won’t be enough whitespace between the top of the x-height and bottom of the line above it.

    x-height

  • Serif fonts need a taller line height because they require more whitespace inbetween and around the letters to be legible.
  • Light on dark text needs a taller line-height for the same reason as above: it needs more whitespace to be legible.

Written By Kayla

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. Webitect is where she spends too much of her freetime, sharing interesting finds and valuable resources. Be sure to check out her portfolio.

18 Comments

  1. Brian McDaniel

    August 22nd, 2009 at 05:04 am

    GREAT article! Very detailed and excellent info along with good explanations regarding why. As an analytical thinker, it is PERFECTLY written for me! Thanks for putting all the info together – bookmarked & tweeted! :)

  2. Manu

    August 22nd, 2009 at 05:25 am

    Bookmarked, (re)tweeted & diggged (dugg?) too! :)

  3. Jeff

    August 22nd, 2009 at 10:21 am

    Great article. The only part I have a small issue with tis the em dash. Personally, I think a spaced en dash can do just as well, given that the em dash looks a little Victorian at this point. Bringhamhurst agrees with this in Elements of Typographic Style.

  4. Louis

    August 23rd, 2009 at 01:24 am

    Excellent article, thank you.

    I do have a small issue with #1: I don’t see the relevance of it for web design, since the only way to create “2 spaces” after a period is to use a non-breaking space, and nobody will do that.

    It’s really a non-issue, if you ask me. Browsers always interpret multiples spaces as just one space.

  5. Joanna

    August 23rd, 2009 at 02:24 pm

    I knew some of these and others I either had no idea about or haven’t bothered to try and implement them into my own website.

    Kayla, you are really good at sharing your knowledge and teaching others. I hope you get paid to use this skill, if not today at least some day!

    xx Jo

  6. Amos Newcombe

    August 25th, 2009 at 10:00 am

    #4: or let CSS do the calculation: {width: 65em;}

  7. Tim

    November 4th, 2009 at 08:47 pm

    The ellipsis ting wasn’t your stylesheet. My guess is that your blog automatically converted the periods to an ellipsis. WordPress does the same thing with dumb quotes.

    Also, I think highlighting the more common HTML alternatives, like & ndash ; (without the spaces) might have been a nice touch

  8. Maxi

    May 2nd, 2010 at 02:15 am

    Nice tips, excellent article! Thanks for sharing!

  9. Craig

    May 12th, 2010 at 04:26 pm

    It’s refreshing to see this attempt at some typography rules, especially for someone as young as you. Other than a few typos, you got most things right, but I just can’t let this one thing get by without correcting you. One of the few hard rules in American English is that periods and commas are always inside quotes, no matter how they’re used. The Brits do exactly the opposite, which is why I assume people get confused.

  10. Sherry

    May 14th, 2010 at 09:29 am

    Of course #2 should read “Use FEWER than three fonts.” As long as we’re getting the typography correct, let’s get the grammar correct as well!

  11. Roey

    June 26th, 2010 at 07:10 am

    Great article, Kayla!

    Do you ever use “em” for line height rather than a “px” value?

    Peace,

    Roey.

  12. Jessica Petersen

    June 2nd, 2011 at 11:50 am

    This is a great resource to share with others. I feel like it’s missing one thing: watch your rags, widows and orphans.

  13. anonymous

    September 17th, 2012 at 11:59 am

    Please fix your typos and misspellings. It’s embarrassing to have a page citing correct grammar usage when your own isn’t up to par.

  14. Bob Leonard

    January 22nd, 2013 at 08:09 am

    Just a note on item one. On the web, when two spaces are used, the browser rounds it down to one. It does this with any number of consecutive spaces. If it were desired to have multiple spaces, the developer must hard code a space between each space – lol – make sense? Here is how it is done:

           

    I am wondering if this will even show up.

    ~B

  15. Bob Leonard

    January 22nd, 2013 at 08:10 am

    Nope… does not show up…

    & n b s p ;

    eliminate the spaces between the letters and puncuation.

    ~B

What Do You Think?