Dans cet article, je vais te parler des Polices et ses propriétés: font-size et font-family. La Police est, à mon sens,  une des choses les plus importantes quand on fait un site web.  Et oui, de mon point de vue c’est très important de choisir de bonnes polices puisqu’elles te permettent de mettre en forme le contenu de ton site, ce que tu as à expliquer, présenter, etc. Je ne m’étendrai pas pour le moment sur des considérations de design dans ce premier article sur le sujet.  J’ai des livres à lire la dessus donc j’y reviendrai plus tard…

Les valeurs par défaut

Quand j’ai démarré  mes premières pages en HTML et CSS surtout, j’avais tendance à vouloir étaler ma science en mettant un maximum de propriétés.  Et là où cette pratique devient parfaitement débile, c’est qu’on en vient à entrer du code pour retaper les valeurs par défaut. Ce qui, et vous serez probablement d’accord avec moi, ne sert à rien… et c’est même contre-productif. Je me suis rendu compte assez vite qu’il était important d‘être efficace avec un minimum de code.

Pour la plupart des navigateurs, les valeurs par défaut sont les suivantes pour un paragraphe:

  • hauteur du texte: 16px;
  • la police: en fait ça peut varier suivant le navigateur, mais sur ceux que j’utilise (Chrome, Mozilla, Safari et Opéra) affiche le texte de base en Time New Roman.

Inutile donc d’écrire tes paragraphes en Time New Roman en 16 pixels de haut, ton navigateur sait le faire tout seul!

« Alors super, mais ça ne me dit pas comment je fais moi… » – Ok alors c’est parti pour les propriétés!

Font-size

Cette propriété permet de modifier la taille du texte. Jusque là c’est simple, le problème c’est que comme toutes valeurs qui indique une dimension, il y a des unités, comme en physique au lycée… Tu sens revenir tes boutons? C’est pas fini parce que des unités il y en a plusieurs pour définir la même chose, et c’est là que ça se complique… tu veux sortir prendre l’air ou on continue?

La hauteur absolu: px

On parle aussi de taille absolu. Cette valeur est donnée en pixel(px). Cette unité doit être précédée d’une valeur numérique (un nombre). Par exemple on pourrait noter la chose suivante dans un fichier CSS:

 

p
{
font-size: 14px;
}

Cette unité est très simple à comprendre et fonctionne pour tout ce qui peut avoir une dimension dans une page web (une box, une marge, etc) mais il ne faut pas prendre l’habitude de l’utiliser pour du texte, surtout avec les différentes de taille d’écran que les utilisateurs ont à leur disposition.. Cette valeur est absolue et donc fixe. Elle ne peut pas être modifiée à posteriori par l’utilisateur. Pour te donner un exemple concret, sur un iphone (je donne cet exemple là parce que j’en ai un sous les yeux, mais il doit exister le même type de réglage chez les autres constructeurs), une personne mal voyante peut modifier la hauteur du texte par défaut en procédant de la façon suivante:

Réglage => Luminosité et affichage = > taille du texte.

Ensuite tu arrives sur un curseur qui permets de faire varier la taille du texte. Cette variation est possible parce que la taille du texte est flexible (On se contera de ce terme pour le moment).

C’est exactement le même principe pour quelqu’un de mal voyant qui aurait configuré sont ordinateur pour avoir des textes plus grands. L’ordinateur ne va pas pouvoir adapter le texte aux paramètres de l’utilisateur si la taille de ce texte est fixée en valeur absolue. C’est ce qu’on appelle l’accessibilité.  Je te donne un lien, qui te permettra de compléter ce que je viens d’expliquer, c’est d’ailleurs une de mes sources pour la rédaction de cet article. Je te conseille également de conserver l’adresse du site, Alsacreation.  C’est une entreprise de développement web, qui réalise de nombreux tutoriels en français et qui a une grosse communauté très active. Donc si tu as des soucis, regarde sur le forum, quelqu’un a sûrement déjà eu le problème avant toi.

La hauteur relative

Le terme de taille relative est également employé. Cette fois pas d’unité, pas de valeur numérique, juste des mots en anglais:

  • xx-small: microscope requis,
  • x-small: passez moi la loupe,
  • small :des lunettes suffisent ,
  • medium: là ça va,
  • large: à l’aise,
  • x-large: là on commence à très bien voir,
  • xx-large: j’ai qu’un écran 13″…

