Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Propri�t�s CSS font text pour mettre en forme un texte - CSS Debutant</title>
<meta name="description" content="Comment styliser un texte en CSS, bien choisir la police de caract�re, les tailles et couleurs de fontes, etc.">
<meta name="keywords" content="polices de caract�re, font, font-family, font-style, font-weight, cours css, tutoriels css, apprendre css, html, xhtml, css, php, feuilles de style, css debutant, css debutants, cascading style sheets, mammouthland">
<meta name="author" content="lambert-charreteur">
<meta name="generator" content="webexpert">
<link rel="author" href="http://www.mammouthland.net/jardin/curriculum.php" title="Auteur">
<link rel="prev" href="http://css.mammouthland.net/feuille-de-style-css-debutant.php" title="Pr�c�dent">
<link rel="next" href="http://css.mammouthland.net/margin-padding-css.php" title="Suivant">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" media="screen" href="font-css-polices-caracteres_fichiers/style.css">
<link rel="stylesheet" type="text/css" media="print" href="font-css-polices-caracteres_fichiers/print.css">

<h1><a href="http://css.mammouthland.net/" title="Page d'accueil de CSS D�butant"><span class="diese">#<abbr title="Cascading Style Sheets">CSS</abbr></span> <span class="debutant">{d�butant;}</span></a></h1>

<ul>
<li class="premiers"><a href="http://css.mammouthland.net/premiers-pas-en-css.php">Premiers pas</a></li>
<li class="css3"><a href="http://css.mammouthland.net/css3/">CSS3</a></li>
<li class="tutoriels"><a href="http://css.mammouthland.net/tutoriels-css.php">Tutoriels</a></li>
<li class="livre"><a href="http://css.mammouthland.net/livre/">Livre</a></li>
<li class="outils"><a href="http://css.mammouthland.net/outils-css.php">Boite � Outils</a></li>
</ul>

</div> 
</div>

<div id="main">
<p class="chemin">Vous �tes ici &gt; <a href="http://css.mammouthland.net/">CSS D�butant</a> | <a href="http://css.mammouthland.net/premiers-pas-en-css.php">Premiers pas en CSS</a> | Mettre en forme un texte en CSS</p>

<div id="edito">    
<div id="chapo">
<p><strong>Il est tr�s important de bien choisir le formatage des polices de caract�res</strong>
 utilis�es sur une page web. En effet, pour une majorit� de sites, le 
principal contenu est sous forme textuelle. Si ce texte est mal adapt�, 
peu lisible, le message ne peut �videmment pas passer, quelque soit sa 
qualit�.
</p>
<p><strong>Comment mettre en forme un texte gr�ce au CSS, quels sont les pi�ges � �viter&nbsp;?</strong></p>
</div> 
<h2>Mettre en forme un texte en CSS</h2>

<h3>Sommaire</h3>
<ul>
<li><a href="#notions">Notions importantes</a></li>
<li><a href="#familles">Choix des polices de caract�res</a> (<code>font-family</code>)</li>
<li><a href="#tailles">Unit�s de taille de caract�res</a> (<code>font-size</code>)</li>
<li><a href="#couleurs">Choix des couleurs</a> (<code>color</code>)</li>
<li><a href="#etc">Autres attributs</a></li>
<li><a href="#fontface">Propri�t� <code>@font-face</code></a> (CSS3)</li>
</ul>

<div class="objet">
	<p>Fonctionne avec&nbsp;:</p>
	<ul> 
		<li>Tous les navigateurs graphiques</li>
	</ul>
	<p>Attributs utilis�s&nbsp;:</p>
	<ul>
		<li>font ; font-family ; font-weight ; font-variant ; font-style</li>
		<li>color</li>
		<li>text-align ; text-decoration ; text-transform</li>
		<li>line-height</li>
		</ul>
	</div>
	
<h3 id="notions">Notions importantes</h3>
<p>Avant de choisir sa, ou plut�t ses, polices de caract�res pour sa page web, il faut bien conna�tre certaines contraintes&nbsp;:</p>
<ul>
 <li>Toutes les polices de caract�res n'existent pas sur tous les ordinateurs.<br><strong>Cons�quence</strong>&nbsp;:
 si l'ordinateur de votre visiteur ne poss�de pas la police que vous 
