Search Menu

CSS : mettre en forme vos textes (partie 1)

css-mise-en-forme-du-texte

Aujourd’hui on va parler CSS et mise en forme du texte. Si vous débutez tout juste, je vous conseille tout d’abord d’aller lire notre introduction rapide au HTML.

Pour cette première partie, on va surtout s’intéresser à la police de caractère, sa taille, à l’italique, le gras … : bref du basique, mais il y a déjà beaucoup à dire. Dans une deuxième partie, on verra des propriétés qui vont vous permettre de mettre en forme ce texte : alignement, hauteur de ligne, espacement entre les caractères, dans une troisième partie, on verra les nouvelles propriétés offertes par CSS3 en matière de formatage du texte et enfin, une cinquième partie nous permettra d’aborder quelques petits trucs et astuces pour avoir des textes flottants, des lettrines et autres réjouissances typographiques !

1. Choisir une police

Le temps des dinosaures (quand on avait le choix entre une dizaine de polices)

Avant, sur internet, on ne pouvait utiliser que des polices dites « web ». Pour qu’une police s’affiche correctement sur internet, il fallait que la personne qui consultait la page est la police sur son ordinateur. On utilisait donc les polices « web safe » qui étaient présentes par défaut sur la plupart des ordinateurs quelque soit le système d’exploitation installé. Grosso modo, il y en avait une dizaine et c’était pas la fête à la typo sur internet…

On avait donc le choix entre Arial, Arial Black, Comic Sans MS (malheureusement), Courier New (celle qui ressemble à une police de vieille machine à écrire), Georgia, Impact, Times New Roman, Trebuchet MS, Verdana et c’est à peu près tout !

Pour déclarer la police que vous vouliez en CSS, on utilisait (et on utilise toujours) font-family :

.monTexte{
    font-family:Arial;
}

Comme on était prudent, au cas où l’internaute n’est pas Arial sur son ordi (oui, on était super prudent), on mettait plutôt :

.monTexte{
    font-family: Arial, Verdana, sans-serif;
}

ce qui revenait à dire : « Mets Arial. Si elle n’est pas sur l’ordinateur de l’internaute, mets du Verdana et si aucune des deux n’est présente, mets une police sans serif » (c’est à dire sans empatement – si vous ne savez pas faire la différence entre police serif et sans-serif, je vous conseille le jeu « I shot the serif ».)

L’affichage de police personnalisée

Heureusement, aujourd’hui, grâce à CSS3, on peut utiliser des polices plus librement en utilisant @font-face. Si vous ne voulez pas vous embêtez à convertir la police, l’optimiser, la déclarer dans différents formats pour qu’elle s’affiche correctement avec différents navigateurs, vous pouvez utiliser Google Fonts qui fait à peu près tout pour vous et vous met à dispo plus de 600 polices gratuites et déjà optimisées (yeah, merci Google).

Pour les ajouter à votre site, il vous suffit de parcourir les polices disponibles, d’ajouter vos préférés à votre collection (votre collection apparait en bas du site), de choisir celle que vous souhaitez utiliser (en cliquant sur le bouton « Use »  et de récupérer le code que vous a préparé Google (que vous voyez ci-dessous dans la partie 3). Une fois ajouté dans la balise <head> des pages de votre site web ou de votre blog (en général dans le fichier header.php de votre blog), ce code vous permet d’utiliser cette police comme n’importe quelle autre, c’est à dire en indiquant :

.monTexte{
    font-family: ‘Ma Police Personnalisée’, Arial, sans-serif;

}

Google étant sympa, il vous donne même un exemple, que vous n’avez qu’à copier coller dans votre feuille de style (dans la partie 4, cf ci-dessous).

google-fonts

Notez que si ma police a des espaces dans son nom, il est recommandé d’utiliser des guillemets, comme ci-dessus.

D’autres services existants existent, bien sûr, si jamais vous êtes allergique à Google, notamment sur Typokit ou FontSquirrel.

2. La taille

Pour choisir la taille de la police de caractères, c’est beaucoup plus simple… en apparence. On utilise la propriété font-size. Là où ça se complique, c’est qu’on peut définir deux types de valeurs :

– une taille absolue : en pixels, par exemple. C’est concret et pratique mais dans l’absolue, il faut éviter (mais vous en verrez souvent dans vos feuilles de style CSS parce qu’entre ce qu’il faut faire et ce qu’on fait, il y a parfois un gouffre),
une taille relative : en pourcentage ou en « em », ce qui beaucoup mieux car cela va permettre à la taille de s’adapter (mais c’est un peu plus abstrait et du coup, cela semble plus difficile à utiliser). En fait, 1em correspond à la taille de la police par défaut. La taille par défaut de vos textes est de 16px (sauf si cette taille a été modifiée). Du coup, 1em = 16px. Si vous indiquez 2,5em, votre police correspondra à 40px (16 * 2,5) et ainsi de suite : bref, c’est une valeur proportionnelle.

On pourrait en parler pendant des heures, donc si le sujet vous intéresse et si vous souhaitez vraiment comprendre à quoi correspond un em, je vous conseille cet excellent article sur AlsaCréations.

3. Le style

On finit par quelque chose de plus simple (ouf …)

Pour mettre du texte en italique, on utilise font-style:italic;
Pour mettre du texte en gras, on utilise font-weight:bold; Vous pouvez également utiliser des valeurs : 100, 200, … jusqu’à 900. 400 correspond au style normal. En choisissant une valeur supérieure, votre police sera plus grasse. En indiquant une valeur inférieure à 400, elle sera moins grasse. La valeur bold dont je parlais précédemment correspond à 700.

Enfin, on peut utiliser la valeur normal dans ces deux propriétés pour enlever l’italique ou le gras.

 Voilà, on espère que ça vous a plus et je vous donne rendez-vous lundi prochain pour la suite de nos aventures au pays des CSS !

À propos de Laetitia

J'aime le papier, je déteste la paperasse.

Lire ses billets - Découvrir son blog

1 Comment Write a comment

  1. Pingback: CSS : mettre en forme vos textes (partie 2) | Do It Yvette

Leave a Comment

Required fields are marked *.