28172 sujets

CSS et mise en forme, CSS3

Vrai ou fausses variantes ?

Bonjour,
Je me pose la question suivante : imaginons sur un site, j'utilise une seule typographie.
Disons Roboto pour être simple.
Si je l'inclue via GoogleFont je peux choisir les variantes que je prend : 300,400,500 etc .
Imaginons que je prenne uniquement la régular 400 et que j'ai dans mon code : 

body{
 font-family:Roboto,sans-serif;
 font-weight:400;
}
em{
 font-weight:300;
 font-style:italic; 
}
strong{
 font-weight:bold; // 800 
}


Aurai je exactement le même résultat que si j'inclue toutes les variantes via Google Font ?

A ce compte là, si je compte acheter la fameuse police proxima nova, je peux donc très bien acheter uniquement la version régular et forcer le rendu bold et light dans le css sans perdre en qualité ?
Modérateur
Bonjour,

a écrit :
Aurai je exactement le même résultat que si j'inclue toutes les variantes via Google Font ?

Évidemment non. Le résultat est toujours meilleur avec la bonne police. Cependant pour des raisons de coût (monétaire et performance) on ne met pas forcément toutes les variantes.

Premièrement, la seule chose que le navigateur simule est le faux-gras et le faux-italique (et les deux combiné). On ne peut pas obtenir de variante plus légère comme le light.

Suivant la simulation c'est dramatique (voir image jointe, à gauche les vraies et à droite les simulées, c'est la simulation photoshop donc pas forcément équivalente à celle de ton navigateur). Une police à empattement l'italique est très redessinées, alors que pour une linéale une italique simulée conviendra très bien pour d’occasionnelles exergue dans ton texte.

upload/1499264721-32231-typos.jpg

ça dépend aussi de l'utilisation sur ton site, si tu met tes titres en gras, envisage d'acquérir la version bold. En grande taille ça rendra forcément mieux. Si le gras n'est utilisé qu'en de rares occasion tu peux envisager de t'en passer.
Etant donné que je part sur une seule typographie sur mon site, Proxima Nova en l'occurence (version simple) , je pense acheté :

- La version régular (d'après ce que tu m'a dit , on ne verra pas trop la différence sur 16px / 400 fw sur les styles italic et gras.
- La version Bold
- La version light
- La version Bold Italic .
- la version light italic .

Ainsi les éléments ayant une grande font-size seront bien rendus avec leur propre style/variante.
Quand aux em, strong en régular sur du 16px, la différence devrait être minime, et ça évitera de surcharger l'appel ou l'import .

J'ai bon ?
Modérateur
Plutôt.

Pour Bold Italic ça dépend si tu utilises beaucoup cette variante. Elle est très rare donc souvent on l'ignore, après ça dépend de ton style.

Pour light italic idem.

C'est un jeu délicat de sacrifices entre la beauté et la performance. Plus une variante est présente plus c'est intéressant de l'ajouter, mais 3 variantes c'est plus performant que 5.

ça dépend donc aussi de ton placement et du reste de ton site. Si le reste est très léger ce n'est pas très important. Si le reste est déjà lourd, multiples scripts et/ou que la performance est capitale pour toi, il faut minimiser au max.
Sujet clos
Aller à