avez choisie, une autre s'affichera ruinant probablement le design que 
vous esp�riez.</li>
 <li>Mac et PC ne poss�dent pas toujours les m�mes noms de polices, ni m�me la m�me r�solution.<br><strong>Cons�quence</strong>&nbsp;: bien v�rifier les �quivalences entre Mac et PC</li>
 <li>Tous les navigateurs ne g�rent pas le rendu des polices de la m�me fa�on.<br><strong>Cons�quence</strong>&nbsp;: l� encore, n'esp�rez pas avoir le m�me rendu partout.</li>
</ul>
<p>Maintenant que je vous ai bien cass� le moral... Voyons comment g�rer au mieux toutes ces contraintes&nbsp;!</p>
<h3 id="familles">Choix des polices de caract�res</h3>
<h4>Polices g�n�riques</h4>
<p>Il existe 5 familles de polices de caract�res dites "g�n�riques"&nbsp;:</p>
<ul>
<li>Serif</li>
<li>Sans-serif</li>
<li>Monospace</li>
<li>Cursive</li>
<li>Fantasy</li>
</ul>
<div class="visu">
<h5>Zone de test</h5>
<ul>
<li><span style="font-family:serif">Serif</span></li>
<li><span style="font-family:sans-serif">Sans-serif</span></li>
<li><span style="font-family:monospace">Monospace</span></li>
<li><span style="font-family:cursive">Cursive</span></li>
<li><span style="font-family:fantasy">Fantasy</span></li>
</ul>
</div>
<p>Je ne sais pas ce que vous obtenez sur votre �cran, mais voici 4 
captures d'�cran r�alis�es sur mon propre ordinateur avec 4 navigateurs 
diff�rents&nbsp;:</p>
<div class="captures">
<p><strong>Avec Firefox</strong><br><img src="font-css-polices-caracteres_fichiers/generique-firefox.gif" alt="capture avec firefox" height="120" width="170"></p>
<p><strong>Avec Microsoft Internet Explorer 7</strong><br><img src="font-css-polices-caracteres_fichiers/generique-ie7.gif" alt="capture avec MSIE7" height="120" width="170"></p>
</div>
<div class="captures">
<p><strong>Avec Opera</strong><br><img src="font-css-polices-caracteres_fichiers/generique-opera.gif" alt="capture avec opera" height="120" width="170"></p>
<p><strong>Avec SeaMonkey</strong><br><img src="font-css-polices-caracteres_fichiers/generique-seamonkey.gif" alt="capture avec seamonkey" height="120" width="170"></p>
</div>
<div class="captures">
<p>Et puis une cinqui�me sur <strong>Safari</strong> (Mac)&nbsp;:<br>
<img src="font-css-polices-caracteres_fichiers/generique-safari.gif" alt="capture d'�cran avec Safari" height="120" width="170"></p>
</div>
<p style="clear:both">Vous constatez que s'il n'y a pas de grosses 
diff�rences avec les familles serif, sans-serif et monospace, cursive 
n'a pas le m�me aspect sous PC et sous Mac. Quant � fantasy, c'est 
plut�t... fantaisiste&nbsp;! (oui, oui, je sais, elle est plut�t facile 
celle-l� :p).</p>
<p>Il vaut mieux donc se contenter des familles serif et sans-serif, les sans-serif �tant les plus lisibles � l'�cran.</p>
<p>Les familles de polices se d�clarent � l'aide de l'attribut <code>font-family</code>, � d�clarer dans le <code>body</code>
 pour que toute la page en b�n�ficie (c'est la notion d'h�ritage). On 
finit toujours la liste de fontes d�clar�es par sa famille g�n�rique � 
laquelle elle appartient. Ainsi, si la police d�clar�e n'existe pas sur 
l'ordinateur de votre visiteur, le navigateur affichera la police 
appartenant � la m�me famille.</p>
<h4>Famille Serif</h4>
<p>Les fontes de caract�res de la famille serif assez courantes sont&nbsp;:</p>
<ul>
<li>Times new roman (PC)</li>
<li>Times (Mac)</li>
<li>Georgia (Mac/PC)</li>
<li>Palatino Linotype (PC)</li>
<li>Palatino (Mac)</li>
</ul>

<p>Elles n'ont pas toutes le m�me aspect, les associations � respecter pour une homog�n�it� de rendu pourraient donc �tre&nbsp;:</p>
<pre>body {
 font-family:"times new roman", times, serif;
}
</pre>
<pre>body {
 font-family:georgia, serif;
 }
</pre>
<pre>body {
 font-family:"palatino linotype", palatino, serif;
 }
</pre>
<h4>Famille sans-serif</h4>
<ul>
<li>Verdana (Mac/PC)</li>
<li>Arial (Mac/PC)</li>
<li>Trebuchet (PC)</li>
<li>Helvetica (Mac)</li>
<li>Tahoma (PC)</li>
<li>Geneva (Mac)</li>
</ul>
<p>Pour ces fontes sans-serif, les associations pourraient �tre&nbsp;:</p>
<pre>body {
 font-family:arial, sans-serif;
}
</pre>
<pre>body {
 font-family:verdana, sans-serif;
 }
</pre>
<pre>body {
 font-family:trebuchet, helvetica, sans-serif;
 }
</pre>
<pre>body {
 font-family:tahoma, geneva, sans-serif;
 }
</pre>
<p>Ce ne sont que des suggestions bien s�r&nbsp;!</p>
<p class="voir"><a href="http://css.mammouthland.net/polices.html">Page de visualisation des diff�rentes polices de caract�res</a></p>
<h4>Outils</h4>
<ul>
<li><a href="http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html">Equivalences polices de caract�res MAC/PC</a></li>
<li><a href="http://www.typetester.org/">Type Tester</a>, pour tester en ligne le rendu des polices.</li>
</ul>
<p class="haut"><a href="#haut">Haut</a></p>
<h3 id="tailles">Unit�s de taille de caract�res</h3>
<p>Commen�ons par �vacuer ce qu'il ne faut pas utiliser&nbsp;:</p>
<ol>
<li>On n'utilise pas de tailles de caract�res fixes comme les points (<code>pt</code>), les picas (<code>pc</code>) ou les centim�tres (<code>cm</code>). Celles-ci ne sont pas redimensionnables � l'�cran, or on doit toujours laisser la possibilit� au visiteur de zoomer la page.<br>Pensez
 que m�me si vous avez de bons yeux actuellement, �a ne durera pas. Un 
jour, vous aussi, deviendrez presbyte, et vous serez content de pouvoir 
zoomer un texte. Et je ne parle pas de toutes les autres d�ficiences 
oculaires...</li>
<li>On �vite aussi d'utiliser les pixels (<code>px</code>) car Internet 
Explorer les consid�rent comme une unit� de taille de caract�re fixe, on
 se retrouve donc avec le m�me probl�me que pr�c�demment.</li>
</ol>
<p>Il faut donc utiliser des unit�s relatives, telles que les <code>em</code> ou les <code>%</code>.
 Ces unit�s sont proportionnelles � la taille en pixels d�clar�e dans le
 navigateur. Par d�faut, ceux-ci sont en g�n�ral r�gl�s � 16px. C'est 
donc une taille qui peut �tre modifi�e par l'utilisateur... On n'a aucun
 pouvoir l�-dessus.</p>
<p>La taille des caract�res se d�clare par l'attribut <code>font-size</code>.</p>
<h4>L'h�ritage</h4>
<p>Consid�rons l'exemple suivant&nbsp;:</p>
<pre>body {
 font-family:arial, sans-serif;
 font-size:90%;
 }
p {
 font-size:90%;
 }
</pre>

<p>Les textes inclus dans les paragraphes n'auront pas une taille de 90%
 des 16 pixels d�clar�s par d�faut (soit 14,4 pixels), mais <strong>90% des 90% des 16 pixels</strong> (soit � peu pr�s 13 pixels... oui, je sais, ce sont des maths, �a fait mal � la t�te).<br>En effet, le paragraphe h�rite des propri�t�s de son/ses parent(s), donc ici des valeurs d�clar�es dans le <code>body</code>.</p>
<p>Il faut donc bien faire attention aux valeurs d�clar�es. Il est donc 
en g�n�ral plus sage, et surtout plus simple, de d�clarer la taille � 
100%, et de ne la r�duire (ou l'augmenter) que ponctuellement.</p>
<h5>Exemple</h5>
<pre>body {
 font-family:arial, sans-serif;
 font-size:100%;
 }
h1 {
 font-size:200%;
 }
#footer p {
 font-size:90%;
 }
</pre>
<p>Ici, seuls les paragraphes du <code>&lt;div id="footer"&gt;</code> auront une taille plus petite que les autres paragraphes de la page. (Pour plus de d�tails sur la fonction de <code>id</code>, voir le tutoriel sur les <a href="http://css.mammouthland.net/selecteurs-css-class-id.php">s�lecteurs class et id</a>).</p>
<h4>Lien utile</h4>
<ul>
<li><a href="http://openweb.eu.org/articles/compatibilite_taille_polices">Compatibilit� multi-navigateurs des polices de caract�res</a> (OpenWeb)</li>
</ul>
<p class="haut"><a href="#haut">Haut</a></p>
<h3 id="couleurs">Le choix des couleurs</h3>
<p>On peut �viter des choses comme �a&nbsp;:</p>
<p><img src="font-css-polices-caracteres_fichiers/texte-gris-fond-noir.gif" alt="texte gris sur fond noir" height="97" width="217"> <img src="font-css-polices-caracteres_fichiers/texte-gris-fond-blanc.gif" alt="texte gris sur fond blanc" height="97" width="217"></p>
<p>Que ce soit l'un ou l'autre choix, surtout avec des tailles de 
polices aussi petites, c'est vraiment tr�s tr�s p�nible � lire, car pas 
assez contrast�.</p>
<p>L� encore, ayez � l'esprit que tout le monde n'a pas les yeux de 
superman et un super �cran super lumineux et super contrast�. La lecture
 � l'�cran, c'est d�j� moins facile que sur papier, alors avec des choix
 comme �a... C'est peut-�tre tr�s "design", mais �a ne met pas les 
internautes dans les meilleures dispositions de lecture.</p>
<p>Ce genre d'association n'est peut-�tre pas non plus des plus heureuses&nbsp;:</p>
<p><img src="font-css-polices-caracteres_fichiers/texte-rouge-fond-lime.gif" alt="texte rouge sur fond vert clair (lime)" height="97" width="217"></p>
<p>Bref&nbsp;! les couleurs se d�clarent gr�ce � l'attribut <code>color</code>, et � l'aide de codes hexad�cimaux ou rvb (on �vite les noms).</p>
<pre>body {
 font-family:arial, sans-serif;
 font-size:100%;
 color:#000000; /*code hexad�cimal du noir*/
 }
</pre>
<h4><code>eight: normal | nombre | %</code></h4>
<p>De fa�on g�n�rale, pensez � a�rer les textes, et respectez la s�mantique.</p>

<ul>
<li>Titrez bien vos diff�rentes sections avec des <code>h1</code>, <code>h2</code>, <code>h3</code>, etc. en veillant � respecter la hi�rarchie (pas de <code>h3</code> si pas de <code>h2</code>&nbsp;; pas de <code>h2</code> si pas de <code>h1</code>, etc.)</li>
<li>Utilisez les balises <code>&lt;p&gt;&lt;/p&gt;</code> pour faire des paragraphes. Pas des <code>div</code>&nbsp;!</li>
<li><a href="http://css.mammouthland.net/blockquote-retraits-css.php">N'utilisez pas la balise <code>blockquote</code> pour faire des retraits</a>, elle est faite pour des blocs de citations</li>
<li>etc.</li>
</ul>
<h3 id="fontface">Propri�t� <code>@font-face</code></h3>
<p>Apparue dans les CSS 2.0, abandonn�e dans les CSS 2.1, elle rena�t pour de bon dans les CSS 3. Avec <code>@font-face</code>,
 les limitations �voqu�es au d�but de ce tutoriel n'existent plus&nbsp;:
 on va pouvoir faire "t�l�charger" de fa�on transparente la police de 
caract�re n'existant pas sur le poste du visiteur.</p>
<p>Pour en savoir plus, poursuivez la lecture de <a href="http://css.mammouthland.net/css3/font-face.php">ce tutoriel sur @font-face</a>.</p>

