Études supérieures - Les enseignements - Plateforme Temps Réel - Atelier Hypermédia - HTML / CSS -

web#08 { CSS : typographie ; }

La typographie est une des bases historiques de ce qu’on appelle ajourd’hui le graphisme, le design graphique, ou la mise en page. Que nous soyons un scribe egyptien en train d’écrire sur un papyrus, un moine au moyen-âge s’occupant d’un codex, ou un bloggeur en train de remplir son volumen hypertextuel, nous avons toujours besoin de formes typographiques pour tracer notre écriture. Bien que nous nous trouvons aujourd’hui dans une époque franchement Photoshop, traversés de partout d’images composées numériquement, la part textuelle du World Wide Web est toujours en pleine expansion, nécessitant que nous reprenions, et que nous revisitions la tradition du typographe à l’heure des textes modulaires.

malheureusement, le CSS ne nous offre pas encore cette révolution-là. Soyons clairs : le CSS, au moment où nous écrivons ces mots, remplit une fonction uniquement transitoire vers un World Wide Web plus lisible, plus joli (mais oui, c’est important), et plus dynamique sur le plan typographique et de mise en page. Il nettoie pas mal de bordels laissés par la Guerre des navigateurs, et commence à rendre au moins plus présentable sur le plan typographique nos pages web. En plus, avec quelques corrections, il pourrait éventuellement, avec la version CSS 3 par exemple, devenir une véritable force typographique, tout en restant ouvert et accessible.

Pour l’instant donc, les fonctions typographiques du CSS sont limités par différents facteurs (et ne sont pas tous de son ressort, d’ailleurs). Du coup, il n’y a que quelques modifications fondamentales à retenir. Ce que tombe assez bien finalement, car je n’ai pas envie aujourd’hui d’écrire un énorme cours sur la typographie numérique (qu’est-ce qu’il y a ? J’ai mon propre blog à remplir, comme tout le monde ;-).

Polices

L’aspect le plus évident de la typographie concerne les polices de caractères elles-mêmes. Le CSS permet d’indiquer si un texte quelconque (paragraphe, lien, citation, etc) doit être écrit avec une police avec ou sans empattement, sinon en monospace :

p {
   font-family: serif;
}

ul {
   font-family: sans-serif;
}

code {
   font-family: monospace;
}

Si vous ne connaîssez pas la différence entre ces trois famillies de polices, et que l’illustration ne vous aide pas plus, nous vous recommandons d’aller jeter un coup d’oeil sur la page de l’Atelier Edition Numérique où il y a plus d’informations sur la typographie.

« Times New Roman », Times, serif

Depuis le CSS, nous pouvons également assigner directement une famille de polices par son nom. Seul hic, il faut être sûr que l’utilsateur qui regarde votre site aura au prélable installé cette police. Comme la plupart des utilisateurs ne savent même pas comment installer une police, et comme la plupart des polices ne peuvent pas être distribué gratuitement sur votre site, vous êtes plus ou moins condamné à choisir parmis les polices installées sur la plupart des machines (mac, PC, Linux) : Times, Times New Roman, Arial, Verdana, Courier, Courier New. Ce n’est pas un choix passionnant.

p {
   font-family: Times;
}

Dans la norme CSS 2.0, il y a avait une provision permettant aux designers web d’ajouter des polices spécifiques qui seraient téléchargés automatiquement chez les utilisateurs lors de la lecture d’une page. Comme cette provision générait trop de problèmes — delai et taille dû au chargement des polices, droits d’auteur des formes de polices, etc — et comme du coup aucun navigateur implementait la provision, elle a été officiellement abandonnée avec le CSS 2.1, en attendant une solution plus sérieuse pour le CSS 3.0 (on attend encore).

Néanmoins, il y a un moyen de prendre plus de risques dans le choix des polices, et qui est d’ailleurs fortemment recommandé : lister plusieurs polices dans leur ordre de préférence :

