Accueil Site Webi Sommaire de Webi
Webi avec FrontPage
Webi
Webi, ExpZaq, Totec, Démos, gabarits, glossaire, webmestres, balises HTML, CSS, couleurs, instantanés, Top 10   0
Archive, HTML (enregistr.), affichage, balises (validation), structure, commentaires, photocomposition   1
À propos, site Web sur disque, liens I, liens II, filtres, hébergement (serveurs Zaq), publication, (dorénavant côté serveur), sauvegarde (copie d'un site)   2
Composants Web, site Web sur serveur, importation, recherche, instantanés, réinitialisation, site Démos, bdoWanda   3
Structure de navigation, mode Navigation I, II, III, barre de liens, thème, taille, modèles   4
Mise en forme, styles, paragraphe (CLASSE), caractère (SPAN)   5
Couleurs   6
Images, arrière-plan   7
Tableaux, code, ajout, largeur, bordures, fusion, styles   8
CSS, styles, typo, gabarits   9
Glossaire, webmestres, balises HTML, couleurs (choix), scripts 20
Solutions de Webi 98
Utilitaires de Webi 99
   9.5 

Typographie Web

 

Ensemble des techniques permettant de reproduire un texte, la typographie (mot aussi utilisé pour parler des caractères eux-mêmes) pour un webmestre est un élément fondamental à maîtriser et à considérer tôt dans le développement d'un site Web.

En cela, les styles CSS jouent un rôle de tout premier plan.

La typographie à un impact différent
sur deux technologies :
l'affichage (pixel) et l'impression (point d'encre).

Par exemple, lorsqu'on parle de conception de site Web on fait généralement référence à l'affichage, un site est prioritairement vu (et conçu) pour un affichage (écran) par rapport à l'impression (en noir et blanc, niveaux de gris, couleur ou quadrichromie).

Plusieurs sites sur le Web génèrent des résultats décevant lorsqu'on lance une impression notamment au niveau de la taille de police et au niveau de la mise en page. On aurait parfois besoin d'une loupe pour visionner le texte imprimé et il arrive aussi de perdre des zones de texte (sur la droite par exemple). C'est pourquoi certains sites proposent une commande Impression (bouton), afin que l'impression soit traitée indépendamment (lignes de code particulières) de l'affichage.

Remarque  Sur le site zabaque, pour assurer le plus de fidélité possible au niveau pédagogique, chaque page Web est conçue en tenant compte simultanément de l'affichage et de l'impression (WYSIWG). Cela augmente généralement le niveau de difficulté pour un webmestre, mais fournit à l'apprenant un meilleur contrôle sur les médiums qu'il privilégie pour sa formation.

 

Quelques liens utiles.

W3C Care With Font Size.
Planète typographique
The FontSite
Glossaire de termes typographiques.

 

Développement de site Web

La conception d'un site Web est quelque chose de particulièrement évolutif notamment avec la frénésie entourant l'expansion du Web. En bref, c'est à la fois captivant et c'est la folie!

Il faut tenir compte de nombreux éléments lors de la mise au point d'un site  notamment de l'aspect typographique — élément crucial pour le visiteur — d'un site Web. En voici quelques-uns. 

  • Les polices de caractère, les tailles de police et les unités de mesure. Les tailles de police sont souvent trop petites, en particulier pour le corps du texte qui comprend généralement la partie « centrale » d'une page Web, comme la page en cours.
  • Les langages (et les technologies comme les CSS) et les versions que vous choisissez comme XHTML, CSS, ASP.NET et PHP.
  • Le navigateur qui est utilisé par le visiteur comme IE, Chrome ou Firefox.
  • Les versions des navigateurs.
    En fonction de la dernière version du navigateur Web disponible et la version utilisée par le visiteur, plusieurs éléments peuvent affecter votre site Web nécessitant des modifications parfois significatives à votre site.
  • Les choix particuliers des paramètres du visiteur qu'il peut effectuer via son navigateur, par exemple l'utilisation de sa propre feuille de style.

Tout ça interfère avec la mise au point d'un site Web, ce, dans un contexte d'évolution très rapide.

 

Police et taille

Article important et fort intéressant en particulier pour un webmestre et/ou un designer Web, car, parfois les deux fonctions peuvent être réalisées par la même personne : Typographie web (Florent Verschelde).

 


© Wikipedia

« Pour améliorer sensiblement l'ACCESSIBILITÉ d'un site web, il faut permettre le redimensionnement du texte, afin qu'il s'adapte aux résolutions et aux paramètres des utilisateurs. Pour cela, on utilisera les unités relatives, et en particulier l'unité em. Mais beaucoup de webmasters, peu familiers avec cette unité, répugnent à l'utiliser. Dommage... » (Florent Verschelde).

« Pour concevoir un site web dont le texte sera lisible par tous, quelle que soit la configuration matérielle ou les besoins spécifiques de l'utilisateur, il faut permettre le redimensionnement du texte. Cela implique l'abandon des tailles de texte en pixels, et l'utilisation d'unités relatives, qui ont deux caractéristiques principales... ».

 

Il est aussi recommandé de ne pas descendre en dessous de 80% (.8em) de la taille d'un texte lisible par l'utilisateur notamment pour le corps du texte. Quant au W3C Care With Font Size, il recommande d'éviter de descendre sous 1em (100%) de la taille du texte, pour le corps du texte.

Remarque  Sauf quelques exceptions, le corps du texte du site zabaque.net se situe au niveau 1em.

Vous pouvez aisément constater la portée de ces conseils dans les gabarits de police proposés à la page suivante.

 

Valeur em et balise em

Il ne faut pas confondre la valeur em et la balise (tag) <em>.

 

Valeur em

L'unité de mesure relative em est une valeur utilisée notamment en CSS.

.habon { font-size: .95em }

Le code précédent définit un style CSS nommé habon et dont la propriété (property) est la taille de police (font-size) et la valeur (value) est .95em.

 

Balise <em>

Dans la ligne de code XHTML suivante la balise <em> (em pour emphasized) est utilisée pour rehausser la mise en forme.

<p>Veuillez <em>noter</em> qu'il sera là.</p>

donnant pour résultat :

Veuillez noter qu'il sera là.

Le « p » dans la ligne de code représente la balise <p> indiquant qu'il s'agit d'un paragraphe se terminant par </p>.

 

Quant à elle, l'unité relative ex est à éviter.

 

em et font-size, le principe

Les deux paragraphes suivants proviennent de l'article Typographie web mentionné plus haut.

 


© Alsacreations

 

« Le fonctionnement de la propriété CSS font-size avec les em est simple : un élément HTML pour lequel on a demandé une taille de texte de Xem aura un texte dont la hauteur représente X fois la hauteur du texte de son élément parent. »

« Dite comme ça, la définition est un peu abrupte. Ce qu'il faut en retenir, c'est qu'en écrivant font-size: Xem on ne demande pas une taille de texte fixe et absolue, mais une taille de texte proportionnelle à la taille de texte de l'élément parent. La valeur demandée, en em, est un coefficient multiplicateur. Concrètement, un paragraphe dont la taille du texte serait 2em aura un texte deux fois plus haut que le texte de l'élément qui contient ce paragraphe. »

 

Unités et valeurs CSS

Remarque  La valeur 1em, sorte de baromètre, se trouve la valeur par défaut d'un navigateur Web tel IE. Toutefois, rappelez-vous que l'utilisateur via son navigateur peut changer notamment des valeurs CSS.

Les valeurs suivantes sont identiques.

    1em = 16px = 12pt = 100%
1em est la taille par défaut de IE

Avec IE7... (et certaines versions antérieures)
la valeur par défaut (default value) de font-size est small et non medium.

 

Unités de mesure CSS

in : pouce (inch) -- 1 pouce est égal à 2,54 cm.
cm : centimètre (centimeter).
pt : point -- 1 point est égal à 1/72e de pouce.
pc : pica -- 1 pica est égal à 12 points (6 pc = 72 pt = 1 po).
ex : 1 ex est la x-height (hauteur) de la police.
x-height est généralement environ la moitié
de la taille de police (font-size)
.

em : si 1em est égal à la taille courante (font-size),
2em signifie 2 fois la taille courante.
Par exemple, si un élément est affiché avec une taille de police 1em (ou 12 pt),
alors 2em est égal à 24 pt. Le « em » est une unité très utile en CSS.
Étant une valeur relative elle peut s'adapter automatiquement à la
police que l'utilisateur (visiteur) utilise
via le paramétrage de son navigateur
.

px : pixel -- représente un "point" à l'écran d'un ordinateur,
ce "point" est différent du point relié à l'unité pt.
La grosseur (taille) du pixel varie notamment en fonction de la résolution du
moniteur (96 ppp dans l'environnement PC) et de la résolution d'écran (inf2.8)
.

 

Valeurs CSS :

  • Valeurs absolues (ou fixes)
    • pt
    • xx-small, x-small, small, medium, large, x-large, xx-large
      (mots-clés - saisie du terme)
    • pc
    • unités standards (cm, mm, in)
  • Valeurs relatives
    • ex
    • em
    • px
    • smaller, larger
    • % (pourcentage)

Conseil  En typographie Web, il est recommandé d'utiliser des unités
de mesure relative comme %, ou mieux em (web9.5 ou W3C Care With Font Size).

 

Il découle du tableau suivant que la relation mathématique entre l'unité em et l'unité % est directe. Tel n'est pas le cas, avec l'unité em (ou %) et les unités pt et px où l'on procède par « approximation ».

 

Valeurs par défaut

D'emblée, un navigateur Web comme IE (Internet Explorer), Chrome ou Firefox utilise des valeurs par défaut en particulier pour la police et la taille.

Par exemple, IE utilise 1em (équivalent de 12pt) comme taille par défaut pour la police.

Toutefois, de nombreux paramètres peuvent être modifiés directement par l'utilisateur, comme en témoignent les options de l'illustration suivante issue de IE7, ou, mieux encore, en invoquant sa propre feuilles de style!   

Observez le titre de la boîte de dialogue en avant-plan Accessibilité.

Une notion très importante en design de site Web est l'accessibilité d'un site Web pour le visiteur.

Tel que mentionné déjà, le texte est souvent trop petit, en particulier dans le corps du texte d'une page Web. Si vous visitez mon site Web vous remarquerez que le texte est généralement un peu plus grand que d'autres sites. Ceci afin de restreindre la fatigue oculaire et de limiter les va-et-vient effectués par le visiteur notamment avec la commande zoom (affichage) en surfant d'un site à l'autre. Cela s'inscrit naturellement avec la mission du site la formation, ce qui nécessite souvent plusieurs heures en une session de travail et aussi avec l'application ferme par le webmestre de la règle d'ACESSIBILITÉ d'un site Web.

J'utilise généralement — pour le corps du texte —  la valeur relative em pour font-size (soit la valeur par défaut 1em, en Trebuchet MS), permettant de s'ajuster aux paramètres du visiteur. Par exemple, sur mon site, si le visiteur utilise un affichage à 150%, la valeur font-size du texte s'ajustera automatiquement à 1.5em. En terme de points, 1em étant égal à 12 pt, le texte passera donc à 1.5em ou environ 18pt. Néanmoins, la typographie du site est calibrée pour un affichage standard à 100 %, ce qui devrait convenir à la plupart des visiteurs.

 

Démo web9.5a Typographie

'OUV zoneIE, site Démos : web9.5a  ou ALT+D+ENTRÉE.

 

 

 

Hit Counter
(15.07.08)

 9.5 
Astuce 9
1   Feuilles de style en cascade (CSS)
2   Styles
5   Typographie Web
5a Gabarits typographiques