Depuis des milliers d’années, la typographie est un art à part entière. Les gravures, les moines copistes, l’arrivée de l’imprimerie etc. toutes ces révolutions ont créé une série de code et de règles. Depuis l’arrivée du web, nous avons dû nous adapter à toutes ces règles. Le compte-rendu ci-dessous se propose de résumer ces normes.
La macro typographie est l’ensemble des règles qui sont relatives aux paragraphes. Elle nous permet une lecture plus efficace et plus agréable tout en ajoutant un plus au design de notre site. En effet, des paragraphes bien rédigés avec une bon suivi de ces règles rendent le design du site bien épuré et très aéré.
La couleur de paragraphes rassemble tous les réglages qui nous permettent de modifier les lignes et leurs tailles (tailles de la police, nombre de caractères sur une ligne et l’interlignage). Le terme couleur de paragraphe provient du gris que l’on perçoit quand on plisse les yeux. Le but étant d’obtenir un gris moyen pas trop clair ni trop foncé. Pour cela, nous devons donc régler ces trois paramètres. les trois paramètres suivant : il s'agit d'abord de la taille du corps, qui est modifiable à volonté. Ensuite, l’interlignage, pour une bonne lisibilité il nous faut un interlignage de 140 % (ou plus) afin d’avoir une bonne lisibilité. Enfin, le nombre de caractères par ligne doit être compris entre 55 et 60 afin de faciliter le retour à la ligne lors de la lecture.
Pour une meilleure lecture et un meilleur design, nous devons respecter quelques règles qui dépendent des différentes typographies que nous allons utiliser pour notre corps et pour les titres. Nous ne pouvons pas associer une police avec n’importe quelle autre. L’analyse des points communs de ces polices se fait sur plusieurs lettres : le x, le o, le m et le n.
Le premier travail est de comparer la hauteur des x si celle-ci est la même on peut continuer le travail.
Le second travail est la comparaison des contrastes qui se fait en comparant les “o” et leurs traits. Si les traits sont ressemblants alors nous pouvons continuer le travail.
La seconde étape est un travail sur le m et le n. Nous devons comparer ce que l’on appelle la chasse. La chasse définit la largeur de la lettre. Il faut donc superposer les n et m de chaques polices et vérifier que la largueur est la même.
Afin de bien sélectionner notre contenu, nous utilisons un moyen graphique très simple. En fonction de l’importance du titre et de sa place dans la hiérarchie, on utilise une taille de police différente. Mais, il s'agit d'être également très prudent. Pour obtenir un bon résultat graphique, nous utilisons des rapports de proportions prédéfinis tirés de la musique ou de la géométrie. Il suffit donc de multiplier la taille de police de notre corps par un rapport de proportion pour obtenir un titre. Ensuite, on multiplie par le même rapport pour obtenir le titre au-dessus dans la hiérarchie et ainsi de suite en fonction du nombre de titres que l’on désire.
La micro typographie est l’ensemble des règles de typographie qui s’occupent de tout ce qui peut être considéré comme des détails. Mais n’oublions pas que c’est le détail qui fait la différence.
Ces règles permettent de signifier le changement dans un paragraphe. Nous n’en connaissons que très peu généralement nous ne connaissons que le saut de ligne et l’alinéa mais il en existe en réalité 10 que voilà en image.
Même si dans l’imaginaire collectif les majuscules qui ne sont pas accentuées ne sont pas un réel problème, mais non avons appris le contraire bien évidemment. Les majuscules accentuées sont extrêmement importantes et en plus de cela facilement utilisables avec des raccourcis clavier, mais en HTML il nous faut utiliser des codes.
Le tiret court s’utilise dans deux situations, la soustraction et le trait d’union. Dans le cas de la soustraction, nous mettons des espaces insécables de part et d’autre du tiret. Pour un trait d’union, nous n’insérons pas d’espace.
Ce tiret sert à faire d’équivalent aux parenthèses (auquel cas nous utilisons des espaces à l’extérieur et à l’intérieur. Il permet également à exprimer une durée ou une distance (8 : 10–9 : 10). Et enfin nous pouvons l’utiliser (tout comme le tiret court afin de faire une liste).
En typographie ce tiret est appelé le “ en dash ” en raison de sa taille qui est égale à la chasse d’un “n” et son code typographique est &ndash.
Ce tiret sert à la mise en page d’un dialogue et à un changement de sujet au sein d’une phrase.
En typographie ce tiret est appelé le “em dash” en raison de sa taille qui est égale à la chasse d’un “ m ” et son code typographique est &mdash.
Ces guillemets sont utilisés pour les paroles dans un texte par exemple. Nous devons absolument les utiliser avec des espaces insécables avant et après les guillemets.
Ces guillemets sont utilisés en anglais, mais aussi pour les citations, les références, etc. Nous les utilisons également avec des espaces insécables. En fonction de la typographie ces guillemets peuvent changer, mais ils jamais nous ne pouvons pas utiliser ces guillemets " ... " .
La seule apostrophe a être acceptée est celle ci “ ’ ” tout comme les guillemets, celle-ci n'est pas acceptée : “ ' “ . Listes et citations types Pour tout ce qui concerne les listes et les citations voici leur mise en page.
Les ligatures sont des lettres qui fusionnent afin de faciliter la lecture. Il faut bien vérifier que cette option est présente lors du choix de notre typographie.
Il existe deux types de chiffres les “ Lining figures ” et les “ oldstyle figures ” qui diffèrent sur l'alignement de la ligne du texte. Le oldstyle est utilisé avec les petites capitales.
Nous n’utilisons pas de décimales ou de points pour différencier les milliers nous utilisons un simple espace insécable.
Pour tout ce qui concerne les heures, pourcentages, devises et degrés nous utilisons également des espaces insécables.
Dans un tableau nous devons aligner les nombres sur le dernier chiffre ou le chiffre des décimales afin d’offrir une meilleure lisibilité.
Le code css afin de les aligner comme tel est celui-ci table : { font-variant-numeric : lining-nums tabular-nums; }
Devant les points nous ne mettons pas d’espace avant et plaçons un espace fine insécable après.
Devant les virgules nous ne mettons rien avant et un espace normal après.
Devant le point-virgule nous mettons une espace fine insécable ou un espace insécable normal avant et après.
Pour les points d’exclamation et d'interrogation sont précédé d’un espace fine insécable et sont suivis par un simple espace.