Rapido

• Télécharger 940-fluid.css,
• Voir un exemple de page de contenu,
• Voir un exemple de grille (placement des blocs),
• 940.css en version fixe.

Le fichier

Pixels vs Pourcentage

Le passage des pourcentages aux pixels ne s’effectue pas sans douleur : il est difficile en effet d’imbriquer des blocs possédant une largeur en pourcentage les uns dans les autres, sans effet de bord. Dans le contexte des grilles de mise en page, les pourcentages de pourcentages donnent des valeurs qui diminuent lorsque les blocs sont imbriqués.

Imbriquer les blocs

Pour palier cet inconvénient, j’ai ajouté des classes spécifiques pour diviser des blocs de manière égale lorsqu’ils sont imbriqués. Voici une page composée d’une zone de contenu principale divisée en deux blocs, et d’une barre latérale.

.container (24 colonnes)
    .span-16
        .span-8
        .span-8
    .span-8

Problème

Dans un monde «fixe», les .span-x ont toujours la même largeur, qu’ils s’appliquent à des balises imbriquées, ou non. En revanche, dans un contexte en pourcentage, les deux .span-8 enfants de .span-16 (initialement réglés sur environ 32% de la largeur totale) se transforment en 32% d’environ 66% (.span-16), ce qui réduit d’autant leur largeur. Nous voilà bien ^^

Solution

Sachant que le nombre de colonne totale est de 24, il suffit de trouver les diviseurs qui vont bien et de les utiliser pour obtenir un nombre de blocs au lieu de chercher un nombre de colonnes.

.span-half, .span-12 {} // Deux blocs
.span-third, .span-8 {} // Trois blocs
.span-quarter, .span-6 {} // Quatre blocs
.span-sixth, .span-4 {} // Six blocs
.span-eighth, .span-3 {} // Huit blocs
.span-twelfth, .span-2 {} // Douze blocs

.container (24 colonnes)
    .span-16
        .span-half
        .span-half
    .span-8

Blocs de largeur inégale

Cette technique n’empêche pas d’obtenir des blocs imbriqués de largeur inégale ; il suffit de tâtonner un peu avec les pourcentages.

C’est ainsi que :

.container (24 colonnes)
    .span-16
        .span-12
        .span-4
    .span-8

.container (24 colonnes)
    .span-16
        .span-16
        .span-third (ou .span-8)
    .span-8

Un bémol toutefois en ce qui concerne la largeur de la gouttière entre les blocs imbriqués : elle est également réduite et passe de 20px pour les blocs de premier niveau, à 12.3333px (en valeur calculée) pour les deux blocs imbriqués.

D’un point de vue «typographique», ce n’est pas très gênant, car il n’y a rien de choquant à ce que des blocs de largeur réduite soit séparés par une gouttière moins importante que les blocs principaux de la page.

Conclusion

Je ne l’ai pas testé cette grille fluide dans toutes les configurations ; elle est encore en version bêta. J’ai laissé des valeurs de pourcentage avec plus de 30 chiffres après la virgule pour laisser aux navigateurs le soin faire les arrondis «au mieux».

Pour éviter d’autres problèmes de calcul, j’ai supprimé les classes .border et .colborder qui permettaient d’afficher des bordure à la gauche des blocs : les 1px d’épaisseur des bordures posaient des problèmes en renvoyant les blocs sur la ligne suivante lorsque le redimensionnement de la page arrivait à un certain niveau.

A vos tests !

Articles sur le même sujet

• Calculer une grille de mise en page « typo » avec le nombre d'Or
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• Grille de mise en page, « zoning » et gabarit avec Adobe InDesign
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• PXtoEM : Conversion Pixel — EM

Sauf qu’il semble à première vue que la propriété border-spacing  (associée à border-collapse: separate) fait uniquement ce qu’elle est censée faire : un espace autour des blocs auxquels on a appliqué display: table-cell, soit en haut et en bas soit à droite et à gauche de tous les blocs selon qu’on applique une ou plusieurs valeurs, comme border-spacing: 0 20px ou border-spacing: 20px 0.

Mise en page avec border-spacing

#main {
    display: table;
    border-collapse: separate;
    border-spacing: 20px 0;
    border: 1px solid grey;
    width: 100%;
}
#primary {
    display: table-cell;
    background: red;
}
#secondary {
    display: table-cell;
    width: 30%;
    background: green;
}

Maquette avec border

Bref, après quelques tâtonnements, je suis en partie parvenu à un résultat partiellement satisfaisant en utilisant une bordure et en lui donnant la même couleur que le fond et la largeur de la gouttière que je voulais :

#main {
    display: table;
    border: 1px solid grey;
    width: 100%;
}
#primary {
    display: table-cell;
    background: red;
    border: 20px solid white;
    border-width: 0 20px 0 0;
}
#secondary {
    display: table-cell;
    width: 30%;
    background: green;
}

En bref

Je n’exclu pas le fait d’être passé à côté d’une propriété, mais il semble que la mise en page à base de display: table et display: table-cell ne soit pas aussi évidente qu’on aurait pu le croire de prime abord, même en faisant son deuil des versions antérieures à IE8. Dans les faits, border-spacing ne semble pas s’appliquer uniquement aux bordures adjacentes.

Articles sur le même sujet

• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Framework CSS — Sémantique, maquette dynamique et autres notes
• 940.css version fluide — Grille de mise en page en pourcentage
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• Calculer une grille de mise en page « typo » avec le nombre d'Or

← Précédemment dans css 4 design…

Avec les blancs tournants, la gouttière est un élément essentiel qui participe à l’équilibre d’une mise en page en colonnes. Elle fait office de contre-poinçon, de contre-forme pour le contenu,  et facilite la lecture et la recherche d’information, en plus de donner du rythme. C’est pourquoi, il me semble important que la largeur de cette gouttière ne soit pas simplement le modulo des calculs savants  qui ont servis à déterminer le nombre et la largeur des colonnes.

J’ai donc choisi d’associer la largeur de la gouttière à la hauteur de l’interligne et à la largeur d’une colonne de base pour obtenir une grille composée de carrés de 21 x 21 pixels (mais on peut choisir un autre interlignage sous réserve qu’il corresponde aux critères de lisibilité selon la taille des caractères). Ces modules serviront de matrice pour déterminer toute une multitude de colonnages. Dans l’article cité plus haut, j’obtient pas moins de 13 grilles différentes permettant des regroupements de colonnes divers et variés.

Mise en page pour mobiles

Le Web est multiple et son accès s’effectue dans des conditions qui échappent aux concepteurs de sites. Le Web mobile a le vent en poupe et cela n’est pas prêt de s’arrêter. Voici donc une adaptation de ma grille modulaire pour ces nouveaux périphériques dont la particularité est d’avoir des petits écrans.

Plusieurs exemples de grilles pour les formats les plus courants en matière de périphérique mobile ou tactile.

Pour les besoins de l’exemple, j’ai choisi un interlignage de 20 pixels qui donne des comptes ronds vu que les résolutions sont des multiples de 10. Au cas où, voici les étapes à suivre dans Illustrator :

1. Créer un document au format 320 x480,
2. Faites glissez l’angle supérieur droit situé à l’intersection des règles (Ctrl + R) verticales et horizontales jusqu’au bord supérieur gauche du document pour définir les coordonnées x et y le cas échéant,
3. Sélectionnez l’Outil Trait (T), cliquez et précisez la longueur (320 px),
4. Ajustez le placement du trait aux coordonnées  x : 0 px et y : 0 px,
5. Choisisez une couleur de contour (#cccccc) et une épaisseur (0.5 pt),
6. Copiez ce trait  vers le bas : Ctrl + Maj + M (Horizontale : 0, Verticale : -20 px, Distance : 20 px et Angle : -90) et cliquez sur Copier,
7. Dupliquez-le avec Ctrl + D autant de fois que nécessaire.

Voici une grille vite fait bien faite pour l’iPhone. Cliquez sur l’image pour voir l’animation ;)

Pour les colonnes, les étapes ressemblent à la duplication des colonnes, à ceci près qu’il faut choisir l’Outil Rectangle (M) et spécifier une largeur de 20 pixels et une hauteur de 480 pixels. Dupliquez cette première colonne 7 fois, sélectionnez-les toutes et déplacez-les de 10 pixels vers la droite de manière à laisser des marges correctes de part et d’autre. Choisissez les couleurs qui vous conviennent et voilà !

Le bonheur est dans la gouttière

La largeur de la gouttière est donc un bon point de départ pour créer un gabarit de mise en page pour le Web. Ce qui m’amène à faire une proposition simple : plus que la gouttière ou tout autre élément, c’est la largeur totale de l’empagement qui doit servir de variable d’ajustement.

Articles sur le même sujet

• Calculer une grille de mise en page « typo » avec le nombre d'Or
• 940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid
• Quelques liens sur les Media Queries en CSS3
• Le petit journal du web des CSS : Bootstrap, Responsive, Triangle, Etc.
• 940.css version fluide — Grille de mise en page en pourcentage

