CSS & Webdesign » Typographie http://css.4design.tl Le blog de l'intégrateur web Sun, 20 May 2012 15:30:49 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Tutoriel grille verticale en CSS par Smashing Magazine http://css.4design.tl/grille-verticale-css http://css.4design.tl/grille-verticale-css#comments Thu, 01 Mar 2012 07:42:28 +0000 Bruno Bichet http://css.4design.tl/?p=11520 95% des sites web sont faits de typographie ! Cette assertion d’Oliver Reichenstein dans l’article Web Design is 95% Typography semble toujours d’actualité. Dans la plupart des cas, les visiteurs se rendent sur un site pour lire. C’est une excellente raison pour prendre soin de la typographie dans le web design. Dans l’article Technical Web Typography: Guidelines and Techniques, Smashing Magazine détaille la mise en place d’une grille verticale en utilisant les règles immuables d’une bonne typographie, qu’il s’agisse de créer un carton d’invitation pour un anniversaire ou un faire-part de décès.

L’article est en anglais, mais les nombreux exemples de codes CSS et les illustrations le rendront accessible à tous sous réserve d’avoir de bonnes bases en CSS.

Après un bref rappel sur le reset CSS, le programme continue avec :

  • Choisir une police de caractère — Utilisez html { font-family: sans-serif; }pour afficher la polices sans serif par défaut du système : Helvetica sur Mac et Arial sur PC. Attention toutefois aux changements des préférences par l’utilisateur.
  • Choisir une taille de police de caractère — 16 pixels sont l’idéal, mais si vous tenez à 12 pixels, utilisez html { font-size: 0.75em; /* 16 * 0.75 = 12 */ } soit 75% de la taille par défaut du navigateur.
  • Utiliser une grille — Il existe de nombreux systèmes de grilles dont voici une liste de près de 40 frameworks CSS. Lire aussi Blueprint vs 960 Grid System et The Blue «940» Grid Simpler.
  • Nombre de caractère par ligne — Le nombre optimal de caractères par ligne est compris entre 45 et 75 signes (espaces comprises). Plus la ligne est longue, plus l’interlignage (line-height) doit être important pour garantir au lecteur un bon confort de lecture. La phrase suivante contient exactement 66 signes : 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit accumsan.
  • Rythme vertical : la ligne de base — Déterminez l’interlignage global (votre nombre magique) — 1,5 fois la taille de votre texte, par exemple — et basez toutes vos mesures là-dessus. N’oubliez pas de décaler votre grille en background au départ si besoin avec html { background: url(grid.png) center -6px repeat-y #fff; } si votre texte n’est pas parfaitement aligné sur la ligne de base de votre grille.
  • Echelle de valeur — Il faut penser aux sauts de ligne avant et après les titres et les paragraphes, s’occuper de la taille des différents niveaux de titres h1 — h6 et déterminer l’interlignage de chaque élément selon sa taille avec la formule (magic number) ÷ (font size) = (line height).

La suite de l’article donne des conseils pour gérer les signes de ponctuation et les images dans le contexte d’une grille :

Pour la route, une video de Tim Brown : More Perfect Typography :

Tim Brown – More Perfect Typography from Build on Vimeo.

→ Plus de ressources typographiques dans Le petit journal permanent de la TypOgrApHiE !

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/grille-verticale-css/feed 6 Useful Shortcuts — Symboles accessibles via la touche Alt de votre clavier http://css.4design.tl/useful-shortcuts http://css.4design.tl/useful-shortcuts#comments Sun, 31 Jul 2011 15:11:30 +0000 Bruno Bichet http://css4design.com/?p=10731 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 :

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

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/useful-shortcuts/feed 4 Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop » http://css.4design.tl/le-petit-journal-du-web-fevrier-2011 http://css.4design.tl/le-petit-journal-du-web-fevrier-2011#comments Wed, 23 Feb 2011 14:53:06 +0000 Bruno Bichet http://css4design.com/?p=9182 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.)

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 :

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: "020";
    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: "020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix2:after { clear: both; }
.clearfix2 { zoom: 1; }
Lire aussi :

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.

→ Lire aussi Le petit journal permanent de CSS3 — 100+ ressources pour commencer

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);
 }
Lire aussi :

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é.

→ Lire aussi Une feuille de styles de base pour le media print.

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 :

  1. Learn The Basics Of Photoshop In Under 25 Minutes,
  2. Basics Of Photoshop: Colour Correction, Touch Ups And Enhancements,
  3. Basics Of Photoshop: Basic Drawing With The Pen Tool,
  4. Basics Of Photoshop: Designing A Website,
  5. Basics Of Photoshop: Next Steps And Further Resources.

→ Lire aussi Détourer les cheveux avec Photoshop

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/le-petit-journal-du-web-fevrier-2011/feed 7 Webdesign, lisibilité, typographie et rédaction web http://css.4design.tl/webdesign-lisibilite-typographie-redaction-web http://css.4design.tl/webdesign-lisibilite-typographie-redaction-web#comments Tue, 25 Jan 2011 13:03:04 +0000 Bruno Bichet http://css4design.com/?p=9020 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

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/webdesign-lisibilite-typographie-redaction-web/feed 24 Le petit journal permanent de CSS3 — 100+ ressources pour commencer http://css.4design.tl/le-petit-journal-permanent-de-css3 http://css.4design.tl/le-petit-journal-permanent-de-css3#comments Thu, 06 Jan 2011 09:49:09 +0000 Bruno Bichet http://css4design.com/?p=8717 Après mes petits journaux permanents consacrés à la typographie et à HTML5, voici un numéro spécial qui fait la part belle à CSS3. Ces nouvelles propriétés proposent des effets graphiques ou typographiques à votre page Web, mais pas seulement : CSS3, ce sont aussi des sélecteurs et des pseudo-classes qui vont nous faciliter l’intégration et nous permettre de repousser encore plus loin les frontières de l’univers et au-delà ! En attendant, voici des générateurs de code CSS3 en ligne classés par propriétés ; des ressources pour vérifier la compatibilité des navigateurs et quelques liens pour faire entrer dans le rang les plus récalcitrants ; des tutoriels et des exemples de tests et d’expérimentations diverses avec CSS3 qui devraient vous inspirer. Ce guide permanent sur CSS3 contient plus d’une centaine de liens, pour commencer.

Générateurs de CSS3

Multi-propriétés

  • CSS 3.0 Maker — Très bel outil pour générer les propriétés CSS3 Border Radius, CSS Transform, Box Shadow, Text Shadow, Text Rotation, RGBA, Font Face, Outline Offset, Transitions et CSS Gradient. Les nombreuses options sont accessibles par le biais de curseurs ou de boutons radio. La compatibilité avec les navigateurs est matérialisée par des icônes généreuses représentant les navigateurs concernés, qu’il s’agisse des navigateurs de bureau ou mobile. Le code est facilement copiable ou téléchargeable sous la forme d’un .zip. La prévisualisation des effets est très réussie, notamment en ce qui concerne les animations CSS.
  • CSS3 Generator — Un des meilleurs générateurs de CSS3 tant par le nombre de propriétés prises en compte que par la fluidité de l’interface. Au menu : Border Radius, Box Shadow, Text Shadow, RGBA, Font Face, Multiple Columns, Box Resize, Box Sizing, Outline, Transitions, Transform. Selectors et Gradients renvoient respectivement aux liens CSS3 Selectors Explained et Ultimate CSS Gradient Generator.
  • New! CSS3 Generator (oui, encore un) est un éditeur de CSS3 créé par Pascal von Seth. Cet outil en ligne permet d’éditer une dizaine de propriétés : background, border, border-radius, gradient, box-shadow, transform, opacity, font et text-shadow.
  • CSS3, Please! — Ce générateur de CSS3 multi-navigateurs prend la forme d’une page Web que l’on peut copier-coller telle quelle tout en pouvant modifier les valeurs soulignés qui se répercutent automatiquement sur l’ensemble de la déclaration concernée : coins arrondis, ombres portées sur les bloc et les textes, dégradés, RGBA, Rotation, Transitions et Font Face. Propose les propriétés spécifiques à Internet Explorer (filter et -ms-filter) pour les dégradés, la transparence RGB, la rotation des blocs et les polices de caractères.
  • CSS3 Sandbox : Gradients, CSS Transforms, Shadows, CSS Text Stroke — Parmi les nombreux outils et les ressources pour les professionnels du Web proposés par Western Civilisation, on trouve des outils pour faire du CSS3 comme Jourdain faisait de la prose !  Toutes les opérations s’effectuent à l’aide de curseurs et de sélecteurs de couleurs (Color Pickers). Les modifications se répercutent automatiquement dans le code qu’il suffit de copier lorsque vous avez terminé.
  • CSS3 Click Chart — Cette page fait plutôt office de pense-bête pour les principales propriétés CSS3 : exemple d’utilisation, informations et code.
  • CSS3 Generator — Interface très agréable pour prévisualiser les propriétés border-radius, box-shadow, background-gradient et opacity. Le générateur de code propose le support de IE7 & IE8.
  • CSS3.Me — Encore un générateur de propriétés CSS3 pour se simplifier la vie avec : border-radius, box-shadow, background-gradient et opacity. Fix pour IE7 et IE8.
  • CSS Prefixer — Ecrivez vos déclarations CSS3 et demandez les préfixes vendeurs, c’est aussi simple que ça !

Dégradés (Gradients)

  • Générateur de dégradés CSS — Propose un nombre illimité de couleurs pour vos dégradés CSS3, quatre directions, une prévisualisation en direct, des options pour les anciens navigateurs et une compatibilité étendue pour IE et Opera pour utiliser les dégradés obliques sous Opera 9.5+ (en utilisant un fond SVG) et activer les filtres de dégradés sous IE. Propose une table de compatibilité des options des dégradés pour IE 5.5 — 8, Firefox < 3.6 et 3.6+, Google Chrome < 4  et 4, Safari < 4 et 4, Opera < 9.5 et 9.5+.
  • Ultimate CSS Gradient Generator — Editeur de dégradés pour générer les déclarations CSS3 à travers des sélecteurs de couleurs et des curseurs très proches de l’Outil Dégradé de Photoshop. Lire Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator.
  • CSS3 Gradient Generator — Sélectionnez la direction de votre dégradé, le format HEX ou RGB, les couleurs de votre choix : lorsque l’exemple dynamique vous plait, copiez le code mis à jour à la volée.
  • Quick 3-Color CSS3 Gradient Generator — Lorsque vous avez choisi vos trois couleurs, vous pouvez copier un des trois bouts de code en fonction de la direction que vous voulez pour votre dégradé : Top to Bottom, Left to Right ou Radial.
  • CSS3 Gradient Button Generator — Cet outil est conçu en Flash par esprit de conciliation entre les deux mondes que sont devenus le développement HTML5/CSs3/Javascript et Flash. L’interface est spartiate, mais complète. L’outil propose la gestion des état `:hover` et `:active`, ce qui être très pratique pour créer des boutons.
  • CSS3 Gradients — Le point sur les dégradés CSS3 introduit en 2008 par le moteur de rendu Webkit.
  • CSS3 Patterns Gallery — Collection de backgrounds composés de motifs éditables réalisés principalement avec les propriétés de création de dégradés.

Coins arrondis

  • Border Radius — Ce générateur de coins arrondis permet de choisir un rayon d’arrondi différent pour chaque angle ou identique pour tous. Il affiche directement la règle CSS avec les propriétés CSS3 pour WebKit et Gecko, en plus du format spécificié par le W3C, bien évidemment.
  • CSS3 Rounded Corner Generator — Choisissez le rayon de vos arrondis à l’aide de curseurs intuitifs. Possibilité de saisir également la couleur de fond pour le bloc, la largeur et la couleur de la bordure.
  • CSS Corners — Permet de spécifier l’arrondi, le dégradé et le padding pour votre bloc.

Border Image

  • Border Image Generator — Cette propriété fait partie des plus prometteuses pour les intégrateurs Web voulant utiliser des images pour avoir de belles bordures personnalisées. Avec Border Image Generator, il suffit de charger une image depuis votre poste de travail et de faire glisser les quatre curseurs pour déterminer la part de chaque côté qui apparaitra dans les bordures (Top, Right, Bottom, Left). Il est possible de jouer sur la taille et la répétition verticale ou horizontale des portions de l’image. Le code source de Border Image Generator est disponible sur github.

Boutons

