css 4 design » typographie

Useful Shortcuts — Symboles accessibles via la touche Alt de votre clavier

Bruno Bichet — Sun, 31 Jul 2011 15:11:30 +0000

Ah ! les symboles… Que celui ou celle qui n’a jamais galéré pour retrouver ce satané symbole caché dans les circonvolutions de son clavier me jette la première touche ! Useful Shortcuts est un site dont l’objectif est de répertorier et de classer la quasi-totalité des symboles accessibles via la touche Alt de votre clavier. Notez qu’il est également possible d’utiliser les symboles directement par copié-collé depuis les pages de Useful Shortcuts.

Ces symboles sont classés par thèmes :

Lettres avec accent – Caractères avec accent grave, accent aiguë, accent circonflexe, tilde, tréma, etc.
Messagerie instantanée — Coeur, émoticônes, symboles garçon et fille),
Mathématiques — Fractions, inégalités, carré, cube, pi, infini,
Décoration — Puces, flèches,
Monnaie — Livre anglaise, euro, dollar, cent, yen, pesetta,
Dessin – Coins, angles, remplissage,
Symboles grec — Alpha, beta, gamma, delta, etc.,
Typographie — Ligatures, tirets,
Droit d’auteur & propriété intellectuelle — Copyright, trademark, registered,
Flèches – Flèches et carrés d’épaisseur différente,
Programmation — Accolades, parenthèses diverses, pipes,
Ponctuation — Point d’interrogation, point d’exclamation, parenthèses, édition, guillemets, abréviation.

Et tout un tas d’autres symboles dont l’énumération serait aussi longue que fastidieuse ;-)

Articles sur le même sujet

Un « Logothic » pour WordPress Basics

Bruno Bichet — Mon, 23 May 2011 14:22:21 +0000

Une dizaine de jour après le lancement du thème Basics pour WordPress, j’ai fais quelques recherches d’ambiance pour un logo et je me suis arrêté sur le style Gothic, assez peu employé dans l’univers de WordPress. Ce logo repose sur deux éléments bien distincts qui s’opposent l’un à l’autre (ce qui les rend donc complémentaires) : la lettre «W» dans le coeur plein de courbes de WordPress je thème et le mot «basics» tout en angles et agressivité. For Those About To Rock, Fire!

Un logo Gothic Back in Black avec Fette Fraktur (taille réelle : 240x72)

Fette Fraktur

La typographie est laissée aux bons soins de la fonte Fette Fraktur qui ne manque pas de caractère et que vous pouvez retrouver chez Linotype. Personnellement, j’ai toujours rêvé d’utiliser dans un projet une typographie qui casse trois pattes à un canard : avec Fraktur, ça c’est fait ;)

Back in Black

Pour les couleurs : du noir, du noir et encore du noir, pour : 1) coller à l’univers Gothic (Hark Rock, AC/DC, etc.) ; 2) s’adapter à la sobriété de l’habillage de Basics que j’ai mis en place sur WordPress & Webdesign ; et 3) rendre hommage à Bon Scott, le premier chanteur d’AC/DC.

(We Salute You)

Articles sur le même sujet

Mise en page typographique avec CSS3 et Lettering.js

Bruno Bichet — Thu, 17 Mar 2011 07:01:20 +0000

Ce tutoriel écrit par Nikola Lazarevic montre comment mettre en forme un texte de type «article» à l’aide de CSS3 et de Lettering.js. L’auteur nous prend par la main et détaille chaque étape : reset.css, styles de base, typographie avec Font-face, mise en forme des paragraphes. Le tout saupoudré d’une pincée de box-shadow et d’une segmentation des mots composant les titres à l’aide de Javascript pour débrider notre créativité en jouant sur les mots.

Les progrès réalisés par les CSS3 et leur prise en charge grandissante par les navigateurs permettent des mises en pages créatives.

Mise en page avec CSS3 et Lettering.js. Cliquez pour voir la démo

→ Petit bémol cependant concernant les problèmes d’accessibilité d’un script comme Lettering.js soulevés dans les commentaires qui ont suivi la publication de Lettering.js — La typographie dit «merci» à jQuery !

→ Bien entendu, personne ne vous demande la lune et vous pouvez également choisir les couleurs qui vous conviennent le mieux ;-)

Articles sur le même sujet

Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »

Bruno Bichet — Wed, 23 Feb 2011 14:53:06 +0000

