Mise en page typographique avec CSS3 et Lettering.js

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Mise en page typographique avec CSS3 et Lettering.js

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

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



3 commentaires pour “Mise en page typographique avec CSS3 et Lettering.js”

  1. Mael Poulain dit :

    bah j’ai bien regardé le code, il n’a pas exploité lettering.js. bizarre…

    • br1o dit :

      Si si, le script est appliqué à l’avant-dernière étape (avant la mise en forme du footer) lors du split du titre h1 en deux lignes. J’ai vérifié dans la démo est Lettering.js est également bien présent ;-)

    • Auré dit :

      Tout a fait d’accord je suis assez déçu par ce tuto… L’article est bien expliqué mais l’auteur se méprend completement sur l’utilisation de lettering.js qui sert avant tout à positionner les caractères et non à couper une ligne en 2 (css largement suffisant pour cela). Je mets de cote le design qui manque un peu de créativité (fortement inspiré de celui de J. Santa Maria pour le projet de lancement d’IE 9. )

      Bref, un article très détaillé mais à l’ouest sur lettering.js :/



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site