Les bords arrondis, les ombres portées et les dégradés sont de bons candidats pour donner à certains liens l’apparence de boutons de type Call to Action. Voici quelques générateurs qui vous permettront de les paramétrer «vite fait, bien fait».

  • CSS3 Button Generator — Plusieurs paramètres sont pris en compte : le texte (famille, couleur, taille, ombre) ; le bloc (ombre, padding) ; la bordure (coin arrondi, couleur, style, largeur) ; le fond (dégradé, couleur de départ, couleur de fin) ; et l’état :hover du bouton. CSS3 Button Generator Propose d’ajouter les styles spécifiques à Internet Explorer pour l’affichage des dégradés.
  • Button Maker — Trois curseurs permettent respectivement de régler le padding, la taille du texte et le rayon de l’arrondi du bloc. Sept sélecteurs de couleur proposent la gestion des couleurs du dégradé : Top Gradient Color, Bottom Gradient Color, Top Border Color, Hover Background Color, Text Color, Hover Text Color et Active Background Color.
  • We Love Buttons — Set de boutons réalisés en CSS3 avec une feuille de style CSS prête à l’emploi.

Colonnes

  • Générateur de multi-colonnes en CSS3 — La répartition d’un pavé de texte en plusieurs colonnes qui est une pratique courante dans la presse est désormais à la portée de tous ! Spécifiez le nombre de colonnes et l’espace qui les sépare, la présence ou non d’un séparateur de colonnes, sa largeur, et son style.

Font-face

Media Queries

  • CSS3 Media Queries — Spécifications du W3C concernant le module Media Queries permettant d’adapter une page web selon les critères techniques ou les pré-requis des agents utilisateurs comme la largeur, la hauteur, l’orientation, la couleur, la résolution, etc.
  • Les Media Queries CSS3 — Article de fond en français expliquant Media Queries.

Transformation & rotation

  • CSS WARP — Ce générateur CSS3 permet d’afficher du texte le long d’un tracé vectoriel irrégulier avec un système de points d’ancrage pour à la manière d’Illustrator et de son outil Plume.

CSS3 Cross Browser ?

Les possibilités graphiques chatoyantes offertes par CSS3 ne sont pas disponibles dans tous les navigateurs. Seuls les plus récents ont commencé à les implémenter via un préfixe «vendeur» (lire Vendor-prefixed CSS Property Overview). Pour s’en sortir, il est utile de connaitre les propriétés CSS prises en charge par les navigateurs que vous avez décidé de «supporter» dans le cadre de votre intégration, qu’il s’agisse de privilégier la «dégradation gracieuse» ou «l’amélioration progressive», en mettant en place une solution Javascript ou un composant HTC pour émuler les propriétés CSS3 qui manquent à l’appel.

Vérifiez la compatibilité avec les navigateurs

  • CSS3 Selectors Test — Teste une quarantaine de sélecteurs CSS3 et précise leur prise en charge par votre navigateur. Un lien vers le sélecteur affiche un exemple d’utilisation avec le code HTML associé.
  • HTML5 & CSS3 readyness — Votre navigateur est-il prêt pour CSS3 et HTML5 ?
  • When can I use… — Cette table de compatibilité permet de s’assurer que les navigateurs ciblés prennent en charge HTML5, CSS3, SVG, etc.
  • Web Browser Standards Support — Table de compatibilité très complète sur la prise en charge des propriétés et sélecteurs CSS 2.1 et CSS 3. A garder sous la souris !
  • CSS Compatibility and Internet Explorer — Le point sur la prise en charge des sélecteurs ou des attributs CSS disponibles dans les différentes versions d’Internet Explorer, par MSDN (réseau Microsoft pour développeurs).
  • HTML5 & CSS3 Support — Tableau de compatibilité inter-navigateurs pour CSS3 et HTML5.
  • CSS3 learning tool et Webkit CSS3 Generator sont deux outils interactifs plutôt basiques permettant de voir dans le navigateur les propriété est prise en charge.