Pour déterminer le pas d’une grille de mise en page pour le Web, on recherche souvent le meilleur rapport entre une largeur optimale (entre 900 et 1 000 pixels) et un nombre de colonnes divisible par deux, par trois et/ou par quatre. Les formats composés de 12 ou 24 colonnes répondent à ces critères (ce sont également des nombres hautement composés). On trouve aussi des grilles en 16 colonnes (nombre pratique). D’une manière générale, on privilégie les formats qui permettent des regroupements de colonnes variés.

Pour faire entrer ces colonnes dans une largeur donnée, on utilise la gouttière, l’espace séparant les colonnes, comme variable d’ajustement avec des valeurs allant de 10 à 30 pixels. Oui, vous avez bien lu : la gouttière, cet élément fondamental pour la respiration de toute grille de mise en page, n’est souvent que le rebut de calculs fastidieux !

Un gabarit de page pour l’imprimé

Pour définir une maquette de magazine destinée à l’impression, nous pouvons partir de la plus petite taille de caractère repérée dans les contenus (notes de bas de page, légendes, etc.) et augmenter la taille des textes en fonction des différents niveaux (notez que l’on peut aussi jouer sur la graisse, la couleur, le contraste, la casse ou un changement de fonte) :

• Notes de bas de page : 8 pt
• Légendes des photos : 10 pt
• Corps du texte : 12 pt
• Intertitres : 14 pt
• Rubriques  : 18 pt
• Titres de Chapitre : 21 pt
• Titre de l’ouvrage : 48 pt

En fonction du style et du public visé par la publication, nous déterminerons ensuite l’empagement à l’aide de tracés régulateurs pour obtenir des blancs tournants (les marges, pour faire simple), puis, pour chaque niveau, nous regarderons le nombre de caractères optimum qui nous donnera la largeur des colonnes, une des clés de la lisibilité et du confort de lecture.

Reste à voir combien de colonnes entreront dans le format dont nous disposons. Dans la plupart des publications, les marges servent de variables d’ajustement ; dans les ouvrages de luxe, c’est le format de l’ouvrage qui peut évoluer pour préserver des blancs tournants généreux.

Une maquette pour le Web

J’ai cherché la meilleure approche pour concevoir une grille modulaire sans trop me soucier ni du nombre de colonnes ni de la largeur totale de l’empagement, dans les limites d’une résolution d’écran de 1 024 pixels de large.

Une grille de mise en page vraiment modulaire à laquelle ce GIF animé ne rend pas justice !

La pêche à l’interligne

Et si la seule constante indépassable n’était finalement rien d’autre que l’interlignage ? En effet, s’il y a bien une chose d’un peu scientifique dans le processus de lecture, c’est qu’un interlignage possédant un ratio de 1,5 à 1,6 par rapport à une taille de caractère comprise entre 12 et 16 pixels, possède un potentiel de lisibilité en béton.

Après quelques essais, une valeur de 21 pixels pour l’interlignage s’est imposée. Ce chiffre correspond à la fois au produit du nombre d’Or typographique par un corps de texte de 14 pixels (1,5 x 14 = 21) et au produit du nombre d’Or tout court par un corps de texte composé en 13 pixels (1,618 x 13 = 21,034), ce qui permet de faire face à la plupart des situations. Un corps de texte en dessous des 13 pixels n’est de toute manière pas très raisonnable !

Les colonnes, les colonnes !

Il suffit d’utiliser cette valeur pour la gouttière et d’en faire aussi la largeur des colonnes pour obtenir une grille composée uniquement de modules de 21 pixels de large. C’est donc la largeur totale qui devient la variable d’ajustement à la place de la gouttière, permettant à cette dernière d’être en harmonie avec l’interlignage et un regroupement plusieurs colonnes comme 42px + 21px ou 63px + 21px et ainsi de suite.

Ce mode de calcul autorise l’affichage de 48 colonnes totalisant 987 pixels (48 x 21) – 21 qui se centrent parfaitement dans un écran de 1024 pixels, ce qui est bien pratique. Ces 48 colonnes sont divisibles par 2, 3 ou 4 autorisant de multiples regroupements pour obtenir pas moins de 13 combinaisons : 24, 21, 18, 16, 14, 12, 9, 8, 7, 6, 4, 3 ou 2 colonnes. A noter que le nombre 48 fait partie des nombres hautement composés, comme 12 et 24.

On peut aussi retrancher une ou plusieurs colonnes de chaque côté pour obtenir une largeur réduite : 22 colonnes pour une largeur de 903 pixels (ok, 22 ne se divise bien que par 2, mais n’oublions pas que les mises en page asymétriques en ont sous le talon aiguille !) ; 20 colonnes pour une largeur de 819 pixels ; ou encore 18 colonnes pour 735 pixels au cas où vous auriez besoin de concevoir pour une résolution en 800 x 600.