Blague à part, tu peux utiliser ces valeurs telles qu’elles sont écrites ci dessus. L’avantage de cette technique c’est qu’elle va pouvoir s’adapter au réglage de l’utilisateur, puisque tu n’as pas la main sur la valeur exacte de la police, tu donnes simplement une indication de la taille. Le problème de cette technique c’est qu’on a que 7 tailles à notre disposition, et que c’est la 8 ème que le designer voudra. Comment je le sais? J’ai travaillé longtemps dans le bâtiment et les architectes fonctionnent un peu le la même façon, tu leur proposes des fenêtres de 1,20m et de 1,40 de large, et lui te dis que sur son plan il y a 1,30 de dessiné… Bref, voyons la suite…

(Tiens je viens de me foirer la relation avec les designer là non? Je pense que ce sont des gens qui ont de l’humour , enfin j’espère…)

Les em

C’est une variante des hauteurs relatives, mais le concept est un peu plus compliqué. Je te redonne le lien vers le tuto d’Alsacréation, qui explique très bien comment fonctionne les em. Si tu n’as pas envi de tout lire, je vais essayer d’être synthétique, sans raconter trop d’âneries…

Une des premières choses à savoir c’est que suivant le type de police que tu choisiras, le rendu ne sera pas le même. Tu me diras que c’est un peu pour ça qu’on choisit une police en principe… Mais les hauteurs de texte seront toujours les mêmes d’une police à l’autre. La seule chose qui peut varier c’est l’espace entre les lettres, l’épaisseur par défaut des caractères définit par le style de police et la hauteur de ligne (pour plus de détail, voir le tuto). On peut parfois avoir l’impression qu’entre 2 polices différentes dont la taille est  fixée à 1.2em , la hauteur est différentes mais ce n’est pas le cas. Chez Alsacréation, ils disent que ça fait partie des légendes de l’informatique, j’aime bien le terme. Pour les détails, va voir leur tuto, il illustre très bien cela.

Les em expriment , pour rester flexible,  un pourcentage de la valeur du texte définit par défaut (par le navigateur ou le développeur dans sa feuille de style CSS).

En définissant une taille de texte de cette façon:                 font-size: 2em ;

On ne fixe pas la hauteur du texte. On a dit que par défaut, la hauteur de texte d’un paragraphe était de 16px.  Donc une police de 2 em fera en réalité 32px ( 2x16em). Pour illustrer ce principe, j’ai ajouté un block de texte dans le projet codepen qui a le même titre que cet article.

Ce que j’ai fait pour bien comprendre:

  • Création de 2 <div> qui possèdent la classe block. C’est notre classe parente, et on lui fixe une hauteur de texte de référence pour tout les textes en valeur absolue: 14px par exemple. « Mais je croyais qu’il ne fallait pas utiliser les pixels pour du texte?? »
  • Création d’une deuxième <div> imbriquée dans la première, portant la classe text. A cette div, je demande une hauteur de texte de 1.5em.

Ce qu’on observe:

  • La première <div> a une hauteur de texte plus petite que la hauteur standard (16px, voir le bloc de texte du test précédent au dessus), notre taille doit donc bien être de 14px. Jusque là tout vas bien.
  • La seconde possède un texte bien plus gros. En fait ce qu’il se passe c’est que le navigateur comprend que la hauteur du texte dans la div générale doit être de 14px, mais il comprend aussi que la div imbriquée doit avoir une police 1.5 fois plus grande soit de 21px ( 14 x1.5 = 21).

Test à faire: Pour vérifier ce qu’il se passe, je t’encourage à faire varier la police indiquée en pixel pour voir si le texte imbriqué varie aussi.

Attentions aux cascades

Il y a une chose à surveiller lorsqu’on fait cela, c’est que la taille de texte indiquée en em, prends pour référence la hauteur de l’élément parent. Donc voyons ce qu’il ce passe si j’ajoute, toujours dans le fichier codepen, une div imbriquée dans la div possédant la classe text.

J’ajoute donc une div comportant la classe text2 (oui je sais, j’ai de l’imagination…), que j’imbrique dans la div text. Je lui applique une propriété font-size de 1.2 em. Et là c’est le drame!

On n’obtient pas du tout une taille de texte plus petite que précédemment (j’avais pris 1.5em pour la classe text). On obtient une taille de texte encore plus grande!! En fait comme le navigateur récupère la valeur parente, il ne calcule pas la hauteur de texte par rapport à la valeur par défaut que nous avions fixé à 14px mais bien celle de son parent, la div text, soit 21px. Donc nous obtenons une taille de police de 21 x 1.2em= 25.2em!

