Pro Yearly is on sale from $80 to $50! »

Le web et ses sales caractères – KiwiParty

Le web et ses sales caractères – KiwiParty

Conférence donnée dans le cadre de la KiwiParty 2015, à Strasbourg, autour des problématiques d'intégration de typographie dans les projets HTML & CSS.

Cette présentation est mise à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.

6362477fcff413a76db8da108fade362?s=128

Damien Senger

June 19, 2015
Tweet

Transcript

  1. LE WEB ET SES SALES CARACTÈRES Damien Senger · @iamhiwelo

    · KiwiPa y 2015 Crédit photo : Marcus Lyra
  2. Damien Senger je suis web designer · intégrateur j’habite dans

    cette merveilleuse ville de Strasbourg je viens de rejoindre la tribu des kiwis d’ Alsacréations https://hiwelo.co/ · @iamhiwelo ça c’est moi :)
  3. il est midi, vous avez faim et je viens vous

    parler de typographie… pour éviter le manque d’attention et les désertions comme Kim Jong-Un, je n’hésiterais pas à châtier toute personne distraite par une attaque de missile anti aérien en pleine tête ! ! Attention · Warning · Achtung ! Crédit photo : dvidshub
  4. Je suis passionné · taré · obsédé · obnubilé par

    la typographie
 (rayez la ou les mentions inutiles) Crédit photo : Kevin Hackert
  5. C’est le nombre de polices de caractère sur Google Fonts.

    Eh oui !
 (au 18 juin 2015) 698 Crédit photo : Taryn
  6. Crédit photo : Bill Toenjes « Un grand pouvoir implique

    de 
 grandes responsabilités. » Rocket Raccoon Benjamin Parker
  7. Crédit photo : DeusXFlorida DANS TA @FONT-FACE !

  8. Crédit photo : Mark Iocchelli Dépoussiérons 
 la syntaxe bullet-proof

    
 Font Spring
  9. @font-face { font-family: ‘ma-super-typo’; src: url(‘myfont-regular.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-regular.woff’) format(‘woff’), url(‘myfont-regular.ttf’)

    format(‘truetype’), url(‘myfont-regular.svg#svgFontName’) format(‘svg’); } @font-face { font-family: ‘ma-super-typo-bold’; src: url(‘myfont-bold.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-bold.woff’) format(‘woff’), url(‘myfont-bold.ttf’) format(‘truetype’), url(‘myfont-bold.svg#svgFontName’) format(‘svg’); }
  10. @font-face { font-family: ‘ma-super-typo’; font-weight: 400; // 400 = regular,

    roman, book src: url(‘myfont-regular.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-regular.woff’) format(‘woff’), url(‘myfont-regular.ttf’) format(‘truetype’), url(‘myfont-regular.svg#svgFontName’) format(‘svg’); } @font-face { font-family: ‘ma-super-typo’; font-weight: 700; // 700 = bold src: url(‘myfont-bold.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-bold.woff’) format(‘woff’), url(‘myfont-bold.ttf’) format(‘truetype’), url(‘myfont-bold.svg#svgFontName’) format(‘svg’); }
  11. @font-face { font-family: ‘ma-super-typo’; font-style: normal; src: url(‘myfont-regular.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-regular.woff’)

    format(‘woff’), url(‘myfont-regular.ttf’) format(‘truetype’), url(‘myfont-regular.svg#svgFontName’) format(‘svg’); } @font-face { font-family: ‘ma-super-typo’; font-style: italic; // ou oblique selon les situations #troll src: url(‘myfont-italic.eot?#iefix’) format(‘embedded-opentype’), url(‘myfont-italic.woff’) format(‘woff’), url(‘myfont-italic.ttf’) format(‘truetype’), url(‘myfont-italic.svg#svgFontName’) format(‘svg’); }
  12. @font-face { font-family: ‘ma-super-typo’; font-style: normal; font-weight: 400; src: url(‘myfont-regular.eot?#iefix’)

    format(‘embedded-opentype’), url(‘myfont-regular.woff’) format(‘woff’), url(‘myfont-regular.otf’) format(‘opentype’), // be future-proof url(‘myfont-regular.ttf’) format(‘truetype’), url(‘myfont-regular.svg#svgFontName’) format(‘svg’); }
  13. Crédit photo : ukgardenphotos AVEC LOCAL() L’HERBE N’EST PAS TOUJOURS

    
 PLUS VERTE À CÔTÉ
  14. Exemple :
 Je souhaite utiliser Roboto & Georgia sur mobile

    Crédit photo : Lucas Zallio
  15. Je jette un œil sur le tableau de diffusion 


    des polices sur les OS mobiles :
 jordanm.co.uk/tinytype
  16. @font-face { font-family: ‘Roboto’; font-style: normal; font-weight: 400; src: local(‘Roboto’),

    local(‘Roboto-Regular’), // toujours essayer avec la graisse url(‘roboto-regular.eot?#iefix’) format(‘embedded-opentype’), url(‘roboto-regular.woff’) format(‘woff’), url(‘roboto-regular.otf’) format(‘opentype’), url(‘roboto-regular.ttf’) format(‘truetype’), url(‘roboto-regular.svg#roboto-regular’) format(‘svg’); } Avec Roboto : Local sur Android · Distant sur iOS & Windows Phone
  17. @font-face { font-family: ‘Georgia’; font-style: normal; font-weight: 400; src: local(‘Georgia’),

    local(‘Georgia-Regular’), // toujours essayer avec la graisse url(‘georgia-regular.eot?#iefix’) format(‘embedded-opentype’), url(‘georgia-regular.woff’) format(‘woff’), url(‘georgia-regular.otf’) format(‘opentype’), url(‘georgia-regular.ttf’) format(‘truetype’), url(‘georgia-regular.svg#georgia-regular’) format(‘svg’); } Avec Georgia : Distant sur Android · Local sur iOS & Windows Phone
  18. À noter, avec local() : les soucis de compatibilité c’est

    fini ! (soucis uniquement connu sous Android 2.2 – 3.0…) Crédit photo : Duncan Hull
  19. Crédit photo : Dan Perry UN IMPOSTEUR BIEN GRAS

  20. Une variante de graisse c’est bien, plusieurs c’est lourd… Crédit

    photo : Ted Abbott
  21. Vous pouvez réfléchir à l’utilisation
 d’un « faux gras »

    dans certains cas :
 texte de labeur, typographie linéale Crédit photo : Grant Hutchinson
  22. Crédit photo : Bob Jagendorf A MAN IN BUSINESS SUIT

    LEVITATING
  23. Un icon-font facilement accessible : ce n’est plus un rêve

    ! Crédit photo : OxOx
  24. Arrêtons d’utiliser à tort et à travers les espaces privés

    d’unicode (UTF-8) Crédit photo : Lok Leung
  25. Un emoji existe pour une grande partie
 de nos symboles

    Crédit photo : Theus Falcão
  26. 
 🏠 Crédit photo : Tony Hisgett

  27. " 
 🌍 Crédit photo : Royce Bair

  28. # 
 💻 Crédit photo : Quattro Vageena

  29. Partie intégrante d’unicode : ils sont compréhensibles 
 par les

    lecteurs d’écran. Crédit photo : John Pasden
  30. Voilà…
 Vous êtes prêt pour la deuxième étape : Opentype

    & font-feature ! Crédit photo : Marcus Lyra
  31. MERCI DE VOTRE ATTENTION ET BON APPÉTIT :) Et n’hésitez

    pas à poursuivre la discussion 
 sur twitter : @iamhiwelo