Adaptez, il en restera toujours quelque chose

Si vous trouvez que les valeurs proposées sont trop contraignantes, n’hésitez pas à partir sur une base de 20, 18 ou même 16 pixels pour votre gouttière et votre interlignage, sachant que les valeurs (taille du caractère / interligne) 12/20, 13/20, 14/20 mais aussi 12/18,13/18 ou encore 11/16 permettent une lisibilité à l’épreuve des «séniors» pour peu que vous soyez attentifs aux contrastes ;)

Ne vous faites pas griller

Les grilles sont une aide précieuse pour élaborer un design cohérent et ne sont pas très difficiles à mettre en place pour peu que l’on prenne le temps de se poser des questions sur leur rôle. Le protocole HTTP est sans état : c’est la persistance des éléments récurrents des pages que vous liez entre elles qui crée la notion de site Web. Pour autant, il est important de ne pas se laisser enfermer dans une grille : c’est vous qui devez la mettre «au pas» et non le contraire. En d’autres termes, ne vous demandez pas ce que vous pouvez faire pour votre grille, mais demandez-vous plutôt ce qu’elle peut faire pour vous !

Articles en relation avec les grilles

1. Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
2. Grilles de Mise en Page | typographie web et print
3. Grille de mise en page, « zoning » et gabarit avec Adobe InDesign
4. Les frameworks CSS sont le nouveau format A4
5. #WDFR — Imprimez votre grille pour dessiner vos croquis
6. #WDFR : les Framework CSS en ont pris «plein la grille» pendant le WDFriday
7. Gridulator calcule la grille de votre design web
8. EmChart — Convertir des pixels en EM
9. Frameworks CSS — Blueprint vs 960 Grid System
10. Framework CSS — Sémantique, maquette dynamique et autres notes
11. Quelques notes sur les grilles de mise en page
12. Grid — Gardez le contrôle sur votre design web
13. Afficher / masquer votre grille de base avec jQuery

Brouillons en cours sur le même sujet

• Adapter votre grille aux agents utilisateurs avec les « Media Queries »

Articles sur le même sujet

• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• 940.css version fluide — Grille de mise en page en pourcentage
• 940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid
• Grille de mise en page, « zoning » et gabarit avec Adobe InDesign
• #WDFR — Imprimez votre grille pour dessiner vos croquis

Préparer InDesign

Ouvrez Préférences (Ctrl + K) > Unités et incréments et modifiez les unités horizontales et verticales de la règle pour passer des millimètres (mm) aux points (pt) (à la résolution de 72 ppp, un point équivaut à un pixel). Reste à déterminer la largeur du plan de travail : dans les exemples qui suivent, j’ai choisi un design d’une largeur de 942 pixels pour 16 colonnes avec une gouttière de 18 pixels, mais n’hésitez pas à utiliser les valeurs de votre framework CSS.

Créer les colonnes

Avec InDesign, quelques réglages suffisent pour mettre rapidement en place une grille magnétique.

Boite de dialogue Nouveau document InDesign.

Selon votre framework CSS, choisissez le nombre de colonnes et la largeur de la gouttières qui les séparent. Pour finir, mettez les marges à zéro.

Notez qu’il est possible de créer un document à la taille du Viewport (ex. 1024). Pour obtenir un document hors marges de 942 pixels, utilisez la formule suivante : largeur du Viewport moins celle du framework et divisez le résultat par deux pour obtenir la valeur des marges gauche et droite. Exemple : (1 024 – 942) / 2 = 41.

N’oubliez pas de cliquer sur Enregistrement prédéfini… pour enregistrer votre plan de travail.

Modifier la la ligne de base

Pour affiner la grille il est peut s’avérer utile de matérialiser la ligne de base en fonction de l’interlignage que vous avez choisi pour le corps du texte. J’ai opté pour un corps de 13 pixels avec un coefficient multiplicateur de 1,6 (pour tutoyer le nombre d’Or) ce qui donne un interlignage de 21 pixels (en arrondissant à l’entier supérieur).

Pour cela, je vais dans les préférences du logiciel Ctrl + K > Grilles et je règle le pas sur 21 pt. J’en profite également pour augmenter la valeur pour améliorer le magnétisme des repères pour faciliter le placement des blocs.

Il est toujours utile de visualiser la ligne de base de votre document.

Modifiez la grille de la ligne de base dans Préférences > Grilles

Gabarits de page avec InDesign

