La typographie sur le Web.

  • Published on
    29-Nov-2014

  • View
    583

  • Download
    1

Embed Size (px)

DESCRIPTION

Ce document vous aidera mieux distinguer les polices d'criture et comment les utiliser sur le Web.

Transcript

  • 1. La typographie sur le web Avec linformatique, le scribe du web se voit dot dune trs large palette de polices. Devant ce foisonnement, comment les distinguer ? Pour mieux comprendre les jeux typographiques, il est dabord ncessaire de revoir son vocabulaire ! Sommaire Les caractristiques : .................................................................................................................... 2 Ligatures ................................................................................................................................ 2 Monospace ............................................................................................................................ 2 La taille ................................................................................................................................... 2 Serif ........................................................................................................................................ 3 Sans serif ................................................................................................................................ 3 La taille ................................................................................................................................... 3 Les caractres spciaux ......................................................................................................... 3 Comment sy retrouver ? .............................................................................................................. 4 Notre avis : ...................................................................................................................................... 5 Le lecteur ............................................................................................................................... 5 Avec ou sans serif ?................................................................................................................ 5 Linterligne : ........................................................................................................................... 5 La Comic sans MS .................................................................................................................. 6 La Gotham.............................................................................................................................. 8 Calibri ..................................................................................................................................... 8 Myriad pro ............................................................................................................................. 8 Les icnes ............................................................................................................................... 8 La rglementation.................................................................................................................. 9 Le mot de la fin .............................................................................................................................. 9
  • 2. Les caractristiques : Ligatures : liaisons entre certaines lettres, effet visuel plus propre ou plus design selon les cas. Monospace : chaque caractre utilise un espacement unique La taille des caractres se dfinissent gnralement en px (px = pixels) cest--dire sa hauteur en pixels. Il ne faut pas confondre px et pt (point)
  • 3. Chaque ligne est spare de la prcdente par un interligne (dsign par em ).Par exemple 1.5 em = 150% de la hauteur des caractres. Serif : avec empatements Sans serif : sans empatements Cet aspect est important dans la cration web car certaines typographies ne sont pas compatibles avec certains logiciels. Cest la raison pour laquelle sur le web, les feuilles de style comportent au moins deux typographies : la premire est celle souhaite, et la seconde est celle par dfaut dans le cas o la premire nest pas comprise par le logiciel ; il sagira dune typo sans serif, car elle est la plus anciennement utilise sur les postes informatiques. La taille standard des caractres dans un document est de 16px (px = pixels) et chaque ligne est spare de la prcdente par un interligne (dsign par em ). Les caractres spciaux comme ne sont pas automatiquement inclus dans les polices dcritures ; veillez donc ce quils soient pris en charge par la police choisie.
  • 4. Comment sy retrouver ? Un outil vous permettra de faire un tour dhorizon des typographies : la classification VoxAtypi. Elle constitue un repre chronologique des grandes familles de police dcriture. Dans cette taxinomie, on peut relever plusieurs familles intressantes pour le web : - Mcanes : issues de la rvolution industrielle, aspect brut et srieux. - Linales : trs populaires sur le web (sans serif). - Didones : utilises dans le domaine de la mode. - Incises : rappellent lcriture la main, les temples grecs ; ne convient pas sur le web car elle est difficile lire. Pour vous procurer des polices dcritures, il y a Google fonts (en anglais) qui rpertorie un vaste choix de typographies que lon peut slectionne en fonction de critres tels que : avec ou sans serif, pour les titres ou non (display), effet crit la main , lpaisseur des lettres (thinkness), la largeur des caractres (width), plus ou moins en italic (slant), et les faire apparatre sous la forme de phrases (sentence), de paragraphes, etc.
  • 5. Notre avis : Lcriture est un outil qui a 5000 ans dexistence et les diffrents courants typographiques apparus depuis cette re sont aujourdhui imprims dans nos esprits avec toutes sortes de rfrences associes. De ce fait, les typographies constituent un lment important de la communication au sens o elles agissent comme des repres dutilisation. La typographie est pour certains une vrai passion, avec des calculs gomtriques prcis qui relvent quasiment de larchitecture. On peut vite tre submerg. Mais dans la ralit, la personne qui travaille quotidiennement avec les polices dcriture, slectionne une dizaine de typographies qui lui semble les plus intressantes et avec lesquelles elle va travailler. Le lecteur est videmment au cur de la rflexion sur le choix dune police. Il faut se mettre sa place : la tranche dge, les sujets abords, le thme gnral du site. Avec ou sans serif ? - Lcriture avec emptements est plus reposante pour lil car les lettres sont plus lies ; elle est donc privilgier pour les textes de plusieurs lignes (paragraphes, textes longs ou explicatifs comme les mmoires, les livres). - A linverse, les lettres sans emptements ont t cres pour tre bien lisibles sur les premiers crans dordinateurs. Elles sont haches , on passe plus de temps les lire et elles attirent rapidement lil ; cela conviendra donc plutt aux titres, noms de catgorie et phrases courtes (comme sur twitter). Lcriture serif est un repre dutilisation dune toute autre dimension, car elle rappelle les textes officiels, lcriture la main des scribes, leffet grav dans la roche . Linterligne : 1.5 em (150% de la hauteur des caractres) est linterligne gnralement utilis sur le web. On peut aller jusqu 1.3 em pour les textes, mais en dessous on arrive sur un effet pat qui ne donne pas envie de lire ; en revanche pour les titres avec des grandes polices, cest tout fait possible. 1.25 em est linterligne que lon retrouve dans les livres.
  • 6. La Comic sans MS : cette police est trs souvent usite mais elle doit tre choisie avec prcaution, car elle est porteuse, comme pour les autres polices, dune histoire ; Vincent Connare, son auteur, travaillait dans la cration de typographies pour les enfants, et il sinspira directement des bandes dessines et de lcriture manuscrite. Bien que Comic sans MS fasse partie des outils ddition de texte, elle ntait prvue que pour les phylactres dans microsoft bob* (les bulles de dialogues) et les livres pour enfants. ** Attention, minute culture et effet mes rides ! Microsoft Bob est une interface cre en 1995 pour faciliter lutilisation de lordinateur.
  • 7. Ainsi est apparu COMIC sans MS : Vous reconnaissez le chien ?
  • 8. La Gotham : trs bien pour le web, cette police peut sappliquer sur beaucoup de contenu web, elle est neutre et srieuse, elle fait partie de la famille des mcanes, mais elle est sous licence. Calibri : est la police idale sur le web pour tous vos textes. Myriad pro : est la police web la plus usite sur le web Les icnes sont des repres visuels souvent utiliss et ils permettent au lecteur de dcrypter rapidement la nature du bouton/catgorie/paragraphe quils dsignent. Une base donne est propose par Fontello et IcoMoon dont lavantage est de disposer dicnes finement dtailles qui ne deviendront pas floues si vous zoomez sur la page web. Veillez ne pas en abuser pour ne pas allonger le temps de chargement de la page !
  • 9. La rglementation est complexe en France et il est ncessaire de bien se renseigner sur la licence qui couvre telle ou telle typographie. Par exemple, les polices de logos peuvent tre reprises mais seulement pour le second degr (dtourner) mais pas but commerciaux. Le mot de la fin La varit des typographies est telle quelle nous pousserait en utiliser plusieurs ; Nanmoins, il est sage de se limiter 2 typographies pour un mme site, afin de garder de la cohrence et suivre une certaine charte graphique. Le plus important sur un site reste le contenu et il doit tre lisible. Merci de votre attention. Formateur : Damien SENGER Rdactrice : LEVY Cline

Recommended

View more >