Vu du travail, avec Internet Explorer, mon sommaire est illisible, parce que la taille des polices est trop petite. J'avais trouvé une page expliquant et comparant les différentes présentations possibles des navigateurs en fonction des tailles de polices définies, mais je ne trouve plus ma source. Toujours est-il que mes pourcentages ne marche pas ou alors je n'ai pas tout compris.

Mon but est très simple : je veux que le sommaire se différencie du corps de la page. J'ai défini pour cela deux familles de polices dans ma feuille de style, une pour l'ensemble de la page

body { 

    font-family: Times, serif;

}

et une autre pour le sommaire

#sommaire { 

    font-family: Lucida, Verdana, Helvetica, Arial, sans-serif;

}

Le nom des polices correspond aux polices éventuellement disponibles sur le poste du lecteur. Si aucune police n'est disponible, l'agent utilisateur se rabat sur la famille générique. Ainsi, si vous n'avez pas de police nommée Times, le navigateur utilisera le nom de famille générique serif pour fournir un équivalent (par exemple Times New Roman).

Pour accentuer cette différence, je veux que la taille du sommaire soit inférieure à la taille du corps de la page. Pour cela, je peux soit définir des tailles absolues (en centimètre ou en point par exemple), inutilisable pour le média écran mais utile pour l'impression, soit définir des tailles relatives (en pixel ou en carré typographique par exemple). Ce sont ces dernières que je vais utiliser. Mais quelles unités relatives choisir ? Il suffit de respecter le choix de l'utilisateur.

Ainsi, les valeurs en pixel dépendent de la résolution de l'écran du lecteur. Si le lecteur a fixé la taille de la police à 16 pixels, on peut supposer qu'il a ses raisons (son confort de lecture par exemple). Pourquoi vouloir alors lui infliger une taille de 12 pixels ? On va supposer que le lecteur est intelligent et utiliser des valeurs en carré typographique. En rajoutant dans la feuille de style une propriété font-size, pour toute la page

body { 

    font-family: Times, serif;
    font-size: 1em;
}

et pour le sommaire

#sommaire * {
    font-size: .9em;
}

je définis une taille de police relative au choix de l'utilisateur. Avec 1em, ce choix est respecté quelle que soit la taille définie en pixel (16 pixels dans mon exemple). Avec .9em, j'indique au navigateur une taille de police plus petite, toujours relativement à la taille choisie au départ, mais je laisse le navigateur faire le calcul. J'arrive ainsi au but voulu.

Il existe d'autres possibilités, comme smaller ou larger, mais elles n'ont pas l'air de fonctionner correctement.

Ma feuille de style est maintenant stabilisée. Il me reste toutefois à styler des balises que j'ai employé récemment, comme del et ins, et d'autres dont l'affichage ne me plaît pas comme dt et dd.