Comme il n’est pas toujours facile de savoir à quels tirets se vouer et comment les afficher, voici quelques éléments à garder à portée de clavier. Ça va sans dire mais mieux en le disant, il suffit de copier-coller le symbole affiché au début de chaque titre et l’affaire est dans le sac. Vous pouvez aussi cliquer sur les liens pour en savoir plus sur chaque symbole : son petit nom dans l’Unosode, son nombre dans l’Unicode et autres HTML-code, CSS, entité HTML, etc.
→Archives des tags : typographie
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. →
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. →
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. →
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. →
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 ? →
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. →
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. →
Un « Logothic » pour WordPress Basics
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! →