J’arrive un peu après la bataille, mais que voulez-vous, il fallait bien que mon pauvre Modem Olitec 56K ⁽¹⁾ prenne le temps de charger les 80+ plus belles polices de caractères pour un design professionnel que nous propose Smashing Magazine. Si je n’ai jamais douté de la qualité des articles publiés par ce qu’on peut considérer comme l’un des 10 meilleurs blogs du monde, je dois avouer que mon passé d’infographiste print amoureux de la belle typo a refait surface pour traquer la faute de goût…

… en vain ;)

Sur les 80 polices sélectionnées, les 30 premières sont incontournables : on en retrouve la moitié sur au moins 80% des identités graphiques et cartes de visite un peu partout dans le monde depuis quelques dizaines d’années…

Les 50+ typos suivantes sont certainement moins connues malgré des qualités qui crèvent l’écran : un look and feel jeune et dynamique (ce sont des typos bien plus récentes que les 30 premières), un joli dessin, et plus que tout autre considérations, du caractère ! En même temps c’est la moindre des choses, non ?

Coup de coeur pour Le monde Courrier, Parisine PTF, Palatino Sans & Informal, Whitman, Insider et Mello Sans.

Lire 80 Beautiful Typefaces For Professional Design.

Voici mes 11 typos préférées

• Akzidenz Grotesk
• Avant Garde Gothic
• Avenir
• Barmeno
• Formata
• Helvetica Neue
• Insignia
• Neuzeit
• OCRB
• Officina Sans
• Rotis Sans Serif

⁽¹⁾ Ce billet est issu d’un brouillon daté du 26 août 2007 à une époque où j’ai eu l’occasion de tester la connexion de secours de Free ;)

Lorsqu’on réalise le design d’un site web, il est d’usage de formaliser les choix créatifs retenus en répertoriant les éléments qui composent l’identité graphique et éditoriale dans un guide stylistique. Son objectif est de garantir à l’utilisateur final une expérience visuelle et intellectuelle cohérente tout au long de la navigation. Ce guide stylistique s’adresse généralement aux professionnels chargés de la réalisation technique du site (développeurs, intégrateurs web, etc.) et à ceux qui devront intégrer les contenus au quotidien, qu’il s’agisse des textes et de tout élément graphique ou multimedia. Il peut également préciser les valeurs de la marque et son positionnement vis-à-vis de ses concurrents. C’est dire l’importance de ce guide qui servira souvent de référence dans l’entreprise.

Visite guidée dans le guide stylistique de Mark Boulton pour le redesign du site web Drupal.org

Je vous propose une visite guidée dans le guide stylistique réalisé par Mark Boulton chargé du redesign du site Drupal.org. Ce guide est un petit bijou de concision tout en étant très complet. On y trouve trois parties principales : Langage visuel, Editorial et Prototype.

Langage visuel

La partie visuelle est la plus importante. Elle regroupe les informations liées à la marque, au logo, aux couleurs, aux choix typographiques, à la grille de mise en page, à la navigation sur le site, au traitement des images, aux formats publicitaires et à leurs emplacements, aux icônes ainsi qu’aux styles de mise en forme spécifiques pour les tableaux ou les formulaires.

Marque

Il est toujours utile de rappeler ce qui fait la spécificité de l’entreprise qui fait appel à vos services.  Les éléments mis en avant par l’entreprise sur elle-même sont un bon point de départ, mais il ne faut pas oublier de décrire précisément les produit ou les services qu’elle propose. Par ailleurs, un résumé des motivations qui pousse l’entreprise à (re)faire un site web est très utile. Cette partie se rédige idéalement en tout début de projet pour servir de garde-fou à votre imagination fertile.

Logo

Affichez le logo avec les éléments indispensables à son bon fonctionnement : marges mini et maxi, tailles, couleurs, version noir et blanc ou en niveau de gris, etc. Sans oublier les conseils comme : ne pas encadrer ou ne pas souligner le logo, par exemple. Il est utile de rappeler qu’il faut partir de la version originale du logo plutôt que de modifier la taille d’une version déjà en ligne. A cet égard, rappelez également le format png, gif ou jpg choisi avec le taux de compression ou d’échantillonnage approprié.

Couleur

