oujood.com

Polices et typographie pour le Web: Mettre en forme un texte en CSS à travers des exemples

Il est possible de faire beaucoup pour ajouter de la personnalité et améliorer la lisibilité du contenu d'un site Web. Voici un cours pour en savoir plus sur le choix des polices et de la typographie pour le Web
Gestion des polices, en CSS (feuille de style): Mettre en forme un texte en CSS à travers des exemples clairs.
Quelles sont les propriétés CSS pour formater du texte avec des mentions sur la police, la taille de police, la couleur de police etc...
Dans ce chapitre on va voir comment définir la taille du texte.

search |

Taille du texte

HTML & CSS

Nous avons vu dans un cours précédent la propriété CSS qui permet de changer la taille du texte qui est font-size.
C'est toujours la même. Mais on peut indiquer la taille du texte de quatre manières :
1• En pixels : C'est une façon précise d'indiquer la taille du texte.
Pour avoir un texte de 16 pixels de hauteur, vous devez écrire :

font-size:16px;
2• En donnant une valeur relative : En écrivant "gros", "très gros", "petit", "minuscule". Mais bien sur en anglais.

Voici la liste des différentes valeurs :

• xx-small : minuscule
• x-small : très petit
• small : petit
• medium : moyen
• large : grand
• x-large : très grand
• xx-large : euh... gigantesque

Exemple:

Code CSS à metre dans la balise <style></style> ou dans votre feuille de style:

Sélectionner le code

	.minuscule{
	   font-size: xx-small; 
	}
	.trespetit{
	   font-size: x-small; 
	}
	.petit{
	   font-size: small; 
	}
	.moyen{
	   font-size: medium; 
	}
	.grand{
	   font-size: large; 
	}
	.tresgrand{
	   font-size: x-large; 
	}
	.supermegagigatresgrand{
	   font-size: xx-large; 
	}
	
 

Evidement, vous devez déclarer les class (minuscule, trespetit,petit,moyen etc...) dans le code html des balises concernées
Celons ce que vous souhaitez faire.

Exemple code HTML:
Sélectionner le code


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Taille du texte en css</title>
	<style>
	.minuscule{
	   font-size: xx-small; 
	}
	.trespetit{
	   font-size: x-small; 
	}
	.petit{
	   font-size: small; 
	}
	.moyen{
	   font-size: medium; 
	}
	.grand{
	   font-size: large; 
	}
	.tresgrand{
	   font-size: x-large; 
	}
	.supermegagigatresgrand{
	   font-size: xx-large; 
	}
	</style>
	</head>
	<body>
	<body>
	  <p class="minuscule">Texte en xx-small</p>
	  <p class="trespetit">Texte en x-small</p>
	  <p class="petit">Texte en small</p>
	  <p class="moyen">Texte en medium</p>
	  <p class="grand">Texte en large</p>
	  <p class="tresgrand">Texte en x-large</p>
	  <p class="supermegagigatresgrand">Texte en xx-large</p>
	</body>

	</body>
	</html>	
	
 

Utilisez surtout cette méthode pour indiquer la taille du texte plutôt que d'utiliser des pixels.
Votre site sera bien adaptable aux différentes configurations de vos visiteurs.
3• En rem : c'est une façon d'indiquer de manière relative la taille du texte. C'est une méthode pratique.
On doit indiquer la taille du texte par rapport à la taille normale de la police. C'est à dire:
"1rem" signifie "Taille normale".
Si vous mettez un nombre supérieur comme par exemple "1.3rem", le texte aura une taille 1,3 fois plus grande que la taille normale.
Pour réduire la taille du texte on met par exemple: "0.8rem" et votre texte aura une taille 0,8 fois plus petite.
C'est la méthode la plus recommandé.
on peut aussi utiliser em à la place du rem
Rem et em sont tous deux des unités de taille évolutives, mais avec em, l'unité est relative à la taille de la police de son élément parent, tandis que l'unité rem est uniquement relative à la taille de la police racine du document body ou html.

Exemple: Code CSS

Sélectionner le code

	.petit-rem{
	   font-size: 0.7rem; 
	}
	.grand-rem{
	   font-size: 1.3rem; 
	}
	
 

Et bien sûre on doit déclarer les class petit-rem et grand-rem dans les balises concernées du code html.

4• En pourcentage : Si vous indiquez "100%", le texte aura une taille "normale".
Si vous mettez "130%", le texte aura une taille correspondant à 130% de la taille normale. C'est comme "rem".
Les méthode des "rem" et des % sont les plus pratiques : elles s'adaptent automatiquement aux préférences du visiteur et sont facile à utiliser.

Sélectionner le code

	.petit-taille{
	   font-size: 70%; 
	}
	.grand-taille{
	   font-size: 130%; 
	}
	
 
Par carabde 10 mars 2014 mis à jour 08 janvier 2022

chapitre précédent     chapitre suivant



Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Balise carte image map

Définit un côté client carte image

right

Définit le bord de la marge droite d'une boîte placée

outline

Définit toutes les propriétés dans une déclaration



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci