Smashing Magazine has published an excellent introduction to the common typographic mistakes most of us make, out of neglect or sadly out of ignorance. Granted knowledge of typography subtleties is not something developers urgently need in their daily work, but those of us who develop for the web or deal with public facing texts could take professional pride in paying attention even to the tiny details of appearance. Respecting the unspoken etiquette is an element which can set your product apart and score some extra credit points in the eyes of your sophisticated users. These brief but rich in advice guidelines address the most important typographic elements, that is, those which are immediately visible, and explain how to use them correctly.

They cover the following elements:

  • Indentation between paragraphs
  • Text alignment
  • Spaces between sentences
  • Dashes and hyphens
  • Smart quotes
  • Math symbols
  • Accent marks and diacritics
  • Ligatures

I add to this some extra advice on how to input the diacritic marks such as those found in French, Spanish or German languages on a PC if your keyboard layout does not support them directly. Enter them by their Unicode values. Activate the NumLock mode, press and hold the Left-Alt then enter the character code on the number pad and release the Alt, then the desired character appears.

Below are some codes for the mostly used characters. Use the built-in Character Map (in All Programs – Accessories – System Tools) to get more codes. You can copy these characters directly to put them into HTML (it will not make the markup invalid) or specify them as Unicode entities like this:

&#0199; <!-- will produce Ç -->

The codes:

  • Alt + 0192, 0224: À, à (Latin A with grave, accent grave)
  • Alt + 0193, 0225: Á, á (Latin A with acute, accent aigu)
  • Alt + 0194, 0226: Â, â (Latin A with circumflex, accent circonflexe)
  • Alt + 0195, 0227: Ã, ã (Latin A with tilde)
  • Alt + 0196, 0228: Ä, ä (Latin A with diaeresis, A Umlaut)
  • Alt + 0197, 0229: Å, å (Latin A with ring above)
  • Alt + 0198, 0230: Æ, æ (Latin Ae)
  •  
  • Alt + 0199, 0231: Ç, ç (Latin C with cedilla, cédille)
  •  
  • Alt + 0200, 0232: È, è (Latin E with grave)
  • Alt + 0201, 0233: É, é (Latin E with acute)
  • Alt + 0202, 0234: Ê, ê (Latin E with circumflex)
  • Alt + 0203, 0235: Ë, ë (Latin E with diaeresis, E Umlaut)
  •  
  • Alt + 0204, 0236: Ì, ì (Latin I with grave)
  • Alt + 0205, 0237: Í, í (Latin I with acute)
  • Alt + 0206, 0238: Î, î (Latin I with circumflex)
  • Alt + 0207, 0239: Ï, ï (Latin I with diaeresis, I Umlaut)
  •  
  • Alt + 0209, 0241: Ñ, ñ (Latin N with tilde)
  •  
  • Alt + 0210, 0242: Ò, ò (Latin O with grave)
  • Alt + 0211, 0243: Ó, ó (Latin O with acute)
  • Alt + 0212, 0244: Ô, ô (Latin O with circumflex)
  • Alt + 0113, 0245: Õ, õ (Latin O with tilde)
  • Alt + 0214, 0246: Ö, ö (Latin O with diaeresis, O Umlaut)
  • Alt + 0140, 0156: Œ, œ (Latin ligature Oe)
  •  
  • Alt + 0217, 0249: Ù, ù (Latin U with grave)
  • Alt + 0218, 0250: Ú, ú (Latin U with acute)
  • Alt + 0219, 0251: Û, û (Latin U with circumflex)
  • Alt + 0220, 0252: Ü, ü (Latin U with diaeresis, U Umlaut)
  •  
  • Alt + 0223: ß (Latin small sharp S, Eszett)