Typographie & CSS
Améliorer l’accessibilité & lisibilité des caractères
Ces dernières années, il y a eu énormément de progrès concernant la typographie web. Mais si vous souhaitez sublimer votre expérience de lecture il existe certains points que vous pouvez améliorer.
Avant de commencer
Voici quelques règles de base à mettre en place dès maintenant pour faciliter la lecture du contenu de vos pages web. Si tout le monde appliquait ces simples conseils, la lecture sur internet en serait meilleure.
-
Aujourd’hui tous les navigateur sur le marché ont une taille de police par défaut de
16px. -
Largeur des paragraphes : actuellement le gros problème sur les sites concerne la largeur des paragraphes. Il sont beaucoup trop longs.
max-width: 40emest une excellente base pour rendre le texte plus lisible. -
-webkit-font-smoothing: subpixel-antialiasedpeut parfois obstruer les lettres en particulier sur OSX. -
-webkit-font-smoothing: antialiasedet-moz-osx-font-smoothing: grayscalepeuvent fonctionner, mais attention à ne pas les utiliser sur des polices de petite taille. -
text-rendering: optimizeLegibilityavec cette seule ligne vous pouvez corriger instantanément les 2 problèmes précédemment cités et améliorer la typographie sur le web.
6 Conseils pour une meilleure typographie
NB : Tout ces conseils sont donnés par le typographe Erik Spiekermann, j’ai adapté ses propos au monde de l’intégration CSS.
1. L’ERREUR DE LA MAJUSCULE
Ne JAMAIS utiliser de majuscules pour accentuer les mots dans une phrase.
Elles ressortent beaucoup trop et gâchent le rythme de la colonne ou de la page. Utilisez l’italique en remplacement. Si vous devez définir des mots en majuscules, utilisez les petites capitalisations appropriés avec ou sans majuscule, avec la balise abbr.
Merci de ne pas faire
Lorem ipsum dolor sit amet, consectetur HTML adipisicing elit. CSS Laboriosam voluptatem a beatae accusantium accusamus dolor provident error consectetur quibusdam suscipit neque temporibus.
Bonne solution
Lorem ipsum dolor sit amet, consectetur HTML adipisicing elit. CSS Laboriosam voluptatem a beatae accusantium accusamus dolor provident error consectetur quibusdam suscipit neque temporibus.
Merci de ne pas faire
La simplicité est uniquement simple quand quelqu’un a SUPPRIMÉ TOUTE LA COMPLEXITÉ.
Bonne solution utiliser l'italique
La simplicité est uniquement simple quand quelqu’un a supprimé toute la complexité.
2. Liaisons
Il existe 3 façons de connecter des mots distincts : le trait d'union -, le tiret demi-cadratin – – et le tiret cadratin —, qui est plus large —. Le trait d'union est facilement accessible sur n'importe quel clavier Mac ou PC, alors que le cadratin est une combinaison des touches options + tiret sur Mac. Le demi-cadratin est accessible en utilisant les touches option + shift + tiret.
L'utilisation de ces 3 symboles différents dépends du pays d'origine ou de la tradition d'écriture. Le cadratin est utilisé —pour séparer les pensées commme ceci— mais visuellement je pense que c'est mieux de séparer avec un espace — comme cela —.
Le demi-cadratin sans espace est souvent utilisé pour combiner des chiffres comme des horaires : le magasin est ouvert entre 10h–19h, ou vous pouvez aussi pendre le train Paris–Lille seulement entre 6h–22h.
Ça c'est non
Ouverture 10h-19h
Bonne solution utiliser le demi-cadratin
Ouverture 10h–19h
Ça c'est non
Il est essentiel -selon moi- de suivre les standards du web.
Bonne solution avec un cadratin
Il est essentiel — selon moi — de suivre les standards du web.
3. “ & ”
La principale régression, apportée par l’informatique en typographie, concerne la mauvaise utilisation des citations et apostrophes. Les citations peuvent avoir différentes formes. Généralement elles ressemblent à “ceci”, et sont facilement mémorisable par leur début “66” et leur fin “99”. Sur Mac option + apostrophe et option + shift + apostrophe.
Mauvais exemple
"Bonjour"
Mieux une vraie citation
“Bonjour”
4. Unir les forces
En typographie une bonne gestion des espaces est indispensable. Ce travail est extrèmement long car il doit être réalisé à la main, caractère par caractère. Heureusement il existe des solutions pour améliorer la gestion des espaces entre deux lettres.
Le crénage peut être utilisé pour serrer ou desserrer l'espaces entre les caractères. kerningjs est une solution qui allie CSS et JavaScript afin de permettre une gestion automatisée de l'espacement. 
Une ligature est une combinaison visuelle de 2 ou 3 lettres en un seul caractère comme ff, fi, fl, ffi. Les ligatures concervent les lettres de chevauchements, améliorent la lisibilité et sont facilement modifiables en CSS.
h1 { letter-spacing: -3px; }
Pas de ligature
Affinity
Affluence
Configure
Mieux lisibilité améliorée
Affinity
Affluence
Configure
5. Ne pas justifier
Évitez les réglages de chasse ! La plupart des applications créent un texte hideusement justifié par étirement en créant de nombreux espaces entre les mots. Notez qu’il faut de nombreuses heures de travail fastidieux, pour composer un texte justifié qui soit vraiment bien proportionné et lisible.
Pour cette raison, les professionnels préfèrent utiliser des compositions alignées sur la gauche, avec ou sans césure, en fonction de variation à la propriété line-height. Cela donne au texte une apparence plus harmonieuse et le rend plus facile à lire, puisque tous les espaces entre les mots ont la même largeur.
Rivières disgracieuses
The world at once present and absent which the spectacle makes visible is the world of the commodity dominating all that…
Mieux alignement gauche
The world at once present and absent which the spectacle makes visible is the world of the commodity dominating all that…
6. Sauvez les listes
Utilisez des puces • ou des points centrés ⋅ au lieu des traits d'union - lorsque vous listez des éléments. Ils appartiennent au jeu de caractères standard et s'utilisent facilement :
• option + dièse (mac), alt + 0149 (windows)
· option + shift + 9 (mac), alt + 0183 (windows)
Merci de ne pas faire
- - Apperture science
- - Black mesa
Bonne solution
- Apperture science
- Black mesa
Pour aller plus loin :