Au menu de ce petit journal, je vous propose un pot-pourri de ce qui a retenu mon attention ces 30 derniers jours. La typographie sur le web avec Font-face et les différents formats de polices de caractère. Apprendre les bonnes pratiques en matière d’intégration HTML & CSS avec HTML5 Boilerplate. Choisir de mettre un reset CSS dans votre moteur ou une simple (mais complète) feuille de style de base. Approfondir CSS3 avec un tutoriel concret et utiliser les pseudo-classes :before et :after pour créer des ombres portées du plus bel effet. Mettre en place une feuille de style pour les périphériques mobiles et autres smartphones (iPad, iPhone ou Android). Avoir une liste d’outils pour vous aider à développer avec Internet Explorer (et IE6 en particulier). Et pour finir, reprendre les bases de Photoshop avec un tutoriel en 5 parties distinctes mais complémentaires.

1. Typographie sur le web

Déclarer vos polices de caractères avec Font-Face

Modification de la méthode de déclaration Font-Face et mise à jour du billet concernant les Bonnes pratiques pour les déclarations font-face. Pas de problème si vous utilisez les kits de FontSquirrel, ils sont à jour ! Sinon, voici la bonne méthode pour inclure vos polices localement :

@font-face {
    font-family: 'MuseoSlab500';
    src: url('Museo_Slab_500-webfont.eot?iefix=') format('eot'),
         url('Museo_Slab_500-webfont.woff') format('woff'),
         url('Museo_Slab_500-webfont.ttf') format('truetype'),
         url('Museo_Slab_500-webfont.svg#webfont8VbsAwew') format('svg');
    font-weight: normal;
    font-style: normal;
}

Museo Slab is robust slab serif with Museo’s friendliness. It is a perfect match for Museo Sans. By Exljbris.

Museo Slab : police de qualité accompagnée de son kit fonte-face

→ FontSquirrel propose un convertisseur de polices de caractères qui permet d’obtenir l’ensemble des formats web pour l’ensemble des navigateurs (.eot, .woff, .ttf, .svg).

Maitrisez l’affichage des Webfonts

[ typographisme ] Maîtriser le délai d’affichage des fontes – Internet Explorer et les navigateurs qui utilisent Webkit (Safari, Chrome) affiche le texte lorsque la police est téléchargée. Quant à Firefox et Opera, ils commencent à afficher le texte avec la police de substitution en attendant que la police soit complètement chargée. Cet article fait le point sur ces deux approches et fournit des astuces pour limiter les dégâts : choix des polices de substitution pour limiter le clignotement ou utilisation de Web Font Loader pour contrôler le chargement et l’affichage des polices.

Unicode et typographie

Unicode et typographie : un amour impossible – Tout ce que vous avez toujours voulu savoir sur les rapport entre Unicode et la typographie10.3166/dn.6.3-4.105-137.)

→ Voir aussi Tableaux de caractères Unicode – Écritures,
→ Lire aussi Le petit journal permanent de la TypOgrApHiE !

Les fontes disponibles selon les plate-formes

→ iOS Fonts — 40 familles de polices de caractères pour iPhone 4.2 et 57 pour iPad 4.2
→ CSS font sampler and survey — The Code Style font sampler is a guide to the most common fonts on Windows, Mac and Linux.

2. HTML5 Boilerplate

[ 1stwebdesigner ] 20 bouts de code et bonnes pratiques issus de HTML5 Boilerplate — Comme beaucoup, j’ai entendu parler de HTML5 Boilerplate, un modèle de site HTML/CSS/JS/.htaccess de «tueurs» créé par Paul Irish et Divya Manian qui permet de développer des sites rapides, robustes et prêts pour le futur. HTML5 Boilerplate nous appporte les dernières avancées en matière d’intégration web sur un plateau sous la forme de plusieurs fichiers HTML, CSS, Javascript et .htaccess prêts pour HTM5 et CSS3 (mais pas seulement). Le fichier .htaccess regroupe les bonnes pratiques en matière de compression des différents formats utilisés sur le web, de dates d’expiration pour la mise en cache des éléments, de redirection sur le domaine sans les 3W, etc.

HTML5 Boilerplate existe en deux versions : une pour l’étude avec les explications sous forme de commentaires, et l’autre pour la production. Il y a beaucoup à apprendre en lisant les différents fichiers et en écoutant Paul Irish présenter HTML5 Boilerplate :

→ Lire la documentation de HTML5 Boilerplate sur GitHub,
→ Lire la documentation en mode Boilerplate (cf. HTML5 Boilerplate Documentation… en mode Boilerplate !),
→ Lire Script Loading Techniques.

3. Base.css ou Reset.css ?