p {
   font-family: Garamond, "Times New Roman", Times, serif;
}

Dans cette exemple, le navigateur qui lit votre page vérifiera si vous avez la police « Garamond » installé sur votre machine. Si elle est installé, il s’en sert et on n’en parle plus. Par contre, si l’utilisateur n’a pas une copie de la police répondant au nom de « Garamond », il ira chercher la deuxième police dans la liste : « Times New Roman », et ainsi de suite jusqu’au nom générique de police de type « serif ».

*Notez que le nom de police « Times New Roman » est entouré de guillemets, alors que les autres noms de police ne le sont pas. C’est tout simplement parce que le nom « Times New Roman » contient plusieurs mots, il faut donc l’entourer de guillements pour que l’ordinateur ne le confonde pas avec trois différentes polices (« Times », « New », et « Roman »).

Famillies modèles

Voici une liste pas très scientifique que la plupart des machines peuvent accepter, ou au moins avec des alternatives, comme « Times New Roman » (Windows) qui devient « Times » sur mac.

p {
   font-family: Georgia, "Times New Roman", Times, serif;
}

li {
   font-family: Verdana, Arial, sans-serif;
}

code {
   font-family: Courier, monospace;
}

Tailles

Changer la taille des caractères est assez facile :

p {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 18px;
}

Il y a trois façon de définir la taille : avec des points (pt), des pixels (px) ou des « em » (em).

Vous connaissez probablement déjà « pt » (arrêtez avec vos mauvaises blagues !), car la plupart des logiciels d’écriture se servent de ce terme pour indiquer la tailler des caractères. malheureusement, les « points » n’ont pas vraiment d’apparenece standard sur l’écran d’une machine à une autre : une police à 18pt peut avoir de très différentes tailles selon la machine qu’on utilise. Pour l’impression, par contre, l’usage des « points » est très pratique, et peut être utilisé sans surprises lors d’une feuille de style CSS destiné uniquement à l’impression.

Du coup, la plupart des gens utilisent des pixels pour un affichage à l’écran. Cela permet de controller précisément la taille des caractères vis-à-vis les autres élements sur la page.

li {
   font-family: Verdana, Arial, sans-serif;
   font-size: 9px;
   color: grey;
}

Seul bémol : sur Internet Explorer, les lecteurs de votre page ne pourront pas facilement agrandir la taille des polices s’ils trouvent que votre choix est trop petit. mais ne vous inquiétez pas : il s’agit d’un problème passager, et qui se reglera avec la prochaine version d’Explorer.

Les em sont légèrement plus compliqués et nous ne le traiterons pas beaucoup ici. Sachez seulement que les em dépendent de la taille d’une police et peuvent être pratique pour la suite. Si par exemple une police est défini comme ayant une taille de 12px, 1em dans ce bloc de texte sera l’équivalent de 12px. On peut aussi noter que les em dépendent de la taille par défaut d’une police, si cette unité est affecté à la propriété font-size : le navigateur ira chercher dans les préférences la taille par défaut de cette police, et cette taille représentera 1em.

Il y a d’autres modifications possibles sur les caractères que nous ne citerons pas ici ; par exemple le poids du texte (« weight : bold ») ou son style (« font-style : oblique »). Je vous laisse découvrir tous ces détails dans les liens données en annexe du cours (CSS Zen Garden, A List Apart, etc), sinon dans l’excellent livret publié par O’Reilly avec toutes les définitions des mots-clés CSS que nous avons suggéré dans le précédent cours d’introduction au CSS.

Formattage

Sur le formattage du texte, nous éviterons aussi ici d’entrer dans tous les détails de toutes les possibilités, histoire de ne pas vous éffrayez d’un vocabulaire trop important de nouveux sélecteurs CSS. Néanmoins, deux sélecteurs me semblent essentiels : text-align et line-height. On pourrait aussi rajouter deux sélecteurs moins importants, mais éventuellements utiles : word-spacing et letter-spacing.

text-align

D’abord text-align. Cette propriété est assez classique, et vous la connaissez probablement déjà des logiciels de traitement de texte. Avec text-align il y a quatre options : left, center, right, justify. Comme leur nom indiquent, ils permettent d’aligner le texte à gauche, au centre, à droite sur la ligne, sinon avec un alignement sur les deux côtés.

Par contre, attention : text-align aligne le texte uniquement à l’intérieur du cadre (appelé « block » en anglais) qui le contient. Nous verrons plus sur les blocks dans le prochain cours, pour l’instant regardez l’illustration suivante, et notez la façon dont le blockquote, c’est-à-dire la citation paragraphée, justifie son texte mais avec des marges plus importantes que le paragraphe qui le précède.

C’est à cause des règles de formattage du blockquote qui contient des marges plus importantes, car une citation doit se dégager du paragraphe qui l’appelle.

Dernier point : il n’y a pas d’alignement haut ou bas pour le texte (genre en haut de la page, en bas de la page), parce qu’un texte se trouve forcément sur une ligne. On aligne le positionnement du texte avec le cadre qui le contient, comme nous verrons dans le prochain cours. Comme nous avons déjà rappelé à plusieurs reprises : le HTmL est principalement un medium textuel, et non pas un medium graphique. En conséquence, les formattages possibles suivent les logique les plus répandus de l’écrit.

Il existe néanmoins une propriété vertical-align, mais qui ne concerne que l’alignement d’un élement sur la ligne : par exemple, si on veut qu’une image s’aligne au milieu de la ligne, que son bas s’aligne avec le bas de la ligne, le haut avec le haut de la ligne, etc. Cette propriété est assez facile à expérimenter, et comme elle n’est pas commun, nous ne l’explorerons pas plus.

line-height

Il est souvent judicieux d’ajouter un espacement entre les lignes plus important que l’espacement donné par défaut. Pour illustrer cette différence, voici deux paragraphes ; le premier n’ayant pas d’espacement particulier, le deuxième utilisant un espacement deux fois la taille de celle des caractères :

Dans le paragraphe standard (sans identifiant) le texte est plus rapproché que dans le deuxième paragraphe avec un identifiant #double.

Attention, bien que cette modification semble simple, il se rajoute s’il en a besoin à l’espace déjà existant entre les lignes de texte. Si nous avons un élement plus grand à l’intérieur de notre paragraphe, il risque d’embêter notre tentative d’avoir un alignement plus élegant :

Le problème vient de la façon dont la propriété line-height s’ajoute à l’espace entre les lignes déjà existants. Comme le HTmL veut respecter le contenu, il a tendance à donner priorité la bonne lisibilité des élements, au risque d’un manque d’élegance qui pourrait même être un aspect graphique intéressant à travailler d’un point de vue artistique.

même si vous forcez le trait, comme dans l’exemple suivant :

...notez que la ligne avec le lien cherche néanmoins à agrandir la ligne sur laquelle il se trouve.

word-spacing & letter-spacing

Ces deux propriétés vont pratiquement de soi. Il s’agit de la possibilité d’augementer l’espacement entre les mots ou les lettres (avec des valeurs positives), ou de le diminuer (avec des valeurs négatives). Voici un exemple qui devrait rendre assez évident les possibilités :

Pour mon compte, je trouve le reglage d’espacement entre caractères/mots plus importants quand il s’agit de l’impression. Les règlages offerts ici sont tellement dépendant de facteurs aléatoires (est-ce que l’utilisateur a la bonne police ? est-ce que l’utilisateur n’a pas changé la taille d’affichage ? etc) qu’il est presque impossible de savoir ce qu’on aura comme résultat. Alors qu’un travail de ce genre est plutôt destiné à un travail extremement pointilleux et subtile, deux mots pratiquement contraires à la réalité actuelle du World Wide Web.


ESAAix - École supérieure d’art d’Aix-en-Provence - http://www.ecole-art-aix.fr