Extensions et tutorials gratuits disponibles sur internet pour Dreamweaver. PHP et ASP. Classement thématique. Blog référencé par Adobe Communauté Dreamweaver.

Dreamweaver gratuit

Typographie et conception web avec Dreamweaver : trucs, astuces et exemples

28 mai 2009 | Posté par caroder à 18:54

Bookmark and Share

green_stuff

Avant d'entrer dans le vif du sujet, je vais commencer avec une note plus personnelle. J'ai appris la typographie alors que j'étais une débutante dans une (très) grande maison d'édition. Je travaillais au "studio" et un des maquettistes seniors, proche de la retraite, a entrepris de me transmettre les rudiments de son métier. Il avait commencé sa carrière comme ouvrier typographe en travaillant "au marbre". Sa propre jeunesse était au temps où les lettres étaient encore fondues au plomb et où les "bas de casse" n'étaient pas un concept mais une réalité que l'on saisissait à pleines mains. Bref, tout cela pour dire que je lui suis extrêmement reconnaissante des heures qu'il a pris à me former, à me donner le sens de l'excellence d'un gris typographique et finalement à me transmettre un tout petit peu de son "œil typo".

**********

Il sera ici question ici des rudiments de l'art typographique appliqués aux CSS. Nous supposerons cependant que vous savez différencier une serif d'une sans-serif, une antique d'une elzévir ou d'une didot et connaissez les concepts d'approche, de césure et de ligature. Il ne sera pas non plus question ici de l'infinie variété de typographies que vous pouvez utiliser via les images et une bonne maîtrise de Photoshop. Nous nous intéresserons donc seulement aux typographies disponibles via votre browser, c'est-à-dire celles que nous pouvons mettre en œuvre via les CSS.

La typographie joue un rôle important dans la qualité globale d'un site car elle est bien souvent le levier le plus important de l'accessibilité du contenu. Son objectif prioritaire est de faire en sorte que le contenu soit facile à suivre et à lire.

Truc 1 : enrichissez les font-families de Dreamweaver

Dans un browser, votre choix typographique est très réduit, si vous en croyez  la liste en standard dans Dreamweaver CS3 :

  • Arial, Helvetica, sans-serif
  • Courier New, Courier, monospace
  • Times New Roman, Times, serif
  • Georgia, Times New Roman, Times, serif
  • Verdana, Arial, Helvetica, sans-serif
  • Geneva, Arial, Helvetica, sans-serif

Auquel il convient d'ajouter, dans la version CS4 :

  • "Palatino Linotype", "Book Antiqua", Palatino, serif
  • "Lucida Sans Unicode", "Lucida Grande", sans-serif
  • "MS Serif", "New York", serif
  • "Lucida Console", Monaco, monospace
  • "Comic Sans MS", cursive

Pour comprendre comment et pourquoi cette liste s'est enrichie entre les deux versions de Dreamweaver, il suffit de se reporter à cette matrice typographies/plates-formes, 4 premières colonnes : http://media.24ways.org/2007/17/fontmatrix.html . Vous pourrez y constater que la liste des typographies livrées en standard dans les 2 OS principaux s'est agrandie. Vous pouvez d'ailleurs en vérifier le rendu visuel ici : http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Ainsi on peut imaginer créer de nouvelles font-family dont voici quelques exemples (les 3 exemples ci-dessous ont une compatibilité les 2 principaux OS) :

  • Impact, "Arial Black", sans-serif (pour de la titraille par exemple)
  • "Century Gothic", Arial, sans-serif (le Century Gothic ressemble beaucoup à du Futura, en capitales il a un aspect art déco très intéressant)
  • "Franklin Gothic Medium", Arial, sans-serif (le Franklin est présent sur 90% des machines Windows et il est une valeur sûre en matière de typo).

test1

Et pour les plus audacieux :

  • "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
  • "Century Schoolbook", Georgia, Times, serif

Truc 2 : faites jouer les approches via la CSS

Pour modifier l'approche existante d'une typo, il existe une propriété CSS (à exploiter avec parcimonie si vous n'êtes pas un designer de formation ou de métier) : letter-spacing. J'attire particulièrement votre attention sur le fait que tous les browsers ne réagissent pas de la même façon à cette propriété.

Voici ci-dessous la même typo avec 3 valeurs pour la propriété letter-spacing (respectivement 0, -0.05 et -0.1) via Firefox

test2

NB : je déconseille assez formellement aux non typographes de modifier la propriété word-spacing. Un inter-mot approprié est en effet essentiel à la lisibilité d'un texte.

Truc 3 : osez les capitales

Alors là, attention ! Qu'on se le dise avant d'utiliser à tout va la propriété "text-transform : uppercase;" : LES CAPITALES SONT TRES DIFFICILES A LIRE QU'ELLES SOIENT ACCENTUEES OU NON. Il ne s'agit donc pas de s'amuser à mettre en capitales des paragraphes entiers.

En revanche les capitales possèdent un effet typographique intéressant pour :

  • Les tétières
  • Le rubriquage
  • Les signatures
  • Les chapô
  • Etc…

Bref toute forme de textes courts de petite taille typo (le font-size).

Truc 4 : Noir, c'est pas noir !

Ayez toujours à l'esprit que l'écran possède une luminosité propre (contrairement au papier) qui augmente les contrastes. Ainsi l'œil perçoit comme noir ce qui ne l'est pas tout à fait et un gris qui serait difficilement lisible sur papier devient très correct sur écran.

Vous pouvez aussi jouer d'un texte gris foncé pour faire ressortir plus encore les mots entre balises <strong> ou <em> en les passant au noir :

test4

Truc 5 : vive les interlignes

Les CSS permettent de jouer assez finement sur les interlignes (comparativement à la plupart des traitements de texte). Alors profitez-en ! Evadez-vous de l'interlignage automatique !

Truc 6 : Enjoy Csstypeset

Un doute, une envie de tester une nouvelle combinaison de CSS. Ce petit outil intelligent vous permet de tester en direct live vos typo CSS (limité malheureusement à 10 fontes de base)

csstypeset
http://csstypeset.com/

Last but not least : Pour les fondus de fontes

Vous voulez absolument utiliser telle ou telle typo pour des contenus dynamiques de votre site. Vous le savez peut-être mais il existe une technique CSS qui vous permettra d'être cross-browser à coup sûr, je veux parler bien sûr de la substitution image. Vous trouverez un excellent tutorial ici : http://www.pouipouidesign.net/index.php/post/2005/04/07/28-traduction-remplacement-dynamique-de-texte

Enfin pour finir une galerie absolument époustouflante :

Des designs web utilisant la typographie comme seul élément de graphisme. C'est absolument bluffant !
http://www.3point7designs.com/blog/2008/11/04/25-sites-that-use-typography-as-the-only-design-element/

blackman

Picture19

Catégorie : CSS | Commentaires [1] | Permalien [#] | Tags : , , ,

Commentaires

 

Poster un commentaire