Donnez un échantillon des couleurs utilisées dans le site en indiquant les valeurs RVB et Hexadécimales. Si les couleurs font partie des couleurs nommées en HTML, précisez-le. Dans le cas contraire, donnez un nom à chaque couleur pour faciliter la communication entre les différentes personnes susceptibles d’intervenir sur le site. Vous pouvez également enregistrer votre palette de couleur et fournir des palettes au format Photoshop ou Illustrator.

Typographie

Affichez un échantillon des polices de caractère que vous avez choisies selon les éléments HTML : niveaux de titre h1, h2, etc., paragraphes p, les liens a (survolés a:hover, visités a:visited, etc.), les listes (ordonnées ol, non-ordonnées ul, de définition dl). Ainsi que tout autre élément susceptible d’être utilisé. Affichez la typographie sous forme d’images au cas où la fonte en question ne serait pas disponible sur le poste de l’utilisateur.

Grille

Tout le monde ne travaille pas avec une grille de mise en page, mais si c’est le cas, affichez la grille en indiquant les valeurs retenues pour les colonnes, les gouttières et la largeur totale du design. Indiquez également les regroupements de colonnes prévus et donnez quelques exemples d’utilisation en surimpression avec la grille en arrière-plan.

Navigation

Indiquez les différentes solutions visuelles retenues pour la naviguation à l’intérieur du site : navigation principale (ex. les catégories), navigation secondaires (ex. les tags), les liens dans le pied de page avec des exemples de mise en forme pour chaque élément.

Images

Donnez des exemples d’utilisation des images en fonction du nombre de colonnes et des différentes manières de les habiller selon le texte et le contexte lorsque : l’image occupe toute la largeur d’une colonne ou d’un regroupement de colonnes ; des marges la séparent des bords ; l’image est habillée à droite ou à gauche ; un titre se trouve au-dessus, etc. Pensez à tous les cas de figure.

Publicités

Les formats publicitaires sont un peu le tue-l’amour du design web. Et pourtant, pour nombre de sites web, c’est le nerf de la guerre. Sans aller jusqu’à définir le pas de votre grille en fonction des formats les plus courants, il est important de préciser où et comment la publicité peut s’intégrer dans la mise en page.

Fournitures diverses

Regroupez ici les éléments visuels utilisés dans le site : icônes, boutons, mais aussi les styles spécifiques pour la mise en forme des tableaux, l’affichage de commentaires, les formulaires, etc. Si les icônes et les boutons sont très nombreux, n’hésitez pas à créer une rubrique spécifique pour les styles particuliers pour ne pas surcharger cette section.

Editorial

Après la charge graphique au complet, la charte éditoriale est un éléments primordiale : c’est elle qui servira de guide pour que les différents intervenants puissent faire vivre le site web en employant des conventions communes pour que le discours ne s’éparpille pas lorsque les rédacteurs sont nombreux.

Notez que même si vous êtes l’unique rédacteur de votre site, mettre votre charte éditoriale noir sur blanc n’est pas une perte de temps, bien au contraire !

Qu’est-ce qu’une charte rédactionnelle ?

La charte rédactionnelle (ou charte éditoriale) est un document qui définit un style particulier de rédaction, en relation avec l’image de l’entreprise ou d’un produit. Plus précisément, la charte rédactionnelle peut formaliser et fixer des principes d’écriture :

• Rédaction des titres (long, court, informatif, accrocheur, laconique, comique),
• Style d’écriture (impliquer le lecteur, écrire à la 1re personne du singulier, à la 2ème personne du pluriel)
• Nombre de mots optimum par billet et par paragraphe,
• Illustration des billets (photos, dessin, graphique),
• Comment citer l’entreprise et ses produits dans les liens hypertextes, ainsi que les collaborateurs, les marques déposées, les concurrents, etc.,
• Déterminer la liste des mots interdits (dans le milieu médical, par exemple).

Les plus courageux d’entre vous se plongeront dans le Guide stylistique de la CFP dont la version PDF pèse pas moins de 165 ko !

Prototype

La partie Prototype liste toutes les pages du site et donne pour chacune d’elle un exemple de mise en place de la charte graphique en terme de fonctionnalités. Cet exemple est réalisé en HTML / CSS pour donner une idée aussi proche que possible de la version finale si les prototypes en question étaient retenus par le client.

En guise de conclusion

