Typographie et intégration web

Qu'est-ce qu'un "cadratin" ? Quel caractère doit-on placer avant un "?" Quelle est vraiment la taille d'une police ayant un font-size: 100px; ? Comment connaître la hauteur d'une ligne de texte ?
Tant de questions passionnantes dont les réponses vont te fasciner (enfin surtout si tu es atteint comme moi de pédanterie grammaticale) !

Transcript

1. TYPOGRAPHIE ET INTÉGRATION WEB Deux cas foireux… qu'on peut résoudre en CSS !
2. raphaël goetter HELLO ! JE SUIS RAPHAËL ET J'AIME CSS
3. 〞 DISCLAIMER En vrai, j'y connais presque rien en typographie.
4. 〞 Mais ça, ça m'angoisse !
5. 〞 En fait, plein de choses m'angoissent !
6. LE TRUC "PRESQUE" CENTRÉ LE TRUC TOUT SEUL À LA LIGNE
7. LE TRUC "PRESQUE" CENTRÉ
8. LE TRUC "PRESQUE" CENTRÉ ✅ Flexbox ou Grid Layout ✅ align-items: center; ✅ vertical-align: middle; ✅ line-height: 1;
9. Démo Codepen
10. UNE HISTOIRE DE FONTE
11. CADRATIN (EM) Surface de dessin prévue pour le caractère 100PX source : Google Fonts p { font-size: 1em; } p { font-size: 100px; }
12. 〞 Un cadratin ne correspond pas à la largeur du caractère "M" DISCLAIMER
13. FONT METRICS Ici la surface "em" occupe 1000 "unités" de haut (et de large mais OSEF) "Ascender" a une valeur de 750 unités, "Descender" vaut 300 Le total du caractère (1050 unités) dépasse de la surface "em" Le "Line Gap" (150 unités) dépasse aussi de la surface "em"
14. ROBOTO Pour un "em" de 2048 "unités" : "Ascender + Descender" = 2400 unités Ratio = 2400 / 2048 = 1.175 p { font-size: 100px; /* hauteur réelle : 117px */ } (correspond à line-height: normal)
15. ROBOTO p { font-family: roboto; font-size: 100px; }
16. GREAT VIBES "em" vaut 1000 "unités" Ratio = 1251 / 1000 = 1.251 "Ascender + Descender" = 1251 unités p { font-size: 100px; /* hauteur réelle : 125px */ }
17. GREAT VIBES p { font-size: 100px; /* hauteur réelle : 125px */ }
18. EST-CE QU'ON S'EN FOUT ?
19. PAS TANT QUE ÇA…
21. TEXT-BOX p { padding-block: 20px; text-box: trim-both cap alphabetic; } c'est good !
22. TEXT-BOX https://caniuse.com/css-text-box
23. LE TRUC TOUT SEUL À LA LIGNE
24. QUEL CARACTÈRE DOIT-ON PLACER AVANT UN « ? » ? UNE ESPACE FINE INSÉCABLE
25. 〞 QUELLE BELLE CITATION ! Et Raphaël dit : « Tout a une fin… sauf le saucisson qui en a deux ! » Une bonne 15aine de règles typographiques
26. LES ESPACES DANS LE WEB
27. 〞 DISCLAIMER En typographie, une espace est un mot féminin.
28. PAS D'ESPACE <h2>Vue ou Nuxt, lequel choisir?</h2>
29. ESPACE NORMALE Taille : ¼ cadratin. <h2>Vue ou Nuxt, lequel choisir ?</h2>
30. ESPACE FINE Taille : ⅛ cadratin. <h2>Vue ou Nuxt, lequel choisir&thinsp;?</h2>
31. ESPACE NORMALE OU FINE Mais ça passe à la ligne !
32. ÇA PASSE À LA LIGNE !
33. ESPACE INSÉCABLE Espace qui ne peut être coupée <h2>Vue ou Nuxt, lequel choisir&nbsp;?</h2> Oui… mais on avait dit espace fine
34. ESPACE FINE INSÉCABLE Espace fine qui ne peut être coupée <h2>Vue ou Nuxt, lequel choisir&#8239;?</h2>
35. TL;DR:
36. 〞 Excuse-moi, mais… tu me vois vraiment coller des #&8239; à la main partout ?
37. CSS À LA RESCOUSSE h2 { text-wrap: balance; } Le texte est renvoyé à la ligne de manière à équilibrer au mieux le nombre de caractères sur chaque ligne, améliorant ainsi la qualité de la mise en page et la lisibilité. p { text-wrap: pretty; } Optimise la lisibilité du texte en ajustant automatiquement les sauts de ligne et les espaces pour éviter les trous disgracieux ou les lignes trop longues/ trop courtes.
39. h2 { text-wrap: pretty; }
40. h3 { text-wrap: balance; }
41. raphaël goetter MERCI ! speakerdeck.com/goetter