Si InDesign facilite la mise en place d’un système de mise en page en colonnes pour placer vos différents modules, il permet aussi de créer des gabarits réutilisables et c’est assez cool.

Profitez des modèles de pages modifiables d’InDesign !

La fenêtre Pages d'InDesign pour créer et appliquer un gabarit à une page.

A partir d’un zoning comprenant le header, le menu principal et le footer qui se répètent sur toute les pages comme autant de fichiers inclus, il est possible de créer plusieurs variantes d’une page selon les différents modèles de votre projet Web.

(In)Design Web ?

Après quelques tests rapides, je trouve qu’InDesign est une aide précieuse pour mettre au net les croquis et commencer le zoning d’un site. Pourquoi ne pas s’en servir pour faire une maquette plus fouillée en assemblant des éléments en provenance de Photoshop ou d’Illustrator avant d’intégrer le tout dans le navigateur ?

Bref, InDesign semble l’outil idéal pour se rappeler que dans Webdesign il y a aussi «design» avec tout ce que cela comporte de travail sur les blancs tournants, les volumes et la typographie.

Liens complémentaires

• Résolution, pixels, points, dpi : un casse-tête insoluble ?
• Création de gabarits dans InDesign
• Apprendre InDesign : psill.net et milic.com

Articles sur le même sujet

• Calculer une grille de mise en page « typo » avec le nombre d'Or
• Framework CSS — Sémantique, maquette dynamique et autres notes
• 940.css version fluide — Grille de mise en page en pourcentage
• 940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid
• Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »

942.css : ma grille de mise en page

J’utilise souvent la grille de mise en page créée à l’occasion du redesign de ce blog : 16 colonnes de 42 pixels, gouttières de 18 pixels, largeur totale de 942 pixels. L’interlignage de 21 pixels représente 1,6 fois la taille du caractère de base (13 pixels) arrondi à l’unité supérieure. Le nombre d’Or est basé sur des rapports de 1,618 et bien que l’on considère souvent que 1,5 est le nombre d’Or typographique, j’ai gardé le ratio 1,6 car l’interlignage de 21 pixels représente exactement la moitié de mon module de base de 42px de côté. Hasard, je ne pense pas ^__^

Pour vous inspirer pendant les longues soirées d’hiver pourquoi ne pas lire 500 grilles et feuilles de style pour l’imprimé et le Web de Graham Davis ou imprimer l’un des 10 modèles pour Wireframe ?

Adapter votre grille pour l’impression

Après la phase du croquis, il peut être utile de marquer les regroupements de colonnes pour faciliter la création des maquettes (page d’accueil, pages «intérieures», etc.). On peut tout aussi bien imprimer des blocs de couleurs différentes à la tailles des colonnes pour les placer sur la grille. En ce qui concerne les couleurs, lors de l’impression, j’utilise des couleurs plus légères pour dessiner par dessus.

Avec Illustrator, la création d’un gabarit de mise en page pour faire des croquis ou des maquettes est très simple : Objet >Transformation > Déplacement (ou Maj + Ctrl + M).

Cliquez sur l'image pour voir la grille en taille réelle (1024x1024)

Le « fold » ou la partie émergée de l’iceberg

En plus des colonnes et de l’interlignage, j’ai ajouté quelques éléments à cette grille de base : l’indication de la hauteur du viewport vu de mon Netbook de 10.2 pouces et de mon écran 19 pouces. Pour les visualiser, j’ai placé des repères de chaque côté de la grille, à 420 pixels et à 714 pixels.

Cette matérialisation du fold est utile pour voir les éléments qui seront visibles sans nécessiter de scroll, même s’il faut garder à l’esprit qu’il y a de la vie en dessous de 600px ! La zone des 300px à partir du haut de la page est la plus regardée. Les éléments les plus importants devraient se situer au-dessus du fold mais sans sacrifier le bas de la page qui doit rester attrayant. Il est utile de placer des éléments à cheval sur deux zones pour inciter l’utilisateur à descendre jusqu’au pied de page.

En bref

J’espère que vous n’aurez pas perdu votre temps à la lecture de cette astuce simple mais terriblement efficace qui évite de passer trop de temps à faire des ajustements techniques dans les logiciels de création graphique. J’ai par exemple des difficultés à ne pas aligner parfaitement mes éléments sur Illustrator, alors qu’un placement approximatif serait suffisant dans la phase de recherche.

N’hésitez pas à partager les trucs que vous utilisez au quotidien pour vous faciliter la vie de webdesigner !

Articles sur le même sujet