La mise en place d’une charte graphique et éditoriale est assez chronophage, c’est pourquoi elle est souvent réservée aux projets importants. Mais sa rédaction tout au long de la phase de conception peut s’avérer une aide précieuse pour éviter la dispersion et formaliser les choix créatifs au fur et à mesure de leur cristallisation.

La typographie peut devenir la partie la plus créative de votre design ou la plus frustrante. Travailler avec ne serait-ce qu’une police de caractère peut déjà devenir un défi insurmontable pour de nombreux webdesigners ; alors imaginez ceux qui utilisent jusqu’à sept fontes ou plus dans leur design ! Voici un résumé de l’article 7 Rules for Mixing Multiple Fonts in Good Web Design qui passe en revue les éléments à prendre en considération pour utiliser plusieurs polices de caractère dans votre site web.

1. Echelle et proportion

Pour mélanger harmonieusement plusieurs polices de caractère dans la même page, assurez-vous qu’elles ont des proportions et une échelle en commun. Ainsi, Georgia et Verdana ont des formes similaires bien que l’une est avec serif et l’autre sans-serif. C’est pareil pour Times New Roman et Arial Narrow.

Observez les caractères de chaque fonte séparément, par mot ou par phrase pour dégager leurs points communs. L’idéal est de superposer les fontes les unes sur les autres dans votre logiciel graphique préféré.

2. Harmoniser vos polices à l’aide de la couleur et des styles

Placer six fontes de style et de couleurs différents n’est pas une bonne idée. Lorsque vous avez trouvé deux couleurs qui vont bien ensemble, essayez de les assembler en jouant sur la teinte et la saturation. En ce qui concerne les styles, il faut surtout s’assurer qu’ils s’adaptent à la graisse et à l’emphase des polices : certaines supportent mal l’italique et/ou la mise en gras, par exemple.

3. Priorité et emphase

Certaines polices de caractère ont plus de personnalité que d’autres. C’est un point à vérifier lorsque vous mélangez plusieurs familles de polices sur la même page. Certaines fontes seront trop présentes, d’autres pas assez. Ajuster la taille est une bonne option, mais n’oubliez pas de jouer avec les balises strong, em, ou les propriétés CSS comme italic, oblique, small-caps, etc. pour augmenter ou diminuer l’impact en fonction de votre objectif.

La couleur peut jouer un rôle central pour hiérarchiser l’information véhiculée par telle ou telle fonte. Si l’une d’entre elles est trop présente, il sera possible d’atténuer son impact visuel avec une couleur plus claire ou moins saturée.

4. Eviter les polices trop similaires

L’utilisation rapprochée de Georgia et de Garamond peut donner l’impression que l’une des deux polices n’est pas à sa place. Par ailleurs, une des raisons qui pousse à utiliser plusieurs familles de caractère dans la même page est de donner du rythme. Les famille de caractères trop proches ne sont donc pas une bonne idée !

5. Assurez la lisibilité des textes

Les fontes un peu funky peuvent trouver leur place dans la navigation, les titres ou les textes courts en général. Dès qu’il y a beaucoup de texte à lire, il est préférable de s’en tenir à une seule police de caractère en privilégiant la sobriété et la simplicité.

6. N’oubliez pas les styles

Voici un moyen simple pour ne pas se tromper dans le choix des polices de caractères de votre site web : utilisez une seule police et variez les styles, les tailles, les couleurs, les fonds. Vous aurez la diversité, le rythme, tout en évitant les mariages malheureux entre des polices disparates.

7. Faites confiance à votre instinct

Pour finir, voici probablement le conseil le plus important de cette liste : prenez du recul sur votre travail et si quelque chose ne semble pas à sa place, changez-le ou supprimez-le !

Note personnelle

J’ai pompeusement classé cet article dans Traduction, mais il s’agit plutôt d’une «craduction». Je ne saurais trop vous conseiller de lire l’article original qui contient par ailleurs de nombreux exemples illustrant visuellement chacun des points abordés, avec pour finir, une galerie de sites d’une grande qualité typographique pour développer votre imagination créative.

Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Pour ma part, j’aime bien tester les frameworks qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation : rien de tel qu’un bout de reset CSS d’Eric Meyer avec la feuille de style de typogridphy, le tout mis en forme avec la robustesse de Blueprint.

52Framework

