Typography Rules

Some rules regarding typography and web design.

Here are some basic rules regarding typography to make your articles look more professional.

  • Insert only a single space after sentences. Some people put two spaces after periods because it is easier to tell two sentences apart.

  • Use real quotation marks and apostrophes (sometimes called “curly quotes”). Most people use the ' and " characters as quotation marks but these are not real quotation marks. They are actually called hash marks or tick marks. It’s only correct to use them to represent feet and inches (9'6"), so some users may look at your page as unprofessional if you use them.

  • Don't use underlined text. People used underlined text back in the typewriters days to add emphasis. Don't do it.

  • Don't use boldface too often. Boldface text is used to emphasize words in a sentence but it can distract the reader.

  • Use the correct copyright (©), registered trademark (®), and trademark (™) characters. Most of the time you may need to reduce them for them to look right. The trademark symbol ™ can be created by typing Option-2 on the Mac or Alt-0153 in Windows. The copyright symbol © you create by typing Option-G on the Mac or Alt-0169 in Windows. This default one is too large and should be reduced. The registered trademark symbol ® is created by typing Option-R on the Mac or Alt-0174 in Windows.

  • Use proper em and en dashes. In the old typewriter days people would use two hyphens --like this-- to make a dash. Don't do this. Hyphens are used to hyphenate words and separate phone numbers. They should never be used as dashes. An em dash is a form of punctuation used to offset parts of a sentence and is equal to the point size you are using. If you are using 12-point type, then an em dash would be about 12 points wide, but it varies. An en dash is typically about half the length of an em dash but still longer than a hyphen. To create an em dash with a Mac, press Shift-Option-hyphen. To create an en dash, press Option-hyphen. To create an em dash in Windows, press Alt-0151. To create an en dash, press Alt-0150.

  • Instead of bullets, use other characters. The bullet character (•) you create by typing Option-8 on the Mac, or Alt-0149 in Windows is overused and boring. Many webmasters these days are using small GIFs that match the color scheme of the design of their site.

  • Use a real ellipsis. Most people create an ellipsis by typing 3 periods but you should use the ellipsis character. You create an ellipsis with a Mac by typing Option-Semicolon or Alt-0133 in Windows.

  • Use a smaller font size for all-uppercase text. When typing all-uppercase letters such as titles, acronyms, and initials use a font size that is smaller than the surrounding text. If you don't then the upper case text will look huge in comparison. If the text is 10-point, then the uppercase text 1 to 1.5 points smaller. If the you are using a larger lowercase font - like a 16 point - then you can reduce the all-caps font by 2 full points.

  • Use oldstyle numbers, which are numbers sink below the baseline of the text, when you can because they look better when writing dates or dollar amounts. This is because oldstyle numbers look like lowercase numbers so they look better since most text is almost all lowercase.

  • Use a slightly smaller point size for numbers if you are using regular numbers (not oldstyle numbers) because the numbers are big compared to lowercase text.

  • Don't make your lines too short or too long - between 30 and 90 characters is optimal.

  • Make paragraph beginnings clear by using either an indent or block style for paragraphs. Don't use both. If you have a space in between paragraphs then don't use indents

  • Make your paragraph text left-justified. When you use full-aligned text then you have too many hyphenate words that get cut off. Full-aligned text also changes the character spacing so much that it is sometimes difficult to read the text. Full-alignment can be used sometimes for titles and headers.


 
Bookmark this page: