css 4 design » Mise en page

display: table et display: table-cell pour faire une mise en page web ?

Bruno Bichet — Fri, 15 Apr 2011 17:18:57 +0000

Après la lecture du livre CSS avancées — Vers CSS3 et HTML5, je me suis amusé avec les propriétés de rendu en tableau avec CSS (à partir de la page 122 pour ceux qui ont l’ouvrage sous les yeux). Pour m’entrainer à utiliser ces nouvelles propriétés comprises par tous les navigateurs modernes et à partir de IE8 pour Internet Explorer, je me suis fixé comme objectif de réaliser une mise en page du type de ce que l’on fait généralement à base de float: left et de margin-right pour obtenir des colonnes séparées par des gouttières. Bref, du classique de chez classique.

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;
}

Ce qui n’arrange pas mes affaires, car je voudrais uniquement une marge à la droite du premier bloc en display: table-cell pour repousser le second de la largeur d’une gouttière de 20px, par exemple.

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

Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)

Bruno Bichet — Fri, 19 Nov 2010 10:55:37 +0000

La résolution des périphériques mobiles comme les téléphones mobiles, les Smartphones (iPhone, Android) et les tablettes tactiles (iPad) est généralement de l’ordre de 240 x 320, 320 x 480 ou 480 x 640 pixels. Après avoir décortiqué la création d’une grille de mise en page adaptée à la résolution moyenne des écrans de bureau et des Netbooks, je vous propose de suivre un autre exemple d’application de ce concept de grille modulaire dont la particularité est que la colonne de base est égale à la largeur de la gouttière.

← 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 :