Ce framework est résoluement tourné vers l’avenir en utilisant HTML5 avec header, nav, section, article, footer et CSS3 avec le sélecteur ::selection, les coins arrondis, les ombres portées pour le texte ou les blocs. La grille est composée de 16 colonnes de 52 pixels chacune séparées par une gouttière de 8 pixels. Les fichiers CSS de 52Framework vont à l’essentiel et si je préfère le système de grille de Blueprint, ça vaut le coup de de s’inspirer de reset.css (avec les nouvelles balises HTML5) et de general.css pour avoir des éléments de formulaires avec des coins arrondis et des ombres portées.

Element CSS Framework

Ce framework propose un environement global pour créer un site web avec un ensemble de dossiers prêts à être remplis : /clientFiles, /concepts, /copy, /js,  etc. et d’autres contenant les éléments de base du framework comme /css (qui contient les fichiers du framework proprement dit) et /elementsImages qui contient les icônes qui accompagnent externalLinks.css. Ces deux derniers éléments faisant tout le charme de ce framework en fournissant des classes CSS et des icônes pour représenter les liens externes.

Baseline CSS

Aligner des lignes comportant des textes de tailless différentes n’est pas toujours facile et c’est l’objectif de ce framework moderne (oui, ça veut dire qu’il y a un soupçon de HTML5et de CSS3 dedans). Notez que la compatibilité avec IE6 n’est pas garantie. Au menu : un reset CSS avec certaines des nouvelles balises HTML5 (mais curieusement avec des balises HTML dépréciées également), un système de grille, des styles de formulaires et un peu de  typographie pour terminer.

960.gs

Ce système de grille est conçu pour fluidifier votre chaine de production avec des dimensions communément utilisées à partir d’une largeur de 960 pixels. Existe en deux parfums : 12, 16 ou 24 colonnes. Des classes comme push_XX ou pull_XX permettent de réarranger les blocs indépendamment de leur ordre d’apparition dans le code HTML. Un générateur de grille personnalisée permet de spécifier la largeur et le nombre des colonnes et la taille de la gouttière. Il existe même un générateur de blocs permettant de définir votre mise en page .

tripoli

Redéfinit une feuille de style par défaut pour les balises HTML de manière à assurer un rendu identique sur les navigateurs présents sur le marché. Propose de nombreux fichiers additionnels comme layout.css pour la grille ou negative.css pour inverses les contrastes, etc.

yaml

Yet Another Multicolumn Layout est un framework (x)html/css pour la création de maquettes robustes et flexibles centré sur la légèreté et l’accessibilité. Propose un générateur WYSIWYG YAML Builder pour construire votre mise en page.

bluetrip

Le meilleur de Blueprint et de Tripoli avec un zeste de Hartija pour la feuille de style à l’impression, la simplicité de 960 Grid System. Le fichier screen.css regroupe le reset CSS d’Eric Meyer, le système de grille, la gestion des liens externes (icône selon l’extension ou la destination) et de l’inversion des contraste, plus des styles pratiques pour la gestion des textes.

typogridphy

Basé sur 960 Grid System, ce framework permet de créer des grilles flexibles d’une grande beauté typographique.

yui grids

Offre un jeu prédéfinit de largeur de page comprenant six templates avec la possibilité de subdiviser les blocs. Au total c’est plus de 1 000 combinaisons de maquettes pour seulement 4kb.

elasticss

Basé sur des techniques de colonnage traditionnel en 4 colonnes, ce framework permet de multiples combinaisons et subdivisions. Il se distingue des autres par sa capacité à produire facilement des design fixes, liquides ou élastiques.

sencss

Un frameword zen qui ne vous obligera pas à adopter un système de grille particulier mais qui fournit plutôt un ensemble de styles pour les parties les plus répétitives de votre travail sans trop s’éloigner du style par défaut des navigateurs. Grille verticale en 18 pixels. Fournit des jeux de polices de caractères spécifiques pour Windows, Mac et Linux.

the golden grid

Ce système de grille est le fruit d’une recherche constante de la grille parfaite : rien de tel que le nombre d’Or pour se rapprocher des dieux !

css-boilerplate

Par l’un des créateurs de Blueprint qui a décidé de se remettre à l’ouvrage pour aboutir à un framework qui ne vous obligera plus à choisir entre sémantique et efficacité : c’est vous qui décidez d’utiliser float: left; width: 240px; margin-right: 110px ou class="column span-2 append-1" !