[ thinkvitamin ] Setting rather than Resetting Default Styling – Avec l’utilisation (ou non) d’un framework CSS, la question de savoir s’il vaut mieux mettre un reset.css ou une feuille de style de base dans ses pages web est un peu le serpent de mer de l’intégration web. Thierry Koblentz présente les défauts inhérents au reset.css et défend l’approche de la feuille de style de «base» avec base.css qui a inspirée en partie HTML5 Boilerplate !

4. Clearfix reloaded ?

[ Yahoo! User Interface Blog ] Clearfix Reloaded + overflow:hidden Demystified – Tant que la propriété float servira pour bâtir les fondations de nos pages web, nous continuerons à utiliser une méthode pour rétablir le flux après l’utilisation d’éléments «floatants». Il existe plusieurs méthodes que j’avais compilées dans l’article Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire qui faisait lui-même suite à Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ? Voici le petit nouveau :

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

Une variante utilisée dans HTML5 Boilerplate. Notez le remplacement de la propriété overflow: hidden par visibility: hidden :

.clearfix:before,
.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

L’absence de la propriété overflow: hidden peut entrainer des problèmes d’espaces au-dessus de certains éléments. Pour y remédier, il est possible d’utiliser le clearfix suivant (notez que l’utilisation de overflow: hidden sur le container en question dans votre feuille de style suffit généralement à régler le problème) :

.clearfix2:before,
.clearfix2:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix2:after { clear: both; }
.clearfix2 { zoom: 1; }

5. Apprendre CSS3

[ onextrapixel ] The No-Pressure Introduction to CSS3 — Utiliser CSS3 dès maintenant est possible. Cet article fait le point sur les différentes propriétés CSS3 avec des exemples concrets, tout en précisant leur niveau de prise en charge par les différents navigateurs, avec ou sans préfixe vendeur. L’auteur n’a pas oublié les nouveaux sélecteurs — tout aussi intéressants, sinon plus, que les «effets» — ni les Medias Queries ou Font-Face. Il nous donne en prime quelques liens vers des sites qui brossent CSS3 dans le sens du poil.

6. Box-Shadow sexy sans image

[ Nicolas Gallagher ] CSS drop-shadows without images — L’article explique comment appliquer simplement des ombres portées originales en utilisant les pseudo-classe :before et :after. Voir la démonstration.

Par exemple :

.drop-shadow {
   position:relative;
   width:90%;
}
.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}
.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

7. Feuille de style spécialisées pour les mobiles

[ Alsacréations ] Une feuille de styles de base pour le Web mobile — Raphaël nous propose un exemple de feuille de style CSS pour les médias mobiles qui condense les bonnes pratiques à respecter :

Fixer le Viewport,
Passer tous les éléments de largeur fixe en largeur automatique,
Fixer une largeur maximale de 100 % aux éléments potentiellement problématiques,
Gérer les mots longs,
Passer à une seule colonne,
Masquer les éléments superflus,
Afficher un message personnalisé.

8. «Faire avec» Internet Explorer

[ Design your way ] Internet Explorer In A Web Designer’s Life – Problems And Solutions –De plus en plus de développeurs et d’intégrateurs web déclarent ne plus prendre en charge IE6 dans leur projet de développement. Si ce n’est pas votre cas, sachez qu’il existe des outils pour se faciliter la vie avec le dernier de la classe (IE6) en particulier et Internet Explorer d’une manière générale. Via @_jiann.

Outils d’aide au développement

Scripts

Outils CSS3 /HTML5

Tester votre site

Articles et discussions

→ Lire aussi les articles tagués Internet Explorer, IE6 et commentaires conditionnels.

9. Compatibilité CSS et Internet Explorer

[ msdn ] Compatibilité CSS et Internet Explorer — Si votre site Web est destiné à être utilisé avec certaines anciennes versions d’Internet Explorer, vous devez connaître leur niveau de conformité à la spécification CSS. Cette article contient une vue synthétique des spécifications CSS prises en charge dans les versions récentes d’Internet Explorer et dans Internet Explorer 8.

10. Apprendre Photoshop en vidéo

[ Lifehacker ] Learn The Basics Of Photoshop: The Complete Guide — Un dossier composé de textes et de vidéos sur l’apprentissage des bases de Photoshop en cinq parties distinctes et complémentaires :

Articles sur le même sujet

Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)

Bruno Bichet — Fri, 28 Jan 2011 14:02:10 +0000

Après quelques journaux permanent (HTML5, typographie et CSS3) et des revues de presse multi-thématiques, voici une nouvelle série de liens triés sur le volet qui vous permettra d’occuper le Weekend qui arrive à grand renfort de typographie et d’intégration HTML & CSS. Ces ressources vous donneront également l’occasion de dégainer Photoshop et de sortir votre éditeur HTML préféré. Enjoy!

TypOgrApHiE !

Beautiful Type — Un blog créé par les deux webdesigners. Francis Chouquet (@fran6) et Aurélien Foutoyet (@allfordesign) partagent une passion commune pour la typographie et le prouve en présentant un patchwork de photographies et d’illustrations «typographiques». N’hésitez pas à jeter un oeil sur le design soigné de ce blog qui vaut le détour !

→ Jetez également un oeil sur le petit journal de la TypOgrApHiE qui le vaut bien !

Css Sans Stress !

Reset CSS V2.0 — On ne présente plus le reset CSS d’Eric Meyer, mais vous pouvez toujours lire Eric Meyer fait encore risette avec Resetting Again et 5 Reset CSS à la loupe pour vous rafraichir la mémoire ! Au menu de cette V2.0 : suppression de la suppression de l’outline sur l’ensemble des balises HTML et sur la pseudo-classe `:focus` (l’accessibilité devrait s’en trouver mieux) et prise en compte des nouvelles balises HTML5 article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video.

Banque de liens d’Ergolab — Ressources commentées dans les domaines de l’ergonomie, de l’architecture de l’information, du design d’interaction… Plus de 200 liens classés par thèmes, dans l’ordre alphabétique ou sur une seule page.
cssdesk — Sorte de JSFiddle pour CSS et CSS3 : une fenêtre pour le marquage HTML, une deuxième pour les CSS et enfin, le résultat de vos manipulations dans une troisième fenêtre.
Spritebox — Facilite la création de Sprites CSS en se basant sur la position du background. Il suffit de télécharger votre image et de sélectionner chaque composante du Sprite et de générer le code CSS.
ProCSSor — Formatez vos feuilles de style à votre convenance : indentation, placement des Curly Braces et d’autres options à découvrir. Pratique lorsqu’on doit reprendre des CSS que l’on a pas codées soi-même.
Multiple Class / ID and Class Selectors — L’utilisation des sélecteurs multiples a longtemps été sous-utilisée en raison certainement d’une prise en charge déficiente par IE6. A l’heure où le parc des navigateurs fait peau neuve, il est bon de se pencher sur l’utilisation de `.classe1.classe2.classe3` ou de `#id1.classe1`.
Bonnes pratiques pour les déclarations font-face — Incorporer des polices de caractères dans nos pages Web est devenu plus simple avec la propriété Font Face. Toutefois, les incompatibilités entre les navigateurs — notamment dues à Internet Explorer — rendent l’opération assez complexe. Cet article fait le point sur les problèmes à résoudre.

Inspiration, création

SearchPSD — Un moteur de recherche spécialisé dans les fichiers Photoshop. Plus de 1 500 fichiers .psd gratuits classés par catégories. Il suffit d’effectuer une rechercher sur «Logo» pour trouver une palanquée de logo issus des stars du Web comme Facebook, Google, Twitter, Yahoo. Le nombre de fichiers est encore faible, mais SearchPSD peut s’avérer utile dans l’avenir : à suivre ! Via Cyril Lopez.

139 Impressive Typography Design Inspiration — Foultitude d’exemples et de liens vers des créations qui font la part belle à la typographie.
1000+ Brushes Photoshop — 40 sites proposant des brosses Photoshop issues du domaine de la technologie pour donner un look futuriste ou techno à vos créations.

Développement web

Exemple d’AJAX en PHP + XML + jQuery — Tutoriel pour réaliser des appels Ajax de la création du fichier XML avec PHP à la gestion d’Internet Explorer et de la navigation dans l’historique.
UI kits et stencilpack — Une bonne liste d’outils pour vous faciliter la conception d’interface, pour un wireframing efficace.
Fillerati — Le faux-texte à base de Lorem Ipsum n’est pas forcément une bonne idée, l’idéal étant de travailler avec les contenus définitif. Si toutefois vous n’aviez pas le choix, essayez-donc Fillerati qui offre des vrais textes issus de la littérature (disponibles dans plusieurs langues, faut scroller pour trouver) pré-remplis dans des balises `p`, `h1`, `li` et du texte de longueur variable.
Spritzer — Ce script PHP permet de générer des images Sprites pour vos CSS à l’aide d’un simple fichier texte de configuration. Disponible sur Github.
Internet Explorer 9 Beta Guide for Developers — The Internet Explorer 9 Beta Guide for Developers provides a look at the features and improvements in Internet Explorer 9 Beta.
Coding A HTML 5 Layout From Scratch — As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.
Android : introdution aux styles et aux thèmes — Cet article vous présente une particularité assez plaisante d’Android vis-à-vis des autres systèmes d’exploitation mobiles : la possibilité de créer des interfaces graphiques à l’aide de simples fichiers XML.

C’est dans les vieux po(s)ts qu’on fait la meilleure soupe

CSS Differences in Internet Explorer 6, 7 and 8 — On devrait y être habitué, mais il est parfois difficile de se souvenir des propriétés et sélecteurs CSS pris en charge ou non par les différentes versions d’Internet Explorer (IE6, IE7 et IE8). Voici un récapitulatif clair et concis avec des tables de compatibilité à garder sous la souris.
60 Questions to Consider When Designing a Website — 60 questions à se poser avant de lancer votre site dans le grand bain du web : gestion de projet, code HTML, CSS & Javascript, Webdesign et expérience utilisateur.

Miscellanées

101 sites Web très utiles — Une mine d’or pour ceux qui sont à la recherche de sites web utilitaires.
TABLEIZER! — Créez des tableaux HTML à partir des données issues de vos feuille de calcul et autres tableurs !

Articles sur le même sujet

Webdesign, lisibilité, typographie et rédaction web

Bruno Bichet — Tue, 25 Jan 2011 13:03:04 +0000

Une grande partie des notions relatives à la lisibilité des contenus sur les écrans date des débuts du web. En 1997, Jakob Nielsen déclarait que la lecture sur écran était 25% plus lente que sur le papier. Depuis cette époque, la technologie n’a cessé d’évoluer et la qualité des écrans et des polices de caractères va dans le bon sens. Il est temps de se poser des questions sur la lisibilité des caractères, le sens de lecture d’une page, les valeurs optimales pour le corps des textes et leur interlignage, le nombre de fontes que l’on peut utiliser dans une page et la rédaction pour le web.

Lisibilité des caractères: Les caractères avec des empattements sont réputés pour offrir une lisibilité supérieure à ceux qui n’en possèdent pas. Les empattement guideraient l’œil. Pourtant dans le même temps, on entend souvent dire que l’on ne déchiffre pas les mots lettre à lettre mais que l’on reconnait la forme globale des mots. Il manque donc un paramètre pour démontrer la supériorité des caractères possédant des empattements.

Il faut savoir qu’au début du XXe siècle, il y avait effectivement une différence notable entre la lecture des caractères serifs et sans-serif : ces derniers faisaient tout juste leur apparition. En matière de lisibilité, les habitudes sont un critère important.

→ Lire Le petit journal permanent de la TypOgrApHiE !

Lecture en «F» ou en «Z» ?: Certaines études utilisant l’eye-tracking ont démontré que les résultats issus de la page du moteur de recherche Google étaient pour ainsi dire «scannés» par l’œil selon un parcours en «F». Pour autant, vos pages doivent-elles se contenter d’un seul sens de lecture ? Non ! Le parcours en «Z» d’une page imprimée est sans doute encore d’actualité sur le web. La question étant plutôt de placer les éléments importants de votre communication au-dessus du fold plutôt qu’au-dessous.

→ Lire 10 principes pour un design web efficace et Les habitudes de scrolling à la loupe (Eyetracking).

Interlignage à 120% ou 150% ?: Dans l’imprimé, on utilise couramment des valeurs d’interlignage comprises entre 100% et 120% de la taille des caractères pour les pavés de textes destinés à la lecture continue. A l’écran, ces valeurs sont trop faibles. En raison des contraintes de la lecture à l’écran (définition, contraste, luminosité, distance de lecture), il est préférable d’utiliser un interlignage compris entre 140% et 150% par rapport au corps de la fonte utilisée.

A moduler évidemment selon l’œil, la hauteur d’«x» des caractères, la largeur des pavés de textes, le nombre de mots et la difficulté intrinsèque des concepts abordés. Un nombre de caractères compris entre 60 et 66 par ligne est idéal pour la lisibilité et l’intelligibilité des textes. On peut aussi estimer la largeur des pavés à environ 40 fois la taille du caractère qui le compose (soit 640 pixels pour un corps de 16 pixels).

→ Lire Manifeste pour un interlignage minimum syndical pour les blogs !

Taille des caractères: La distance qui nous sépare du support de lecture est un élément essentiel qui est rarement évoqué pour expliquer la différence qu’il y a entre lire à l’écran et sur le papier. C’est pourtant cette distance qui a été retenue pour définir la taille par défaut des polices utilisées par les navigateurs : les 16 pixels que certains trouvent trop importants à l’écran ne sont finalement que l’équivalent des 12 points sur le papier, si l’on tient compte que l’œil n’est pas à la même distance dans les deux cas.

→ Lire 5 règles simples pour améliorer l’affichage de vos textes.

Nombre de fontes par page: Au-delà de trois fontes, il est généralement admis qu’une page web ou imprimée manque de… de quoi au juste ? De classes ? De lisibilité ? D’intelligibilité ? Bref, on ne sait pas trop. Mon conseil : utilisez autant de fontes que nécessaire, selon votre projet. Ne vous limitez pas à-priori. Expérimentez : il en restera toujours quelque chose ! Il sera toujours temps de faire le ménage dans un deuxième temps. Notez que c’est la même chose pour l’utilisation des couleurs.

→ Lire Des ensembles de polices cohérents pour le web et La typothèque idéale par Smashing Magazine

Rédaction web: La lecture à l’écran n’est pas si différente que sur le papier. Loin d’être des sœurs ennemies, ces deux lectures sont plutôt des sœurs jumelles dizygotes. En conséquence, il n’y au aucune raison pour que l’écriture pour le web soit si différente que celle destinée au papier. Si vous maitrisez l’enchainement des idées, la grammaire et l’orthographe, votre prose sera lisible sur tout les supports !

→ Lire Bien rédiger [ pour le web ] [ tout court ]

Justification des textes: L’alignement des textes au «fer à gauche» garantit un espacement constant entre les mots, ce qui améliore la lisibilité. Les textes justifiés offrent quant à eux l’avantage de produire des marges régulières à droite et à gauche, donnant au bloc de texte la forme d’un rectangle très net. HTML n’offre aucun mécanisme pour gérer les césures (je ne parle même pas des veuves et les orphelines.) ce qui entraine souvent des pavés de texte plein de trous (lézardes)…

→ Pour y remédier, jetez un œil sur Hyphenator — Gérer les césures avec Javascript.

Sortez du cadre !

Entre les idées toutes faites et les idées reçues, il reste de la place pour exprimer sa créativité : mélangez les polices de caractères et les couleurs, osez les structures de phrases alambiquées et l’imparfait du subjonctif (juste ce qu’il faut, hein ?). Jouez avec le sens de lecture pour maintenir l’attention de vos lecteurs et sortez du cadre (attention à la tête). Bref, soyez vous-même. Enfin, là, demandez quand même autour de vous, si c’est judicieux :-D

A suivre…

Linkographie

La lecture facile à l’écran,
De la typographie pour le web,
Confort de lecture : l’écart entre l’écran et le papier se réduit,
La macrotypographie de la page Web,
La typographie comme outil de design,
The 100% Easy-2-Read Standard,
How Users Read on the Web et iPad and Kindle Reading Speeds,
Stanford Poynter Project (Etude Eyes-tracking sur 67 personnes [en]).

Articles sur le même sujet

Quelques notes de lecture sur Le Graphisme au XXe siècle

Bruno Bichet — Tue, 28 Dec 2010 13:12:39 +0000

Le Graphisme au XXe siècle est la traduction française de Graphic Design (A Concise History) écrit par Richard Hollis et publié en 1994. Ce livre est une mine d’or pour pour qui veut connaitre l’histoire du Graphisme à travers les pays qui lui ont donné ses lettres de noblesse : le futurisme et l’Italie, la Russie soviétique, l’Allemagne, les Pays-Bas, la Suisse, la France, la Grande-Bretagne, les Etats-Unis, l’Europe du Nord. Il contient plus de 800 illustrations et le texte est très riche. Je lis généralement en prenant des notes pour plus tard ou en surlignant les passages qui me plaisent au Stabilo. Ce billet est la compilation des extraits qui ont plus particulièrement suscité mon intérêt. Ils ne suivent pas forcément l’ordre des pages et certains passages ont été remaniés afin de rester compréhensibles une fois sortis de leur contexte.