• Et si Photoshop permettait de tester des maquettes fluides ?
• Calculer une grille de mise en page « typo » avec le nombre d'Or
• Framework CSS — Sémantique, maquette dynamique et autres notes
• 940.css version fluide — Grille de mise en page en pourcentage
• display: table et display: table-cell pour faire une mise en page web ?

Ressources Typographiques générales

• Orthotypographie — Cet ouvrage extraordinaire de Jean-Pierre Lacroux recense les bonnes règles de l’orthographe et de la typographie en deux volumes librement consultables et téléchargeables sur le Web sous Licence Creative Commons (by-nc-nd). Via @aurelberra.
• Planète typographie — Ce portail de la typographie contemporaine propose un ensemble de sites dédiés à la typo (Les Temps typographiques, Manuale Typographicum, Librairie Livres/Typo) ainsi que l’espace de téléchargement Fontcenter. Voir aussi abc typographie — Collection de caractères typographiques. Polices de caractères (informatique et typographie digitale) — Tout sur les polices de caractères. Ce site se focalise exclusivement sur les considérations techniques de la typographie numérique.
• Le Typographe — Lancé en janvier 2003, Le Typographe dédié à la publication d’informations liées à la scène typographique Française & Francophone c’est arrêté en(2012). Rendez-vous sur Typofonderie.
• Typo — Le Dictionnaire de l’argot des typographes. (cf. l’équivalent en wiki : Dictionnaire de l’argot des typographes 1883)
• Glossaire typographique Adobe — Plus de 72 termes liés aux polices de caractère.
• Typographie & Civilisation — Un site consacré à l’histoire de l’écriture, de l’imprimerie et des caractères typographiques et Alphabet et typographie.
• Design et Typo, le site – Galeries Pédagogiques de Design & Typo par Peter Gabor.
• Design et Typo, le blog — Typographie et valeurs sémantiques, décryptage des courants graphiques et typographiques par Peter Gabor.
• Graphisme & Interactivité — Le blog de Geoffrey Dorne, Designer graphique dans l’édition & le Web et chercheur à l’EnsadLab (Paris), fait la part belle à la typographie, aux logos et aux identités visuelles d’une manière générale.
• Petit guide typographique à l’usage de l’internet — Un guide typographique n’est pas un dictionnaire. Il ne s’agit pas ici d’une liste de règles imposées, validées par une autorité supérieure, mais simplement de règles d’usage auxquelles le plus grand nombre se conforme habituellement.
• Règles typographiques du TLFQ — Les règles typo du site du Trésor de la langue française au Québec : L’emploi des majuscules-minuscules, L’écriture des titres (journaux, volumes, lois), L’emploi des traits d’union, L’emploi des chiffres et des nombres et L’emploi des abréviations.
• Langue sauce piquante — Le blog des correcteurs du journal LeMonde.fr.
• Tutoweb.be/typographie — Les base de la typographie, les règles typographiques, la typographie sur le Web.
• Typographisme — Un site tenu par des amoureux de la typo, sur le Web comme ailleurs car : trop souvent, la typographie est le parent pauvre du Web design. Contrairement à la chaîne graphique du monde de l’impression, qui maîtrise l’art typographique depuis des siècles, la chaîne graphique Web est jeune et la typographie à encore du mal à y trouver sa place.
• Unicode et typographie : un amour impossible — Cet article propose une nouvelle approche aux concepts de glyphe et caractère. Après une discussion étendue de ces deux concepts, L’auteur s’intéresse aux autres ingrédients de base d’Unicode : les glyphes privilégiés, les descriptions, les caractères combinants et les propriétés. Yannis Haralambous « Unicode et typographie : un amour impossible », Document numérique 3/2002 (Vol. 6), p. 105-137. DOI : 10.3166/dn.6.3-4.105-137.
• pointypo– est le reflet de l’actualité typographique : publications de caractères et de livres, annonces de conférences et d’événements sans oublier les liens intéressants dénichés sur le web.

• I love Typography – ILT was born on August 7, 2007. It exists because I have a passion for typography, type design, and lettering, and for the words born of those disciplines. This site aims to make the subject more accessible, to bring the study of typography to the masses, if you will. It’s just about impossible to imagine a world without type…
• Webtypography — The Elements of Typographic Style Applied to the Web.
• A List Apart — La rubrique Typography du site de référence dans le Webdesign dont une partie des articles sont traduits sur Pompage (le web puisé à la source).
• Typographica — Types Reviews, Books, Commentary.
• Typography Served — Une dose d’inspiration de Typographie créative.
• Typesites — Typesites is a weekly showcase of websites with interesting typographic design.
• Typographyhistory — Pictures and text collected while studying the history of typography. I’m not as serious as this blog. I’m also having fun on Wanderings and on Twitter (@Mitternacht).
• 8faces — A new print magazine for devotees of typography.
• Typedia — Aim to classify typefaces and educate people about them. Think of it like a mix between IMDb and Wikipedia, but just for type. @typedia
• Beautiful Type — This blog was created by two web designers who share the same passion for typography. The content presented here is a patchwork of photos and illustrations from the Web, discovered overnight and all having a relationship with typography in general.
• Typblography — The Adobe Type Team blog

Outils et techniques

De nombreux outils permettent d’intégrer facilement les polices de caractère qui sortent de l’ordinaire.

• Fontsquirrel — Des polices de caractères de qualité à télécharger. Des kits font-face prêts à être intégrer dans votre site et font-face Generator pour utiliser les polices installées sur votre poste de travail. Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We’ve done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format.
• Google Font Directory — Des polices de caractères à inclure dans votre page web grâce à Google Font API.
• Google Font Previewer for Chrome — Testez les fontes directement sur la page affichée dans votre navigateur avec cette extension pour Google Chrome, puis copiez-collez le code fourni.
• Compare web fonts — Comparez simultanément plusieurs dizaines de polices de caractères en provenance de Google Font Directory et Typekit.
• Typekit — Lire Typekit — la typographie sur le web
• Webfonts (fonts.com) – Solution similaire à Typekit avec une version gratuite après inscription.
• sIFR — Lire sIFR 2.0: Rich Accessible Typography for the Masses
• Facelift — Lire Une alternative à sIFR : Facelift Image Replacement
• Typeface — Lire typeface.js — typo personnalisée avec Perl et Javascript (sans Flash ni image)
• cufon — Lire Cufon, nouvelle alternative pour intégrer des polices TrueType et OpenType au web
• Typechart — visualisez des polices de caractères (une petite dizaine) dans différentes configurations de taille, d’interlignage, de style, de graisse, d’interlettrage, en lettres majuscules ou minuscules et de copier les propriétés CSS associées.
• Typetester — Comparez jusqu’à trois polices de caractère avec leurs attributs en affichant plusieurs versions de textes mis en forme.
• Scale & Rhythm — This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages.
• Wordmark.it — Prévisualisez les polices de caractères installées sur votre ordinateur. Choix du texte, agrandissement de la taille et comparaison facilitée grâce à un filtre.
• Awesome Fontstacks — Mixer plusieurs polices de caractères n’est pas toujours facile. Awesome Fontstacks prévisualise vos choix de fontes pour les titres, le corps du texte, les encadrés et les polices à chasse fixes pour le code. Il suffit ensuite de télécharger les polices choisies (depuis FontSquirrel) et de copier-coller le code CSS.

Conseils, tutoriels et astuces

• Macrotypographie – Résumé richement illustré de la conférence d’Anne-Sophie Fradier sur la Macrotypographie. Bonne feuille : Avec une double page, on peut jouer graphiquement de la relation entre les deux pages, avoir une harmonie avec les marges, une symétrie, etc. Sur le web, les marges sont latérales, elles sont là pour faire oublier le navigateur, laisser du confort sur les côtés, de la respiration.
• 7 conseils pour mélanger plusieurs fontes dans votre design web
• Test de font-face sur les différents navigateurs
• Typographie et Web : la solution Typekit
• Typographise — La catégorie de john’s Graphisme réservée à la typographie.
• Polices de caractères sur le Web — Un an après (01/07/2010), où en sommes-nous ?
• Typographie sur le web — Qui a dit que les règles de typographie fine (parfois qualifiée de micro typographie) n’étaient pas applicables dans une page web ? Nous allons ici démontrer que c’est tout à fait possible.
• Typographic Contrast and Flow – Another common mistake is that people tend to bold the entire line of text. By doing so, the emphasis/contrast of the text is lost.
• Five simple steps to better typograph – A simple rule is your lead ing should be wider than your word spacing. This is because when the balance is correct, your eye will move along the line instead of down the lines.
• Modern Life – La rubrique Fonts & Typographie
• Reading Online Text: A Comparison of Four White Space Layouts – In this study, reading performance with four white space layouts was compared. Margins surrounding the text and leading (space between lines) were manipulated to generate the four white space conditions.
• Common fonts to all versions of Windows & Mac equivalents.
• Fonts included with each version of Windows.
• NICE WEB TYPE — One place for web typography, following experiments, advancements, and best practices in typesetting web text. By Tim Brown.
• Vertical Rhythm on Covert Prestige — This article explains bits of the design from covertprestige.net, how it adheres to a strict vertical rhythm and what CSS tricks are used to achieve that.
• What Font Should I Use? — Five Principles for Choosing and Using Typefaces.
• Applying a Clean & Imageless Design to an Article — How to use simple CSS to apply an attractive, well-balanced design to an article.

Trouver des polices de caractère

• Dafont – Les 11 388 polices (dont 3 242 avec des accents et 2 495 avec le symbole Euro) présentes sur ce site sont la propriété de leur auteur (freeware, shareware, démo ou domaine public). La licence mentionnée au dessus du bouton Télécharger est juste une indication.
• Typofonderie — Fondée en 1994, Porchez Typofonderie est une fonderie indépendante française. C’est le premier endroit où vous pouvez acquérir nos fontes.
• Fontshop — Founded by Erik Spiekermann and Neville Brody in 1989, FontShop is the original independent retailer of digital type. We offer more than 150,000 fonts from dozens of expert-selected foundries, including our house brand: FontFont.
• Fontfolio –Adobe Font Folio est une collection de plus de 2 300 fontes au format OpenType.
• Myfonts — Avec sa nouvelle version, Myfonts est encore plus pratique à utiliser. Une très belle collection de fontes pour vos projets.
• Identifiez les polices de caractères avec What The Font ou Identifont.
• Urbanfonts — Plus de 8 000 fontes et dingbats freewares à télécharger.
• @Font-Face Webfonts from Fontspring — Buy webfonts the way you buy desktop fonts: without a subscription. 99% of the families offered on Fontspring can be purchased for unlimited use on websites you control for a small fee.

Bibliothèque ou librairie

Il s’agit surtout de livres relativement anciens. Ils sont toujours vaillants, mais si vous avez des références plus actuelles n’hésitez pas à en faire profiter tout le monde dans les commentaires ;)

• Maquette et mise en page — Pierre Duplan et Roger Jauneau — Editions du Moniteur, 1992 (ISBN 2 281 31051 5),
• Typographie — Emil Ruder — A. Niggli Ltd, 1988 (ISBN : 3 7212 0043 8),
• Le secrétariat de rédaction — Louis Guéry — Editions du CFPJ, 1990 (ISBN 2 85900 045 3),
• Typographie, du plomb au numérique — Jean-Luc Dusong et Fabienne Siegwart — Dessain et Tolra, 1996 (ISBN 2 04 021744 4),
• Grids, the structure of graphic design — André Jute — Rotovision, 1996 (ISBN 2 88046 277 0),
• Tous les numéros d’Etapes Graphiques…

Articles sur le même sujet

• La typothèque idéale par Smashing Magazine
• Webdesign, lisibilité, typographie et rédaction web
• Près de 60 polices de caractère pour Google Font Directory
• 940.css version fluide — Grille de mise en page en pourcentage
• Tutoriel grille verticale en CSS par Smashing Magazine

Comme vous pouvez le remarquer sur la capture ci-contre, il est possible de prévisualiser et de télécharger la grille choisie au format PNG.

Avec Gridulator, «griduler» n'a jamais été aussi simple !

Lire Say Hello to Gridulate pour en savoir plus. Via @LeCourrierIndus

Articles sur le même sujet

• #WDFR — Imprimez votre grille pour dessiner vos croquis
• 940.css version fluide — Grille de mise en page en pourcentage
• display: table et display: table-cell pour faire une mise en page web ?
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• Calculer une grille de mise en page « typo » avec le nombre d'Or

… 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 ;)

Articles sur le même sujet

• Le petit journal permanent de la TypOgrApHiE !
• Quelques notes de lecture sur Le Graphisme au XXe siècle
• Près de 60 polices de caractère pour Google Font Directory
• 940.css version fluide — Grille de mise en page en pourcentage
• Tutoriel grille verticale en CSS par Smashing Magazine

Distribution de l’intérêt («fixation») des utilisateurs sur les éléments du site par tranches de 100px.

La zone des 300px à partir du haut de la page est la plus regardée. Source www.useit.com

Quelles implications sur le design ?

Les éléments les plus importants devraient se situer au-dessus du fold sans pour autant sacrifier le bas de la page qui doit rester attrayant.

Pour matérialiser le fold, je trace une ligne à 550px du haut de ma maquette pour être sûr d’avoir l’essentiel. J’ai pris l’habitude de visualiser certains sites avec un Netbook  et leur résolution (1024 x 600) est sans pitié !

Articles sur le même sujet

• #WDFR — Imprimez votre grille pour dessiner vos croquis
• 5 règles simples pour améliorer l'affichage de vos textes
• 940.css version fluide — Grille de mise en page en pourcentage
• 35 blogs de développeurs web
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur