[Résolu] Ecart entre font-size en px et ce qui est mesuré.

Bonjour,

je pose un titre en lui appliquant un font-size de 30px, pour coller avec la charte que l'on m'a filée et où j'ai bien mesurée que le titre correspondant mesurait 30px.

Sauf que... en mesurant le titre (Texte en capitales) il ne mesure que 24px.

La font est Arial.

Y-a-t-il une raison qui explique ce décalage entre font-size et font-size réelle?
Si oui, quelle règle puis je appliquer pour être sûr que mon titre fasse bien la bonne taille?

(Le plugin utilisé pour mesurer le résultat en ligne est Measure It)

Cdt,

Salut Ange,

chaque navigateur gère un peu à sa sauce les dimensions, il te sera difficile d'avoir un rendu 100% identique. Mais de là à arriver à un tel écart c'est violent.

Une petite question avant d'aller plus loin : comment mesures-tu tes tailles ? Parce qu'une typo ne se mesure pas n'importe comment : explications.

Ju
Modifié par Julien Optea (13 Sep 2012 - 16:14)

Bonjour Julien,

c'est un titre en capitales (les grandes donc), et je mesure de la base de la lettre à la pointe.

Je m'attends donc, pour un font-size de 30px, à mesure de la base à la pointe une hauteur de 30px. Je m'attendais à un problème de résolution mais ça n'a rien à voir, si je change de font pareil.

Pour préciser, je ne prends pas en compte le fut de la lettre Q ou J (ou P) dans les mesures, dans les fonts où même en majuscules elles ont tendances à avoir un empatement.

Une idée pour améliorer le rendu?

(mes navigateurs: Chrome et FF à jour sur Mac)

edit: en langage typographique ( classe) c'est donc la hauteur courante que j'ai mesurée et que je compare à font-size.

Donc ma question devient: comment expliquer l'écart entre font-size et la hauteur courante d'un texte? Et comment pallier à ce problème de manière automatique si cela est possible ?

(merci pour le lien)
Modifié par ange16 (13 Sep 2012 - 16:24)

Sauf erreur de ma part le font-size correspond au corps du texte pas à sa hauteur courante.

Quelqu'un pour confirmer/informer ?
Modifié par Julien Optea (13 Sep 2012 - 16:43)

C'est bien ça !

Pour terminer mon problème, comment puis je imposer à mon texte en majuscule une taille de 30px ? En minuscule le corps fait bien 30px mais pas en majuscules du coup (dois-je prévoir un ratio de 5/4 de la taille? est ce que ça va se vérifier constamment?)

Merci de ton aide, je trouve ce souci très "fun"

edit: j'ai remarqué que j'avais ma font qui fait 3/4 de la taille que j'avais prévu.
J'ai donc supposé que le % de mon font-size affecté à la partie "jambage inférieur" était de 25%.

Donc en appliquant en cas de texte en majuscule une taille de 5/4 de la taille mesurée sur la charte graphique je retombais sur mes pattes. Je réaliserai quelques tests pour vérifier que c'est pas un (gros ?) coup de bol.

Je vais attendre un peu avant de mettre en résolu, voir s'il n'y pas mieux.

Cdt

edit2 : et du coup, tu penses qu'il y a une règle css qui peut s'occuper de ça ? pour pallier au comportement uppercase et préserver le même font-size
Modifié par ange16 (13 Sep 2012 - 16:54)

Je viens d'installer MeasureIt, je n'ai pas ton problème.

Tiens-tu compte du 'Jambage inférieure' dans ta mesure ? Certes il n’apparaît pas en capitale avec Arial mais il existe bien.

"qL" : on mesure ?

J'avoue que j'aime bien ton problème

En inté tu peux toujours te créer une classe :

.capitale{text-transform:uppercase;font-size:1.25em;}

C'est un peu lourd, ton rapport de 25% ne sera pas toujours le même. Ce qui me chagrine c'est que quand tu mesures ta maquette tu trouves 30px sur les capitales...

Ta maquette est-elle un jpg ou un fichier source ?
Modifié par Julien Optea (13 Sep 2012 - 17:00)

un fichier png, 30px te semble bien trop grand pour un titre h3?

En tout cas mystère résolu, merci beaucoup

(j'ai vérifié sur le psd, c'est bien du 30px qui a été choisi: cela change-t-il quelque chose niveau intégration? )

Tu demande au gars qui mets ses h1 en 162px si 30px ça fait beaucoup ? euh non ça ne me dérange absolument pas

Y'a pas de quoi, un mystère résolu est un futur problème anticipé

J'ai fais des tests sous Photoshop, une capitale Arial à 30px ne "mesure" que 22px, elle n'ont pas été étirées ?

Oui, elles sont étirées

Je passe en résolu, merci de ton aide

Ahah, merci les graphistes print