Les trois fonctions du graphisme sont : identifier, informer et promouvoir.
Contrairement à l’artiste, le graphiste travaille en vue d’une reproduction industrielle.
Les progrès des arts graphiques sont dus à quelques pionniers qui travaillaient en équipe.
Les arts graphiques sont un langage à la grammaire indéfinie dont le vocabulaire s’étend sans cesse.
Les imprimeurs du moyen-âge réutilisaient déjà à volonté les illustrations gravées sur bois.
L’affiche est le premier support et l’entité la plus élémentaire des arts graphiques, mêlant le texte et les images.
La règle de base de l’Isotype est que la représentation d’un nombre important d’éléments doit se faire par de nombreux signes (et non par un seul signe de grande taille).
Eléments de base de la «typographie Bauhaus» : linéales, chiffres surdimensionnés et barres horizontales ou verticales pour utilisées de manières esthétique et pour hiérarchiser l’information.
En 1906, les timbres dessinés pour la Bosnie-Herzégovine furent les premiers à utiliser la photographie.
Les graphistes viennois restaient cependant avant tout des artistes et il fallut longtemps encore avant que la profession de graphiste n’existe à proprement parler.
Les biscuits Bahlsen, le café Hag et les encres Pelikan furent parmi les premiers à adopter l’idée d’une image de marque.
Le matériel publicitaire que Behrens conçut pour AEG, austère et géométrique, est considéré comme la première utilisation d’un graphisme élaboré au service d’une politique commerciale.
Le concept du «style maison», ou de charte graphique fut développé dans les années 1930 par Olivetti et par la Container Coroporation of America (CCA).
La première guerre mondiale affirma l’importance du graphisme.
A la fin du XIXe siècle, la lithographie permet aux artistes d’imprimer de grands aplats de couleur, ce qui leur donne la liberté de dessiner eux-même les lettres plutôt que d’utiliser la gamme restreinte des caractères existants. Cette nouvelle maitrise de l’impression marque la naissance du graphisme.
Le métier de graphiste date du milieu du XXe siècle.
Les affiches des pays en guerre reflétaient leur niveau de développement graphique.
Mallarmé considérait la double page d’un livre comme un seul et même espace.
Le futurisme marque une rupture avec la mise en page traditionnelle et symétrique.
Après la révolution de 1917, les arts graphiques devinrent un outil de communication de masse.
Les livres conçus par Lissitzky expriment l’idée selon laquelle les mots imprimés sont vus et non pas entendus.
Au sein du Bauhaus, une analyse approfondie de la communication visuelle commença par celle de l’alphabet.
Koch avait repris le Erbar, un caractère géométrique du début des années 1920, pour son Kabel qui apparut en même temps que le Futura, en 1927.
Le style moderne internationale survécut au nazisme pour réapparaitre dans les années 1960 sous le nom de «style suisse».
L’agence de publicité est une invention américaine.
Dans le travail de Cassandre, c’est le texte, la lettre qui déclenchent les idées qui engendrent la forme plastique.
L’affiche déclina au cours des années 1930 face au développement des magazines affichant de la publicité.
De nos jours, l’art de la mise en pages tire sa force de la libre association des techniques. Avec un appareil photo, une paire de ciseaux, une bouteille d’encre de chine et de la colle, une composition peut naitre et une idée nouvelle s’exprimer — Alfred Tolmer, imprimeur à Londres en 1931.
Aux Etats-Unis, dans les années 1930, les similitudes entre les pages éditoriales et publicitaires étaient révélatrices de l’interdépendance économique de la presse et de la publicité.
Aux Etats-Unis, la profession de directeur artistique était antérieure à celle de graphiste. Le club des directeurs artistiques de New York fut fondé en 1920.
Mehemed Fehmy Agha s’occupa de la direction artistique de Vogue, de House and Garden et de Vanity Fair. On lui doit la grille de maquette en double pages et l’utilisation de faux textes. Il fut le premier à considérer un magazine comme une succession de double pages plutôt que comme une suite de pages individuelles. Il est considéré comme le premier directeur artistique moderne.
Quand la simple énumération des faits est insuffisante, laborieuse ou peu claire pour le lecteur et qu’une organisation visuelle s’impose, il faut alors faire appel au graphisme — Will Burtin.
C’est justement quand vous commencez à vous ennuyer de votre création que votre public commence à la remarquer.
Le graphiste, affirmait Lou Dorfsman, doit être capable de montrer que le projet répond à un besoin, comment il fonctionnera, ce qu’il coûtera, à qui et comment il sera diffusé.
Au milieu des années 1960, le graphisme fut enfin reconnu comme une profession à part entière et les mensuels spécialisés comme Print, Communication Arts et Art Direction témoignaient de son excellente santé.
En 1940, la CCA avait créé son «laboratoire graphique», équipé d’une caméra qui enregistrait les mouvements de l’oeil sur un dessin.
Tschichold affirmait que le Bauhaus commettait deux erreurs : le rejet de toute mise en page centrée et l’utilisation exclusive de linéales.
Le système de grille de Gerstner trouvait sa source dans l’unité de base de mesure typographique et non dans les proportions de la page.
En 1957, le caractère sans sérif Neue Haas (rebaptisé Helvetica) devint incontournable pour les graphistes «constructivistes» des années 1950 et 1960.
La charte graphique d’Olivetti concernait même les logements, les écoles et les hôpitaux créés pour les employés.
Dans les années 1950, les photographies détourées accompagnées d’aplats de couleur devinrent des éléments incontournables du graphisme italien.
Au magazine Elle, dans les années 1960, Peter Knapp diposait d’un personnel considérable : 14 maquettistes, 2 retoucheurs, 1 dessinateur de lettres, 5 photographes de laboratoire, 5 compositeurs, 5 illustrateurs et 6 photographes de modes et leurs assistants.
Les graphistes suisses, comme Knapp, avait une formation complète et étaient habitués à des exigeances techniques inconnues en France.
En Grande-Bretagne, après la seconde guerre modiale, les arts graphiques participaient au programme de reconstruction économique et sociale.
Pendant les années 1950, les graphistes se forgèrent une identité professionnelle en adhérant à la Society of Industrial Artists qui leur offrait une charte professionnelle semblable à celle des architectes.
La qualité typographique du livre en Allemagne reposait sur les règles de composition établies par des graphistes tels que Renner et Tschichold dans les écoles d’imprimerie d’avant-guerre , et grâce auxquelles les mots et les lignes étaient correctement espacés, un aspect souvent négligé dans d’autres pays (particulièrement en France).
Si l’on considère le graphisme comme un moyen de résoudre un problème, tout ce que l’on peut espérer communiquer, c’est le problème lui-même. Le style est un virus — Neville Brody.
Grâce à l’informatique, le nombre de caractères disponibles dépassa le millier dès les années 1980.
Tant que nous aurons besoin de l’alphabet et de l’image, le graphisme existera.

