Quelle police employer pour un site "mixte" ?

Bonjour,

J'hésite au niveau du choix de la police de mon futur site internet qui comprendra une boutique en ligne ainsi qu'un important contenu éditorial.

Verdana me semble un peu trop "corporate" et très utilisé
Times pas adapté pour une boutique en ligne moderne
Arial un peu trop commun quoi que revient à la mode

J'avais pensé à du century-gothic bien pour l'écran et qui rendra pas trop mal à l'impression

Que pensez vous de ce choix et auriez vous d'autres idées ?
Merci à tous et meilleurs voeux !
Modifié par pan (02 Jan 2009 - 14:11)

Bonjour,

Arial et Verdana son très bien (verdana est moins belle en grande taille (mais c'est un avis personnel)).

Je ne suis pas sûre que century gothic soit "web-safe".
Modifié par Yasashii (02 Jan 2009 - 14:19)

Hello,

Personnellement, j'utilise de plus en plus Georgia. De nombreuses réserves ont été depuis longtemps émises concernant l'utilisation de fontes avec empattement sur internet, mais pour ma part, je pense que cela manque un peu d'arguments suffisant. Par contre, il faut bien penser à utiliser une taille de texte par défaut suffisamment grande (sachant que le visiteur est censé pouvoir grossir le texte à sa guise).

Seul truc à éviter à tout prix : comic sans !

Bonsoir et bonne année, meilleurs vœux également

pan a écrit :
J'avais pensé à du century-gothic bien pour l'écran et qui rendra pas trop mal à l'impression

Mauvaise idée, cette polices n'est pas pré-installée sur MAC et LINUX et n'est pas la plus répandue sur les système Windows.
D'autre part, même si elle peut passer pour des titres ou plus généralement des texte court elle n'est pas adaptée pour une lecture écran de longs textes.

Yasashii a écrit :

Arial et Verdana son très bien (verdana est moins belle en grande taille (mais c'est un avis personnel)).

C'est juste, la Verdana est plus intéressante à partir d'une taille de 11px et au dessous.

audrasjb a écrit :

Personnellement, j'utilise de plus en plus Georgia. De nombreuses réserves ont été depuis longtemps émises concernant l'utilisation de fontes avec empattement sur internet, mais pour ma part, je pense que cela manque un peu d'arguments suffisant.

Oui tu as choisis la meilleure police serif sachant que la Georgia a été conçu pour une lecture écran (comme de la Verdana ou la Trebuchet)
mais elle reste quand même scientifiquement un peu moins lisible qu'une police écran sans serif.
Choisir la Georgia comme toutes police serif, doit se faire d'avantage en connaissance de cause AMHA (connotations différente qu'une police sans empattement, présence d'un vrai italic contrairement aux sans serif citées, etc.)

@pan:
c'est vrai la Verdana est devenue très commune mais elle reste la plus lisible surtout en petit corps, tu dois y penser si jamais tu dois avoir des corps petits ou très petits.
Sinon dans les polices suffisamment répandues tu as
> la Trebuchet MS est une alternative intéressante mais présente certaines défaillances dans la gestion des approches de paires (espace entre les lettres) qui font qu'elle est moins lisible en petits corps qu'un Verdana par exemple.
> La Tahoma (une autre police écran) qui est grosso modo une version étroitisée de la Verdana, est la plus appropriée pour des "textes d'interface" (boutons, menu...) c'est d'ailleurs la police interface de Windows. Son avantages sur la Verdana est de pouvoir afficher plus de mots par ligne puisque la chasse des lettres est plus étroite (presque équivalente à une arial).
> Sinon la georgia peut être un choix intéressant notamment si certaines textes doivent être en italic, ce choix devrait aussi dépendre de la tonalité des textes.
> La Verdana est la plus lisible de toutes en partir à cause de la chasse large des caractères.

Ensuite dans les polices MAC intéressantes, tu as la "Lucida Grande", l'Optima ou la Geneva
qui ont une lisibilité assez bonne, j'en oublie peut-être certaines.

Voila je ne cite là que les polices alternatives les plus répandues.
Modifié par Hermann (15 Jan 2009 - 00:46)

Pour un site à contenu éditorial, il te faut une police qui accepte parfaitement les mises en formes. Je m'explique : on distingue mal l'affichage gras de Trebuchet MS, qui est très similaire à son affichage normal. Lucida Sans Unicode a un italique, et une petite taille illisible.

A toi de faire des tests avec les polices déjà présentées par les autres membres dans les réponses, mais celle que tu finiras par choisir devra être lisible en toutes circonstances / mises en formes rencontrées dans le contenu.

Noix de Coco a écrit :
Lucida Sans Unicode a un italique, et une petite taille illisible.

En fait Lucida Sans Unicode n'a pas d'italique, ni de bold, ni de bold italic. Juste une fonte regular. Donc:
- l'italique est en fait un rendu oblique extrapolé par le système/le module de gestion de l'affichage du texte, avec un résultat pas tip-top mais décent;
- même chose pour le gras, et là le résultat est vraiment pas terrible, surtout comparé à du Lucida Sans ou du Lucida Grande en bold (surtout que dans ce cas on n'obtiendra pas un bold mais un medium, vu que ces deux fontes sont distribuées avec un medium et pas de bold dans la plupart des configurations).

Le choix des fontes et, en CSS, des «collections de fontes» (font stacks) est vraiment compliqué car outre la disponibilité des fontes et leur aspect global, se rajoutent:
- Des différences de taille relative entre deux fontes d'aspect proche dans un même corps (font-size identique). Voir à ce sujet (avec Firefox 3): http://web.covertprestige.info/test/44-font-size-adjust.html
- Le fait que certaines polices ne disposent pas des quatre fontes de base (regular, bold, italic, bold italic). Ou bien qu'elles aient des graisses peu classiques (thin ou medium à la place du regular, medium ou heavy à la place du bold). Le font-weight:normal sera-t-il de l'extra-thin, du thin, du regular, du medium? le font-weight:bold sera-t-il du medium, du bold, du heavy, de l'extra-bold?
- Le fait que certaines fontes ne disposent pas de toutes les informations qui vont bien pour adapter leur rendu dans les petits corps. Une fonte pour l'écran, c'est surtout une fonte dont le dessin peut être adapté assez largement (via des algorithmes et des données dans le fichier de fonte) pour un affichage en 7px, 8px, 9px, 10px, 11px, etc. Certains systèmes et surtout mécanismes de lissage rattrapent en partie le problème, mais une Helvetica d'Adobe ou Helvetica Neue sous Windows XP avec le lissage standard (pas ClearType), c'est assez catastrophique (faut-il alors demander du Helvetica, Arial, sans-serif, ou inverser l'ordre d'Arial et Helvetica?).
- Etc.

Pour ma part j'utilise les collections de fontes suivantes (que je modifie à chaque fois que je rencontre un problème, donc c'est pas du super définitif):

font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
font-family: Courier, "Courier New", FreeMono, "Liberation Mono", monospace;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
font-family: Impact, "Arial Black", sans-serif;
font-family: "Lucida Sans", "Luxi Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: Times, "Times New Roman", "Liberation Serif", FreeSerif, serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;

Pour des choses un peu plus osées (mais plus casse-gueules), voir par exemple:
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

Teasing: bientôt un ou deux articles pour synthétiser tout ça sur Alsacréations Véhtroi.
Modifié par Florent V. (13 Jan 2009 - 23:21)