BIC

De bonnes idées en ce qui concerne le traitement de la typographie et de la couleur (typography.css et color.css). Cf. BIC, un framework orienté couleur et typographie.

bungee

Propose une grille de 12 colonnes dont la plus petite subdivision vaut 4em. Pour les nostalgiques des pixels, ça fait environ 64px. Avec un niveau de zoom par défaut, un site construit avec Bungee mesure 768px de large, et s’affiche donc parfaitement sur un écran de faible résolution.w

sparkl

Combine un marquage HTML CHIC (Code HTML Intrinsèquement Classe — POSH en anglais) et du javascript non-intrusif pour créer des sites web à l’épreuve des balles et conformes aux Standards. Ce framework CSS très modulaire vous permettra de vous concentrer sur vos besoins.

hartija

Regroupe les meilleures pratiques en matière de feuille de style destinées à l’impression.

The 1Kb CSS Grid

Une grille minimaliste qui tient en une quinzaine de déclarations CSS idéale pour les débutant qui veulent comprendre le principe général des frameworks et pour les intégrateurs aguerris qui verront là un moyen économique de donner un rythme horizontal à leur mise en page. Choix du nombre de colonnes, de la gouttière et de la largeur totale avant le téléchargement.

1 line CSS Grid Framework

Vous avez bien lu, il s’agit d’un framework qui tient en une seule déclaration .dp50 {width:50%; float:left; display: inline; *margin-right:-1px; } Etonnant, non ?

emastic

Très complète, cette bibliothèque CSS s’utilise aussi bien avec des em qu’avec des % et s’accommode de largeur fixes ou fluides pour un poids de 4Kb pour la version compressée. Nombreuses démonstrations disponibles pour voir ce qu’il est possible de faire.

malo

Petit frère de emastic, malo se distingue par sa légèreté au service d’une grille en pourcentage.

logicss

basé sur le principe d’un rendu homogène entre les navigateurs sans reset CSS. Travail sur la typographie avec des jeux de polices de caractères harmonieux, des possibilités de redimensionnements de texte et un rythme vertical. Trois systèmes de grilles très souples personnalisables à l’aide d’une boite à outils. Design élastique avec l’unité em, liquide via les pourcentages % ou fixe avec les px.

MyCSS Grid System

Système de grille en 960px avec une utilisation du nombre d’or pour obtenir des proportions harmonieuses. Assez verbeux dans le nombre de classes pour placer des éléments.

A CSS Framework

Cet ensemble de fichiers CSS propose des maquettes prêtes à l’emploi en 1, 2 ou 3 colonnes avec un header, footer, sidebar et navigation horizontale ou verticale. Un fichier framework.html est disponible pour commencer.

Frame

Frame: A CSS framework from the year 2050 se veut la nouvelle manière de mettre en page les contenus et de construire des interfaces web. Il combine les idées de 960.gs, de Blueprint et de nombreuses techniques pour obtenir le framework css le plus simple et le plus fluide de tous les temps !

Formee

Formee est un framework spécialisé dans la mise en forme des éléments de formulaires. Le système de grille pour l’alignement des labels et autres input est basé sur 960.gs. Ce mini-framework est composé de deux feuilles de style : form-style.css et form-structure.css qui parlent d’elles-mêmes.

Marker CSS

Marker CSS se distingue par une syntaxe prenant en compte un nombre important de propriétés. Peut-être trop à mon humble avis, mais tout les goûts sont dans la nature ! Par exemple <body class="A s13 c666 tc"> signifie : A pour famille de police Arial ; s13 font-size 13 pixels ; c666 couleur présélectionnée ; et tc pour avoir le texte aligné au centre.

PS : Cette liste est une version réactualisée de celle que j’ai déjà publiée en juin 2009 à la fin de l’article Frameworks CSS, mettez vos grilles au pas !. Toute ressemblance avec des listes de frameworks CSS publiées ces derniers temps, bla bla bla…

Parmi les solutions disponibles pour afficher des titres avec une police de caractère sortant des sentiers battus, Typekit sort du lot. Si SIFR, FaceLift, ou Typeface.js s’appuient globalement sur la technologie Flash et Cufon sur Javascript, Typekit quant à lui s’appuie sur le standard CSS3 et la propriété @font-face pour faire son petit effet. Frambi-framboise sur le gâteau, cette propriété @font-face est prise en charge par les navigateurs modernes (Firefox 3+, Safari 3.1+) mais aussi par Internet Explorer à partir de la version 6. A noter que @font-face ne fonctionne pas avec Google Chrome.

