Typographie web, "em" et / ou "pixel" pour les mar

Suite à la re-lecture forte intéressante de l'article "Typographie web : gérer la taille du texte avec les « em »", j'ai lu pas mal d'articles sur le rythme vertical.

En regardant le style d'Alsacréations et d'autres sites d'intégrateurs, je me pose qqs questions :

Les "font-size" sont toutes définies en "em" mais pas les marges de la typographie.

Exemple : en page d'accueil de Alsacréation, les h2 ont des marges en "pixel" alors que celles des paragraphes sont fixées en "em".

Comment déterminer les éléments sémantiques à fixer en "em" ou en "pixel" ?

Bonjour aussi...

Il n'y a aucun rapport entre la sémantique et le fait de choisir telle ou telle unité de mesure pour fixer une dimension.

De manière générale, l'unité em est utilisée essentiellement pour la typographie. Elle peut être utilisée pour la mise en page, mais elle est plus facilement casse gueule qu'une unité relative comme le pourcentage.

Le pixel est souvent préféré pour les marges, car si elles sont fixées en unités relatives, elles peuvent prendre une trop grande proportion en grande résolution, ce qui brise un peu l'équilibre de mise en page voulu.
Dans le cas d'Alscréations, la largeur du site étant fixe, donner une marge en em ne pose pas ce genre de problème. Cela revient à la même chose que le pixel, avec juste une valeur différente, par contre en cas d'agrandissement de la taille de texte par l'utilisateur, les marges changeront.

En espérant t'avoir éclairé suffisamment.

Oui, merci beaucoup pour ta réponse.

La seule chose que je ne comprend toujours pas, c'est pourquoi (comme dans le site d'Alsacreation), certains éléments typographiques ont des marges en "pixels" et d'autres en "em".

Comment se fait le choix ?

Bonjour et bienvenue Carine,

carine-Nethik a écrit :
Comment se fait le choix ?

Le choix se fait soit au feeling, soit pour répondre à des contraintes (techniques, ergonomiques, esthétique...) particulières. Difficile de donner une réponse plus précise puisqu'il n'y a pas dans ce cas précis de "norme" définie.

Salut,

Dans le cas d'un seul concepteur, on aurait pu parler de schizophrénie, mais ils sont plusieurs, ou on est rassurés par leur santé mentale !

Ou alors ils ont joué les unités de mesure à pile ou face !

Merci pour vos réponses !

Pour ma part, je trouve logique de mettre les marges en "em" sur un élément typographique qui a une taille fixé lui-même en "em".

Bonjour à tous,

Ce sujet tombe bien, je voulais poster un dernier souci que je rencontre sur mon template. Il n'y a plus que ça à résoudre et c'est bon !

Dans un bloc de la sidebar, j'ai mis des icones de réseaux sociaux, chacunes avec des marges en px et elles sont alignées sur une ligne. Mais lorsque je zoom, elles se décalent quand même... (et donc j'ai deux lignes).

<span class="inblocimgr"><a href="#"><img src="img/facebook.png" alt="facebook" /></a></span>
<span class="inblocimgr"><a href="#"><img src="img/twitter.png" alt="twitter" /></a></span>
<span class="inblocimgr"><a href="#"><img src="img/linkedin.png" alt="linkedin" /></a></span>
<span><a href="#"><img src="img/feed.png" alt="rss" /></a></span>

.inblocimgr {
	margin-right: 6px;
}

Merci pour votre aide

Gimx > Impact sur le rendu de la mise en forme du code HTML

Hello,

Donc Laurie-Anne, tu viens de m'expliquer que j'ai passé 2 heures à "bidouiller" hier soir, à essayer les marges et tout le tralala pour rien. Alors que ça se passait dans la source...

Plaisanteries mises à part, merci ça fonctionne

C'est la première fois que j'entends parler de ça et je ne pensais pas que ce genre de choses pouvaient jouer sur la mise en page. Sans toi et Alsa, j'aurais chercher longtemps je crois

Bon week-end.
Modifié par Gimx (20 Feb 2010 - 16:26)