Je me suis beaucoup pris la tête avec ce problème, j’ai beaucoup tâtonné pour obtenir ce que je voulais sans trop comprendre pourquoi. C’est en écrivant cet article  que j’ai compris 2-3 trucs de plus. J’utilise tout le temps les em, c’est très pratique avec un peu d’habitude. Tu peux utiliser cette unité pour donner des dimensions à des marges, des div, etc, bref tout ce qui a une dimension.

En définitive, les em ne sont pas autres choses que des pourcentages donc on pourrait aussi très bien écrire:

font-size: 120%; ( c’est la même chose que 1.2em)

J’espère avoir été clair sur cette histoire de em, si ce n’est pas le cas, n’hésites pas à poser des questions en commentaire ou à me signaler qu’il y a des erreurs dans ce que je dis, ça peut arriver aussi, je n’ai pas la science infuse, j’apprends…

Font-family

Alors ce paragraphe devrait être un peu plus ludique que le précédent où on a presque fait des maths, j’ai dit presque…

Nous avons parlé en tout début de cet article qu’il y avait des valeurs par défaut pour les hauteurs de texte, et c’est aussi le cas pour les polices elles-même. En effet plusieurs polices sont « pré-installées » dans les navigateurs. Je t’en donnes quelques unes ici:

  • Times New Roman,
  • Arial,
  • Tahoma,
  • Georgia,
  • Impact,
  • Trebuchet
  • Verdana
  • etc,

Si ces polices te conviennent c’est très bien tu n’as rien d’autre à faire que de les indiquées de la façon suivante:

font-family: Arial, Tahoma, Verdana, sans-serif;

Tu auras remarqué que la dernière police est sans-serif. C’est une police standard qui s’appliquera si les autres ne fonctionnent pas.

En écrivant le chose suivante on demande au navigateur notre préférence de police:

=>Affiche le texte en police Arial, si ça ne fonctionne pas =>  alors affiche le texte en Tahoma, et ainsi de suite, jusqu’à la police sans-serif qui elle, fonctionnera à tous les coups, puisqu’il est certain qu’elle soit reconnu par tous les navigateurs, peu importe la version et la machine sur laquelle il est installée.

Il faut toujours prendre l’habitude d’indiquer plusieurs polices, afin de ne pas avoir de mauvaises surprises.

Aller, un peu de design sommaire pour t’expliquer la différence entre serif et sans-serif.

Une police serif est une police qui possède des empattements aux extrémités des lettres:

Par exemple, Times New Roman est une police serif. (remarque les empattements aux extrémités).

Une police sans-serif sera donc une police sans empattement. Par exemple la police de ce blog est UBUNTU, elle n’a pas d’empattement, elle dont sans-serif. (Arial, Tahoma, Impact sont des polices sans-serif).

Comparaison de polices Serif et Sans Serif

Polices serif et police sans-serif

Tout cela pour quoi?  Si tu choisis une super police sans-serif, par exemple celle de ce blog, qui n’est pas une police standard.  Imagines que pour certains de tes utilisateurs, cette police ne fonctionne pas et que leur navigateur affiche le texte en Times New Roman (police serif), et bien en 2 secondes ton design est complètement éclaté. Sache pour la petite histoire que les navigateurs chercheront toujours à afficher quelques choses. Donc pour éviter de casser toutes ta pages et le design que tu as passé 3 jours à monter, on indique à minima une police serif ou sans-serif suivant le besoin,  afin que le design soit respecté et puisse s’afficher avec des fonctions réduites.

« Ok mais bon les polices de bases sont un peu pourries, comment on fait pour mettre des polices plus rock n’roll? »

J’aborderai ce sujet dans un prochain article, ou je te parlerai des font-faces, et comment insérer des google-fonts notamment.

Cet article est déjà bien assez long, et on a de quoi faire pour bien comprendre l’unité em. Je vais d’ailleurs revoir un projet ou deux, où je me suis pris un peu la tête avec ces histoires d’imbrications, j’ai du faire n’importe quoi.

Je me penche sur les prochains articles et je continue d’apprendre. Je suis notamment en train de me former sur BOOTSTRAP, un framework CSS, très pratique et qui permet d’aller super vite. Je parlerai de ça dans de prochains articles, le temps que je maîtrise un peu plus le sujet. J’ai d’ailleurs un mini projet en cours depuis un moment sur Codepen qu’il faut que je termine.

Merci d’avoir lu cet article plutôt long jusqu’au bout, j’espère que c’est clair, et tu as appris un truc ou deux.

A bientôt,

Guillaume