La typo sur le Web : 6 conseils CSS

Le 22 novembre 2009 | Web | 2 commentaires

Voici ma petite liste de conseils de typos lors de l’intégration de vos chartes graphiques. Il est important de souligner que les typos jouent un rôle très important dans la construction du site Internet, de plus, les règles typographiques que l’on pouvait retrouver dans le monde du print sont aujourd’hui indispensables sur la toile : espace des caractères, espace entre les mots, interlignage, … Toutes ces possibilités sont à travailler, de la même manière qu’un document print il y a 10 ans.

1. Utilisez des familles de polices dans vos CSS
Lorsque vous éditez un fichier css, pour une balise ou une div ou class, il est important de lier plusieurs fonts (typos/polices). Votre page peut être lu par un PC, ou un Mac, avec un OS différent du vôtre. Il est possible que votre visiteur ne dispose pas de la typo Helvetica par exemple. Pensez alors à renseigner plusieurs typos, de la plus importante pour vous à la plus simple et commune

2. Personnalisez le line-height
La hauteur de ligne, dans un paragraphe, permet d’espacer les lignes les unes aux autres. Elle améliora la lisibilité ou au contraire donnera un effet de style très design (pour les titres par exemple). Pensez que les valeurs par défaut peuvent être changées.

3. Donnez une proportion logique dans vos balises css
Lorsque vous définissez une page Internet, vous lui indiquez des balises H1, H2, H3, des paragraphes, des champs de formulaires et bien d’autres encore. Gardez une logique de taille entre les différentes balises, par importance : une balise h1 devrait être plus grande qu’une h2, un paragraphe devra être plus petite que tous les niveaux de titres, ...

4. N’utilisez pas trop de typos différentes
Aussi bien valable sur le papier qu’à l’écran, le nombre de typos utilisées fera la différence. Plus vous utiliserez de typos différentes, plus votre mise en page sera compliquée à gérer.

5. N’écrivez pas en majuscule, transformez via la CSS
Pour une lecture plus simple par les navigateurs n’acceptant pas les CSS ou par une désactivation de cette dernière, écrivez vos textes en minuscules et stylez ensuite à travers la CSS vos éléments en majuscule.

6. Les typos sans serif pour les longs textes
Lorsque vous avez besoin d’un long texte dans vos pages, préférez l’utilisation de typos sans serif, comme le verdana, l’arial, le tahoma ou l’helvetica plutôt que des typos comme le times new roman. La lecture sera plus rapide à l’écran.

Commentaires associés

Ajouter un commentaire