Pour terminer cette longue liste, voici ce que pensait Ashley Havinden, qui résume parfaitement l’éclectisme dont doit faire preuve le graphiste :

Le graphiste est celui qui est capable de résoudre les problèmes de communication, quel que soit le médium imposé. Les graphistes sont libres de s’inspirer du classicisme de l’Antiquité, du fonctionnalisme du Bauhaus, de la symétrie du XVIIIe siècle, du réalisme de la Renaissance, de l’expérimentalisme cubiste, des bizarreries victoriennes, des images oniriques surréalistes, des photographies d’amateurs, des dessins industriels, des divisions de l’espace dans l’art abstrait et l’architecture moderne, de la typographie du XVe siècle, de la radiographie, de la gravure sur bois, de la nouvelle typographie de Tschichold, etc.

Le Graphisme au XXe siècle

Richard Hollis

Traduit de l’anglais par Christine Monnatte

ISBN : 2-87811-115-X

J’espère que ces quelques notes vous auront donné envie d’en savoir plus sur l’histoire du graphisme dans le monde. Si le format de ce billet vous plait, j’ai d’autres vieux bouquins dans ma bibliothèque qui n’attendent qu’une relecture pour se manifester !

Articles sur le même sujet

Près de 60 polices de caractère pour Google Font Directory

Bruno Bichet — Wed, 22 Dec 2010 11:00:36 +0000

La typographie sur le Web monte en puissance. Google ajoute des fontes supplémentaires à son répertoire Google Font Directory qui compte désormais près de 60 typos prêtes à l’emploi grâce à Google Font API. Cette bonne nouvelle s’accompage de l’arrivée de Google Font Previewer for Chrome. Cette extension vous permettra de choisir votre typographie parmi les fontes disponibles et d’effectuer les réglages nécessaires (taille, style, graisse, ombré, casse, etc.). Reste à copier-coller le code fourni par Google Font Previewer pour rendre vos pages plus belles (ou pas) !

Google Font Previewer

Testez les fontes directement sur la page affichée dans votre navigateur, puis copiez-collez le code fourni.

Profitez des Webfonts, avec Google Font Previewer for Chrome c'est facile ! Cliquez pour agrandir l'image

Exemple de code

Voici le code fournit par Google Font Previewer pour la police de caractère IM Fell DW Pica SC à insérer entre les balises head de vos pages Web :

Attention : si vous êtes en train de rédiger un billet lorsque vous essayer les différentes polices de caractère depuis Google Font Previewer, vous risquez de perdre les modifications qui n’ont pas été enregistrées.

J’en ai profité pour tester la police Neuton pour l’ensemble des titres de ce blog.

Les polices de caractère de Google Font Directory

Google Font Directory : un choix de polices de caractère varié et de qualité !

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 »