Webdesign Friday (#wdfr) - La communauté des webdesigners francophones

Les vendredis Webdesign !Chaque semaine, un nouvel article par un professionnel du Web.

S02E02 : Les webfonts

S02E02 : Les webfonts

Nouvelle session #wdfr sur Twitter.
Cette fois, le sujet sera simple, mais vaste : les webfonts. Et qui dit webfonts, sous-entend solution, rendu, compatibilité, accessibilité, rapidité, etc. C’est dire s’il y a de quoi aborder.

Le format Cufon / sIFR

Le format Cufón est un fichier JavaScript comprenant les tracés vectoriels stockés en JSON, calculés à partir du fichier de police fourni lors de la génération de ce fichier.
Le format sIFR (Scalable Inman Flash Replacement) est également un fichier JavaScript, qui remplacera les éléments textes par leurs équivalents en Flash.

Ces formats ne semblent pas faire l’unanimité. Certains les ont choisis pour le rendu, d’autres les ont abandonnés pour cause de lourdeur, en faveur de la technique CSS @font-face.

@mourtazag a dit à 13:11
Cufon, ça arrive. Ponctuellement, pour préserver la qualité du rendu.#wdfr

@spykrew07 a dit à 13:12
#wdfr Avec font-face, le code html reste propre :D

@seb_collet a dit à 13:12
#wdfr Cufon pour assurer un rendu ok sur Mac ET surtout sur PC

@spykrew07 a dit à 13:13
#wdfr Et pas de temps de chargement aussi ! Parcequ’avec Cufon, c’est moyen la demi seconde qui se passe pour utiliser la nouvelle font…

@kaduma a dit à 13:14
font-face est plus simple à utiliser et évolutif que Cufon, mais ce dernier bénéficie d’un bon rendu mais c’est plus long à charger #wdfr

@Twikito a dit à 13:29
#wdfr Pour moi, comme le rendu dépend beaucoup trop de l’OS et du navigateur, je préfère m’atteler à plus important, donc font-face !

Le choix des fonts (lisibilité, x-height, rendu)

Non seulement le rendu, mais également la lisibilité et la hauteur de ligne rentrent en compte pour le choix des fonts.

@VladanF a dit à 13:18
@wdfriday #wdfr Lisibilité en 1er et le rendu en 2nd en ce qui me concerne!!! ;o)

@BoiteAWeb a dit à 13:19
lisibilité en premier bien sûr, gestion des accents ensuite, rendu en dernier #wdfr

Webfonts ou websafes pour les projets clients

Il semblerait que beaucoup se soient mis à l’utilisation des webfonts pour leurs projets clients, à plus ou moins grande échelle.

@PUShAUNE a dit à 13:33
@wdfriday De plus en plus de webfont, si elles ont un pendant websafe pas trop dégueu dans ma créa #wdfr

@Skoua a dit à 13:35
@wdfriday @wdfriday Webfonts à fond, puis websafe en fallover bien sûr. Ca ne coûte rien de s’en servir tant que ça reste de bon goût. #wdfr

@sebbarraud a dit à 13:36
@wdfriday Pour le contenu, je reste encore sur les websafes pour les titres pas de soucis par contre #wdfr

Services gratuits ou payants

Pour l’utilisation de la technique CSS @font-face, des services en lignes sont mis à dispositions des web designers pour choisir leurs fonts, et les utiliser via CDN (Content Delivery Network) ou non, notamment Font Squirrel (gratuit, font en téléchargement), Google Webfont (gratuit, font en CDN ou téléchargement), Typekit (payant, font en CDN), Fontdeck (payant, font en CDN), etc.

@Skoua a dit à 13:44
@wdfriday Que du Google Webfonts et Font Squirrel jusqu’ici. #wdfr

@PUShAUNE a dit à 13:44
Font Squirrel pour ma part, les font sont de qualité en général. #wdfr

@julienknebel a dit à 13:46
@wdfriday perso Google Fonts je l’utilise quand JE suis le designer et sinon rien d’autre à part font-face #wdfr

@Skoua a dit à 13:50
@wdfriday Quand un client veut une typo spécifique, je l’achète mais ça arrive rarement. On trouve souvent son bonheur gratuitement. #wdfr

Malheureusement, ici, pas de retour d’expérience d’utilisation de services payants.

Facturation ?

Pour l’emploi d’un service payant, il semble logique qu’il sera facturé au client. La question, ici, se pose pour les services gratuits : quand est-il de l’utilisation de cette technique ? Faut-il facturer un savoir faire ? Une plus-value graphique ? Un temps de recherche ?

@spykrew07 a dit à 13:55
@wdfriday Je ne pense pas que “webfont” fasse parti du vocabulaire d’un client, donc non on ne peut pas facturer cette utilisation… #wdfr

@julienknebel a dit à 13:55
@wdfriday non jamais #wdfr

@kaduma a dit à 13:55
@wdfriday oui bien sur si y a achat de police, le client la paye #wdfr

@PUShAUNE a dit à 13:56
@wdfriday C’est un peu de l’arnaque, faire payer une typo gratuite #wdfr

@Skoua a dit à 13:59
@wdfriday Ca fait partie du design, donc la recherche typographique est incluse dedans. Si on en achète une, c’est dedans aussi. #wdfr

La réponse semblait donc évidente : pas de facturation.

Rachat de Typekit par Adobe : avis ?

La nouvelle est effectivement tombée le 3 octobre 2011 : Adobe a racheté Typekit (voir chez Typekit, ou chez Adobe). Adobe étant leader sur le marché des éditeurs, la question est donc évidente : à quels changements doit-on s’attendre suite à cette nouvelle ?

@Skoua a dit à 13:59
@wdfriday J’approuve, Adobe c’est quand même les meilleurs là-dedans, il amélioreront ça et l’intégreront dans leurs softs. #wdfr

@seb_collet a dit à 14:03
@wdfriday ça me semble une bonne chose, Adobe ayant plutôt de l’expérience en PAO :) #wdfr

