Bien développer

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

9 May

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

5 May

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.

5 bonnes pratiques CSS

Billet

31 Jan

En attendant le prochain bdbx (déjà prêt), je vous propose 5 bonnes pratiques en CSS. A force de bosser des feuilles de style, il m’arrive de ne plus faire quelques erreurs même si je n’arrive pas encore à toujours trouver la solution optimale directement. Ici, je ne parlerai pas de pratiques basiques plutôt évidentes (comme par exemple d’utiliser un maximum les notations raccourcies), mais d’autres plus subtiles auxquelles je ne pensais pas auparavant.

Ne pas utiliser de position:absolute sur un élément dont on ne connaît pas la hauteur
Bien notifier qu’un lien est en display:block
Ajouter un background-color avec le background-image
Utiliser le position:relative en dernier recours
Mettre un id au body

Lire la suite →

«1 2 3 45