237
Étude de cas : Roma Italia
Liaison des polices et typographie web améliorée
Il.serait.aisé.de.remplir.les.pages.de.ce.livre.de.techniques.de.typographie.pour.le.Web..Dans.
le.cadre.de.cette.étude.de.cas,.nous.nous.contenterons.des.suivantes :
•. l’unité.px.pour.font-size ;
•. la.ponctuation.hors.justification ;
•. l’affichage.du.texte.sur.plusieurs.colonnes ;
•. la.liaison.et.l’incorporation.des.polices.
Définir font-size comme en 1999
Pendant.des.années,.px.a.été.le.standard.implicite.pour.définir.la.taille.du.texte.avec.fontsize.. Il. donnait. aux. graphistes. qui. transféraient. leurs. maquettes. de. Photoshop. (ou. d’un.
autre.logiciel).vers.le.HTML.une.unité.absolue.et.uniforme.pour.le.texte..À mesure.que.les.
développeurs. ont. pris. conscience. des. problèmes. d’accessibilité,. la. taille. de. texte. relative.
(em ou %). est. cependant. progressivement. devenue. l’unité. de. choix.. Elle. permettait. aux.
utilisateurs.souffrant.d’un.handicap.visuel,.et.à.vrai.dire,.à.n’importe.qui,.de.modifier.la.
taille.de.texte.du.navigateur.de.manière.permanente.grâce.aux.réglages.du.navigateur.ou.à.la.
volée,.en.utilisant.les.commandes.clavier.Ctrl++.et.Ctrl+–.(Windows).ou.Cmd++.et.Cmd+–..
Conformément.à.ces.pratiques,.et.jusqu’à.récemment.encore,.tous.les.principaux.navigateurs.redimensionnaient.le.texte.en.conservant.le.formatage.des.autres.éléments.ainsi.que.la.
mise.en.page..Il.s’agissait.d’une.mise.à.l’échelle.du.texte.ou.d’un.zoom.texte..Cette.adaptation.requérait.qu’on.crée.un.balisage.autorisant.le.redimensionnement.relatif.de.n’importe.
quel.élément.contenant.du.texte..Par.exemple,.si.une.div.contenait.du.texte.par-dessus.une.
image.d’arrière-plan,.il.fallait.soit.répéter.l’image.quand.la.div.devenait.plus.grande.avec.
le. redimensionnement. du. texte,. soit. créer. l’image. plus. grande. afin. de. prévoir. cet. agrandissement.. J’ai. traité. de. ce. sujet. en. détail. dans. une. série. d’articles. (en. anglais). intitulée.
"The.Highly.Extensible.CSS.Interface".(voir.http://cameronmoll.com/archives/2008/02/
the_highly_extensible_css_interface_the_series/).
Les.dernières.versions.des.principaux.navigateurs.(Safari,.Firefox,.Google.Chrome,.Opera.
et,.non,.vous.ne.rêvez.pas,.Internet.Explorer).proposent.maintenant.par.défaut.un.zoom.de.
page.plutôt.qu’une.mise.à.l’échelle.du.texte.avec.les.commandes.Ctrl++/–.et.Cmd++/–..Le.
zoom.de.page.est.un.agrandissement.qui.affecte.la.totalité.de.la.page.(mise.en.page,.formatage.et.taille.de.texte).à.l’unisson..Les.éléments.conservent.leur.taille.et.leur.forme,.ce.
qui.réduit.considérablement.la.nécessité.d’un.redimensionnement.du.texte..C’est.en.effet.le.
navigateur.qui.se.charge.du.redimensionnement.relatif..
Que. signifie. donc. tout. cela ?. Que. l’unité. px. peut. à. nouveau. être. considérée. comme. une.
valeur.viable.pour.font-size..En.outre,.au.niveau.du.texte,.la.différence.entre.les.unités.
absolues.et.les.unités.relatives.peut.être.négligeable.pour.les.utilisateurs..Pour.vous.et.moi,.
Étude de cas : Roma Italia
Liaison des polices et typographie web améliorée
Il.serait.aisé.de.remplir.les.pages.de.ce.livre.de.techniques.de.typographie.pour.le.Web..Dans.
le.cadre.de.cette.étude.de.cas,.nous.nous.contenterons.des.suivantes :
•. l’unité.px.pour.font-size ;
•. la.ponctuation.hors.justification ;
•. l’affichage.du.texte.sur.plusieurs.colonnes ;
•. la.liaison.et.l’incorporation.des.polices.
Définir font-size comme en 1999
Pendant.des.années,.px.a.été.le.standard.implicite.pour.définir.la.taille.du.texte.avec.fontsize.. Il. donnait. aux. graphistes. qui. transféraient. leurs. maquettes. de. Photoshop. (ou. d’un.
autre.logiciel).vers.le.HTML.une.unité.absolue.et.uniforme.pour.le.texte..À mesure.que.les.
développeurs. ont. pris. conscience. des. problèmes. d’accessibilité,. la. taille. de. texte. relative.
(em ou %). est. cependant. progressivement. devenue. l’unité. de. choix.. Elle. permettait. aux.
utilisateurs.souffrant.d’un.handicap.visuel,.et.à.vrai.dire,.à.n’importe.qui,.de.modifier.la.
taille.de.texte.du.navigateur.de.manière.permanente.grâce.aux.réglages.du.navigateur.ou.à.la.
volée,.en.utilisant.les.commandes.clavier.Ctrl++.et.Ctrl+–.(Windows).ou.Cmd++.et.Cmd+–..
Conformément.à.ces.pratiques,.et.jusqu’à.récemment.encore,.tous.les.principaux.navigateurs.redimensionnaient.le.texte.en.conservant.le.formatage.des.autres.éléments.ainsi.que.la.
mise.en.page..Il.s’agissait.d’une.mise.à.l’échelle.du.texte.ou.d’un.zoom.texte..Cette.adaptation.requérait.qu’on.crée.un.balisage.autorisant.le.redimensionnement.relatif.de.n’importe.
quel.élément.contenant.du.texte..Par.exemple,.si.une.div.contenait.du.texte.par-dessus.une.
image.d’arrière-plan,.il.fallait.soit.répéter.l’image.quand.la.div.devenait.plus.grande.avec.
le. redimensionnement. du. texte,. soit. créer. l’image. plus. grande. afin. de. prévoir. cet. agrandissement.. J’ai. traité. de. ce. sujet. en. détail. dans. une. série. d’articles. (en. anglais). intitulée.
"The.Highly.Extensible.CSS.Interface".(voir.http://cameronmoll.com/archives/2008/02/
the_highly_extensible_css_interface_the_series/).
Les.dernières.versions.des.principaux.navigateurs.(Safari,.Firefox,.Google.Chrome,.Opera.
et,.non,.vous.ne.rêvez.pas,.Internet.Explorer).proposent.maintenant.par.défaut.un.zoom.de.
page.plutôt.qu’une.mise.à.l’échelle.du.texte.avec.les.commandes.Ctrl++/–.et.Cmd++/–..Le.
zoom.de.page.est.un.agrandissement.qui.affecte.la.totalité.de.la.page.(mise.en.page,.formatage.et.taille.de.texte).à.l’unisson..Les.éléments.conservent.leur.taille.et.leur.forme,.ce.
qui.réduit.considérablement.la.nécessité.d’un.redimensionnement.du.texte..C’est.en.effet.le.
navigateur.qui.se.charge.du.redimensionnement.relatif..
Que. signifie. donc. tout. cela ?. Que. l’unité. px. peut. à. nouveau. être. considérée. comme. une.
valeur.viable.pour.font-size..En.outre,.au.niveau.du.texte,.la.différence.entre.les.unités.
absolues.et.les.unités.relatives.peut.être.négligeable.pour.les.utilisateurs..Pour.vous.et.moi,.