Gestion de la taille à l’écran
La taille du texte peut être défini via différentes unités. On distingue les unités indiquant une taille absolue de celles indiquant une taille relative. La taille absolue est généralement exprimée en pixels (« px ») mais peut également s’exprimer en centimètres ou en millimètres (« cm » ou « mm »). La taille relative s’exprime en « em » ou en pourcentage.
Différences entre la taille absolue et la taille relative
Indiquer une taille absolue permet d’être très précis mais ne doit être utilisé que lorsque c’est vraiment nécessaire car on risque d’indiquer des tailles trop petites pour certains lecteurs. Indiquer une taille relative sera donc plus souple et s’adaptera mieux aux préférences des visiteurs. Cela permet également aux navigateurs de mieux gérer l’agrandissement et le rétrécissement du texte à la volée une fois la page chargé et de prendre en compte dès l’affichage la taille du texte par défaut que l’utilisateur a défini dans son navigateur.
Si la taille du texte est donc plutôt à définir en « em », il en est de même pour d’autres éléments directement liés au texte. C’est notamment le cas des marges supérieures et inférieurs des titres, des paragraphes, des listes à puces, etc.
Définition des tailles
La taille du texte est à définir en CSS avec la propriété font-size. Il est également important de penser à définir la hauteur des lignes afin que la hauteur soit régulière, via la propriété CSS line-height.
Attention toutefois, la taille du texte par défaut des navigateurs étant parfois trop grande, il est recommandé de la diminuer légèrement, et, même si ce n’est pas souhaité, de définir une taille par défaut pour votre document HTML. Voici le code à réutiliser :
html {
font-size: 100%;
}
body {
font-size: .8em;
}Sur ce code, le 100% permet de fixer une anomalie sur Internet Explorer qui redimensionne mal le texte en son absence. Le .8em permet d’indiquer que le texte aura par défaut une taille de 80% de la taille par défaut appliquée par le navigateur.
La taille en em étant en coefficient multiplicateur de la taille appliquée à l’élément parent, il n’est pas nécessaire de la définir sur chaque élément. On ne la définit que sur les éléments principaux comme les titres.
Gestion de la taille à l’impression
Si les tailles relatives comme l’unité em sont idéales pour l’affichage à l’écran, on préférera des unités absolues pour l’impression car elles sont plus adaptées. Il faut donc prévoir des CSS dédiées à l’impression.