28172 sujets

CSS et mise en forme, CSS3

Salut à tous,

Je me pose une petite question à chaque fois que j'intègre une page à partir d'une maquette photoshop, et je me suis dit que ma réponse se trouvait peut-être ici Smiley biggrin

Ma question : à quoi correspond la taille d'une police, que ce soit dans un navigateur web, sur Photoshop ou sur n'importe quel autre support ?
Par exemple, si je définis une taille de 12px à une police, qu'est ce qui mesure 12px dans ma police ? Est-ce une lettre en particulier (une majuscule, une minuscule avec accent, une majuscule avec accent, etc...) ?

Si je pose cette question, c'est pour connaître l'espace que je dois définir entre deux lignes de texte qui sont séparées par un espace plus grand que le line-height habituel.
Exemple : j'ai sur ma page un titre suivi d'un paragraphe, séparés par un espace d'environ 20px. Mais cet espace pourrait varier entre 18px et 25px, selon que je commence ma mesure à la fin d'un "a" du titre, ou à la fin d'un "q" du titre, ou si je la termine au début d'un "a" du paragraphe, ou au début d'un "é" du paragraphe, ou au début d'un "É" du paragraphe, etc...
Du coup, si je veux respecter au pixel près la maquette photoshop qui m'a été fournie, je ne sais pas quel est le margin-bottom que je dois définir au titre.

Je ne sais pas si c'est très clair... En tout cas, si vous avez une réponse à me fournir, ce serait nickel !

Merci d'avance Smiley biggrin
Bonjour
Alors le line-height défini la hauteur de ligne c'est à dire l'écart entre 2 ligne de base.
La ligne de base est la ligne sur laquelle est posé ton texte.
Pour les lettres qui descendent en dessous (p q etc...) c'est la même chose.
En général on conseil 2 à 3 pts de plus que la taille de la police. Disons que pour une font de 14px tu choisiras un espacement de ligne de 18px environs. Mais ça dépend aussi de la largeur de ligne et de la police ( serif ou sans-serif ).
Personnellement je met line-height: 1.7em je trouve que c'est plus agréable à lire.

Et pour en savoir plus sur le typo imprime déjà ça ^^
http://issuu.com/typofonderie/docs/jfporchez_typeface_course
Bonjour,

Les deux premières réponses ci-dessus répondent un peu à côté il me semble. Je rappelle la question:
Gomo a écrit :
Par exemple, si je définis une taille de 12px à une police, qu'est ce qui mesure 12px dans ma police ? Est-ce une lettre en particulier (une majuscule, une minuscule avec accent, une majuscule avec accent, etc...) ?


Commençons par l'imprimerie traditionnelle. Avant les années 1960, on composait les textes avec des caractères de plomb qui ressemblent à ceci:
http://fr.wikipedia.org/wiki/Fichier:Metal_movable_type.jpg
Une «taille de texte» donnée est appelée un corps. Quand on composait un texte en corps 15, on utilisait des caractères de plomb ayant tous la même hauteur: 15 points typographiques, soit 5,3mm (je simplifie un peu Smiley cligne ). On peut voir une série de caractères de plomb de même corps dans l'image ci-dessus.

Ce qu'on remarque, c'est que la partie qui va s'imprimer (celle qui ressort) ne prend pas forcément toute la hauteur du caractère de plomb. Exemple en image:
http://fr.wikipedia.org/wiki/Fichier:Garamond_type_fi-ligature_2.jpg
On voit par exemple qu'il y a un espace en dessous de la ligne de base des lettres. Cet espace est utilisé dans certains caractères pour les jambes, hampes, enfin les parties qui descendent quoi.
Donc la «taille du texte» est en fait la taille du caractère de plomb, et elle est souvent plus grande que la hauteur d'une lettre quelle qu'elle soit.

Avec l'informatique on a gardé le même concept. Il y a une hauteur de caractère, et le dessin du caractère est à l'intérieur de cette hauteur mais est généralement plus petit. Dans certains cas, des parties de la lettre peuvent dépasser de cette hauteur, par exemple pour des diacritiques (accents).

Pour une illustration, on peut effectivement voir l'article indiqué par moust, en particulier la partie «Qu'est-ce qu'un "em"?» Les batons rouges (ainsi que les lignes violettes) représentent la taille du texte.
(Note que sur le document qu'indique joska la taille du texte n'est pas indiquée.)