<h3>Lectures compl�mentaires</h3>
<ul>
<li><a href="http://www.alsacreations.com/article/lire/631-quelles-polices-pour-un-site-web.html">Quelles polices de caract�re utiliser sur le web&nbsp;?</a> (Alsacreations)</li>
<li><a href="http://www.mammouthland.net/weblog/2009/24_08_09.php">Sites � calques ! (� la bonne soupe de <code>div</code>)</a></li><a href="http://www.mammouthland.net/weblog/2009/24_08_09.php">
</a></ul><a href="http://www.mammouthland.net/weblog/2009/24_08_09.php">

</a>

<h2><a href="http://css.mammouthland.net/premiers-pas-en-css.php" title="liste des tutoriels pour d�buter en CSS">Premiers pas en <abbr title="Cascading Style Sheets">CSS</abbr></a></h2>
<ul>
  <li><a href="http://css.mammouthland.net/principe-des-css.php">Principe des CSS</a></li>
  <li><a href="http://css.mammouthland.net/balises-html.php" title="El�ments HTML � conna�tre">Balises HTML de base</a></li>
  <li><a href="http://css.mammouthland.net/feuille-de-style-css-debutant.php" title="Faire sa premi�re feuille de style">Feuille de style CSS de base</a></li>
  <li><a href="http://css.mammouthland.net/font-css-polices-caracteres.php" title="Propri�t�s CSS font et text">Mettre en forme un texte</a></li>
  <li><a href="http://css.mammouthland.net/margin-padding-css.php" title="Propri�t�s CSS margin et padding">G�rer les marges en CSS</a></li>
  <li><a href="http://css.mammouthland.net/selecteurs-css-class-id.php" title="Les classes et les identifiants">S�lecteurs CSS class et id</a></li>
  <li><a href="http://css.mammouthland.net/mise-en-page-sans-tableau.php" title="Mise en page 2 colonnes enti�rement en CSS">Mise en page sans tableau</a></li>
  <li><a href="http://css.mammouthland.net/border-css.php" title="Propri�t� CSS border">Bordures en CSS</a></li>
  <li><a href="http://css.mammouthland.net/image-de-fond-background-css.php" title="Propri�t� CSS background">Image de fond en CSS</a></li>
  <li><a href="http://css.mammouthland.net/rollover-pseudo-classe-css-hover.php" title="Rollover ou comment faire appara�tre caract�res et images sous la souris">Effets rollover en CSS</a></li>
  <li><a href="http://css.mammouthland.net/positionner-image-float-html-css.php" title="Utilisation de float pour positionner une image et du texte">Aligner image et texte</a></li>
  <li><a href="http://css.mammouthland.net/liste-a-puces-en-image-ul-li-css.php" title="Listes � puces en CSS">Puces en images</a></li>
  <li><a href="http://css.mammouthland.net/blockquote-retraits-css.php" title="El�ment blockquote et propri�t� text-indent">Citations et retraits</a></li>
</ul>
<h2><a href="http://css.mammouthland.net/css3/">CSS3</a></h2>
<h2><a href="http://css.mammouthland.net/tutoriels-css.php" title="Liste des tutoriels de niveau avanc�">Tutoriels CSS</a></h2>
<h2><a href="http://css.mammouthland.net/outils-css.php">Boite � Outils</a></h2>
<h2><a href="http://css.mammouthland.net/articles-divers-css-html.php" title="Articles divers sur le CSS et le (x)html">Articles connexes</a></h2>
<div id="w3c">
<p><iframe data-twttr-rendered="true" title="Twitter Follow Button" style="width: 144px; height: 20px;" class="twitter-follow-button" src="font-css-polices-caracteres_fichiers/follow_button.htm" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
<script src="font-css-polices-caracteres_fichiers/widgets.js" type="text/javascript"></script></p>
<p><a href="http://www.alsacreations.fr/" title="H�berg� par Alsacreations.fr"><img src="font-css-polices-caracteres_fichiers/logo-alsacreations.png" alt="Logo Alsacr�ations.fr"></a></p>
<p><a href="http://www.opquast.com/" title="Adoptez la qualit� web"><img src="font-css-polices-caracteres_fichiers/soutien-opquast.png" alt="Logo de soutien au projet Opquast"></a></p>

</div> 
	 </div>
</div>

</div>
</div>

</body></html>