Créer un document au format 320 x480,
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,
Sélectionnez l’Outil Trait (T), cliquez et précisez la longueur (320 px),
Ajustez le placement du trait aux coordonnées x : 0 px et y : 0 px,
Choisisez une couleur de contour (#cccccc) et une épaisseur (0.5 pt),
Copiez ce trait vers le bas : Ctrl + Maj + M (Horizontale : 0, Verticale : -20 px, Distance : 20 px et Angle : -90) et cliquez sur Copier,
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

Bruno Bichet — Thu, 18 Nov 2010 12:59:37 +0000

Le calcul d’une grille de mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de déterminer une taille de police de caractère et une largeur de colonnes d’après un interlignage «idéal». Après l’aperçu d’une méthode pour créer des gabarits destinés à l’imprimé, j’expliquerai comment utiliser l’interlignage pour concevoir des grilles adaptées à une résolution inférieure ou égale à 1 024 pixels de large. J’ai choisi un interlignage compatible avec le ratio du nombre d’Or typographique (1,5) et du nombre d’Or Classique (1,618). Toutefois, le concept de cette grille fonctionne très bien avec d’autres valeurs. J’ai mis des exemples de grilles réalisées avec Illustrator sous la forme d’un GIF animé (désolé).

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

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 de mise en page, « zoning » et gabarit avec Adobe InDesign

Bruno Bichet — Thu, 28 Oct 2010 08:18:06 +0000

Après les croquis réalisés plus ou moins rapidement sur un coin de table face au client ou de retour à l’atelier, il est parfois nécessaire de passer à une phase plus industrielle afin de réaliser les maquettes « fil de fer » de la Home et des pages intérieures. Illustrator et Fireworks ont beaucoup d’atouts pour faire les Wireframes d’une page Web, mais InDesign n’est pas en reste. Il permet de mettre en place une grille dès la création d’un nouveau document. Dans la suite de cet article, nous verrons comment créer un colonage compatible avec votre framework CSS préféré et utiliser les gabarits InDesign pour les différentes déclinaisons des pages de votre site Internet.

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

#WDFR — Imprimez votre grille pour dessiner vos croquis

Bruno Bichet — Fri, 22 Oct 2010 16:47:10 +0000

Le dernier thème du WDFriday (#wdfr sur Twitter) était consacré aux croquis, maquettes et autres fils de fer (Wireframe) qui précèdent souvent le travail sur un logiciel de création comme Illustrator ou Photoshop. J’ai toujours un petit calepin à carreaux de 5 mm de côtés pour prendre des notes graphiques. Comme j’utilise une grille dans Illustrator bien au chaud dans un calque « grille » verrouillé, je me suis dit qu’il serait intéressant de l’imprimer en plusieurs exemplaires pour m’en servir de support. Pour les croquis, je me contente d’imprimer cette grille à 50% de sa taille réelle pour ne pas gâcher inutilement l’encre et le papier (petit geste écolo). Je réserve l’impression en taille réelle pour les maquettes grandeur nature (Mockup) sur lesquelles je peux utiliser des post-it pour placer et déplacer mes éléments à volonté.

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

Le petit journal permanent de la TypOgrApHiE !

Bruno Bichet — Mon, 18 Oct 2010 11:47:36 +0000

La typographie (souvent abrégée «typo») est à la fois l’art de créer des polices de caractère et de s’en servir. Il peut s’agir également de l’ensemble des règles en usage dans l’imprimerie pour la composition des différentes ouvrages imprimés (cf. Code typographique). Sur le Web, la typographie à longtemps été maltraitée. Toutefois, avec les progrès réalisés ces dernières années par les navigateurs grâce aux standards du web, la typo revient sur le devant de la scène. L’étude des polices de caractère devient trendy, et on ne peut que s’en réjouir. Voici quelques 60 ressources à mettre dans vos favoris, bookmarks ou comptes Delicious !

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 est dédiée à la publication d’informations liées à la scène typographique Française & Francophone.
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.

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

Gridulator calcule la grille de votre design web

Bruno Bichet — Tue, 28 Sep 2010 08:31:34 +0000

Gridulator — Cet outil en ligne créé par David Sleight permet de faciliter les calculs de votre grille de mise en page. Il suffit de spécifier la largeur de votre design, le nombre de colonnes que vous voulez et Gridulator vous donnera tous les résultats présentant des valeurs entières (difficile de diviser un pixel, n’est-ce pas ?). L’application est pilotable au clavier, ce qui facilite les tâtonnements pour trouver le meilleur rapport entre la largeur des colonnes et des gouttières.

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

La typothèque idéale par Smashing Magazine

Bruno Bichet — Tue, 15 Jun 2010 06:15:48 +0000

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

⁽¹⁾ 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

Les habitudes de scrolling à la loupe (Eyetracking)

Bruno Bichet — Mon, 22 Mar 2010 16:16:14 +0000

Il y a certainement de la vie en dessous des 600px (fold). Mais quelle vie ? D’après l’étude Scrolling and attention réalisée par Jacob Nielsen, les utilisateurs passent 80% de leur temps à chercher des informations au-dessus du fold. Si le scroll est une pratique qui s’est répandue depuis quelques années, il ne concernerait donc que 20% du temps passé sur une page.

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

Framework CSS — Sémantique, maquette dynamique et autres notes

Bruno Bichet — Mon, 08 Mar 2010 07:12:41 +0000

Les frameworks CSS ont fait couler beaucoup de pixels : d’un côté, ils proposent une méthode à l’épreuve des balles pour placer les blocs sur sur la page en tenant compte des contraintes cross-browser ; de l’autre, ils ajoutent des classes CSS superflues dans le code HTML pour la présentation des contenus, ce qui n’est pas jugé «sémantique» par les farouches défenseurs d’une séparation entre le fond et la forme. Voilà en gros l’avantage principal et l’inconvénient majeur qu’on peut dégager si on met de côté le faux problème du poids de ces frameworks. Après avoir donné mon point de vue sur cette question de «sémantique» j’expliquerais comment l’ajout de classes liées à la présentation dans le HTML peut s’avérer très pratique à l’heure du web «sur-mesure».

Comment ça marche, un framework CSS ?

Le positionnement des blocs avec un framework CSS s’effectue grosso modo en attribuant une classe CSS pour spécifier les propriétés width et margin aux blocs avec une ou plusieurs techniques pour rétablir le flux HTML après les éléments possédant la propriété float.

Dans une grille en 16 colonnes, pour placer une image sur 4 colonnes et du texte sur les 12 restantes, on pourra utiliser le marquage HTML suivant (je vous fais grâce des CSS, le code HTML est assez explicite) :


    
    Mon texte sur 12 colonnes

Pour beaucoup, les classes .col_16 et last (voire même .clear) sont une intrusion, que dis-je, une déclaration de guerre de la forme contre le fond. Pour tout dire, je suis assez partagé moi-même sur le sujet, mais je m’accroche… J’utilise souvent la partie «grille» des frameworks pour mettre en place la structure des pages car j’ai déjà l’habitude de concevoir le design d’un site avec un découpage en colonnes.

Attention, pas forcément du tout fait en 950px ou 960px mais en déterminant le «pas» de la grille selon mes besoins. Je laisse ensuite les fastidieux calculs à un générateur de grille, qu’il s’agisse de boks pour Blueprint ou encore de 960 Layout System pour 960.gs.

Un peu (ou pas) de sémantique

Les classes .span-4 ou .grid_4 ne sont pas sémantiques dans le sens où — pour certains — elles véhiculent une notion d’apparence et non pas d’utilité, de sens. Ainsi, une classe .warning est préférable à une classe .rouge même si la couleur de .warning est rouge ; si on change d’avis, on aura l’air fin avec notre classe .rouge affichant du texte orange. L’idée, c’est d’être à la fois très précis et suffisamment générique pour s’adapter à toutes les situations.

Pour revenir aux classes spécifiant la largeur des colonnes, j’ai toujours pensé qu’elles apportaient du sens, un peu à l’image de la presse quotidienne où l’on met un titre sur 8 colonnes, signifiant ainsi son importance par rapport aux autres contenus (à supposer que la maquette comporte un maximum de 8 colonnes).

Le côté sémantique de la chose est surtout à mettre en regard des contenus à maquetter : s’ils n’ont pas de sens en eux-mêmes, toute la sémantique du monde n’y pourra rien changer :D

Pour finir avec cette question de sémantique, il reste la possibilité de renommer les classes .span-x ou .grid_x. En fonction de votre projet, vous pourrez utiliser des termes plus en accord avec vos contenus comme .a-la-une pour .span-16, .breves pour .span-4 ou encore .entrefilet pour .span-2, etc. On peut donc considérer que des contenus auxquels on applique un .span-16 sont plus importants que ceux auxquels ont attribut la classe .span-4 et ainsi de suite.

Comme j’ai déjà eu l’occasion de le dire dans Framework CSS sémantique ? Comment je vois les choses (et au risque de me répéter) :

[...] la suite des .span-x peut se comprendre comme l’importance accordées à chaque bloc : du moins important (.span-1) au plus important (.span-24), à l’image de la presse écrite où un article surmonté d’un titre en «8 colonnes à Une» mérite plus d’attention qu’un entrefilet sur 2 colonnes.

Les avantages des frameworks CSS

Standardiser les méthodes de travail

Quand plusieurs personnes interviennent sur le code HTML pour placer ou déplacer des éléments (ex. supprimer ou ajouter une sidebar, un bloc de contenu, etc.) il vaut mieux avoir un jeu de classes CSS (issus d’un framework ou non, d’ailleurs) pour éviter que chaque intervenant bidouille le fichier CSS avec sa «méthode» : certains sont adeptes des position: absolute, d’autres raffolent des float: left, d’autres des table, etc. Avec des classes standardisées comme span-x, last et les clearfix qui vont avec, tout devient plus simple et cohérent.

Des maquettes dynamiques côté serveur ou client grâce aux grilles

Autre argument qui milite en faveur de la mise en place d’une grille avec un framework, c’est qu’en travaillant de cette manière, il devient possible de modifier dynamiquement la mise en page côté serveur avec PHP ou côté client avec Javascript.

Pour distribuer votre contenu sur 4 colonnes au lieu de 8, il suffira de modifier tout ou partie du nom de la classe utilisée (le «4» de col_4 par «8», par exemple) sans être obligé d’intervenir sur la feuille de style ou d’en charger une autre à la volée.

Frameworks PHP, Javascript et pourquoi pas CSS ?

Les critiques concernant les frameworks CSS sont souvent les mêmes que celles qui ont été faites contre les frameworks PHP ou Javascript avant que leur utilisation se généralise. Pour illustrer mon propos, voici un extrait de l’intervention de Didier Galland sur WebDevFr à propos de l’industrialisation de l’intégration web :

On a tenu exactement le même discours à propos de PHP, puis à propos de javascript. Les frameworks dans ces deux domaines ont largement prouvé qu’ils permettaient des améliorations. Je ne vois pas pourquoi l’intégration (css/html + javascript) ne pourrait pas bénéficier des mêmes améliorations. On a le droit d’utiliser son framework personnel dans son coin, mais pour le bien de mon agence, je ne peux pas bloquer mes futures évolutions (en personne ou en techniques) à cause de cette attitude, j’aurais donc forcément tendance à privilégier un professionnel au courant de ces techniques dans mes recrutements ou mes contracteurs freelances.

Aller au bout de la logique du reset CSS

Tout le monde connait le reset CSS d’Eric Meyer que l’on trouve dans de nombreux framework. Quand on y réfléchit cinq minutes, la suite logique de ce reset, c’est le frameworks. Il faut bien voir que la plupart d’entre eux ne sont pas spécialement très lourds et quand on fait le compte des déclarations redondantes qui se trouvent dans une feuille de style un peu touffue (parce qu’évidement, si votre projet tient en 20 lignes de CSS, c’est peut-être pas la peine de se poser la question), on se rend compte que les frameworks ne sont pas si gourmands.

Remplacer les styles par défaut des navigateurs

J’ai toujours trouvé que les styles par défaut appliqués par les navigateurs manquait d’originalité et de peps. Il suffit de mettre un soupçon de Boilerplate ou de Typogridfy pour que de très banal, la mise en page par défaut prenne un coup de jeune et de modernité !

Comment déterminer le «pas de la grille»

Un argument récurrent qui va à l’encontre de l’utilisation des grilles concerne la partie conception graphique. Les grilles entraveraient la créativité. Pourquoi pas. Mais je mets au défi quiconque de proposer un design de site web qui ne rentrerait pas dans une grille. Une grille n’est pas forcément synonyme de 12, 16 ou 24 colonnes. Il peut s’agir de 2, 4, 6 ou 8 colonnes et pourquoi pas d’un nombre impair de colonnes comme 1 colonne (un peu le degré zéro de la grille, mais bon…), 3 ou 5 colonnes pour bénéficier d’une asymétrie créative ? Tout est possible.

Pour aller au plus simple, si l’on veut un site avec un bloc de contenu et une barre latérale, on pourra diviser la page en 3 parties pour obtenir les ratios 2/3 pour le contenu principal et 1/3 pour la sidebar ou en 4 parties, soit 3/4 pour le contenu principal et 1/4 pour la barre latérale. On pourra se baser sur les proportions 1/3 ou 1/4 pour la largeur des images accompagnant les textes.

Ensuite, rien n’empêche de diviser chaque colonne en plusieurs parties pour granulariser l’information selon les besoins : affichage de miniatures, etc. Celà permet d’obtenir une mise en page très simple tout en bénéficiant d’une système de grille souple et efficace.

Quelques liens à propos des frameworks et des reset CSS

Pas de conclusion hâtive !

Je pense que j’aurais l’occasion de revenir sur ces questions (oui encore) notamment sur la partie grille et créativité qui semble passionner beaucoup de monde à juste titre. N’hésitez pas à partager vos expériences en la matière. A bientôt !