Note du 12 juin 2018: article mis à jour
J'ai publié une nouvelle édition mise à jour et augmentée de ce guide.
Maintenant qu'on est en mesure d'utiliser à peu près n'importe quelle fonte sur nos sites web, il serait temps de ne pas oublier les règles de base de typographie. Parce qu'utiliser une belle typographie ne veut pas dire faire de la belle typographie et que l'on soit sur le web ou sur papier, il y a des règles à ne pas briser. Voici donc quelques règles de base de typographie à garder sous la main pour vos créations et vos rédactions. Sans logiciel professionnel, il est parfois impossible de faire des réglages fins, je vous oppose néanmoins l'alternative la plus adaptée pour chaque chapitre.
Sachez qu'il s'agit de règles de typographie suisses romandes mais elles s'appliquent dans la plupart des cas à la typographie française (mentionné dans l'article quand c'est le cas). En revanche, elles ne s'appliquent pas forcément pour les autres langues.
Ponctuation et espaces fines
Avant chacun de ces caractères (? ! ; : ) on doit placer une espace fine. Pas d'espace avant un point (.) ou une virgule(,). On place une espace normale après.
shift + alt + cmd/ctrl + M dans InDesign
  pour une espace fine insécable dans votre code HTML (insécable de manière à ce que le caractère qui la suit ne passe pas à la ligne).   pour une espace fine normale.
Autres langues
En anglais ou en allemand, on n'utilise pas d'espace fine avant ces caractères.
Usage courant (hors des logiciels d'édition graphique)
En l'absence de la possibilité de placer une espace fine (dans un traitement de texte standard ou sur le web) on colle le caractère à la fin du mot sans laisser d'espaces. D'abord cela se rapproche plus de l'espace fine, et ensuite ça évite que la ponctuation se retrouve orpheline si elle est en bout de ligne, comme ceci:
Voici ce que l'on doit éviter !
Cela pourrait donner comme cela dans certains cas
!
Guillemets
Les «guillemets français» sont souvent oubliés au profit des “guillemets anglais”, mais plus souvent par de "doubles primes" sur le web. On place toujours une espace fine après le guillemet d'ouverture et une autre avant le guillemet de fermeture.
Configurez la bonne langue dans vos logiciels pour avoir les guillemets correspondants.
« et » en html
Autres langues
Les guillemets peuvent changer selon chaque langue, renseignez-vous. Il faut utiliser “ et ” en anglais. (alt+2 et alt+shift+2)
Usage courant
Utiliser des guillemets français pouvant être une vraie plaie avec des logiciels non professionnels, l'usage des guillemets anglais ou même de simples primes est admis. On colle les guillemets à la première et la dernière lettre sans laisser d'espace.
Parenthèses
Jamais d'espace après la parenthèse d'ouverture ni avant la parenthèse de fermeture.
Autres langues
Pas d'espace non plus an anglais ou en allemand.
Usage courant
Ici non plus. Ajouter une espace peut faire passer une parenthèse à la ligne et nuire à la compréhension du contenu.
Chiffres et numérotation
Là encore, nous sommes souvent influencés par la typographie anglaise. En typographie française, on ne place pas de prime entre les groupes de 3 chiffres (1'000'000) mais une espace fine. De plus, on ne place les espaces fines qu'à partir de 5 chiffres (l'espace fin étant une aide à la lecture, on part du principe qu'il est aisé de lire jusqu'à 4 chiffres).
Autres langues
En anglais on place une virgule entre chaque série de trois chiffres à partir de 4 chiffres(2,500£, 1,350,578 people) sauf pour les dates (I was born in 1986). En allemand on place une espace standard entre les séries de trois chiffres (2 458 500).
EDIT: Je n'ai pas trouvé d'infos sur l'usage de la prime (12'345) dans aucune langue, j'imagine qu'il doit s'agir d'un abus d'usage (probablement aussi dû à internet) ou d'une utilisation comptable. Mais si quelqu'un à des infos là dessus, je suis intéressé.
Les primes sont surtout utilisées en mathématiques ainsi qu'en anglais pour indiquer les pieds (2') et les pouces (12"). (merci @lqd)
Usage courant
Là aussi je pense que l'usage de la prime est admise pour aider la lecture des longs chiffres. La virgule ne doit en tout cas pas être utilisée en français.
Devises
Franc Suisse
On indique une somme de la manière suivante: 12.50 fr. ou alors Fr. 12.50 dans des tableaux comptables par exemple. L'utilisation de CHF est réservée uniquement si l'on parle de différentes devises: 20 CHF valent aujourd'hui 16.14EUR. SFr ne s'utilise, en principe, pas.
Lorsqu'il n'y a pas de chiffre après la virgule on indique le double zéro par un point et un long tiret (12.–). Il n'est pas question d'utiliser le long tiret après les centimes: 12.50.–
alt + tiret pour le long tiret
– en html
Euro
Le symbole € peut être utilisé dans la plupart des documents, mais lorsqu'il s'agit de documents officiels ou financiers, il faut utiliser la notation EUR. Qu'on utilise € ou EUR, il faut toujours le placer après la valeur. Il faut placer une espace entre la somme et le symbole (25 €, 127 EUR).
alt +E sur votre clavier (mais vous le saviez déjà...)
€ en HTML
Autres langues
En anglais notamment, on place la notation avant la somme (EUR 25).
Majuscule et capitales accentuées
Attention, ici typographie française et suisse romande se confrontent et les règles divèrgent.
En Suisse Romande
Une majuscule est la première lettre d'une phrase et doit toujours être en capitale.
On n'accentue pas une majuscule, en revanche, un mot en capitale doit être accentué.
En France
La première lettre d'une phrase est aussi toujours accentuée. En revanche, contrairement à la Suisse Romande, en France, selon le lexique des règles typographiques de l'imprimerie nationale, les accents sont systématiques, peu importe la présence ou non de capitales.
alt + ^ pour un accent grave et alt + maj + ^ pour l'accent aigu avant de tapper votre lettre en majuscule.
Merci infiniment à Charles pour son commentaire. Je ne connaissait en effet pas cette règle car elle diffère de la Suisse.
Autres langues
En allemand, comme en français, on place le tréma sur les mots en capitales (ÖSTERREICH). En revanche, si la première lettre d'un mot est accentuée, on tolère l'écriture suivante: Oesterreich. Attention, en allemand, tous les noms communs prennent une majuscule...
Usage de l'esperluette (&)
Connue aussi sous le nom de "et commercial" ou ampersand en anglais, l'esperluette subit aussi les abus d'usages. La faute à sa grande valeur esthétique probablement... En français il n'est pas correct de l'utiliser pour une liste (Je vais acheter du pain, des œufs & de la farine). L'esperluette s'utilise (en principe) uniquement dans les raisons sociale (Favre & fils SA). On place une espace normale avant et après.
Libre à vous de l'utiliser comme vous le souhaitez car c'est en effet un beau caractère (essayez là en Cochin Italique ;-) ), tachez juste d'éviter d'en abuser...
Quelques ressources pour terminer
Le Guide du Typographe
Le Guide du Typographe Romand est sans conteste la référence ultime. Plus de 200 pages de règles typographiques avec des pages sur les orthographes particulières et même les langues étrangères. Un must-have pour tous les graphistes et honte sur tout graphiste suisse qui ne le possède pas déjà! ;-)
CopyPasteCharacter
Pour avoir sous la main tous les symboles complexes qu'il est parfois un peu coton de retrouver sur son clavier. Le site permet de copier dans son presse papier le caractère ou son code HTML: copypastecharacter.com
Symbol Caddy
Un petit widget MacOSX pour avoir accès aux caractères complexes depuis son Dashboard. Tout comme CopyPasteCharacter, on peu copier en texte ou en HTML. Télécharger le widget gratuitement.
Voilà pour ce guide, n'hésitez pas à me contacter sur Twitter pour vos commentaires ou vos précisions. J'espère que cet article vous aura été utile!
