JT Yeek : cadeaux originaux geek et design

bbxdesign

CSS + WordPress + Web Design

Mode normal → (affichage complet du blog)

Suivant

Précédent

police

bd cinéma couleur css firefox google gratuit ie6 interface iphone javascript jeu musique navigateur new york photo photoshop police vidéo wordpress

Lien

→ Google Web Fonts Families

Because web designers want font families, not just fonts.

Je ne l’aurais pas mieux dit. En effet, le seul souci de Google Web Fonts, c’est qu’il sépare les polices appartenant à une même famille.

Cube 02 : une police cubique

Billet

Sur Fontfabric, une police où tout part d’un simple cube : Cube 02.

police-cubique

Via SimpleBits

Ikea choisit Verdana

Billet

La firme suédoise IKEA, connue pour son pragmatisme et sa communication, va changer la police de son catalogue :  elle passe de Futura à Verdana.

ikea-verdana

Verdana, une police pour les écrans

Même si la typographie ne se résume pas au choix d’une police, il faut savoir que Verdana est une police réalisée pour être lisible sur petits écrans (vous testerez l’Arial en 9px bold, puis le Verdana, y a pas photo). Donc, elle est avant tout faite pour le web et pas le print.

Où est l’originalité ?

Tout internaute quasiment connaît Verdana, ou l’a déjà vue du moins. Quelle idée de l’utiliser comme vecteur de la marque ? Parce que le catalogue IKEA, tout le monde le connaît aussi (car présent dans chaque table basse française…).

Et puis, je sais pas mais je suis très fan de la police remplacée : Futura.

police-ikea

Si vous voulez, il y a même une pétition disponible.

Typedia : l’encyclopédie des polices

Billet

typedia-encyclopedie-polices

Fan de typographie ? Vous voulez en savoir davantage sur vos polices préférées ? Qui a réalisé cette police ? Quelle est son histoire ? Son designer ? Et quel est le vocabulaire pour les typos ? Autant de questions auxquelles essaye de répondre le très joli site Typedia.
Lire la suite →

Le rendu de texte sous Safari

Billet

Si l’on considère que le web design, c’est à 95% de la typographie (et c’est sans doute grandement vrai), le moteur de rendu du texte d’un navigateur devient un élément primordial dans le choix de ce dernier. Dans les navigateurs les plus répandus, il en existe un qui se démarque particulièrement dans ce domaine : Safari (que ce soit sous Windows ou Mac).
Lire la suite →

8 nouvelles polices à utiliser en CSS

Billet

8 fonts to use in css

Une chose que l’on nous apprend en CSS c’est d’utiliser les web-safe fonts. Ce sont en fait une dizaine de polices qui sont a priori existantes sur tous les ordinateurs. Ca permet à l’utilisateur de voir le site correctement, tel qu’il était prévu. Parmi ces polices il y a Arial, Verdana, Times…

Par conséquent, les intégrateurs se sont naturellement limités à utiliser les polices de cette liste. Mais en réalité, rien n’empêche d’en utiliser d’autres. C’est juste qu’en général, on ne prend pas ce risque là, parce qu’on ne connait pas la disponibilité des autres polices.

C’est pour ça que 3.7 Designs a établi une liste de 8 polices qu’on n’utilise pas en CSS mais qu’on devrait. Tahoma, Century Gothic, Palatino… Ce sont des polices qui sont très répandues, que ce soit sur Mac ou PC. On peut donc aisément les utiliser, en songeant bien sûr à spécifier des polices alternatives au cas où elles viendrait à manquer.

1 police + des variations + des em = 1 leçon de typographie web

Billet

Les web designers sont confrontés au problème du nombre de polices disponibles lorsqu’il s’agit de texte html. 9 polices (dont Arial, Verdana, Times…), ça semble peu. Et pourtant, il existe des solutions pour habiller une page rien qu’en jouant sur les variations d’une même police.

Un exemple : la page du Seed Conference.
1 police (Times) et de nombreuses variations (taille, couleur, type…) créent une page relativement jolie.

Encore plus intéressant : Phineas Jones a réalisé exactement la même page mais en utilisant des em (cadratin). Le résultat est excellent. Changez la taille de la police (Ctrl + et Ctrl – sous Firefox) : le redimensionnement est parfait. On croirait un pdf! Comparez avec la page originale, vous verrez la différence.

Via Simple Bits

Comparer les polices web avec Typetester

Billet

Typetester

Sur les pages web, nous sommes limités à 9 polices de caractères (Arial, Verdana, Times…). Cela semble peu (et ça l’est). Mais même avec ce faible nombre de polices, on peut jouer sur la taille, l’alignement, les couleurs, le type, l’espacement… pour apporter de la variété et du dynamisme à une page web. Il faut pour cela tester, et cela prend pas mal de temps, de taper une à une les propriétés CSS puis observer les changements, et comparer avec d’autres possibilités. Si vous voulez gagner du temps, je vous propose un outil très pratique (et très bien foutu) : Typetester.

Il s’agit d’un outil pour comparer des polices, sur la base de 3 colonnes (pratique pour voir les différences au premier coup d’oeil). Les modifications se font en “live” et tous les types (gras, italique, small-caps…) sont disponibles. On peut aussi copier-coller les propriétés d’une colonne vers une autre. Cerise sur le gâteau : on peut choisir dans la liste déroulante les polices installées sur son ordinateur, pour ainsi tester d’éventuelles créations d’images.

Populaire Tutoriels Fun