Si vous désirez en savoir plus sur Typekit, je passe le relais à Auré de All For Design qui nous gâte avec Typographie et Web : la solution Typekit, un article très complet sur la solution proposée par Typekit et qui aborde également les questions liées à la gestion des droits concernant les polices de caractères.

En prime nous avons droit à quelques mots de Jean François Porchez, directeur de Typofonderie à l’origine de la création de nombreuses polices de caractère de qualité comme Ambroise, Apolline, Bienvenue, Costa, Dereon, Le Monde, Parisine ou encore Sabon Next.

BIC est un meta framework CSS basé d’une part sur le reset CSS d’Eric Meyer pour la remise aux valeurs par défaut des éléments HTML (clean.css) et le framework 960.gs pour la partie grille de mise en page (layout.css), et d’autre part sur de bonnes idées en ce qui concerne le traitement de la typographie et de la couleur (typography.css et color.css).

L’existence d’un fichier wordpress.css sera très utile pour les fans de cette plateforme de blog ! Je regrette juste que les styles spécifiques à WordPress ne soient pas tous présent dès maintenant. Peut-être dans la prochaine version ? Pour finir, il reste myclass.css au cas où vous auriez quelque chose à déclarer :D

Bref, du beau, du bon, du pocky à télécharger d’urgence.

PS : Si vous trouvez que les frameworks pénalisent les performances globales de votre site web en raison des requêtes surnuméraires, jetez quand même un oeil dans les différents fichiers de BIC : vous y trouverez certainement matière à réflexion.

Si vos déclarations CSS font-family contiennent désespérément la même liste de police de caractères Helvetica, Arial, sans-serif, etc., le billet de Grégoire Polices sur le web et celui de Michael Tuck 8 Definitive Web Font Stacks devraient élargir votre horizon typographique grâce à 8 ensembles de polices « intelligents » :

En théorie

body {
    font-family :
    police exacte,
    alternative la plus proche,
    alternative la plus répandue pour chaque plateforme,
    alternative universelle (cross-platform),
    famille générique
}

Times New Roman et serif

body {
    font-family:
    Cambria,
    "Hoefler Text",
    Utopia,
    "Liberation Serif",
    "Nimbus Roman No9 L Regular",
    Times,
    "Times New Roman",
    serif;
}

Georgia

    body {
    font-family:
    Constantia,
    "Lucida Bright",
    Lucidabright,
    "Lucida Serif",
    Lucida,
    "DejaVu Serif",
    "Bitstream Vera Serif",
    "Liberation Serif",
    Georgia,
    serif;
}

Garamond

body {
    font-family:
    "Palatino Linotype",
    Palatino,
    Palladio,
    "URW Palladio L",
    "Book Antiqua",
    Baskerville,
    "Bookman Old Style",
    "Bitstream Charter",
    "Nimbus Roman No9 L",
    Garamond,
    "Apple Garamond",
    "ITC Garamond Narrow",
    "New Century Schoolbook",
    "Century Schoolbook",
    "Century Schoolbook L",
    Georgia,
    serif;
}

Helvetica/Arial

body {
    font-family:
    Frutiger,
    "Frutiger Linotype",
    Univers,
    Calibri,
    "Gill Sans",
    "Gill Sans MT",
    "Myriad Pro",
    Myriad,
    "DejaVu Sans Condensed",
    "Liberation Sans",
    "Nimbus Sans L",
    Tahoma,
    Geneva,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans serif;
}

Verdana

body {
    font-family:
    Corbel,
    "Lucida Grande",
    "Lucida Sans Unicode",
    "Lucida Sans",
    "DejaVu Sans",
    "Bitstream Vera Sans",
    "Liberation Sans",
    Verdana,
    "Verdana Ref",
    sans serif;
}

Trebuchet

body {
    font-family:
    "Segoe UI",
    Candara,
    "Bitstream Vera Sans",
    "DejaVu Sans",
    "Bitstream Vera Sans",
    "Trebuchet MS",
    Verdana,
    "Verdana Ref",
    sans serif;
}

Impact

