Découvrez les typographies du site et quelques règles élémentaires

Posté dans : Typographie | 0

Le choix de la typo dans les sites web à beaucoup évolué, je vous parle d’un temps ou le nombre de police que l’on pouvait afficher sur le web se comptait sur les doigts de la main. Depuis quelques années avec l’arrivée des nouvelles possibilités offerte par le CSS et les navigateurs qui se mettent à jour pour utiliser ces dernières le choix de la typo à utiliser sur votre site web est proche de l’infini… le plus dur étant de ne pas trop mélanger les styles et de se limiter au grand max à 3 polices différentes histoire de garder une certaine cohésion dans la structure des pages.

On trouve plusieurs familles de police, plusieurs classifications selon les époques, les standards du web ont défini pour sa norme de présentation CSS cinq familles de polices :

serif : des familles de police à empattement

sans-serif : des familles de polices sans empattement

cursive : des familles de polices simulant l’écriture à la main

fantasy : des familles de polices dont les glyphes sont exotiques et plus décoratives qu’utilisables pour du long texte. Peuvent convenir pour des titres

monospace : des familles de polices à chasse fixe, comme sur des machines à écrire ou des terminaux d’ordinateur. Informellement traduit en monochasse, elles fonctionnent sur le principe du stoïchédon.

Source Wikipedia : http://fr.wikipedia.org/wiki/Police_d%27%C3%A9criture

 

font_hipstel

Généralement on choisit des typos lisible, ça va de soi, même si ici vous l’aurez remarqué le choix de la typographie pour les TITRES peut paraitre compliqué à déchiffrer. C’est un choix qui je pense donne du caractère à l’ambiance général mais renforce aussi l’effet du TITRE « fort » par rapport au reste du contenu. J’utilise également la police pour mon logo.

Télécharger Hipstelvetica

 

font_marketingscript

Pour soutenir le titre j’ai choisi une typographie qui donne un peu de légèreté à ce premier qui en « impose », une belle typo à la main que j’utilise avec parcimonie, c’est juste la petite touche en plus qui casse le côté monotone entre le TITRE et le texte.

Télécharger Marketing Script

 

font_lato

Enfin une typo serif ou sans-serif pour le texte, simple et facile à lire, c’est sans doute la typo la plus importante, il ne faut pas que le lecteur se fatigue les yeux sur une police trop petite et des caractères difficilement identifiable. Perso j’ai toujours choisi des sans-serif pour mes sites.

Télécharger Lato

 

On peut alors comprendre que chaque famille à son utilité et l’on préféra respecter la structure qui suit pour la création de ses pages web :

Le TITRE : une typo serif avec un impact fort, en général plus gras que le texte et au moins deux à trois fois plus grand.

Le Sous TITRE : une typo fine, qui se marie bien avec le titre, on évite de répéter la première famille, le choix se porte donc plus vers une typo sans serif ou cursive (à la main…) d’une taille intermédiaire entre le TITRE et le texte.

Le texte : c’est la police la plus utilisé sur le site, il faut donc une typo super simple et très facilement lisible, si possible d’une bonne taille (14px) pour éviter de sortir la loupe 🙂

Ici se termine mes quelques conseils en choix de typographie pour votre site web, et la fin de mon premier article 🙂