Dommage qu’il n’y ait pas eu plus d’avis sur ce point.

Conclusion

Finalement, à travers ce tweetup, on se rend compte que l’utilisation de fontes spécifiques a encore un peu de chemin à faire auprès des web designers. Ils sont de plus en plus nombreux à utiliser @font-face pour sa simplicité et rapidité d’utilisation, comparée à Cufon ou sIFR, mais cela semble rester marginal.
L’arrivée de Google Webfonts semble avoir accéléré considérablement l’utilisation des nouvelles polices, comme notamment Droid Sans, Droid Serif ou encore et peut-être surtout Lobster.
Par contre, l’adoption des services payants ne semble pas encore intéresser la plupart des designers, le prix pouvant être un facteur important. Qui plus est la facturation auprès des clients peut s’avérer complexifiée, surtout quand la plupart ne comprennent pas bien pourquoi ils devraient en plus pour de nouvelles polices sur le web.

Nous ferons probablement un autre tweetup sur le sujet l’année prochaine en abordant aussi les solution JavaScript qui permettent une meilleure utilisation de la typographie sur le web.

A propos de l'auteur : Matthieu Bué

Je suis Web designer, intégrateur spécialisé on-page SEO, formateur, résidant à Bordeaux, spécialisé dans les dernières technologies d'édition Web, notamment en responsive, HTML5, CSS3, jQuery et accessibilité. Trouvez-moi sur Twitter et Google+, ou visitez matthieubue.com et twikito.com.

  • Anonyme

    Comme je le disais à Matthieu sur Twitter. Cufon est une solution à éviter. Pourquoi ?

    1- Essayez de sélectionner un texte ou la typo est générée par Cufon, impossible.
    2- Chez moi le rendu est souvent (systématiquement) baveux. Super propre un template avec des typos qui bavent, n’est ce pas ? ;) Je ne pense pas que mon PC soit l’exception.
    3- C’est lourd, beaucoup plus que de mettre une font-face par exemple
    4- Ce n’est pas accessible (t’as vu la tête du code produit, un casse-tête incroyable)
    5- Avoir un H1 ou autre HN avec 500balises qui se baladent dedans c’est cool non ?

    Et je dois encore oublier des trucs.

    Pour la santé du web, n’utilisez pas/plus Cufon ! Nous avons des solutions bien plus performantes et simples. Puis avec font-face plus de raison, faites simple, faites efficace, faites du propre utilisez des technologies moderne.

    sIFR je ne connais pas mais rien que le nom me fait peur. Ne pas oublier que nous concevons le site non pas pour nous mais pour des internautes, perso avoir un putain de carré gris sur un titre je pense que je verrais rouge (je bloque le flash). Avoir un site qui met dix plombes à charger pour avoir un rendu des typo comme il faut, est-ce utile ?

  • http://twitter.com/Fran6 Francis Chouquet

    Il est clair que les solutions comme Cufon et sIFR sont dépassées du fait des @font-face et services proposés. Par contre, il est encore un cas pour lesquelles elles sont utilisées c’est pour les fontes qui n’ont pas de licence web. Certaines fonderies autorisent l’utilisation de Cufon et sIFR parce qu’il n’est pas possible de récupérer les fichiers de la police comme c’est possible avec font-face.

    Pour ce qui est de Cufon, il me semble que la dernière version permet la sélection du texte.

    Mais je suis d’accord que ce sont des solutions du passé et qu’il existe suffisamment de choix de web fonts pour ce passer d’elles ;-)

  • http://twitter.com/Nico3333fr Nicolas Hoffmann

    Je déconseille aussi vivement Cufon : j’ai eu énormément de bizarreries avec les tailles de fontes, des tas de problèmes avec le code généré.

  • http://anggge.me Ange Chierchia

    Effectivement, les dernières versions de Cufon permettaient de sélectionner, copier et coller du texte sans problème.

    Personnellement j’aimais beaucoup cufon, mais de là à l’utiliser encore maintenant… Si ta police n’existe pas en webfont, tant pis, utilise en une autre, ou mieux : une websafe, tout simplement.

  • http://twitter.com/nbirckel Nicolas BIRCKEL

    En complément, un article sur line25 (en) qui propose un pour/contre des différents services existants:
    http://bit.ly/uACaa1

Live Tweet

Dans le Blog

Newsletter

Vous souhaitez être tenu au courant des dernières nouvelles concernant le WDfriday, événements, conférences, barcamps, etc… ?

N'hésitez pas à vous inscrire à notre newsletter !