body {
    font-family:
    Impact,
    Haettenschweiler,
    "Franklin Gothic Bold",
    Charcoal,
    "Helvetica Inserat",
    "Bitstream Vera Sans Bold",
    "Arial Black",
    sans serif;
}

Monospace

body {
    font-family:
    Consolas,
    "Andale Mono WT",
    "Andale Mono",
    "Lucida Console",
    "Lucida Sans Typewriter",
    "DejaVu Sans Mono",
    "Bitstream Vera Sans Mono",
    "Liberation Mono",
    "Nimbus Mono L",
    Monaco,
    "Courier New",
    Courier,
    monospace;
}

21 autres ensembles plus classiques

body {
    font-family: Arial, Helvetica, sans-serif;
}

body {
    font-family: 'Arial Black', Gadget, sans-serif;
}

body {
    font-family: 'Bookman Old Style', serif;
}

body {
    font-family: 'Comic Sans MS', cursive;
}

body {
    font-family: Courier, monospace;
}

body {
    font-family: 'Courier New', Courier, monospace;
}

body {
    font-family: Garamond, serif;
}

body {
    font-family: Georgia, serif;
}

body {
    font-family: Impact, Charcoal, sans-serif;
}

body {
    font-family: 'Lucida Console', Monaco, monospace;
}

body {
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

body {
    font-family: 'MS Sans Serif', Geneva, sans-serif;
}

body {
    font-family: 'MS Serif', 'New York', sans-serif;
}

body {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

body {
    font-family: Symbol, sans-serif;
}

body {
    font-family: Tahoma, Geneva, sans-serif;
}

body {
    font-family: 'Times New Roman', Times, serif;
}

body {
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

body {
    font-family: Verdana, Geneva, sans-serif;
}

body {
    font-family: Webdings, sans-serif;
}

body {
    font-family: Wingdings, 'Zapf Dingbats', sans-serif;
}

Plutôt que créer des images ou d’utiliser Flash pour afficher du texte dans la police de caractère de votre choix, vous pouvez utiliser typeface.js et écrire vos titres en HTML et CSS comme si vos visiteurs avait installé votre fonte préférée.

Le script utilise les capacités vectorielles des navigateurs pour dessiner les textes : les navigateurs comme Firefox, Safari et Opera utilisent la balise canvas (et SVG par la même occasion) tandis que IE utilise Vector Markup Language (VML).

Le projet typeface.js est composé d’un module Perl pour extraire la forme vectorielle des fontes Truetype au format JSON. La partie en Javascript parcoure le document à la recherche de <canvas> ou de données VML pour afficher les glyphes.

Un spectre hante le web : le spectre de l’interlignage par défaut des navigateurs. Trop de blogs et de sites web se contentent du minimum syndical pour gérer l’interlignage. Par défaut, les navigateurs web proposent 120% de la taille de la police.

Ce qui est dramatiquement insuffisant au regard de la faible résolution du texte à l’écran. Il suffit pourtant d’ajouter une ligne de déclaration CSS à la balise html ou body pour permettre à vos lecteurs de passer du déchiffrage laborieux à la Lecture pleine et entière. Essayez, vous serez surpris de voir à quel point vos pages web auront gagné en lisibilité.

Modifier l’interlignage par défaut avec line-height

Les valeurs à ajouter à la balise body ou html dépendent de la configuration de votre feuille de style. Voici trois exemple à tester pour obtenir un interlignage de 1,5 fois la taille de caractère :

• body { line-height: 1.5; }

  Plus d’information sur l’absence d’unité dans cette partie de l’article 5 Reset CSS à la loupe.

• body { line-height: 1.5em; }

• body { line-height: 150%; }

Une image vaut mille mots ?

Si vous avez des difficultés à vous représenter l’intérêt d’augmenter cet interlignage, voici une petite capture d’écran interactive assez significative, puisque l’auteur œuvre afin d’obtenir une visibilité efficace et pérenne sur internet…

Passez la souris sur l’image pour voir la différence avant après ou cliquez pour afficher les deux versions l’une sous l’autre.

5 règles pour faire un beau design web

Pour conclure : l’accessibilité du web passe aussi par un traitement typographique globale au niveau de la page : l’interlignage n’est pas le seul paramètre oublié. Pour se rafraichir la mémoire, révisons les 5 règles pour faire de belles mise en pages.

Faites tourner !