Assurez (un peu) la compatibilité

  • CSS3PIE (Progressive Internet Explorer) — Composant HTC permettant à Internet Explorer (IE6 — IE8) de «rendre» quelques propriétés CSS3 (border-radius, box-shadow, linear-gradient).
  • IE-CSS3 — Fournit à Internet Explorer la prise en charge de quelques propriétés du nouveau standard CSS3.
  • Transformie — Plugin jQuery permettant d’utiliser les transitions CSS dans IE via les filtres natifs d’Internet Explorer
  • ecsstender –Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention.
  • Modernizr — Ajoute des classes à l’élément <html> pour cibler les fonctions disponibles dans un navigateur spécifique. Pratique pour prévoir une dégradation gracieuse ou une amélioration progressive en fonction de vos contraintes d’intégration.
  • Selectivizr — Cette ressource Javascript rend disponible les différents sélecteurs et pseudo-classe CSS3 sur IE6 — IE8. Fonctionne avec de nombreuses bibliothèques JS comme jQuery, prototype, Mootools ou DoJo.
  • DD_Roundies — Petite bibliothèque Javascript permettant d’afficher des coins arrondis dans Internet Explorer via VML. Fonctionne plus ou moins bien dans IE6 — IE8. Il est possible de cibler uniquement Internet Explorer ou de forcer les propriétés `-moz-border-radius`, `-webkit-border-radius`, et `border-radius` dans les navigateurs compatibles.
  • -prefix-free — Pour seulement 2KB (gzippé) le script Javascript de Lea Verou ajoute automatiquement les préfixes «vendeur» pour les propriétés CSS3 et les navigateurs qui en ont besoin.

Tutoriels

Exemples CSS3

Expérimentations CSS3

Galerie CSS3

  • CSS3 Watch — Collection d’exemples d’utilisation créative, innovante ou inatendue de CSS3.
  • CSS3 Gallery – Showcase de designs de sites réalisés avec CSS.

Miscellanées

Linkographie

Ce guide sur CSS3 est en évolution constante et s’agrandit en fonction des découvertes et de vos suggestions. N’hésitez pas à vous manifester et à proposer vos liens et vos ressources CSS3 préférés.

Pour seulement 2KB (gzippé) le script Javascript

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/le-petit-journal-permanent-de-css3/feed 16 Près de 60 polices de caractère pour Google Font Directory http://css.4design.tl/pres-de-60-polices-de-caractere-pour-google-font-directory http://css.4design.tl/pres-de-60-polices-de-caractere-pour-google-font-directory#comments Wed, 22 Dec 2010 11:00:36 +0000 Bruno Bichet http://css4design.com/?p=8559 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 : 

<link href="http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC:regular&subset=latin" rel="stylesheet">
<style>
body {
    font-family: 'IM Fell DW Pica SC', serif;
}
</style>
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

flattr this!

]]> http://css.4design.tl/pres-de-60-polices-de-caractere-pour-google-font-directory/feed 14 Grille modulaire pour périphériques mobiles (iPhone, Android, iPad) http://css.4design.tl/grille-modulaire-peripheriques-mobiles-iphone-android-ipad http://css.4design.tl/grille-modulaire-peripheriques-mobiles-iphone-android-ipad#comments Fri, 19 Nov 2010 10:55:37 +0000 Bruno Bichet http://css4design.com/?p=8187 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 :

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

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

Le bonheur est dans la gouttière

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

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/grille-modulaire-peripheriques-mobiles-iphone-android-ipad/feed 4 Calculer une grille de mise en page « typo » avec le nombre d'Or http://css.4design.tl/grille-typographique-nombre-d-or http://css.4design.tl/grille-typographique-nombre-d-or#comments Thu, 18 Nov 2010 12:59:37 +0000 Bruno Bichet http://css4design.com/?p=7945 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

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

Brouillons en cours sur le même sujet

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

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/grille-typographique-nombre-d-or/feed 10 Le petit journal permanent de la TypOgrApHiE ! http://css.4design.tl/le-petit-journal-du-web-special-typo http://css.4design.tl/le-petit-journal-du-web-special-typo#comments Mon, 18 Oct 2010 11:47:36 +0000 Bruno Bichet http://css4design.com/?p=6518 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

  • 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.

Conseils, tutoriels et astuces

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

flattr this!

]]> http://css.4design.tl/le-petit-journal-du-web-special-typo/feed 24 La typothèque idéale par Smashing Magazine http://css.4design.tl/la-typotheque-ideale-par-smashing-magazine http://css.4design.tl/la-typotheque-ideale-par-smashing-magazine#comments Tue, 15 Jun 2010 06:15:48 +0000 Bruno Bichet http://www.css4design.com/blog-reloaded/?p=116 J’arrive un peu après la bataille, mais que voulez-vous, il fallait bien que mon pauvre Modem Olitec 56K (1) 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

(1) 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

flattr this!

]]> http://css.4design.tl/la-typotheque-ideale-par-smashing-magazine/feed 5