Archives des tags : typographie

Pas encore de description pour le tag typographie. Suggérez à l'administrateur du site de d'y remédier.

Bariol, la cerise sur la typo

Bariol est une toute nouvelle famille de police de caractère créée par atipo. Elle est arrondie et légèrement condensée. Familière mais pas «mièvre», Bariol a la particularité — essentielle à mes yeux — d’être particulièrement lisible, même dans les petits corps, grâce à des formes sobres et une construction sans fioriture. Voulez-vous en savoir plus ?

Source Sans Pro — La première police de caractère open source par Adobe

Adobe vient de mettre Source Sans Pro à la disposition du public. C’est une grande nouvelle pour les amoureux de la typographie en général et des webfonts en particulier. Cette police de caractère open source a été dessinée par Paul D. Hunt (@pauldhunt sur Twitter) dans le but d’offrir une police de caractère lisible et agréable pour les courts contenus et les textes longs. Pour y parvenir, l’auteur s’est inspiré de News Gothic et Franklin Gothic tout en s’assurant que les caractères 1, i, I ou L soient bien différenciés. Voulez-vous en savoir plus ?

Check your <body> avec le W3C

Suite à l’arrivée W3C mobileOK Checker sur mon écran radar (merci @flashxman), je me suis dit qu’il pourrait être utile de faire une liste des outils proposés par le W3C pour vérifier la conformité de nos sites web par rapport aux standards, aux bonnes pratiques ou aux performances web. D’une manière générale, ces outils œuvrent pour l’amélioration de la qualité web. Voulez-vous en savoir plus ?

940.css version fluide — Grille de mise en page en pourcentage

La grille de mise en page 940.css — issue de la technique Calculer une grille de mise en page « typo » avec le nombre d’Or — existe désormais en version fluide avec des valeurs exprimées en pourcentage à la place des pixels. J’ai choisi des pourcentages permettant d’utiliser la grille de 940.css «version fixe» lorsque le .container est réglé sur 940px. Ceci permet de caler les blocs sur la grille fixe placée en background et de remettre une valeur en pourcentage sur le container lorsque la mise en page est terminée. Voulez-vous en savoir plus ?

microjs — 200 micro-frameworks Javascript

Microjs.com présente près de 200 frameworks Javascript petits mais costauds. De combien de lignes de code avez-vous besoin pour votre projet de site web : 50K, 100K, 150K ? Ok, nous aimons tous nos bons vieux gros frameworks comme jQuery ou Mootools et nous en tirons souvent le meilleur. Mais combien de fois les avons-nous utilisés à mauvais escient ? Combien de fois avons-nous tenté d’écraser une mouche avec un tank, alors que des solutions bien plus adaptées étaient à notre portée ? Voulez-vous en savoir plus ?

Tutoriel grille verticale en CSS par Smashing Magazine

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. Voulez-vous en savoir plus ?

9 ressources pour web designer

Il ne se passe pas une journée sans qu’un ou plusieurs liens ne tombent dans ma veille technique et attirent mon attention. Ces liens se retrouvent généralement sur mon compte Diigo. En voici une sélection triée sur le volet qui comprend des informations sur les standards du web et le W3C, l’accessibilité des icônes créées avec font-face, des ressources pour donner des couleurs à vos sites, des tutoriels pour apprendre Javascript et les API’s de Google, etc. Voulez-vous en savoir plus ?

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

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. Voulez-vous en savoir plus ?

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. Voulez-vous en savoir plus ?