Partie IV : notions de base de la typographie Web
Les graphistes de l’imprimé ont souvent du mal à passer au Web pour une raison principale : la typographie sur le Web est nulle. Vraiment?
Nous avons brièvement abordé la typographie lors de la dernière séance, plus précisément la propriété font-family. Cette seule propriété devrait convaincre des avantages des CSS quiconque a déjà défini à la main une douzaine de balises <font> ou plus dans une page.
Si vous voulez que la police par défaut de la page soit sans empattement et que les balises <h3> soient avec empattement, comme sur le site de RCS, c’est possible! Et vous n’avez à établir les règles qu’une seule fois. Aimez-vous les CSS maintenant?
Une affaire de famille
Vous créerez probablement deux ensembles de familles de polices, l’un pour les polices avec empattement (serif) et l’autre pour les polices sans empattement (sans-serif). Lorsqu’il est associé à l’élément <body>, la première police disponible de l’ensemble devient la police par défaut de toute la page. Un ensemble solide de polices multiplateformes permet une dégradation élégante si la police souhaitée est absente du système de l’utilisateur.
Voici les deux ensembles que j’utilise le plus souvent :
Sans empattement
font-family: 'trebuchet ms', verdana, geneva, arial, helvetica, sans-serif;
Note : les apostrophes autour de 'trebuchet ms' indiquent que les deux mots désignent une seule police.
Avec empattement
font-family: optima, palatino, georgia, times, serif;
Ces ensembles contiennent des polices système courantes pour Mac et PC. Vos ensembles peuvent contenir n’importe quelle police, dans les limites du raisonnable, dans l’ordre de préférence de votre choix. La règle d’or : placez d’abord votre police idéale, puis les polices moins idéales mais plus répandues. De plus, le W3C recommande de placer les polices génériques indépendantes du système, comme serif et sans-serif, à la fin de votre ensemble font-family.
Voici la liste des polices Mac et PC courantes de UsableType. Leur CSS Type Guide est une ressource précieuse que vous voudrez peut-être utiliser.
La palette de polices peut sembler limitée, mais, compatibilité mise à part, un bon typographe peut accomplir davantage avec l’interlignage (line-height) et l’approche (letter-spacing) qu’un mauvais avec 100 polices. De plus, vous disposez de plus d’une douzaine de règles CSS liées au texte pour ajuster la typographie à votre goût.
Si tout le reste échoue, il y a le remplacement d’image (IR) accessible, que nous aborderons dans une leçon avancée.
Les cellules vous libéreront
Aujourd’hui, nous allons construire ce que j’appelle des cellules. Ce sont des <div>, ou divisions, autonomes qui contiennent toutes les règles nécessaires pour styliser des blocs de contenu répétitifs comme des articles et des nouvelles. L’idée ne vient sûrement pas de moi, mais je l’utilise abondamment.
Le XHTML et les feuilles de style (text04 et lesson04) sont fournis à titre de référence.
Où est le code?
Cette leçon se poursuit dans le XHTML et les feuilles de style. À la prochaine leçon, nous aborderons la typographie encore plus en profondeur. Comme toujours, laissez un commentaire ou une question. Je ne manquerai pas d’y répondre.