La Typographie

Bien souvent, l’usage des polices sur internet est limité tout simplement parce que la police de caractères que l’on souhaite utiliser doit être présente sur le système de l’utilisateur pour pouvoir être utilisée.

À mon sens le plus dur à faire pour un design web c’est d’avoir une police à la fois élégante et lisible. À travers cet article je vais tenter de vous donner des pistes et de vous aider.

La taille de la police

Il est important d’avoir une police lisible, pour ce faire il faut choisir une taille de texte pas trop petite, malheureusement, généralement beaucoup de sites font cette erreur. Pour ma part, je considère qu’une taille de 16px est un minimum.

La propriété utilisée en CSS pour gérer la taille du texte est font-size.

    body {
       font-size: medium;
    }

Pour gérer la taille de la police, le langage CSS propose différentes unités : les unités absolues (pt : le point, pc : le pica, cm, mm, in : inch) ou les unités relatives (em : cadration, rem, ex, %, px : pixel). Je vous conseille donc ce tutoriel pour avoir plus d’explications.

Le W3C définit également des tailles absolues à l’aide des mots-clés suivants :

• xx-small (6,9pt soit 9,2px)
• x-small (8,3pt soit 11,1px)
• small (10pt soit 13,3px)
• medium (12pt soit 16,0px)
• large (14,4pt soit 19,2px)
• x-large (17,28pt soit 23,0px)
• xx-large (20,7pt soit 27,6px)

Remarque : 1 point = 1.333333 px

Aération du texte

Une autre chose sur laquelle, on peut jouer c’est l’interligne. Cela va nous permettre de gagner en lisibilité et d’aérer nos paragraphes. Pour régler, cela en CSS, on utilise la propriété line-height.

    body {
       line-height: 24px;
    }

On peut également jouer sur l’espace entre les lettres avec la propriété letter-spacing, on va pouvoir ainsi préciser des valeurs négatives si notre police par exemple est trop aérée par défaut ou inversement.

    body {
        letter-spacing: 2px;
    }

La couleur de la police

Un autre facteur qui n’est pas à négliger est la couleur de la police, il faut savoir jouer sur les contrastes, on peut ainsi éviter le noir pour un gris un peu plus clair. Une bonne idée peut être de mettre les titres en noir et mettre les paragraphes dans un gris un peu clair (par exemple : #A9A9A9). Si vous voulez utiliser des couleurs qui sortent de l’ordinaire n’oubliez pas que chaque couleur a généralement une signification et que cette dernière peut varier en fonction du pays.

Une police personnalisée avec Google Fonts

Maintenant, je vais vous parler d’un site web qui peut s’avérer très pratique pour le choix d’une police, c’est Google Fonts. Grâce à ce site vous pouvez choisir une police de fond, l’ajouter, puis grâce au review en avoir un aperçu, si une police vous plait vous n’avez plus qu’à l’ajouter en cliquant sur le bouton use, vous aurez alors la possibilité d’ajouter un bout de code de ce style ci :

<link href='http://fonts.googleapis.com/css?family=Convergence' rel='stylesheet' type='text/css'>

Ensuite dans votre font-family vous ajoutez la police voulue dans mon cas la police Convergence, qu’on ajoute comme ceci :

body {
    font-family: 'Convergence', sans-serif;			
}

Ainsi vous aurez la possibilité d’afficher n’importe quelle police même si l’utilisateur ne la possède pas. Il existe une autre solution, la propriété @font-face.

La propriété CSS : @font-face

C’est une propriété de CSS disponible depuis la version 2, elle est compatible avec les navigateurs suivants :

• IE 5.5+
• Firefox 3.5+
• Safari 3.2+
• Opera 10+
• Chrome 2+

Le problème c’est qu’à l’époque peu de navigateurs supportaient la propriété ou alors partiellement (ironie du sort, c’est IE qui la supportait le mieux mais il fallait utiliser le format de font EOT qui est propriétaire).

Les développeurs de navigateurs rencontraient surtout deux types de problèmes :

• la plupart des fontes disponibles sont protégées par le droit d’auteur et ne peuvent pas être redistribuées
• les fontes rajoutaient un poids conséquent aux pages

CSS 3 a marqué le retour de cette propriété !

Trouver sa police

Afin de chercher une police, je vous conseille deux sites : Dafont et Font Squirrel. Bien souvent les polices sont libres de droits mais faites attention, parfois elles sont utilisables que sous certaines conditions, prenez le temps de bien lire la licence.

Donc une fois le fichier téléchargé, rendez-vous sur l’onglet webfont generator du site. On choisit ensuite une police, on confirme avoir les droits d’utilisation de la police. Et on télécharge le kit. Une fois l’archive zip extraite, on conserve seulement ce qui nous intéresse, à savoir les fichiers avec l’extension .ttf, .eot, .woff, .svg.

Il nous reste maintenant à utiliser la propriété @font-face dans notre css, pour ce faire on écrit ceci :

@font-face {
    font-family: 'capture_it';
    src: url('capture_it.eot');
    src: url('capture_it.eot?#iefix') format('embedded-opentype'),
         url('capture_it.woff') format('woff'),
         url('capture_it.ttf') format('truetype'),
         url('capture_it.svg#capture_it') format('svg');
    font-weight: normal;
    font-style: normal;
}

On peut ensuite utiliser la police très facilement :

    font-family: 'capture_it', sans-serif;

Voici un exemple de la police capture-it que j’ai utilisé vous pouvez vérifier, elle ne bougera pas sous tout les navigateurs cités au-dessus.

Le manuel disait « Nécessite Windows XP ou mieux ». J’ai donc installé Linux.

Toutes polices que l’on doit fournir permettent donc d’assurer la compatibilité de notre police avec tous les navigateurs.

Voici le détail :

• Fichier .eot : format pour IE
• Fichier .woff : format pour Firefox
• Fichier .ttf : format pour Safari et Chrome
• Fichier .svg : format pour les mobiles, smartphones…

Enfin, pour ma part, j’aime beaucoup les polices : Georgia et PT Sans.